@media (min-width: 575px){
    .modal-xs {
        max-width: 450px!important;
    }
    .modal-dialog {
        max-width: 500px;
        margin: 1.75rem auto;
    }
}
@media (min-width: 650px){
    .modal-dialog {
        max-width: 600px;
    }
}
@media (min-width: 992px){
   .modal-lg, .modal-xl {
        max-width: 800px;
    }
}
@media (min-width: 1200px){
    .modal-dialog.modal-xl {
        max-width: 1140px;
    }
}
@media (min-width: 1400px){
    .backpackers-image {
        width: 70%;
    }
}
@media (min-width: 1600px){
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1500px;
    }
    .backpackers-image {
        width: 60%;
    }
}
@media (min-width: 1800px){
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1680px;
    }
    .backpackers-image {
        width: 50%;
    }
}

@media( max-width : 1199px ){
    .navbar-light .navbar-nav .nav-item {
        margin-left: 5px;
    }
    .navbar-light .navbar-nav .nav-link{
        font-size: 15px;
    }
    .dropdown-item{
        font-size: 15px;
    }
    .backpackers-image {
        height: auto;
    }
    .search-form-container .form-control, .search-form-container .form-select{
        width: 94%;
    }
    .footer-menu-title {
        margin-bottom: 30px;
    }
    .newsletter-content{
        margin-top: 40px;
    }
    .newsletter-form .form-control {
        width: 85%;
    }
    .db-search-item .search-input-item{
        min-width: 200px;
    }
    .db-profile-img .profile-card {
       top: 15px;
        border: 1px solid #000;
        width: 75px;
        height: 75px;
        right: -30px;
    }
}
@media( max-width : 1196px ){
    .search-form-container .form-control, .search-form-container .form-select{
        width: 94%;
    }
    .search-form-container{
        padding: 25px 25px;
    }
    .backpackers-header {
        background-color: #29b2fe;
        padding: 40px 0;
    }
}
@media( max-width : 1760px ){
    .video-container video{
        min-width: 130%;
        width: 130%;
    }
}
@media( max-width : 991px ){
    .edit-profile-section .nav-pills .nav-link{
        font-size: 14px;
    }
    .dashboard-item-group{
        display: flex;
    }
    .db-profile-img .profile-card{
        position: relative;
        margin: 0 auto;
        right: 0;
    }
    .dashboard-item-group, .db-search-item {
        margin: 12px 0;
    }
}
@media( max-width : 991px ){
    .navbar-brand{
        padding: 19px 0;
    }
    .header-section::before{
        height: 72px;
    }
    .search-form-container{
        margin: 35px 0px 0 0px;
    }
    .search-form-container .btn-warning{
        font-size: 14px;
    }
    .backpackers-details h2 {
        font-size: 20px;
        margin-bottom: 10px;
    }
    .backpackers-details p {
        font-size: 12px;
    }
    .backpackers-details ul li {
        margin-bottom: 10px;
        font-size: 13px;
    }
    .backpackers-btn a {
        font-size: 14px;
    }
    .footer-des{
        margin-bottom: 40px;
    }
    .navbar-light .navbar-toggler{
        padding: 0;
    }
}
@media( max-width : 1300px ){
    .banner-content {
        min-height: 700px;
        height: 700px;
    }
}

@media( max-width : 1250px ){
    .banner-content {
        min-height: 600px;
        height: 600px;
    }
    .searchOption .icon-card-circle{
        width: 90px!important;
        height: 90px!important;
    }
    .icon-card-circle .img-xs{
        width: 60px!important;
    }
    .searchOption .icon-card-circle .card-body > p {
        font-size: 0.8rem;
        margin: 0;
    }
}
@media( max-width : 1200px ){
    .searchOption .icon-card-circle{
        width: 75px!important;
        height: 75px!important;
    }
    .icon-card-circle .img-xs{
        width: 40px!important;
    }
}
@media( max-width : 992px ){
    .searchOption .icon-card-circle{
        width: 65px!important;
        height: 65px!important;
    }
    .icon-card-circle .img-xs{
        width: 40px!important;
    }
    .jobProfile-card .profile-info .card-title{
        margin-top: 20px;
    }
    .search-section .btn-link {
        font-size: 16px;
    }
}

@media( max-width : 895px ){
    .banner-text{
        width: 100%;
        padding: 0 15px;
    }
}
@media( max-width : 850px ){
    .banner-content {
        min-height: 560px;
        height: 560px;
    }
}

