@media (max-width: 1399.98px) {  }

@media (max-width: 1199.98px) {
    body{
        font-size: 16px;
    }

    h1{
        font-size: 44px;
    }

    .block{
        padding: 90px 0;
    }

    .sub-title{
        font-size: 32px;
    }

    /* Page Header */

    .page-header-wrap{
        height: 250px;
    }

    /* Header */
    .top-header p,
    .top-header-rtl > a,
    .top-contact-item .contact-info p,
    .top-contact-item .contact-info a,
    nav.navbar .nav-link{
        font-size:14px;
    }

    /* Banner */
    .banner-slider-content h1{
        font-size: 44px;
    }

    /* Location */
    .location-contact{
        padding: 30px;
    }

    .location-contact p{
        font-size: 14px;
    }

    .location-contact a{
        font-size: 16px;
        font-weight: 600;
    }

    .location-contact a:hover{
        color: var(--secondary-color);
    }

    /* What We Do */

    .our-service-section{
        padding-bottom: 60px;
    }

    .service-item{
        padding-right: 0;
    }

    .service-item h5 a{
        font-size: 18px;
    }

/* Logos Area */

.logos-area h4{
    font-size: 18px;
}

.logos-area img{
    max-width:130px;
}

/* CSC Office */

.csc-office .section-head h2{
    font-size: 80px;
}

.csc-offc-contact-wrap ul li a{
    font-size: 20px;
}

/* About Page */

.date-line .content-wrap .content{
    padding: 20px;
    width: 250px;
}

.date-line .content-wrap h5{
    font-size: 16px;
}

.date-line .content-wrap .content p{
    line-height: 1.4;
}

.image-bg{
    height: 85%;
}

}

