* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: "Roboto","Helvetice", sans-serif;
    background: white;
}
header {
    position: sticky;
    top: 0px;
    background-color: white;
    padding-bottom: 1rem;
}
.container {
    max-width: 80%;
    margin: 0 auto;
}
.top-header {
    height: 40px;
    display: flex;
    align-items: center;
    gap: 40px;
    margin-top: 15px;

}

.logo {
    cursor: pointer;
    padding-top: 7px;
}
.car-icon,.building-icon {
    display: flex;
    cursor: pointer;
}
.svg-div {
    padding: 5px;
    margin: 2px 5px 0 0;
    border-radius: 50px;
    background-color: rgb(220, 226, 227);
}
.logo-txt {
    font-size: 1rem;
    padding-top: 7px;
    font-weight: bold;
}
.car-icon:hover .svg-div,
.building-icon:hover .svg-div {
    fill:rgb(59, 121, 255);
    background-color: rgb(235, 241, 255);
}
.car-icon:hover,
.building-icon:hover {
    color: rgb(59, 121, 255);
}

.bottom-header {
    /* border: 2px solid black; */
    display: flex;
    justify-content: start;
    column-gap: 10px;
    height: 50px;
    align-items: center;
    margin-top: 20px;
    font-size: 12px;
    width: 100%;
   
}
.first-div,
.second-div {
    display: flex;
    border: 1px solid rgba(128, 128, 128, 0.469);
    height: 100%;
    align-items: center;
    column-gap: 6px;
    border-radius: 6px;
    padding: 0px 10px;
    /* width: 30%;  */
}
.first-div:focus-within,
.second-div:focus-within {
    border: 1px solid rgba(0, 255, 255, 0.573);
}
.location-input {
    height: 100%; 
}
.location-input input,
.search-input input{
    width: 100%;
    padding: 13px 15px;
    border: none;
    font-size: 1rem;
}
.location-input input:focus,
.search-input input:focus {
    border: none;
    outline: none;
}
.location-drop-down{
    cursor: pointer;
}
.drop-down-list {
    border-radius: 5px;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, .12), 0 6px 6px 0 rgba(0, 0, 0, .24);
    display: flex;
    flex-direction: column;
    width: 295px;
    height: auto;
    position: absolute;
    top: 116px;
    left: 128px;
    background-color: #fff;
    z-index: 10;
    height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    font-size: 0.9rem;
}
#check:checked ~ .drop-down-list {
    display: block;
}
#check {
    display: none;
}
#check:checked ~ .drop-down-list {
    display: block;
}
#check:checked ~ .first-div .drop-down {
    transform: rotate(180deg);
}
.drop-down {
    cursor: pointer;
}
.drop-down-list {
    display: none;
}
.under-location,
.under-location2,
.under-location-label {
    border: none;
    display: flex;
    align-items: center;
    width: 100%;
    height: 50px;
    padding: 10px;
    cursor: pointer;
    background-color: #fff;
    transition: background-color 0.2s ease-in-out;
    gap: 4px;
}
.under-location:hover,
.under-location2:hover:hover {
    background-color: #c7f8f5
}
.first-txt {
    color: #3a77ff;
}
.under-location-label {
    font-size: 12px;
    color: #6d6c6c9a;
    padding: 10px;
    cursor: none;
}
.second-div {
    padding: 0;
    width: 50%;
}
.search-input {
    height: 100%;
    flex: 2;
}
.search {
    flex: 0;
    background: #000;
    height: 100%;
    width: 100%;
    padding: 10px;
    border-radius: 0px 5px 5px 0px;
    cursor: pointer;
}

.third-div {
    /* border: 2px solid red; */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20%;
    height: 100%;
    column-gap: 10px;
    margin-left: 8px;
    cursor: pointer;
}
.third-div .login {
    /* border: 2px solid red; */
    width: 30%;
}

