@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&family=Baloo+Bhaijaan+2:wght@400..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
/* body{
    height: 100vh;
    width: 100%;
    font-family: "Baloo 2", sans-serif;
    font-optical-sizing: auto;
    font-style: normal; 
} */

/* listing top section */
.listing-top{
    /* background-color: green; */
    /* height: 20vh; */
    width: 98%;
    margin:1rem auto;
}
.listing-top .top-title{
    justify-content: flex-end;
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* rowone */
.listing-top .row-one{

}
.row-one > ul{
   /* border: 1px solid black; */

    display: flex;
    flex-wrap: wrap;
    list-style: none;
    /* gap: .2rem; */
}
.row-one > ul > li{
    border: 1px solid gray;
    display: inline-block;  /* Makes each item adjust width to its content */
    white-space: nowrap;
    text-decoration: none;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    margin: 0 0.2rem 0.2rem 0 ;
}
li > a{
    color: black;
}
/* row two */
.listing-top .row-two{
margin-top: 0.4rem;
}
.row-two > ul{
    /* border: 1px solid black; */
    display: flex;
    list-style: none;
    /* gap: .2rem; */
}
.row-two > ul > li{
    border: 1px solid black;
    margin-right: 0.5rem;
    text-decoration: none;
    padding: 0.2rem 0.6rem;
}
li > a{
    color: black;
}

/* card section */
.card1{
    display: flex;
    /* align-items: center; */
    align-items: flex-start;
    justify-content: space-evenly;
    padding: 0.4rem;
    /* background-color: rgb(250, 250, 250); */
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
    /* border-bottom: 1px solid black; */
    transition: all ease-in-out 0.1s;
    border-bottom: 2px solid;
    border-image: linear-gradient(to right, #4B6A92 30%, #18afd3 50%) 1;
    &:hover{
        background-color: rgb(245, 245, 245);
        
    }
}

.card1 :hover {
    cursor: pointer;
}

.img-section {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 360px; /* Fixed width for consistency */
    height: 180px; /* Fixed height for consistency */
    border: 1px solid rgb(165, 164, 164);
    overflow: hidden; /* Ensures content stays within bounds */
    background-color: #f9f9f9; /* Optional: Add a background color */
    margin-right: 10px;
}

.img-section img {
    width: 100%; /* Image takes the full width of the container */
    height: 100%; /* Image takes the full height of the container */
    object-fit: contain; /* Keeps the aspect ratio intact */
    padding: 10px; /* Add padding for aesthetics */
    display: block; /* Ensures proper alignment */
    
}

.card1 .content-section{
    /* border: 2px solid black; */
    flex: 4;
    display: flex;
    flex-direction: column;
}
.card1 .content-section .title{
    font-size: 1.6rem;
    font-weight: 400;
}
.card .content-section .location{
    font-size: xx-large;
    font-weight: 400;
}
.content-section .direction-link > a{
    color: black;
    text-transform: capitalize;
    text-decoration: underline;
    &:hover{
        color: rgba(0, 0, 0, 0.479);
    }
}
.content-section > .detail{
    opacity: 0.6;
    font-size: 1.4vw;
}
.content-section .read-more a{
    color: black;
    text-decoration: underline;
    &:hover{
        color: rgba(0, 0, 0, 0.479);
    }
}
.content-section .buttons{
    margin-top: 0.6rem;
}
.content-section .buttons a button{
    background-color: #18afd3;
    color: white;
    border: none;
    padding: 0.6rem 2rem;
    margin: 0 .4rem;
    font-weight: 600;
    font-size: 1rem;
    border-radius: .2rem;
    &:hover{
        cursor: pointer;
        background-color: goldenrod;
        
    }
}

/* rating */
.card1 .rate-sec  {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin: 1rem;
    /* border: 2px solid black; */

}
.card1 .rate-sec .rating  {
    padding: 0 0.2rem;
        display: flex;
    align-items: center;
    border-radius:1.5rem;
    background: #ececec;
    overflow: hidden;
    
    box-shadow: 0 1px #CCC,
                0 5px #DDD,
                0 9px 6px -3px #999;
    
    unicode-bidi: bidi-override;
    direction: rtl;
  }
  .rating:not(:checked) > input{
    display: none;
  }
  
  /* - - - - - RATE */
  #rate {
    top: -65px;
  }
  #rate:not(:checked) > label {
    cursor:pointer;
    float: right;
    width: 24px;
    height: 30px;
    display: block;
    
    color: rgba(0, 135, 211, .4);
    line-height: 33px;
    text-align: center;
  }
  #rate:not(:checked) > label:hover,
  #rate:not(:checked) > label:hover ~ label  {
    color: rgba(0, 135, 211, .6);
  }
  #rate > input:checked + label:hover,
  #rate > input:checked + label:hover ~ label,
  #rate > input:checked ~ label:hover,
  #rate > input:checked ~ label:hover ~ label,
  #rate > label:hover ~ input:checked ~ label{
    color: rgba(0, 135, 211, .8);
  }
  #rate > input:checked ~ label ,    #ratethree > input:checked ~ label {
    color: rgb(0, 135, 211);
  } 
   .readmore-section a{
    margin-left: 0.4rem;
    color: black;
    &:hover{
        text-decoration: underline;

    }
  }


  /* responsive */
  @media only screen and (max-width: 675px) {
    /* rating */
.card1 .rate-sec {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin: 1rem;

}
.card1 .rate-sec .rating {
    
    /* padding: 5px 10px; */
        display: flex;
    align-items: center;
    border-radius: 1.5rem;
    background: #ffffff;
    overflow: hidden;
    
    box-shadow: 0 1px #CCC,
                0 5px #DDD,
                0 9px 6px -3px #999;
    
    unicode-bidi: bidi-override;
    direction: rtl;
  }

  .content-section .buttons a button{
   
    padding: 0.3rem 1.4rem;
    margin: 0 .4rem;
    font-weight: 400;
    font-size: .5rem;
    border-radius: .2rem;
    &:hover{
        cursor: pointer;
        background-color: rgb(51, 51, 168);
        
    }
}
}
  


.social-media-section{
    font-size: 2rem;
}