@media only screen and (max-width: 1440px) {
    
}

@media only screen and (min-width: 1200px) {
}

@media only screen and (max-width: 1199px) {
    .container {
        max-width: 100%;
    }
    .homepage-text h2 {
        font-size: 3.5vw;
    }
    .homepage-text .filter-card {
        margin-top: 3rem;
    }
}

@media only screen and (max-width: 1099px) {
    .home-sec:nth-child(even) .col-sm-5 {
        padding-left: 40px;
    }
    .home-sec:nth-child(odd) .col-sm-5 {
        padding-right: 40px;
    }
}

@media only screen and (min-width: 820px) and (max-width: 1199px) {

    
}

@media only screen and (max-width: 991px) {
    .navbar{padding: 0px;}
    .brand-div {
        display: block;
        width: 100%;
        padding: 10px 35px;
        box-shadow: 0px 12px 20px #73a2d012;
        background: #fff;
        position: relative;
        z-index: 99;
    }
    .hamburger-menu {
        position: absolute;
        top: 1.4rem;
        right: 2rem;
        z-index: 10;
        cursor: pointer;
        padding: 0;
        border: 0;
        outline: 0 !important;
    } 
    .menu-bar1,
    .menu-bar2,
    .menu-bar3 {
        height: 3px;
        background-color: #195282;
        transition: 0.5s;
        display: block;
        border-radius: 7px;
        margin: 5px 0;
        margin-left: auto;
    }
    .menu-bar1 {
        width: 28px;
    }
    .menu-bar2 {
        width: 34px;
    }
    .menu-bar3 {
        width: 22px;
    }
    .active .menu-bar1 {
        transform: rotate(-45deg) translate(-4px, 3px);
        width: 34px;
    }
    .active .menu-bar2 {
        opacity: 0;
    }
    .active .menu-bar3 {
        transform: rotate(45deg) translate(-8px, -8px);
        width: 34px;
    }
    .navbar-collapse {
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        margin: auto;
        width: 100%;
        height: 100%;
        background: #fff;
        z-index: 9;
        padding: 15px 30px 0;
        opacity: 0;
        visibility: hidden;
        transition: all ease-in-out .3s;
        display: block;
    }
    .navbar-collapse.show {
        opacity: 1;
        visibility: visible;
    }
    .nav-item .nav-link {
        color: #0068AC !important;
        opacity: 1;
        font-size: 20px;
        line-height: 28px;
        padding: 15px 5px;
        border-bottom: 1px solid #eee;
    }
    .login-register {
        text-align: center;
        padding: 35px 0;
    }
    .homepage-banner p {
        font-size: 14px;
        padding: 10px 0;
    }
    .homepage-banner p br {
        display: none;
    }
    .container {
        max-width: 95% !important;
    }
    .tab-filter p {
        background: #A8A8AA1A 0% 0% no-repeat padding-box;
        border: 1px solid #CED4DA;
        border-radius: 4px;
        color: #2D2926 !important;
        font-size: 16px;
        line-height: 22px;
        margin: 0.5rem 0 !important;
        width: 134px;
        padding: 10px 15px !important;
        margin-right: 15px !important;
    }
    .filter-card {
        padding: 5px 15px;
    }
    .filter-search .form-inline .form-control {
        width: calc(100% - 51px);
        height: 43px;
    }
    .filter-search .btn {
        padding: 9px 13px;
        height: 43px;
        width: 43px;
    }
    .homepage-text .filter-card {
        margin-top: 3vw;
    }
    .homepage-banner img {
        width: 100%;
        height: 465px;
        object-fit: cover;
    }
    .counter-text h3 {
        font-size: 60px;
    }
    .counter-text p {
        font-size: 18px;
    }
    .justice-server-work h2, .we-believe h2, .getting-started-counter h2, section h2, .get-ready h2,
    .get-in-touch h2, .all-case-title h1 {
        font-size: 28px;
        line-height: 35px;
    }
    .all-case-title h1 {
        margin-top: 30px;
    }
    .all-case-title h1 br {
        display: none;
    }
    .justice-server-work .title h3 {
        font-size: 18px;
        line-height: 23px;
    }
    .home-sec:nth-child(even) .col-sm-5 {
        padding-left: 15px;
    }
    .home-sec:nth-child(odd) .col-sm-5 {
        padding-right: 15px;
    }
    .home-sec p, .get-in-touch p {
        font-size: 18px;
        line-height: 25px;
    }
    .our-sponsors h6 {
        font-size: 20px;
        line-height: 28px;
    }
    .owl-carousel .owl-item .work-item img {
        width: 165px;
    }
    .work-item:after {
        width: 75%;
        height: 79%;
    }
    .flex-row .line2 {
        width: 142%;
    }
    .flex-row .line1 {
        margin-left: -14px;
        width: 122%;
    }
    .flex-row .col.line {
        width: 90px !important;
        max-width: 90px !important;
    }
    .tab-filter p b.blue {
        color: #0068AC;
    }
    header.after-login .brand-div {
        background: #0068AC;
    }
    .after-login .menu-bar1, .after-login .menu-bar2, .after-login .menu-bar3 {
        background: #fff;
    }
    .after-login .nav-item .nav-link, .after-login .nav-item.active .nav-link {
        color: #0068AC !important;
    }
}

