@media (max-width: 991px) {
    .project-sidebar {
        margin-top: 60px;
    }

    .res-mb-60 {
        margin-bottom: 60px;
    }

    /*.res-mb-30 {

          margin-bottom: 30px;

      }*/
    .blog-content-img img {
        width: 100%;

        height: 100%;
    }

    .blog-content img {
        width: 100%;
    }

    .sidebar {
        margin-top: 40px;
    }

    .menu-right {
        display: none;
    }

    #responsive-menu {
        display: block;
        z-index: 9;
    }

    .slicknav_menu {
        background: transparent;
    }

    .main-menu {
        position: relative;

        z-index: 9;
    }

    #responsive-menu {
        position: absolute;

        top: 0px;

        /*right: 0;*/
    }

    .slicknav_nav {
        background: #131536;

        width: 200px;

        padding: 5px 10px;
    }

    .blog-img22 {
        margin-bottom: 25px;
    }

    .slicknav_btn {
        margin: 5px 5px 31px;

        text-shadow: none;

        border-radius: 0;

        background-color: #131536;
    }

    .slicknav_nav a:hover,
    .slicknav_nav .slicknav_row:hover {
        background: transparent;

        color: #fff;
    }

    .top-right {
        float: none;

        text-align: center;

        margin-top: 10px;

        margin-bottom: 25px;
    }

    /*////tanzid css responsive///*/
    .modal-content {
        padding: 0px 40px;
        right: 0px;
        top: 342px;
        border-radius: 0px;
    }

    .registar-popup {
        color: #fff;
        background-color: #fff;
        border-color: #fff;
    }

    .blog-img {
        width: 100%;
        height: 100%;
        overflow: hidden;
        padding-right: 14px;
    }

    .blog-img {
        width: 100%;
        height: 100%;
        overflow: hidden;
        padding-right: 14px;
    }

    .blog-content p {
        margin-bottom: 20px;
        padding: 0px 10px 0px 0px;
    }

    .blog-date {
        background-color: #15374e;
        /*width: 10%;
            height: 10%;*/
        width: 15%;
        height: 20%;
        padding: 4px 4px;
        font-size: 16px;
        line-height: 20px;
        /*margin-top: -20px;*/
        margin-top: 0px;
        position: absolute;
        color: #fff;
        z-index: 1;
        text-align: center;
    }

    .row.joined-item {
        margin-bottom: 15px;
        text-align: center;
    }

    .student-description {
        border-bottom: 0px solid #b7b7b7;
    }

    .student-description1 {
        border-bottom: 1px solid #b7b7b7;
        margin: 0px 20px;
    }

    .footer-map {
        /* text-align: right; */
        /*width: 81%;*/
        padding: 0px 3px;
        margin: auto;
    }

    /*////gallery start////*/
    .gallery-title h3 {
        margin-top: 0;
        padding-bottom: 15px;
        border-bottom: 1px solid #eee;
        margin-bottom: 15px;
        position: relative;
        width: 100%;
        margin-left: 0px;
    }

    #gallery {
        width: 100%;
        margin: 30px 0px;
    }

    /*#gallery .item1 {
          width: 300px; height: 210px; overflow: hidden;
          float: none;
          border: 10px solid #FFF;
          margin: 10px;
          box-shadow: 0 8px 6px -6px black;
      }
      #gallery .item2 {
          width: 300px; height: 210px; overflow: hidden;
          float: none;
          border: 10px solid #FFF;
          margin: 10px;
          box-shadow: 0 8px 6px -6px black;
      }
      #gallery .item3 {
          width: 300px; height: 210px; overflow: hidden;
          float: none;
          border: 10px solid #FFF;
          margin: 10px;
          box-shadow: 0 8px 6px -6px black;
      }
      #gallery .item4 {
          width: 300px; height: 210px; overflow: hidden;
          float: none;
          border: 10px solid #FFF;
          margin: 10px;
          box-shadow: 0 8px 6px -6px black;
      }
      #gallery .item5 {
          width: 300px; height: 210px; overflow: hidden;
          float: none;
          border: 10px solid #FFF;
          margin: 10px;
          box-shadow: 0 8px 6px -6px black;
      }
      #gallery .item6 {
          width: 300px; height: 210px; overflow: hidden;
          float: none;
          border: 10px solid #FFF;
          margin: 10px;
          box-shadow: 0 8px 6px -6px black;
      }
      #gallery .item {
          width: 300px; height: 200px; overflow: hidden;
          float: none;
          border: 10px solid #FFF;
          margin: 10px;
          box-shadow: 0 8px 6px -6px black;
      }*/
    .footer-contact {
        text-align: center;
        /*width: 55%;*/
        margin: auto;
    }

    .footer-url {
        text-align: center;
        /*width: 89%;*/
        margin: auto;
    }

    .footer1 {
        /*width: 33%;*/
    }

    /*.row {*/
    /*	margin-right: 0px;*/
    /*}*/
    ul.slicknav_nav li i {
        display: block;
    }

    /*////tanzid css responsive///*/
    .features-right {
        margin-top: 35px;
    }

    .features-right a {
        margin-bottom: 12px;
    }

    .features-right img {
        width: 100%;
    }

    .team-bottom {
        padding-bottom: 45px;
    }

    .pad-buttom {
        margin-bottom: 30px;
    }

    .counter-botm {
        margin-top: 25px;
    }

    .count-p-0 .plr-0 {
        padding-right: 15px;

        padding-left: 15px;

        margin-bottom: 30px;
    }

    .counter-item {
        border-right: 4px solid #121e42;
    }

    .consultant-left {
        text-align: center;
    }

    .consultant-right {
        text-align: center;

        margin-top: 30px;
    }

    .blog-tab {
        text-align: left;

        float: none;

        margin-top: 50px;
    }

    .blog-title p {
        max-width: 500px;
    }

    .team,
    .blog.section-padding {
        padding-bottom: 100px;
    }

    .blog-item {
        margin-bottom: 30px;

        text-align: center;
    }

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

    .team-item {
        margin-bottom: 30px;
    }
}

