@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');




.menu-btn{
    position: absolute;
    left: 20px;
    top: 10px;

    color: #202020;
    height: 45px;
    width: 45px;
    z-index: 9999;

    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
  }
  #btn:checked ~ .menu-btn{
    left: 247px;
  }

   .menu-btn i.fa-times{
    opacity: 0;
  }
  #btn:checked ~ .menu-btn i.fa-times{
    opacity: 1;
    transform: rotate(-180deg);
  }
  #btn:checked ~ .menu-btn i.fa-bars{
    opacity: 0;
    transform: rotate(180deg);
  }
  #sidebar{
    position: fixed;
    background: #404040;
    height: 100%;
    width: 270px;
    overflow: hidden;
    left: -270px;
    transition: all 0.3s ease;
  }
  #btn:checked ~ #sidebar{
    left: 0;
  }









.fist-sidebar {
    background-color: #ffffff;
    width: 6%;
    height: 100vh !important;
    z-index: 999;
    position: fixed;
    box-shadow: 10px 1px  30px  rgba(0,0,0,0.25);
    display: grid;
    justify-content: space-around;
}
.icons{

    position: relative;
    bottom: 0% !important;
}
.footer-icon {

    position: relative;
    bottom: -35% !important;


}

.icons img {
    width: 30px;
    height: 30px;
    border-radius: 0px;
    margin-left: 10px;
    margin-top: 34px;
    cursor: pointer;
}

.footer-icon i {
    color: #ffffff;
    font-size: 20px;
}

.footer-icon img {
    width: 30px;
    height: 30px;
    border-radius: 0px;
    margin-left: 10px;
    margin-top: 30px;
    cursor: pointer;
}

/* .btn-nav {
    position: absolute;
    top: 15px;
    left: 5px;
    height: 45px;
    width: 45px;
    text-align: center;
    cursor: pointer;
    transition: left 0.4s ease;
    z-index: 9999;
} */

.btn-nav span {
    color: white;
    font-size: 20px;
    line-height: 45px;
}

.btn-nav.click span:before {
    content: '\f00d';
}

.sidebar-nav {
    position: fixed;
    width: 250px;
    height: 100vh;
    left: -250px;
    transition: left 0.4s ease;
    border-radius: 30px !important;

    z-index: 99;
}

.sidebar-nav.show {
    left: 6%;
}

.sidebar-nav .text {
    color: white;
    font-size: 12px;
    line-height: 65px;
    text-align: center;
    letter-spacing: 1px;
}

.sidebar-nav .sidebar-nav-ul {
    background-color: #4d4d4d;
    height: 100vh;
    width: 100%;
    list-style: none;
    padding-top: 100px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    overflow-y: scroll;
}

.sidebar-nav-ul::-webkit-scrollbar {
    display: none;
}