@media only screen and (max-width: 899px) {
}


@media only screen and (min-width: 768px) and (max-width: 1199px) {
    
    .all-case-title h1 {font-size: 30px;}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .pending-upcoing-card .start-end-view{width: 100px; margin-left: auto;}
    .add-email-card{height: auto;}
    #AddEmail .modal-footer{
        position: fixed;
        bottom: 0;
        width: 100%;
        background-color: #fff;
        box-shadow: 0px -6px 6px #00000029;   
    }
    #AddEmail .modal-dialog{max-width: 100%; margin: 0;}
    #AddEmail .modal-body{padding-bottom: 80px;}
    #AddEmail .modal-footer .email-not-name{display: none;}
    .respon-email-btn .close-email-btn{display: none;}
    .respon-email-btn .cancel-email-btn{display: inline-block;}
    .respon-email-btn{display: flex; justify-content: space-between; align-items: center; width: 100%;}
    #AddEmail .modal-title {
        text-align: center;
        width: 100%;
        font-size: 20px;
    }
    .email-n-list .resposive-email-p, .resposive-email-p{display: none;}
    .mydashboard-section h1, .mydashboard-section h1 {font: normal normal bold 44px/57px Source Serif Pro;}
    #CaseSummery .modal-dialog.login-popup{max-width: 90%;}
    .time-let-decide{width: 100%;}
    #SeeMoreModel .modal-dialog.login-popup, .dashboard-pop{width: 90%; max-width: 90%;}
    .register-tab{white-space: nowrap; overflow: auto; flex-wrap: inherit;}
    .register-tab .nav-item{margin-right: 15px;}
    .express-intrest-card{margin-top: 25px;}
    .profile-banner-text{top: 13%}
    .tab-side-responsive{display: none;}
    .volunteer-card-img{width: 100%;}
    .profile-banner-text, .profile-tabs-sec {
        max-width: 720px;
    }
    .volunteer-card p {
        height: 105px
    }
    .profile-banner-text, .profile-tabs-sec {
        max-width: 960px;
    }
    .get-in-touch p{width: 100%;}
    footer p span{display: none;}
    .find-volunteer .img-repos{ height: 350px; object-fit: cover;}
    .get-in-touch h2{font: normal normal bold 28px/35px Source Serif Pro;}
    .counter-text h3 {font: normal normal 600 60px/85px Source Sans Pro;}
    .counter-text p{font: normal normal 600 18px/23px Source Sans Pro;}
    .getting-started-counter p{width: 100%;}
    .getting-started-counter h2{font: normal normal bold 26px/35px Source Serif Pro;}
    
}