@media( max-width : 767px ){
    .search-form-container .form-control, .search-form-container .form-select{
        text-align: center;
        margin-bottom: 10px;
    }
    .backpackers-image{
        border-left: none;
        /* border-top: 4px solid #29b2fe; */
        margin-bottom: 25px;
        width: 45%;
        margin-left: auto;
        margin-right: auto;
    }
    .backpackers-btn a {
        font-size: 14px;
        margin-top: 25px;
    }
    .backpackers-results{
        padding-left: 6px;
        padding-right: 6px;
    }
    .backpackers-details{
        text-align: center;
    }
    .subscription-main-content{
        flex-wrap: wrap;
    }
    .subscription-main-content .col-md-4{
        width: 100%;
    }
    .subscription-card .card-body ul li{
        text-align: center;
    }
    .subscription-card{
        padding: 0 0;
        margin-bottom: 20px;
    }
    .search-form-container .form-select{
        background-position: right 0px center;
    }
    .backpackers-list-container .backpackers-data{
        text-align: center;
    }
    .backpackers-list-container .backpacker-check-con{
        text-align: center;
    }
    .searching-staff-btn .form-switch{
        text-align: center;
        margin-top: 15px;
    }
    .dashboard-section .profile-data ul li{
        text-align: center;
    }
    .backpackers-main .backpackers-date{
        text-align: center;
    }
    .footer-menu-title {
        margin-bottom: 20px;
    }
    .backpackers-details ul li{
        margin-right: 0px;
    }
    .profile-detail .profile-data ul li span{
        width: 100%;
    }
    .profile-detail .profile-data ul li{
        flex-direction: column;
        text-align: center;
    }
    .profile-detail .profile-data ul li {
        margin-bottom: 15px;
    }
    .backpacker-details-text{
        margin-top: 40px;
    }
    .message-section {
        padding: 50px 20px;
    }
    .range-peram .pe-4{
        padding-right: 10px!important;
    }
    .range-peram .ps-4{
        padding-left: 10px!important;
    }
    #backpackerDetailsTab .backpacker-image-main{
        width: 60%;
    }
    .edit-profile-section .nav-pills .nav-link{
        width: 33.3%;
        padding: 20px 0 20px 0px;
        text-align: center;
    }
    .edit-profile-section .nav{
        margin-right: 0 !important;
        flex-direction: row !important;
        border: none;
        padding-bottom: 30px;
    }
    /* .profile-img-edit-section{
        margin-top: 30px;
    } */
    .edit-profile-section .nav-pills .nav-link.active::after{
        display: none;
    }
    .edit-profile-section .nav-pills .nav-link i {
        margin-right: 5px;
    }
    .jobProfile-card .profile-info .card-title{
        text-align: center;
    }
    .jobProfile-card .profile-info .status-info{
        text-align: center;
    }
    .jobProfile-card .profile-info .info-group {
         text-align: center;
    }
    
    .jobListing-block .jobProfile-card.mt-5{
        margin-top: 0!important;
    }
    .search-section .container{
        max-width: 95%;
    }
    .search-section .btn-link {
        font-size: 14px;
    }
    .option-info-bar .list-group.justify-content-center {
        width: 50%;
    }
}