@media (max-width: 991.98px) {

    body{
        line-height: 1.55;
    }
    .sub-title{
        font-size: 30px;
    }

    nav.navbar{
        position: relative;
        height: 50px;
    }

    .nav-btn{
        position: absolute;
        top: 0;
        right: 0;
    }

    .navbar-toggler{
        border:none;
    }

    .navbar-toggler:focus{
        box-shadow: none;
    }

    .navbar-toggler-icon{
        display: flex;
        align-items: center;
        background: none;
    }

    .navbar-toggler-icon .bar{
        position: relative;
        display: block;
        width: 30px;
        height: 2px;
        background-color: var(--secondary-color);
        border-radius: 4px;
    }

    .navbar-toggler-icon .bar:before,
    .navbar-toggler-icon .bar:after{
        content: "";
        position: absolute;
        left: 0;
        width: 35px;
        height: 2px;
        background-color: #fff;
        border-radius: 4px;
    }

    .navbar-toggler-icon .bar:before{
        top: -12px;
    }

    .navbar-toggler-icon .bar:after{
        bottom: -12px;
    }

    .navbar-collapse .navbar-toggler-icon{
        margin-top: 20px;
    }

    .navbar-collapse .navbar-toggler-icon .bar{
        background-color: transparent;
    }

    .navbar-collapse .navbar-toggler-icon .bar:before,
    .navbar-collapse .navbar-toggler-icon .bar:after{
        width: 25px;
    }

    .navbar-collapse .navbar-toggler-icon .bar:before{
        transform: rotate(45deg);
        top: 0;
    }

    .navbar-collapse .navbar-toggler-icon .bar:after{
        transform: rotate(-45deg);
        bottom: 0;
    }

    .navbar-collapse{
        position: fixed;
        top: 0;
        right: -300px;
        width: 300px;
        height: 100vh;
        background-color: var(--primary-color);
        z-index: 99999;
        transition: ease all 0.3s;
    }

    .dropdown-menu{
        border-radius: 0;
    }

    .navbar-nav{
        margin-top: 40px;
    }

    .navbar-collapse.show{
        right: 0;
    }

    nav.navbar .nav-link{
        color: #fff;
        font-size: 18px;
        padding-left:25px;
        padding-right:25px;
        margin-right: 0;
    }

    nav.navbar .nav-link:hover,
    nav.navbar .nav-link.active{
        background-color: var(--secondary-color);
    }

    nav.navbar .nav-link:hover:before{
        width: 0;
        height: 0;
background-color: transparent;
    }


/* Sticky Social Icon */
.sticky-si{
    display: block;
}

.sticky-si ul{
    position: fixed;
    top: 50%;
    right: 0;
    height: auto;
    transform: translateY(-50%);
    z-index: 999;
    
}

.sticky-si ul li{
    display: block;
    
}

.sticky-si ul li a{
    display: block;
    width: 30px;
    height: 30px;
    color: var(--secondary-color);
    background-color: #fff;
    text-align: center;
    line-height: 30px;
    box-shadow: 0 -3px 20px rgba(01, 0, 0, 0.1);
}

.sticky-si ul li:first-child a{
    border-top-left-radius: 4px;
}

.sticky-si ul li:last-child a{
    border-bottom-left-radius: 4px;
}

.sticky-si ul li a:hover{
    color: #fff;
    background-color: var(--secondary-color);
}

    /* Locationn Contact */

    .location-contact .row div:first-child,
    .location-contact .row div:nth-child(2),
    .location-contact .row div:nth-child(3){
        margin-bottom: 15px;
    }

    /* About */

    .about-img .arrow{
        top:-50px;
        right:0;
        width: 120px;
    }

    .about-feature svg{
        float: left;
    }

    .about-feature span{
        font-size: 14px;
        display: block;
        overflow: hidden;
        line-height: 1.3;
    }

    /* What We Do */

    .service-item .icon{
        margin-right: 10px;
    }

    .service-item .icon img{
        width: 35px;
    }

     /* University Logo */

     .logos-area .row .col{
        width: 25%;
     }

     .logos-area .row .col:first-child{
        width: 100%;
        margin-bottom: 30px;
    }

    .feature-img .arrow {
        top: -60px;
        left: -15px;
        max-width: 150px;
    }

    .video-slider-item h3{
        font-size: 24px;
    }

       /* Work Flow */

       .flow{
        margin-left: 25px;
     }

     .flow:before {
        left: -20px;
        width: 20px;
        height: 45px;
    }

       .flow .num {
        width: 40px;
        height: 40px;
        line-height: 40px;
    }

     .flow h5{
        font-size: 12px;
     }

     .map-wave {
        width: 75px;
        height: 75px;
     }

    /* About Page */

    .fea-flag {
        left: -20px;
        bottom: 0%;
        width: 150px;
        height: 150px;
    }

    .misson-fea-item h5{
        font-size: 16px;
    }

    .misson-fea-item .icon img{
        width: 45px;
    }

    .date-line .time-line-item .date{
        font-size: 12px;
    }

    .date-line .content-wrap{
        left: 11px;
    }

    .date-line .content-wrap .content {
        padding: 10px;
        width: 180px;
        height: 130px;
    }

    .date-line .content-wrap .content p{
        font-size: 14px;
    }

    /* Event Page */

    .att-img{
        width: 150px;
        height: 150px;
    }

    /* University */
    .university-feature-item-inner{
        padding: 20px;
    }

    .entry-title,
    .blog-detail h2,
    .service-detail h2{
        font-size: 32px;
    }
}