@media (min-width: 800px) and (max-width: 850px) {
    .volunteer-card p {height: 105px;}  
    .pending-upcoing-card .start-end-view{width: 100px;}
    .add-email-card{height: auto;}
    #AddEmail .modal-dialog{width: 100%;}
    #AddEmail .modal-footer{
        position: fixed;
        bottom: 0;
        width: 100%;
        left: 0;
        background-color: #fff;
    }
    #AddEmail .modal-footer .respon-email-btn .close-email-btn{display: block;}
    #AddEmail .modal-footer .email-not-name{display: none;}
    #AddEmail .modal-title {
        text-align: center;
        width: 100%;
        font-size: 20px;
    }
    .email-n-list .resposive-email-p, .resposive-email-p{display: none;}
    .mydashboard-section h1 {font: normal normal bold 44px/57px Source Serif Pro;}
    #CaseSummery .modal-dialog.login-popup{max-width: 90%;}
    .time-let-decide{width: 100%;}
}

@media only screen and (max-width: 767px) {
    .profile-banner-text, .profile-tabs-sec {
        max-width: 540px;
    }
    .container {
        max-width: 100%;
    }
    .volunteer-card {
        padding: 15px;
    }
    .book-nevig {
        top: 10px;
        right: 10px;
    }
    .ca-ti-lo img {
        width: 15px;
        padding-right: 2px;
    }
    .ca-ti-lo {
        padding-right: 5px;
    }
    .civil-immi-count {
        padding: 5px 5px;
    }
    .getting-started-counter p br, .we-offer p br, .we-believe h2 + p br, .getting-started-counter p br, .get-in-touch p br {
        display: none;
    }
    .row.mini-header .col {
        width: 90px;
        max-width: 90px;
    }
}