.sidebar-nav .sidebar-nav-ul li {

    line-height: 60px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-nav .sidebar-nav-ul li:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.sidebar-nav .sidebar-nav-ul li a {
    position: relative;
    color: white;
    text-decoration: none;
    font-size: 15px;
    padding-left: 40px;
    display: block;
    width: 100%;
    border-left: 3px solid transparent;
}


.sidebar-nav .sidebar-nav-ul ul {
    position: static;
    display: none;
}

.sidebar-nav .sidebar-nav-ul .feat-show.show {
    display: block;
}

.sidebar-nav .sidebar-nav-ul .serv-show.show1 {
    display: block;
}

.sidebar-nav .sidebar-nav-ul ul li {
    line-height: 42px;
    border-top: none;
}

.sidebar-nav .sidebar-nav-ul ul li a {
    font-size: 15px;
    color: #e6e6e6;
    padding-left: 80px;
}

.sidebar-nav .sidebar-nav-ul li.active .sidebar-nav-ul li a {
    color: #e6e6e6;
    background: #1b1b1b;
    border-left-color: transparent;
}

.sidebar-nav .sidebar-nav-ul li a span {
    position: absolute;
    top: 50%;
    right: 20px;
    font-size: 22px;
}

.sidebar-nav .sidebar-nav-ul li a span.rotate {
    transform: translateY(-50%) rotate(-180deg);
}

.social_links {
   position: absolute;
   bottom: 5% !important;

}

.social_links i {
    color: #e6e6e6;
    font-size: 25px;

}
.social_links_1 i {
    color: #e6e6e6;
    font-size: 25px;
}


.content {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #202020;
    z-index: -1;
    text-align: center;
}



.btn-nav_1 span {
    color: white;
    font-size: 20px;
    line-height: 45px;
}

.btn-nav_1.click span:before {
    content: '\f00d';
}

.sidebar-nav_1 {
    position: fixed;
    width: 250px;
    height: 100vh;
    left: -250px;
    transition: left 0.4s ease;
    border-radius: 30px !important;

    z-index: 99;
}

.sidebar-nav_1.show_1 {
    left: 5%;
}

.sidebar-nav_1 .text {
    color: white;
    font-size: 12px;
    line-height: 65px;
    text-align: center;
    letter-spacing: 1px;
}

.sidebar-nav-ul_1 .or{
    display: flex;
    justify-content: center;
    color: #808080;


}
.sidebar-nav_1 .sidebar-nav-ul_1 {
    background-color: #4d4d4d;
    height: 100vh;
    width: 100%;
    list-style: none;
    padding-top: 100px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    overflow-y: scroll;
}

.sidebar-nav-ul_1::-webkit-scrollbar {
    display: none;
}

.sidebar-nav_1 .sidebar-nav-ul_1 li {
    margin: 20px 0px 0px 30px !important;

}



.sidebar-nav-ul_1 li h1 {
    font-size: 20px;
    font-weight: bold;
    color: #e6e6e6;

}


.sidebar-nav_1 .sidebar-nav-ul_1 li a {
    color: #757373;
}


.sidebar-nav_1 .sidebar-nav-ul_1 ul {
    position: static;
    display: none;
}

.sidebar-nav_1 .sidebar-nav-ul_1 .feat-show_1_1_1 {
    display: block;
}

.sidebar-nav_1 .sidebar-nav-ul_1 .serv-show_1_11_1 {
    display: block;
}

.sidebar-na_1v .sidebar-nav-ul_1 ul li {
    line-height: 42px;
    border-top: none;
}

.sidebar-nav_1 .sidebar-nav-ul_1 ul li a {
    font-size: 15px;
    color: #e6e6e6;
    padding-left: 80px;
}

.sidebar-nav_1 .sidebar-nav-ul_1 li.active .sidebar-nav-ul_1 li a {
    color: #e6e6e6;
    background: #1b1b1b;
    border-left-color: transparent;
}

.sidebar-nav_1 .sidebar-nav-ul_1 li a span {
    position: absolute;
    top: 50%;
    right: 20px;
    font-size: 22px;
}

.sidebar-nav_1 .sidebar-nav-ul_1 li a span.rotate_1 {
    transform: translateY(-50%) rotate(-180deg);
}

/* .social_links {
    margin-top: 110% !important;
} */



.content {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #202020;
    z-index: -1;
    text-align: center;
}

.Google-btn {
    border: 2px solid #808080;
    border-radius: 30px !important;

    padding: 3px 26px;
    color: #e6e6e6 !important;
    text-decoration: none !important;
    font-size: 15px;
    display: flex;
    justify-content: center;
}

.Google-register-btn {
    border: 2px dotted white;
    border-radius: 30px !important;
    margin-left: 35px !important;
    padding: 3px 18px;
    color: #e6e6e6 !important;
    text-decoration: none !important;
    font-size: 15px;
}

.form-group input {
    border-radius: 0px !important;
    border-top: 0px solid #757373 !important;
    border-left: 0px solid #757373 !important;
    border-right: 0px solid #757373 !important;
    border-bottom: 1px solid #757373 !important;
}

.form-check-label_1 {
    color: #757373;
    font-size: 15px;
    padding: 0% !important;
}

.form-check-label_2 {
    color: #ffffff;
    font-size: 12px;
    padding: 0% !important;
}

/* .form-check-input {
    position: absolute;
    margin-top: 1.4rem;
    margin-left: -1.25rem;
} */
.login_btn {
    background-color: #e6e6e6;
    border-radius: 30px;
    margin-top: 2.25rem;
    margin-left: .25rem;
    padding: 10px 60px;
}

.login_btn:hover {
    background-color: transparent;
    color: #e6e6e6;
    border: 1px solid #757373 !important;
}

.login_btn_1 {
    background-color: #e6e6e6;
    border-radius: 30px;

    margin-left: .25rem;
    padding: 10px 60px;
}

.login_btn_1:hover {
    background-color: transparent;
    color: #e6e6e6;
    border: 1px solid #757373 !important;
}

.forgot_password {
    font-size: 12px;
    color: #757373;
    text-align: center;
    text-decoration: none !important;
}

.forgot_password:hover {
    color: #757373;

}

li>p {
    font-size: 12px !important;
    color: #757373;
    margin-left: 1rem;

}

.register_btn {
    background-color: transparent;
    border-radius: 30px;
    margin-left: .25rem;
    padding: 10px 50px;
    border: 1px solid #757373 !important;
    color: #e6e6e6;
}

.register_btn:hover {
    background-color: #e6e6e6;
    color: #4b4949;
}
.favorites-sidebar{
    display: contents !important;
}


























.sidebar-nav_2 {
    position: fixed;
    width: 250px;
    height: 100vh;
    left: -250px;
    top: 0px !important;
    padding: 0px !important;
    margin: 0px !important;
    transition: left 0.4s ease;
    border-radius: 30px !important;
    z-index: 99;
}
.sidebar-nav-ul_2 li {
    margin-left: 10px;
    margin-top: 1px;
    list-style: none !important;
}

.sidebar-nav_2.show_2 {
    left: 6%;
}

.sidebar-nav_2 .sidebar-nav-ul_2 {
    background-color: #4d4d4d;
    height: 100vh;
    width: 100%;
    list-style: none;
    padding-top: 10px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    overflow-y: scroll;
}

.sidebar-nav-ul_2::-webkit-scrollbar {
    display: none;
}

.favorites-sidebar-img img {
    border-radius: 10px;
    width: 100%;
    height: 80% !important;
}

.favorites-sidebar-text h5 {
    font-size: 10px;
    color: #e6e6e6;
}

.favorites-sidebar-text span {
    font-size: 7px;
    color: #e6e6e6;
}

.favorites-heading {
    color: #e6e6e6;
    font-size: 29px;
    text-align: center;
    font-weight: bold;
}














.sidebar-nav_3 {
    position: fixed;
    width: 250px;
    height: 100vh;
    left: -250px;
    transition: left 0.4s ease;
    border-radius: 30px !important;
    z-index: 99;
}

.sidebar-nav_3.show_3 {
    left: 6%;
}

.sidebar-nav_3 .sidebar-nav-ul_3 {
    background-color: #4d4d4d;
    height: 100vh;
    width: 100%;
    list-style: none;
    padding-top: 10px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    /* border-radius: 30px !important; */
    overflow-y: scroll;
}

.sidebar-nav-ul_3::-webkit-scrollbar {
    display: none;
}

.sidebar-nav-ul_3 li h1 {
    color: #e6e6e6;
    font-size: 29px;
    text-align: center;
    font-weight: bold;
}

.favorites-sidebar-text p {
    font-size: 11px;
    color: #e6e6e6;
}


.favorites-sidebar-text a {
    border: 1px solid #757373;
    color: #e6e6e6;
    padding: 3px 6px;
    font-size: 11px;
    border-radius: 20px;
    text-decoration: none;
}

.favorites-sidebar-text a:hover {
    background-color: #e6e6e6;
    color: #757373;
    border: none;
}




.sidebar-nav_4 {
    position: fixed;
    width: 250px;
    height: 100vh;
    left: -250px;
    transition: left 0.4s ease;
    border-radius: 30px !important;
    z-index: 99;
    top: 0px !important;
    padding: 0px !important;
    margin: 0px !important;
}

.btn-nav_4 {
    cursor: pointer;
}

.sidebar-nav_4.show_4 {
    left: 6%;
}

.sidebar-nav-ul_4 li {
    margin-left: 10px;
    margin-top: 10px;
    list-style: none !important;
}

.sidebar-nav-ul_4 li h1 {
    color: #e6e6e6;
    font-size: 20px;
    margin-top: 20px;
}

.price_range {
    font-size: 15px !important;
}

.sidebar-nav_4 .sidebar-nav-ul_4 {
    background-color: #4d4d4d;
    height: 100vh;
    width: 100%;
    list-style: none;
    padding: 29px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    overflow-y: scroll;

}

.sidebar-nav-ul_4::-webkit-scrollbar {
    display: none;
}



.slider-labels {
    margin-top: 10px;
    color: #e6e6e6;
    display: flex;
    justify-content: space-between;

}

/* Functional styling;
   * These styles are required for noUiSlider to function.
   * You don't need to change these rules to apply your design.
   */
.noUi-target,
.noUi-target {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -ms-touch-action: none;
    touch-action: none;
    -ms-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.noUi-target {
    position: relative;
    direction: ltr;
}

.noUi-base {
    width: 17vh;
    height: 100%;
    position: relative;
    z-index: 1;
    /* Fix 401 */
}

.noUi-origin {
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    bottom: 0;
}

.noUi-handle {
    position: relative;
    z-index: 1;
}

.noUi-stacking .noUi-handle {
    /* This class is applied to the lower origin when
     its values is > 50%. */
    z-index: 10;
}

.noUi-state-tap .noUi-origin {
    -webkit-transition: left 0.3s, top .3s;
    transition: left 0.3s, top .3s;
}

.noUi-state-drag * {
    cursor: inherit !important;
}

/* Painting and performance;
   * Browsers can paint handles in their own layer.
   */
.noUi-base,
.noUi-handle {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/* Slider size and handle placement;
   */
.noUi-horizontal {
    height: 4px;
    width: 17vh;
}

.noUi-horizontal .noUi-handle {
    left: -11px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 13px solid #616264;
}

/* Styling;
   */
.noUi-background {
    background: #D6D7D9;
}

.noUi-connect {
    background: #616264;
    -webkit-transition: background 450ms;
    transition: background 450ms;
}

.noUi-origin {
    border-radius: 2px;
}

.noUi-target {
    border-radius: 2px;
}


/* Handles and cursors;
   */
.noUi-draggable {
    cursor: w-resize;
}

.noUi-vertical .noUi-draggable {
    cursor: n-resize;
}

.noUi-handle {
    cursor: default;
    -webkit-box-sizing: content-box !important;
    -moz-box-sizing: content-box !important;
    box-sizing: content-box !important;
}

.noUi-handle:active {
    left: -11px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 13px solid #616264;
}

/* Disabled state;
   */
[disabled].noUi-connect,
[disabled] .noUi-connect {
    background: #B8B8B8;
}

[disabled].noUi-origin,
[disabled] .noUi-handle {
    cursor: not-allowed;
}

.hide {
    display: none;
}

.read-more-show {
    color: #e6e6e6;
    margin-left: 20px;
}

.read-more-show i {
    margin-left: -15px;
    font-size: 10px;
}

.read-more-show:hover {
    color: #e6e6e6;
    text-decoration: none !important;
}

.read-more-hide {
    color: #e6e6e6;
    margin-left: 20px;
    font-size: 16px;
}

.read-more-hide i {
    margin-left: -15px;
    font-size: 10px;
}

.read-more-hide:hover {
    color: #e6e6e6;
    text-decoration: none !important;
}

























.sidebar-nav_5 {
    position: fixed;
    width: 250px;
    height: 100vh;
    left: -250px;
    top: 0px !important;
    padding: 0px !important;
    margin: 0px !important;
    transition: left 0.4s ease;
    border-radius: 30px !important;
    z-index: 99;
}
.sidebar-nav-ul_5 li {
    margin-left: 10px;
    /* margin-top: 1px; */
    list-style: none !important;
}

.sidebar-nav_5.show_5 {
    left: 6%;
}

.sidebar-nav_5 .sidebar-nav-ul_5 {
    background-color: #4d4d4d;
    height: 100vh;
    width: 100%;
    list-style: none;
    padding-top: 100px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    overflow-y: scroll;
}


.sidebar-nav-ul_5::-webkit-scrollbar {
    display: none;
}

.sidebar-nav-ul_5 h1 {
    color: #e6e6e6;
    font-size: 25px;
    margin-left: 40px;
}
.login_btn_2 {
    background-color: #e6e6e6;
    border-radius: 30px;
    display: block;
    margin: auto !important;
    padding: 10px 30px;
}

.login_btn_2:hover {
    background-color: transparent;
    color: #e6e6e6;
    border: 1px solid #757373 !important;
}
.form-check-inline_1{
    margin-left: 40px;
}
.sidebar-nav-ul_5 li {

    color: #e6e6e6;
    font-size: 25px;
}
.sidebar-nav-ul_5 li input{
   border-radius: 0px !important;
}
.form-check-input{
    /* accent-color: #4d4d4d; */
}
.social_links_1 {

    margin-top: 50% !important;
}












label{
    display: block;
     margin-bottom: 10px;
 }

input[type=radio] {
   appearance: none;
   background-color: #fff;
   width: 15px;
   height: 15px;
   border: 2px solid #ccc;
   border-radius: 2px;
   display: inline-grid;
   place-content: center;
 }

input[type=radio]::before {
   content: "";
   width: 10px;
   height: 10px;
   transform: scale(0);
   transform-origin: bottom left;
   background-color: #fff;
   clip-path: polygon(13% 50%, 34% 66%, 81% 2%, 100% 18%, 39% 100%, 0 71%);
}

input[type=radio]:checked::before {
   transform: scale(1);
}
input[type=radio]:checked{
   background-color:   #757373;
   border: 2px solid #757373;
}














.slider-container {
    width: 400px;
    margin: 50px auto;
    position: relative;
    background-color: #444;
    padding: 20px;
    border-radius: 10px;
  }

  .slider-label {
    text-align: center;
    font-size: 20px;
    margin-bottom: 10px;
  }

  .slider {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
  }

  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #4CAF50;
    cursor: pointer;
    border-radius: 50%;
  }

  .slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #4CAF50;
    cursor: pointer;
    border-radius: 50%;
  }

  .slider-value {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: white;
  }




















@media (min-width: 320px) and (max-width: 480px) {

    .sidebar-nav
     {
        width: 200px;
    }
    .favorites-sidebar-img img{
        border-radius: 10px !important;
        width: 100% !important;

    }
    .favorites-sidebar-text h5 {
        font-size: 6px !important;
        color: #e6e6e6;
    }
    .favorites-sidebar-text a {
        font-size: 6px !important;
    }
    .favorites-sidebar{
        display: flex !important;
    }
    .fist-sidebar {
        width: 30px;

    }
    .footer-icon {
        left: 18px;
        top: 55% !important;
    }
    .footer-icon img {
        width: 50%;
        height: 30%;
    }
    .icons img{
        margin-left: 6px !important;
        width: 50%;
        height: 30%;
    }

    .social_links {
        margin-top: 10% !important;
        margin-left: 10px !important;

    }
    .sidebar-nav-ul_1 li h1 {
        font-size: 15px;
        text-align: center;
    }
}
/* @media (min-width: 760px) and (max-width: 1400px) {
    .footer-icon {
        left: 28px;
        top: 30% !important;
    }


} */