@media( max-width : 750px ){
    .video-container video{
        min-width: 150%;
        width: 150%;
    }
    .modal-dialog{
        width: 96%;
    }
}
@media( max-width : 650px ){
    .video-container video{
        min-width: 180%;
        width: 180%;
    }
    .newsletter-form .form-control {
        width: 80%;
    }
    .search-section .btn-link{
        font-size: 12px;
        margin-bottom: 0;
        line-height: 24px;
    }
    .search-section .rounded-30{
        border-radius: 0!important;
    }
    section.search-section {
        padding: 10px 0 0!important;
        background-color: #1c87c7!important;
    }
   
}
@media( max-width : 575px ){
    .banner-text-content{
        width: auto;
        padding-right: 15px;
    }
    .banner-text-content h1 {
        font-size: 35px;
        margin-bottom: 20px;
    }
    .banner-text-content p {
        font-size: 14px;
    }
    footer{
        padding: 0 15px;
    }
    .pl-4 {
        padding-left: 12px;
    }
    .footer-menu-title {
        margin-bottom: 20px;
    }
    .backpackers-content h1 {
        font-size: 24px;
    }    
    .useful-link-content{
        margin-bottom: 30px;
    }
    .backpackers-results{
        padding-left: 6px;
        padding-right: 6px;
    }
    .backpackers-details{
        text-align: center;
    }
    .backpackers-image{
        width: 50%;
    }
    .copyright-section{
        text-align: center;
    }
    .copyright-section ul{
        text-align: center;
        margin-top: 10px;
    }
    #cate_exp_2{
        margin-top: 10px;
    }
     .slide-card-section .slide-card .card-title{
        font-size: 0.9rem;
        height: 35px;
        overflow: hidden;
        margin-bottom: 0.3rem;
        font-weight: bold;
    }
    .slide-card-section .slide-card .card-body .card-text{
        font-size: 0.8rem;
        height: 40px;
        overflow: hidden;
        margin-bottom: 5px;
    }
    .slide-card-section .slide-card .col-4.profile-img {
        flex: 1 0 0%;
        justify-content: center;
    }
    .slide-card-section .slide-card:first-child, .slide-card-section .slide-card:last-child {
        width: 80px!important;
    }
    .slide-card-section .slide-card .cta-box{
        height: 150px;
        padding: 5px;
    }
    .search-section .btn-link {
        font-size: 15px;
        margin-bottom: 15px;
        line-height: 24px;
    }
    .search-section .container {
        max-width: 100%;
    }
    .modal-footer .btn.btn-logout{
        font-size: 14px!important;
        width: 80%!important;
    }
    /*---slider arrow---*/
    .slide-card-section .slide-arrow img{
        height: 30px!important;
    }
    .slide-card-section .slide-middle-card {
        padding: 0 20px;
    }
    .slide-card-section .slide-card .cta-box .card-title{
        height: auto;
    }
    .searchOption {
        padding-left: 0;
    }
    .searchOption .slide-card-section{
        justify-content: space-between!important;
    }
    .searchOption .icon-card-circle {
        width: 60px!important;
        height: 60px!important;
    }
    .searchOption .icon-card-circle .card-body > p {
        font-size: 0.6rem;
    }
    .jobProfile-container .profile-img-circle{
        width: 200px!important;
        height: 200px;
    }
    .option-info-bar .list-group.justify-content-center {
        width: 50%;
        font-size: 0.8rem;
        padding: 0;
    }
    .option-info-bar .list-group.justify-content-center > nav {
        -webkit-align-items: center;
        align-items: center;
    }
}
@media( max-width : 550px ){
    .video-container video{
        min-width: auto;
        width: auto;
        height: 100%;
        max-width: fit-content;
    }
    .banner-image-con img{
        height: 100%;
        width: auto;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .nav-tabs .nav-link{
        font-size: 14px;
    }
    .backpacker-details-text ul li {
        font-size: 14px;
    }
    .backpacker-details-text ul li i {
        margin-right: 5px;
    }
    .searchOption .icon-card-circle {
        width: 50px!important;
        height: 50px!important;
        margin-bottom: 8px;
    }
    .icon-card-circle .img-xs {
        width: 30px!important;
    }
}
@media( max-width : 489px ){
    .registration-container .nav-tabs .nav-link {
        padding: 6px 2px;
        font-size: 12px;
    }
    .registration-form .py-3{
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .message-send-con .btn-warning{
        font-size: 14px;
        padding: 17px 0px;
    }
    .backpacker-details-text ul li {
        font-size: 12px;
    }
    .option-info-bar .list-group.justify-content-center {
        font-size: 0.5rem;
    }
    .option-info-bar .icon-card-circle.icon-xs {
        width: 30px!important;
        height: 30px!important;
    }
    .option-info-bar .list-group .nav-item span.fs-6,.option-info-bar .list-group .nav-item p{
        font-size: 0.9rem!important;
    }
   .option-info-bar .list-group .nav-item .form-switch{
        font-size: 0.6rem!important;
    }
    .searchOption .option-info-bar{
        padding-left: 10px!important;
    }
}
@media( max-width : 450px ){
    .banner-text-content h1 {
        font-size: 30px;
        margin-bottom: 16px;
    }
    .banner-text-content p {
        font-size: 12px;
        margin-bottom: 10px;
    }
    .backpackers-details h2 {
        font-size: 18px;
    }
    .message-backpacker h1{
        font-size: 24px;
    }
    .icon-card-circle .img-xs {
        width: 24px;
    }
    .search-section .btn-link {
        font-size: 14px;
    }
}
@media( max-width : 437px ){
    .newsletter-form .form-control {
        width: 75%;
    }
    .banner-text h1{
        font-size: 20px;
    }
    .banner-text ul li {
        margin-right: 10px;
        font-size: 13px;
    }
    .site-title{
        font-size: 18px;
        margin-bottom: 15px;
    }
    .registration-container .nav-tabs .nav-link {
        padding: 6px 2px;
        font-size: 10px;
    }
    .login-content .login-form .dropdown-item{
        font-size: 12px;
        padding: 5px 5px;
    }
    .footer-logo img {
        width: 100%;
    }
    .profile-detail .profile-data ul li{
        font-size: 12px;
    }
    .profile-detail .profile-data ul li span{
        font-size: 14px;
    }
    .searching-staff-btn .form-check-label {
        font-size: 14px;
    }
    .dashboard-backpackers-title h1 {
        font-size: 20px;
    }
    .dashboard-backpackers .page-link{
        padding: 5px 10px;
        font-size: 12px;
    }
    .backpacker-registration .accordion-body .othr-skill-con, .backpacker-registration .accordion-body .othr-skill-con .btn-outline-primary{
        width: 100%;
    }
    .option-info-bar .list-group .nav-item span.fs-6,.option-info-bar .list-group .nav-item p{
        font-size: 0.7rem!important;
    }
}
@media( max-width : 360px ){
    .navbar-brand img {
        width: 220px;
    }
    .newsletter-form .form-control {
        width: 70%;
    }
    .search-form-container .form-control, .search-form-container .form-select {
        width: 86%;
        font-size: 15px;
    }
    .login-form .form-label, .login-form .form-check-label, .registration-container .form-label, .registration-container .form-check-label {
        font-size: 12px;
    }
    .login-form .form-select, .login-form .form-control, .registration-container .form-select, .registration-container .form-control{
        font-size: 12px;
    }
    .backpackers-details ul{
        text-align: left;
    }
    .form-file{
        width: 100%;
    }
    small{
        font-size: 12px;
    }
    .range-peram .pe-4 {
        padding-right: 5px!important;
    }
    .range-peram .ps-4 {
        padding-left: 5px!important;
    }
    .msg{
        padding: 10px;
    }
    .message-section {
        padding: 30px 10px;
    }
}
.navbar-light .navbar-toggler{
    border: none;
}
.navbar-toggler:focus{
    box-shadow: none;
}
@media( max-width : 313px ){
    .navbar-brand img {
        width: 170px;
    }
    .login-content .login-form .dropdown-item{
        font-size: 10px;
        padding: 5px 4px;
    }
}
@media( max-width : 310px ){
    .newsletter-form .form-control {
        width: 65%;
    }
    .banner-text-content h1 {
        font-size: 22px;
    }
    .banner-text-content .btn-warning {
        padding: 12px 20px;
        font-size: 14px;
        margin-top: 10px;
    }
    .backpackers-content h1 {
        font-size: 20px;
    }
    .line-animation {
        width: 100px;
    }
    .navbar-brand img {
        width: 150px;
    }
    .footer-des p {
        font-size: 10px;
    }
    .footer-des ul li {
        margin-bottom: 10px;
        font-size: 10px;
    }
    footer .top-footer-section {
        padding: 50px 0;
    }
    .footer-menu-title {
        font-size: 15px;
    }
    .footer-menu-link li a {
        font-size: 12px;
    }    
    .popular-jobs-text h4, .popular-jobs-text h4 a {
        font-size: 14px;
    }
    .newsletter-text {
        font-size: 12px;
    }
    .newsletter-content {
        margin-top: 20px;
    }
    .footer-des {
        margin-bottom: 30px;
    }
    .copyright-section p {
        font-size: 10px;
    }
}
@media( max-width : 272px ){
    .newsletter-form .form-control {
        width: 64%;
    }
    .newsletter-form .form-control{
        font-size: 12px;
    }
    .newsletter-form .btn-warning {
        font-size: 12px;
    }
    .dashboard-backpackers .page-link{
        padding: 5px 5px;
        font-size: 12px;
    }
}
@media( max-width : 266px ){
    .newsletter-form .form-control {
        width: 63%;
    }
}
@media( max-width : 260px ){
    .navbar-brand img {
        width: 140px;
    }
    .search-form-container .btn-warning {
        padding: 10px 0px;
    }
    .backpackers-details h2, .backpackers-details h2 a {
        font-size: 20px;
    }
    .backpackers-details ul li {
        font-size: 12px;
    }
    .form-icon {
        font-size: 12px;
        width: 9%;
    }
    .search-form-container .form-control, .search-form-container .form-select {
        width: 91%;
    }
}
@media( max-width : 233px ){
    .navbar-brand img {
        width: 120px;
    }
    .navbar-light .navbar-toggler{
        padding: 0 0;
    }
    .banner-text-content h1 {
        font-size: 20px;
        margin-bottom: 10px;
    }
    .line-animation {
        margin-bottom: 10px;
    }
    .banner-text-content .btn-warning {
        padding: 10px 20px;
        font-size: 12px;
        margin-top: 8px;
    }
    .newsletter-form .form-control {
        width: 62%;
    }
}
@media( max-width : 228px ){
    .newsletter-form .form-control {
        width: 60%;
    }
}
@media( max-width : 219px ){
    .newsletter-form .form-control {
        width: 58%;
    }
}
@media( max-width : 213px ){
    .newsletter-form .form-control {
        width: 56%;
    }
}