@media only screen and (max-width: 575px) {
    .navbar-collapse {
        background: #F9FBFD;
    }
    .volunteer-card-part {
        position: relative;
        margin-top: 0;
    }
    .homepage-text h2 {
        font-size: 24px;
    }
    /* .tab-filter {
        display: none !important;
    } */
    .tab-filter p {
        width: calc(100% - 15px);
    }
    .filter-search {
        width: auto;
    }
    .tab-filter {
        width: 100%;
    }
    .filter-search .form-inline .form-control {
        margin-right: 8px;
    }
    .bg-white.we-believe {
        text-align: center;
    }
    .counter-text h3 {
        font-size: 30px;
    }
    .counter-text h3 {
        font-size: 30px;
        margin-top: 15px;
        margin-bottom: 0px;
    }
    .volunteer-card h3 {
        font-size: 20px;
    }
    .justice-server-work h2 {
        font-size: 24px;
        line-height: 30px;
    }
    .justice-server-work p {
        font-size: 16px;
        line-height: 22px;
    }
    .justice-server-work .title h3 {
        font-size: 14px;
        line-height: 18px;
    }
    .justice-server-work .justice-server-text p {
        width: 80%;
        font-size: 14px;
        line-height: 20px;
        text-align: justify;
    }
    .justice-server-work h2, .we-believe h2, .getting-started-counter h2, section h2, .get-ready h2, .get-in-touch h2, .all-case-title h1 {
        font-size: 24px;
        line-height: 28px;
    }
    .we-believe h2 + p, .getting-started-counter p, .we-offer p, .home-sec p, .get-in-touch p, .get-ready p, .our-sponsors h6 {
        font-size: 16px;
        line-height: 22px;
    }
    .home-sec:nth-child(even) .row {
        flex-direction: column-reverse;
    }
    .home-sec:nth-child(even) .col-sm-5 {
        flex-direction: column-reverse;
        padding-bottom: 15px;
    }
    footer a {
        display: none;
    }
    .row.mini-header .col a {
        display: none;
    }
    .row.mini-header .col {
        width: 60px;
        max-width: 60px;
    }
    #sharecase .modal-dialog {
        margin: 0;
        min-height: 100%;
        height: 100%;
        width: 100%;
        border: 0;
    }
    #sharecase .modal-content {
        border: 0;
        border-radius: 0;
        min-height: 100%;
    }
    .copy-link input {
        width: calc(100% - 135px);
    }
    .copy-link button {
        width: 135px;
    }
    #sharecase .model-footer .d-flex {
        justify-content: space-between !important;
    }
    #sharecase .modal-header {
        text-align: center;
        position: relative;
        justify-content: center;
        padding-bottom: 20px;
        border: 0;
        box-shadow: 0px 12px 20px #73a2d012;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 25px;
    }
    #sharecase .modal-header .close {
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        padding: 0;
        left: 0;
        margin-top: -5px;
        opacity: 1;
    }
    #sharecase .modal-header .close span {
        display: none;
    }
    #sharecase .modal-header .close:after {
        content: '';
        background: url(../images/left-arrow.png);
        background-size: contain;
        width: 24px;
        height: 24px;
        position: absolute;
        left: 15px;
        top: 0;
        bottom: 0;
        margin: auto;
    }
    .login-popup .modal-content.mx-5 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .navbar-collapse{padding: 15px;}
    .modal-dialog-centered{align-items: flex-start; margin-top: 100px;}
    #AddEmail .modal-dialog-centered{align-items: flex-start; margin: 0;}
    #CaseSummery .modal-dialog.login-popup{max-width: 100%; align-items: flex-start; margin-top: 10px;}
    #AddEmail .modal-dialog{max-width: 100%;}
    .all-case-title{padding: 0;}
    .all-case-title h1{text-align: left;}
    .register-tab{flex-wrap: nowrap;}
    .mobile-menu .nav-item .nav-link{width: 100%; padding: 10px;}
    .nav-item .nav-link{width: 210px; padding: 10px;}
    .register-tab .nav-link.active{padding: 10px;}
    .register-tab .nav-item{margin-right: 10px;}
    .brand-div{padding: 10px;}
    .mini-header{padding: 15px 0;}
    .all-case-title .row .col-md-6, .all-case-title .row .col-lg-4{padding: 0;}
    .after-login .nav-item.dropdown a{color: #0068AC!important; font-size: 20px!important;}
    .after-login .nav-item.active .nav-link{border-bottom: 0;}
    .after-login .nav-item.dropdown.login-bar{margin: 0;}
    .resposive-email-p{display: none;}
    .email-n-list p{font-size: 13px;}
    .email-not-name{display: none;}
    .add-email-card{margin-bottom: 30px;}
    .AddEmail .modal-footer a {color: #0068AC; background: #fff;border: 1px solid #333; padding: 9px 25px;margin-right: 5px;}
    .caseStudy_Popup {width: 100%;flex-wrap: wrap; justify-content: left;}
    .dashboard-card-text h4{font-size: 16px;}
    .dashboard-invite{flex-wrap: wrap;}
    .time-let-dashboard-a{padding: 10px;}
    .mydashboard-section{margin: 0; margin-top: 15px;}
    .mydashboard-section h1 {font: normal normal bold 24px/25px Source Serif Pro;}
    .hour-worked p {font-size: 15px;}
    .dashboard-pop{width: 100%; margin: 0;}
    .time-let-dashboard{text-align: left;}
    .time-let-dashboard h4{justify-content: flex-end;}
    .mydashboard-section .hour-worked h3{font-size: 24px;}
    .mydashboard-section .hour-worked span{font-size: 14px;}
    .this-dashbpard{font-size: 16px; color: #231F20 !important;}
    .edit-client-detail{height: 100%;}
    .pending-upcoing-card .start-end-view{padding: 5px 15px; display: inline-block;}
    .contact-search .form-inline input{min-width: 320px !important; margin-right: 5px;}
    .contact-search .form-inline{flex-wrap: initial;}
    .help-div .col-md-6.col-xl-4{padding-right: 15px; padding-left: 15px;}
}