.third-div .login a {
    font-size: 1.3em;
    color: #000;
    text-decoration: none;
    padding-bottom: 1px;
    border-bottom: 2px solid black;
    font-weight: bold;
}
.third-div .login a:hover {
    border-bottom: none;
}
.third-div .sell {
    /* border: 2px solid red; */
    height: 100%;
    position: relative;
    min-width: 120px;
    max-width: 200px;
    background: url(../Images/sell-svg.svg) no-repeat;
    /* background-size: cover; */
    background-size: contain;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;

}
.sell-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    /* width: 80%; */
    width: 100%;
    max-width: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 5px;

}
.sell-txt {
    font-weight: bold;
    font-size: 1.1em;  
}
hr {
    border: 1px solid #d8dfe0;;
}
.section {
    display: flex;
    width: 100%;
    height: 100%;
    margin-top: 1rem;
    column-gap: 18px;
    font-size: 1rem;
}
.section > .txt-arrow-container {
    display: flex;
    gap: 10px;
    align-items: center;
}
.section-txt {
    font-size: 0.9rem;
    color: #002f34;
}
.section-txt:hover {
    color: #00a49f;
    cursor: pointer;
}
.drop-down2 {
    cursor: pointer;
}
.conatianer2 {
    width: 98%;
    margin: 0 auto;
}
.banner-img img {
    margin: 30px 0;
    width: 100%;
    cursor: pointer;
}
.div-txt h2 {
    font-size: 1.4rem;
}
.catogrey-list {
    width: 100%;
    display: flex;
    column-gap: 3rem;
    row-gap: 1rem;
    flex-wrap: wrap;
    align-items: baseline;
    margin-bottom: 3rem;
}
.logo-txt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.logo h4 {
    font-size: 0.9rem;
    margin-top: 4px;
}
/* card and above text styling */
.section3 {
    padding: 10px;
}