@media (max-width: 1024px) {
    .eventsection {
        background-position: right top;
        background-size: 500px auto;
    }

    #gallery .item {
        float: left;
        width: 31%;
    }
}

@media (max-width: 991px) {
    .eventsection {
        background-position: right top;
        background-size: 360px auto;
    }

    .center-div {
        width: 11% !important;
    }

    /*#gallery .item {
          float: left;
          width: 47%;
      }*/
    ul.nav.nav-tabs.md-tabs.nav-justified.primary-color li {
        font-size: 12px;
    }

    a.nav-link.active.tab {
        font-size: 11px;
        font-weight: 600;
    }

    .blog-item {
        margin-bottom: 0px;
    }

    .event-button {
        text-align: center;
    }
}

@media (max-width: 767px) {
    .contact-right {
        margin-top: 40px;
    }

    .banner-content h2 {
        font-size: 52px;

        line-height: 70px;
    }

    .banner {
        /*background: url("img/banner.jpg");*/
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        height: 650px;
        position: relative;
        /*z-index: 1;*/
    }

    .banner:after {
        position: absolute;
        /*background: rgba(19, 21, 54, 0.9);*/
        background: #47c995;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        content: "";
        z-index: -1;
    }

    .banner-right {
        position: absolute;

        background-size: cover;
        background-repeat: no-repeat;
        background-position: center right;
        height: 100%;
        width: 50%;
        right: 0px;
        top: 0px;
    }

    .banner-right:after {
        position: absolute;
        background: rgba(19, 21, 54, 0.9);
        height: 100%;
        width: 50%;
        right: 0px;
        top: 0px;
        z-index: -1;
    }

    .banner-content {
        text-align: left;
        margin-left: 0px;
        padding-right: 30px;
    }

    .banner-content h3 {
        color: #fff;
        text-transform: uppercase;
        margin-bottom: 25px;
    }

    .banner-content h2 {
        color: #fff;
        font-size: 54px;
        line-height: 85px;
        margin-bottom: 40px;
    }

    .banner-content ul li {
        display: inline-block;
        margin-right: 30px;
    }

    .banner-content ul li:last-child {
        margin-right: 0px;
    }

    .banner-content ul li a {
        display: block;
        background: #039be6;
        border: 3px solid #039be6;
        text-transform: uppercase;
        font-weight: 600;
        color: #fff;
        padding: 10px 40px;
        border-radius: 25px;
        -webkit-transition: 0.4s;
        transition: 0.4s;
    }

    .banner-content ul li a:hover {
        background: #fff;
        color: #233d63;
        border: 3px solid #039be6;
    }

    .banner-content ul li:last-child a {
        background: #dddddd;
        color: #233d63;
        border: 3px solid #dddddd;
    }

    .banner-content ul li:last-child a:hover {
        background: #fff;
        border: 3px solid #dddddd;
    }

    .banner-content p {
        color: #fff;
        font-size: 14px;
        width: 100%;
        text-align: left;
        margin-bottom: 10px;
    }

    .banner-content ul li a {
        background: url("img/button.png");
        display: block;
        background: #039be6;
        border: 3px solid #039be6;
        text-transform: uppercase;
        font-weight: 600;
        color: #fff;
        padding: 10px 40px;
        margin-bottom: 40px;
        border-radius: 1px 3px;
        -webkit-transition: 0.4s;
        transition: 0.4s;
    }

    .banner-content p a {
        /*background: url("img/button.png");*/
        color: #233d63;
        position: absolute;
        text-align: center;
        padding: 7px 10px;
        width: 42%;
        font-size: 20px;
        margin-bottom: 60px;
        /*margin: 0px 50px;*/
    }

    .eventsection {
        padding: 0px;
        margin-left: 0px;
        margin-bottom: 40px;
    }

    .related-share {
        text-align: left;

        margin-top: 20px;
    }

    .top-left {
        float: none;

        text-align: center;
    }

    .top-left ul li {
        display: block;

        padding-right: 0px;

        padding-top: 7px;

        padding-bottom: 7px;
    }

    .rmb-30 {
        margin-bottom: 30px;
    }

    .modal-content {
        padding: 0px;
    }
}

