body {

    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.main-content {
    display: flex;
    flex-direction: column;
}

/* .page-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
} */

.page-content {
  display: grid;
  grid-template-columns: 20rem 1fr;
}
.container{
  margin-left: 0px !important;
}

.filterBtn button{
    width : 90%;
    border-radius: 25px;
    background-color: #33A93E;
    border : 0px;
    color : white;
    font-size : 20px;
    position : fixed;
    bottom : 10px;
    display : flex;
    justify-content: center;
    align-items: center;
}
.filterBtn{
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.filter-icone{
    fill: #ffff;
    width: 27px;
    height: 27px;
    padding-right: 5px;
}

.rate{
  width: 300px;
}

.wrapper {
position: relative;
display: inline-block;
border: none;
font-size: 12px;
transform: translateX(-50%);
width: 100%;
/* left: 25%; */
}

.wrapper input {
border: 0;
width: 1px;
height: 1px;
overflow: hidden;
position: absolute !important;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
opacity: 0;
}

.wrapper label {
position: relative;
float: right;
color: #C8C8C8;
}

.wrapper label:before {
margin: 5px;
content: "\f005";
font-family: FontAwesome;
display: inline-block;
font-size: 1.5em;
color: #ccc;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}

.wrapper input:checked ~ label:before {
color: #FFC107;
}

.wrapper label:hover ~ label:before {
color: #ffdb70;
}

.wrapper label:hover:before {
color: #FFC107;
}
.socialNetworks{
    display: none;
}

@media screen and (min-width: 600px) {
    .page-content {
        flex-direction: row;
        grid-template-rows: 30% 70%;
    }

    

    /* .w-1/5 .w-4/5 {
        width: 70%;
    } */
}
@media screen and (max-width: 599px) {
  .page-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
  
  .leftSide{
        display: none;
    }
    .py-20 {
    padding-top: 2rem !important;
    padding-bottom: 3rem !important;
    }
    .filterBtn{
        display: flex;
    }
    .socialNetworks{
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 2rem;
    }
    
    .socialNetworks .content {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: 15px;
      height: 100px;
      position: relative;
      overflow: hidden;
      border-radius: 14px;
    }
    .socialNetworks .basic-marquee {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      width: 100%;
    }
    
    .socialNetworks .basic-marquee svg {
      width: 40px;
    }
    .socialNetworks .basic-marquee button {
      background-color: transparent;
      border: none;
      padding: 0;
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .socialNetworks .cls-7 {
      fill: #0a66c2;
    }
    
    .socialNetworks .cls-8 {
      fill: #fff;
    }
    
    .socialNetworks .cls-11 {
      fill: #1da1f2;
    }
    
    .socialNetworks .cls-12 {
      fill: #fff;
    }
    
 
      .input-container{
        display: flex !important;
      }   
      .job-list-header{
        display: none;
      }
      #navbar-collapse ul{
        padding-left: 6px;
      }

      #navBar{
        display: flex;
        flex-direction: row-reverse !important;
      }
      .logo img{
        width: 150px !important;
      }

      #profile{
        display: none !important;
      }
     
      .userLogin{
        display: flex !important;
      }
}

/* search button */

.input-container {
  position: relative;
  display: none;
  align-items: center;
  flex-direction: row-reverse;
}

.input-container .input {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  border: none;
  outline: none;
  padding: 18px 16px;
  background-color: transparent;
  cursor: pointer;
  transition: all .5s ease-in-out;
}

.input-container .input::placeholder {
  color: transparent;
}

.input-container .input:focus::placeholder {
  color: rgb(131, 128, 128);
}

.input-container .input:focus,.input:not(:placeholder-shown) {
  background-color: #fff;
  border: 1px solid #33A93E;
  width: 65%;
  cursor: none;
  padding: 18px 45px 18px 5px;
}

.input-container .icon {
  position: absolute;
  right: 0;
  height: 35px;
  width: 35px;
  background-color: #fff;
  border-radius: 99px;
  z-index: -1;
  fill: #33A93E;
  border: 1px solid #33A93E;
}

.input-container .input:focus + .icon,.input:not(:placeholder-shown) + .icon {
  z-index: 0;
  background-color: transparent;
  border: none;
}



.star-container {
  display: flex;
  width: 350px;
  flex-direction: row-reverse;
  justify-content: left;
  position: relative;
}

.star:before {
  content: "\f006";
  font-family: fontAwesome;
  font-size: 20px;
  position: relative;
  display: block;
  color: #f8680f;
}

.star:after {
  content: "\f005";
  font-family: fontAwesome;
  font-size: 14px !important;
  position: absolute;
  top: 5px;
  padding-left: 3.5px;
  color: #ff9b1a;
  opacity: 0;
}
.star:hover:after,
.star:hover ~ .star:after,
.star.star__checked:after,
.star.star__checked ~ .star:after{
  opacity: 1;
}

.userLogin{
  display: none;
  justify-content: space-between;
}

.userLogin button {
  font-family: "ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
  font-size: 15px;
  padding: 1em 2.7em;
  font-weight: 500;
  background: #33A93E;
  color: white;
  border: none;
  position: relative;
  overflow: hidden;
  border-radius: 0.6em;
  cursor: pointer;
  width: 13rem;
  height: 3rem;
}

.userLogin .gradient {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 0.6em;
  margin-top: -0.25em;
  background-image: linear-gradient(to right top, #33a93e, #33a93e, #33a93e, #33a93e, #33a93e);
}

.userLogin .label {
  position: relative;
  top: -1px;
}



.userLogin button:active {
  transform: scale(0.97);
}

.goBack{
  padding-top: 20px;
  margin-left: 50px;
  display: none;
  position: sticky;
  top: 7vh;
}