@media (max-width: 767.98px) {

    h1{
        font-size: 32px;
    }

    h5{
        font-size: 18px;
    }

    .block{
        padding:50px  0;
    }

    .sub-title{
        font-size: 26px;
    }

    /* BUtton */
    .btn{
        font-size: 14px;
        padding:8px 20px;
    }

    /* Top Header */
    .top-contact-item:first-child{
        margin-right: 20px;
    }

    .top-contact-item .icon svg{
        font-size: 16px;
    }

    /* Banner */

    .banner-slider-content h1{
        font-size: 32px;
    }

    /* About */
    .about-img{
        padding-left:80px;
    }

    .about-img .red-circle {
        left: 20px;
        width: 220px;
    }

    /* Location */
    .location-contact:before{
        opacity: 0.4;
    }

    /* About */
    .about-img{
        margin-bottom: 40px;
    }

    .intro-video-link{
        font-size: 14px;
    }

    /* Enroll */

    .enroll-lft{
        margin-bottom: 50px;
    }

    .white-curve {
        top: inherit;
        right: 0;
        transform: rotate(90deg);
        bottom: 0;
    }

    .counter-box{
        margin-bottom: 40px;
    }

    .counter-section .row .col-6:last-child .counter-box{
        margin-bottom: 0;
    }
    .counter-section .row .col-6:nth-child(3) .counter-box{
        margin-bottom: 0;
    }

    /* Feature */

    .feature-section{
        padding-top:130px !important;
    }

    .nav.nav-tabs {
    gap: 15px;
    }

    .nav-tabs .nav-link{
        font-size: 12px;
        font-weight: 500;
        height: 120px;
    }

    .nav-tabs .nav-link:after{
        bottom: -19px;
    }

    .nav-tabs .nav-link img{
        width: 30px;
    }

    .tab-pane h3{
        font-size: 22px;
    }

    .fea-flag{
        left: -15px;
    }

    .feature-img{
        margin-top: 50px;
    }

    .feature-img .arrow{
        left: inherit;
        right: 0;
    }

    .logos-area .row .col{
        width: 50%;
        margin-bottom: 30px;
     }

     


/* Work FLow */

.work-flow-section .attend-img{
    margin-top: 0;
    margin-bottom: 50px;
}

.flow:before {
    left: -25px;
    width: 20px;
    height: 60px;
}

.flow .num {
    width: 50px;
    height: 50px;
    line-height: 50px;
}

.flow h5{
    font-size: 16px;
}

    /* Office */

    .csc-office .section-head h2{
        font-size: 60px;
    }

    .csc-office .section-head h3{
        font-size: 32px;
    }

    .csc-offc-contact-wrap{
        margin-bottom: 50px;
    }

    .map-wave {
        width: 80px;
        height: 80px;
    }

    /* Video Testimonials */
    .video-slider .slick-arrow{
        top: 20px;
        bottom: inherit;
        width: 40px;
        height: 40px;
        
    }

    .video-slider .slick-next{
        left: inherit;
        right: 0;
    }
    .video-slider .slick-prev{
        left: inherit;
        right: 50px;
    }

    .slick-prev:before, .slick-next:before{
        font-size: 16px;
    }

    .testimonial-slider-item{
        padding: 20px;
    }

    .client-area .client-img img{
        width: 60px;
        height: 60px;
    }

    .client-area .client-info h3{
        font-size: 18px;
    }

    .client-area .client-info p {
    font-size: 16px;
    }

    /* FAQ */
    
    .faq-section.block{
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Footer */

    .top-footer {
    font-size: 14px;
    padding-bottom: 0;
    }

    .footer-item{
        margin-bottom: 40px;
    }

    .copyright{
        font-size: 14px;
    }

    /* About Page */

    .story-timeline-wrap{
        height: 100%;
    }

    .date-line{
        display: block;
    }

    .date-line .time-line-item{
        margin-bottom: 30px;
    }

    .date-line .time-line-item:before,
    .date-line .time-line-item.has-content:before {
        left: 40px;
        bottom: 8px;
        margin:0;
        height: 1px;
        width: 40px;
    }

    .date-line .time-line-item.has-content:before{
        background-color: var(--primary-color);
        height: 2px;
    }

    .date-line .content-wrap{
        top: 9px;
        bottom: inherit;
        left: 95px;
    }

    .date-line .content-wrap .content:before{
        top:0;
        bottom: inherit;
        left:-19px;
        border-width:20px 0 0 20px;
    }

    .date-line .content-wrap .content {
        width: 100%;
        max-width: 340px;
    }

    /* Event Page */
    .attend-img{
        margin-top: 50px;
    }

    .att-img{
        left: -5%;
    }

    /* Course Detail */

    .tags .tags-item{
        padding:8px;
    }

    .blog-pagination{
        padding:25px 0;
    }

    .blog-pagination-item.prev .blog-pagination-img{
        margin-right: 5px;
    }

    .blog-pagination-item.next .blog-pagination-img{
        margin-left:5px;
    }

    .blog-pagination-item h4 a{
        font-size: 14px;
    }

    .sidebar .sidebar-inner{
        padding: 20px;
    }

    .university-map{
        margin-bottom: 50px;
    }

    .entry-title,
    .blog-detail h2,
    .service-detail h2 {
        font-size: 26px;
    }
}

@media (max-width: 575.98px) {
    h5{
        font-size: 16px;
    }

    .sub-title{
        font-size: 22px;
    }

   .card-body{
    padding:25px 20px;
   }

    .btn{
        padding-left:15px;
        padding-right:15px;
    }

    /* Page Header */

    .page-header-wrap{
        height: 180px;
    }

    .scrolling{
        position: relative;
        white-space: nowrap;
  -webkit-animation: scroll 20s infinite linear;
    -moz-animation: scroll 20s infinite linear;
    -o-animation: scroll 20s infinite linear;
  animation: scroll 20s infinite linear;
  overflow: hidden;
    }

    @keyframes scroll{
        0%   {left: 500px;}
        100% {left: -950px;}
    }
    @-webkit-keyframes scroll{
        0%   {left: 500px;}
        100% {left: -950px;}
    }

    .logos-area img{
        max-width: 100px;
    }

    .nav-tabs .nav-link{
        height: 100px;
    }

    .enroll-form {
        padding: 30px 20px;
    }

    .counter-box{
        padding:0 10px;
    }

    .fea-flag{
        width: 130px;
        height: 130px;
        left: 0;
        bottom: 0;
    }

    .flow{
        margin-left: 10px;
    }

    .flow:before {
        top: 25px;
        left: -20px;
        height: 50px;
    }
    
    .flow .num {
        width: 30px;
        height: 30px;
        line-height: 30px;
        margin-right: 5px;
    }
    
    .flow h5{
        font-size: 12px;
    }

    .csc-offc-contact-wrap ul li p{
        font-size: 14px;
    }

    .csc-offc-contact-wrap ul li a{
        font-size: 16px;
    }

    .map-wave {
        width: 60px;
        height: 60px;
    }

    /* About Page */

    .member-detail h3{
        font-size: 16px;
        margin-bottom: 8px;
    }

    .member-detail p{
        font-size: 14px;
        line-height: 1.25;
    }
    
    /* Event Page */
    .event-card img{
        margin: 0;
        aspect-ratio: 4/3;
    }

    /* Event Page */    
    .attend-img {
        padding-left: 50px;
    }

    .att-img{
        left: 0;
        width: 100px;
        height: 100px;
        border-width: 5px;
    }

    .tags .tags-item{
        white-space: nowrap;
    }

    .recent-post-rtl h3{
        font-size: 16px;
    }
} 

@media (max-width: 419.98px){
    .nav.nav-tabs{
        gap: 5px;
        margin-bottom: 30px;
    }

    .nav-tabs .nav-link img{
        width: 25px;
    }

    .nav-tabs .nav-link{
        height: 85px;
        font-size: 9px;
    }

    .nav-tabs .nav-link:after{
        bottom: -10px;
        border-width: 10px 10px 0 10px;
    }

    .about-img{
        margin-bottom: 70px;
    }

    .about-img .red-circle {
        left: 20px;
        width: 100px;
    }

    .exp-board{
bottom: -40px;
padding:15px
    }

    .play-btn{
        width: 35px;
        height: 35px;
        line-height: 36px;
    }

    .intro-video-link {
        font-size: 12px;
    }

    .counter-box span{
        font-size: 20px;
    }

    .quote-area{
        padding:25px;
    }
}


@media (min-width: 992px){
    .navbar-nav .dropdown-menu{
        display: block;
        opacity: 0;
        visibility: hidden;
        transition: ease all 0.2s;
    }
    
    .navbar-nav .dropdown-menu.show{
        opacity: 1;
        visibility: visible;
        transform: translateY(-5px);
        transition: ease all 0.2s;
    }
}