.div-txt {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.txt2 {
    flex-grow: 1;
}

.txt3,
.arr-svg {
    display: flex;
    align-items: center;
    color: #3b79ff;
    fill: #3b79ff;
    font-weight: bold;
}
.arr-svg {
    margin-left: 8px;
}
.txt3:hover,
.arr-svg:hover {
    cursor: pointer;
}
.mobile-card,.car-card,
.bikes-card,.house-card {
    display: flex;
    width: 100%;
    justify-content: space-between;
}
.main-card {
    border: 1px solid #d8dfe0;
    width: 24%;
    border-radius: 5px;
    margin-bottom: 2rem;
    cursor: pointer;
    display: flex;
}
.card-img img{
    width: 100%;
    border-radius: 5px 5px 0 0;
}
.card-txt-top {
    display: flex;
    justify-content: space-between;
    margin: 10px 15px;
}
.fa-heart:hover {
    cursor: pointer;
    color: red;
}
.card-txt-bottom {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-left: 15px;
}
.first-phara, .third-phara {
    margin-bottom: 10px;
}
.second-phara, .third-phara, .meter{
    color: #3f6266;
}
.third-phara {
    font-size: 0.8rem;
}
.section3,.mobile-card,
.car-card,.bikes-card,.house-card {
    width: 95%;
    margin: 0 auto;
}
.meter {
    display: flex; 
    align-items: center;
    font-size: 0.8rem;
    gap: 3px;
    font-weight: bold;
}
.svg-div2 {
    display: flex;
    gap: 10px;
    font-size: 0.8rem;
    font-weight: bold;
    color: #3f6266;
}
.svg-div2 img {
    width: 18px;
    height: 18px;
}
.before-footer {
    /* border: 2px solid red; */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background-color: #f7faf9;
}
.divider {
    width: 2px;
    height: 100px;
    background-color:#c7cfd1;
}
.bef-footer-svg {
    display: flex;
    gap: 10px;  
    text-align: center;
    margin-left: 30px;
    flex-wrap: wrap;
    
}
.resize {
    width: 135px;
}
.bef-footer-sec {
    border-top: 1px solid #bdc8c9;
    background-color: #ebeff0;
    display: flex;
    padding: 30px;
    width: 100%;
    justify-content: space-evenly;
}
.bef-footer-sec2 {
    width: 100%;
    background-color: #ebeff0;
    display: flex;
    justify-content: space-around;
}
.bef-footer-sec p {
    color: #3f6266;
    font-size: 0.8rem;
    margin-bottom: 5px;
}
.bef-footer-sec p:hover {
    color: #002e33;
    cursor: pointer;
}
.bef-footer-sec h5 {
    margin-bottom: 15px;
    color: #002e33;
}
.heading2 {
    font-weight: bold;
    margin-bottom: 10px;
    color: #002e33;   
}

.bef-footer-icon-div {
    display: flex;
    gap: 30px;
}
.bef-footer-icon-div img {
    width: 30px;
}
.bef-footer-svg2 {
    display: flex;
    padding-top: 15px;
    gap: 8px;
    flex-wrap: wrap;
}
.icon {
    width: 10px; 
}
.resize2 {
    width: 100px;
}
.bef-footer-right-div {
    display: flex;
    flex-direction: column;
}
footer {
    background-color: #002e33;
    color: white;
    padding: 1.4rem 4.5rem;
    text-align: center;
}
.footer-div {
    display: flex;
    justify-content: end;
}
.footer-txt h5 {
    font-size: 0.8rem;
}
.footer-txt2 p {
    font-size: 0.8rem;
}
.red {
    color: red;
}
/* Mobile size */
@media(min-width:320px) and (max-width:374px) {
    html,body {
        overflow-x: hidden;
        width: 100%;
    }
    header {
    padding-bottom: 0.5rem;
    position: static;
    }
    .top-header {
        /* display: flex; */
        gap: 10px;
    }
    .second-div,
    .divider,
    .bef-footer-svg,
    .section-txt {
        display: none;
    }
    .bottom-header {
        width: 100%;
    }
    .first-div {
        width: 50%;
    }
    .third-div {
        justify-content: space-between;
    }
    .sell {
        margin-left: 10px;
    }
    .drop-down-list {
        top: 130px;
        width: 150px;
        left: 7px;
        overflow: auto;
    }
    .container,
    .conatianer2 {
        max-width: 98%;
        margin: 0 auto;
    }
    .banner-img img {
        margin: 15px 0;
        width: 100vw;
    }
    .catogrey-list {
        margin-left: 5px;
        column-gap: 1rem;
        row-gap: 0.5rem;
        /* justify-content:space-between; */
    }
    .mobile-card,
    .car-card,
    .bikes-card,
    .house-card {
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      gap: 10px;
      padding: 0 10px 10px;
    }
    
    .main-card {
      flex: 0 0 90%;
      width: auto;
      scroll-snap-align: start;
      margin-bottom: 0;
    }
  
    .main-card:last-child {
      margin-right: 15px;
    }

    ::-webkit-scrollbar {
      display: none;
    }

    ::-webkit-scrollbar-thumb {
      background: #888;
      border-radius: 2px;
    }
    .bef-footer-icon-div {
        gap: 10px;
        flex-wrap: nowrap;
    }
    .bef-footer-icon-div img {
        width: 20px;
        height: 30px;
    }
    .icon {
        padding: 3px;
    }
    .bef-footer-right-div {
        align-items: center;
        padding: 10px 0;
        margin-top: 15px;
    }
    .bef-footer-svg {
        display: none;
    }
    .bef-footer-sec {
        /* width: 100%; */
        padding: 15px 2px;
        flex-wrap: wrap;
    }
    .bef-footer-sec2 {
        display: grid;
        grid-template-areas: 
          "a b c d"
          "footer footer footer footer";
        gap: 20px;
    }
    .bef-footer-right-div {
        grid-area: footer;
        margin-top: 5px;
        text-align: center;
    }
    .bef-footer-icon-div {
        justify-content: center;
        gap: 15px;
        padding-right: 15px;
    }
    .bef-footer-svg2 {
        gap: 4px;
        margin-right: 10px;
    }
    .bef-footer-svg2 img{
        width: 90px;
    }
    footer {
        padding: 1rem;
    }
    .footer-div {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
}

/* Mobile (M) SIze */
@media(min-width:375px) and (max-width:424px) {
    html,body {
        overflow-x: hidden;
        width: 100%;
    }
    header {
    padding-bottom: 0.5rem;
    position: static;
    }
   
    .second-div,
    .divider,
    .bef-footer-svg,
    .section-txt {
        display: none;
    }
    .bottom-header {
        width: 100%;
    }
    .first-div {
        width: 50%;
    }
    .third-div {
        justify-content: space-between;
    }
    .sell {
        margin-left: 5px;
    }
    .drop-down-list {
        top: 130px;
        width: 180px;
        left: 7px;
        overflow: auto;
    }
    .container,
    .conatianer2 {
        max-width: 98%;
        margin: 0 auto;
    }
    .banner-img img {
        margin: 15px 0;
        width: 100vw;
    }
    .catogrey-list {
        margin-left: 30px;
        column-gap: 1rem;
        row-gap: 0.5rem;
        /* justify-content:space-between; */
    }
    .mobile-card,
    .car-card,
    .bikes-card,
    .house-card {
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      gap: 10px;
      padding: 0 10px 10px;
    }
    
    .main-card {
      flex: 0 0 90%;
      width: auto;
      scroll-snap-align: start;
      margin-bottom: 0;
    }
  
    .main-card:last-child {
      margin-right: 15px;
    }

    ::-webkit-scrollbar {
      display: none;
    }

    ::-webkit-scrollbar-thumb {
      background: #888;
      border-radius: 2px;
    }
    .bef-footer-icon-div {
        gap: 10px;
        flex-wrap: nowrap;
    }
    .bef-footer-icon-div img {
        width: 20px;
        height: 30px;
    }
    .icon {
        padding: 3px;
    }
    .bef-footer-right-div {
        align-items: center;
        padding: 10px 0;
        margin-top: 15px;
    }
    .bef-footer-svg {
        display: none;
    }
    .bef-footer-sec {
        /* width: 100%; */
        padding: 15px 10px;
        flex-wrap: wrap;
    }
    .bef-footer-sec2 {
        display: grid;
        grid-template-areas: 
          "a b c d"
          "footer footer footer footer";
        gap: 20px;
    }
    .bef-footer-right-div {
        grid-area: footer;
        margin-top: 15px;
        text-align: center;
    }
    .bef-footer-icon-div {
        justify-content: center;
        gap: 15px;
        padding-right: 15px;
    }
    footer {
        padding: 1rem;
    }
    .footer-div {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
}

/* Mobile (L) Size */
@media (min-width:425px) and (max-width:767px) {
    html,body {
        overflow-x: hidden;
        width: 100%;
    }
    header {
    padding-bottom: 0.5rem;
    position: static;
  }
    .drop-down-list {
        height: auto;
        max-height: 50vh;
        overflow-y: auto;
        left: 28px;
        width: 212px;
        top: 130px;
      }
    .container,
    .conatianer2 {
        max-width: 100%;
        margin: 0 auto;
        /* padding: 0 10%; */
    }
    .section-txt,
    .second-div {
        display: none;
    }
    .bottom-header {
        display: flex;
        justify-content: space-around;
        /* border: 2px solid red;    */
    }
    .first-div {
        width: 50%;
    }
    .third-div .login a,
    .sell-txt {
        font-size: 0.8rem;
    }
    .third-div .sell {
        min-width: 100px;
    }
    .sell-content {
        top: 40%;
    }
    .banner-img img {
        margin: 15px 0;
    }
    .catogrey-list {
        margin-left: 10px;
        column-gap: 1rem;
        row-gap: 0.5rem;
    }
    .mobile-card,
    .car-card,
    .bikes-card,
    .house-card {
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      gap: 10px;
      padding: 0 10px 10px;
    }
    
    .main-card {
      flex: 0 0 90%;
      width: auto;
      scroll-snap-align: start;
      margin-bottom: 0;
    }
  
    .main-card:last-child {
      margin-right: 15px;
    }

    ::-webkit-scrollbar {
      display: none;
    }

    ::-webkit-scrollbar-thumb {
      background: #888;
      border-radius: 2px;
    }

    .bef-footer-icon-div {
        gap: 10px;
        flex-wrap: nowrap;
    }
    .bef-footer-icon-div img {
        width: 20px;
        height: 30px;
    }
    .icon {
        padding: 3px;
    }
    .bef-footer-right-div {
        align-items: center;
        padding: 10px 0;
        margin-top: 15px;
    }
    .bef-footer-svg {
        display: none;
    }
    .bef-footer-sec {
        /* width: 100%; */
        padding: 15px 10px;
        flex-wrap: wrap;
    }
    .bef-footer-sec2 {
        display: grid;
        grid-template-areas: 
          "a b c d"
          "footer footer footer footer";
        gap: 20px;
    }
    .bef-footer-right-div {
        grid-area: footer;
        margin-top: 20px;
        text-align: center;
    }
    .bef-footer-icon-div {
        justify-content: center;
        gap: 15px;
        padding-right: 15px;
    }
    footer {
        padding: 1rem;
    }
}

/* Tablet Size */
@media (min-width:768px) and (max-width:1023px) {
    p{
        font-size: 0.8rem;
       }
       span,
       .phara p{
        font-size: 0.7rem;
       }
       .first-div,
       .second-div,.third-div {
        column-gap: 4px;
       }
       .third-div .sell-txt,
       .third-div .login a {
        font-size: 0.7rem;
       }
       h4 {
        font-size: 1rem;
        }
    .drop-down-list {
        left: 75px;
        width: 235px;
       }
    .section {
        display: flex;
        column-gap: 10px;
        flex-wrap: wrap;
        font-size: 0.9rem;
    }
    .section .txt-arrow-container {
        font-size: 0.9rem;
        display: flex;
        gap: 5px;
    }
    .section-txt {
       font-size: 0.8rem;
    }
    .catogrey-list {
        column-gap: 2rem;
        row-gap: 0.8rem;
    }
    .bed,
    .tub,
    .window {
        font-size: 0.7rem;
    }
    .bed img,
    .tub img,
    .window img
    {
        height: 20px;
        width: 16px;
    }
    .bef-footer-svg {
        width: 100px;
    }
    .footer-div{
        display: flex;
        justify-content: center;
    }
    .bef-footer-right-div {
        margin-left: 20px;
    }
}

/* 4k Size */
@media (min-width:2560px) {
    p{
     font-size: 1.5rem;
    }
    span,
    .phara p{
     font-size: 1rem;
    }
    h4 {
     font-size: 1.7rem;
    }
    .logo-txt {
     font-size: 2rem;
    }
    .drop-down-list {
     left: 255px;
     width: 310px;
    }
    .second-div {
     width: 60%;
    }
    .third-div .sell {
     width: 30%;
     padding: 0 70px;
    }
    .section-txt,
    .main-containt {
     font-size: 1.2rem;
    }
    .meter,
    .third-phara {
     font-size: 1.2rem;
     }
     .heading {
         font-size: 1.7rem;
     }
     .resize2 {
         width: 200px;
     }
     .bed,
     .tub,
     .window {
         font-size: 1.5rem;
     }
     .bed img,
     .tub img,
     .window img
     {
         height: 30px;
         width: 20px;
     }
 }