@media (max-width: 575px) {
    .section-padding {
        padding: 80px 0px;
    }

    .contact-list.section-padding {
        padding-bottom: 65px;
    }

    .team,
    .blog.section-padding {
        padding-bottom: 50px;
    }

    .team-bottom {
        padding: 30px;
        padding-bottom: 45px;
    }

    .team-show {
        margin-top: -50px;
    }

    .banner-content h2 {
        font-size: 20px;

        line-height: 25px;
    }

    .banner-content h2 {
        margin-bottom: 10px !important;
    }

    .banner-content p {
        font-size: 10px;
        line-height: 14px;
    }

    .banner {
        height: 190px;
    }

    h2 {
        font-size: 40px;
        line-height: 50px;
    }

    .eventsection {
        padding: 0px;
        margin-bottom: 40px;
        background-image: url(https://ewuian.org/themes/east-west-alumni/assets/img/ewuian.png);
        background-size: 320px auto !important;
        background-position: top right;
        background-repeat: no-repeat;
    }

    .all-event-section {
        margin-top: 260px;
    }

    ul.nav.nav-tabs.md-tabs.nav-justified.primary-color li {
        font-size: 12px;
    }

    a.nav-link.active.tab {
        font-size: 11px;
        font-weight: 600;
    }

    .blog-date {
        height: 35%;
    }

    .blog-img {
        padding-right: 0px;
    }

    .blog-img.event-img img {
        height: auto;
    }

    .home-event {
        height: 50px;
    }

    .blog-item {
        margin-bottom: 0px;
    }

    .event-button {
        text-align: center;
    }

    .counter-title h2 {
        font-size: 30px;
        line-height: 45px;
    }

    .center-div {
        width: 15% !important;
    }

    /*#gallery {
          width: 100%;
          margin: 0px 10px;
      }
      #gallery .item {
          width: 93%;
          min-height: 200px;
          margin: 14px!important;
      }*/
    .footer-logo {
        text-align: center;
    }

    .footer-copyeight {
        text-align: center;
        margin-top: 20px;
    }

    .rtmb-30 {
        margin-bottom: 30px;
    }

    .banner-right {
        display: block;
    }

    .banner-content {
        padding-right: 0px;
    }

    .slider-btn a {
        font-size: 15px !important;
        left: 15% !important;
        padding: 2px 20px !important;
    }

    /*.footer1 {
          width: 25%;
      }
      .footer2 {
          width: 25%;
      }
      .footer3 {
          width: 50%;
          top: -18px;
      }*/
    .lightbox .box {
        min-width: 380px;
    }
}

@media (max-width: 524px) {
    .bloglist-meta li:last-child {
        margin-top: 15px;
    }

    .center-div {
        width: 26% !important;
    }

    .blog-con-meta li {
        margin-right: 15px;
    }

    .banner {
        height: 200px;
    }

    .banner-content {
        padding-right: 0px;
    }

    /*.footer1 {
          width: 50%;
      }
      .footer2 {
          width: 50%;
      }
      .footer3 {
          width: 100%;
      }*/
}

@media (max-width: 418px) {
    .comt-sub {
        margin-left: 30px;
    }

    .blog-con-meta li:last-child {
        margin-top: 15px;
    }

    .blog-pagination li {
        margin-right: 10px;
    }

    .banner-content ul li a {
        padding: 7px 24px;
    }

    .banner-content ul li {
        margin-right: 15px;
    }

    .blog-tab .nav-tabs .nav-item {
        margin-right: 15px;
    }

    /*#gallery .item {
          width: 100%;
          min-height: 200px;
          margin-left: 3px!important;
      }*/
}

/*@media (max-width: 350px) {
	#gallery .item {
		width: 100%;
		min-height: 200px;
		margin: 10px 3px!important;
	}
}*/

.grid-wrapper {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-auto-rows: 280px;
    grid-auto-flow: dense;
}

/* Responsive version 2*/

.margin-bottom-4per {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between !important;
    margin-right: 0% !important;
    margin-left: 0% !important;
}

.main-logo {
    padding: 0px 0px;
    margin-top: 10px !important;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    /* Tablets and smaller screens */
    .row.margin-bottom-4per {
        margin-right: -8%;
        margin-left: -4%;
    }

    .slicknav_btn {
        margin: 22px 5px 12px;
        text-shadow: none;
        border-radius: 0;
        background-color: #131536;
        padding: 12px 10px; /* Adjust padding for mobile */
        font-size: 16px; /* Slightly smaller font for mobile */
    }

    button.btn.btn-info.btn-lg.registar-popup {
        display: block;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        width: 50%;
        max-width: 100%;
        margin-top: 10px;
    }

    #responsive-menu {
        position: absolute;
        top: 0px;
        right: 0 !important;
    }

    .slicknav_menu .slicknav_menutxt {
        display: none !important;
    }

    .slicknav_menu .slicknav_icon {
        float: left;
        width: 1.125em;
        height: 0.875em;
        margin: 0 0 !important;
    }

    .eventsection {
        background-image: none;
    }

    .all-event-section {
        margin-top: 40px;
    }

    .section-padding {
        padding: 0px 0px;
        margin-top: auto;
    }

    .testimonial-content p {
        margin: 0px auto !important;
    }
}

@media (max-width: 768px) {
    /* Mobile devices */
    .row.margin-bottom-4per {
        margin-right: -5%;
        margin-left: -2%;
    }

    .all-event-section {
        margin-top: 40px;
    }

    .section-padding {
        padding: 0px 0px !important;
        margin-top: auto;
    }

    .features-right {
        margin-top: 0px !important;
    }
}

@media (max-width: 576px) {
    /* Small mobile devices */
    .row.margin-bottom-4per {
        flex-direction: column;
        margin-right: 0;
        margin-left: 0;
    }

    .all-event-section {
        margin-top: 40px;
    }

    .section-padding {
        padding: 0px 0px 20px !important;
        margin-top: auto;
    }

    .features-right {
        margin-top: 0px !important;
    }

    .my_account_menu .ul.profile-menu li a {
        padding: 10px 20px;
        border-bottom: 1px solid;
    }

    li.ui-sortable-handle i {
        position: absolute;
        top: 25px;
        left: 15px;
    }
    #search input[type="search"]{
        font-size:25px;
        width: 90%;
        left:5%;
    }
    ul.slicknav_nav li i{
        display: block;
    }
    .registar-popup img {
        max-width: 150px !important;
    }
}