.article-container {
    cursor:pointer;
    position: relative;
    width: 100%;
    border-radius: 8px;
}

.article-img {
    cursor:pointer;
    display: block;
    border-radius: 8px; 
}

.overlay {
    cursor:pointer;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    padding-top: 30px;
    box-sizing: border-box;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7)); 
    color: #fff; /* Text color */
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    text-shadow: 0 1px 0 black;
}

.article-title {
    margin: 0;
}


 /* Code by : Suraj Gharpankar -> Job page footer CSS code  added */
 #pills-connect .social_media_links .social-links {
    list-style-type: none;
    margin-top: 20px;
    margin-bottom: 22px;
    text-align:center;
  
  }
  
  #pills-connect .social_media_links .social-links li {
    margin-right: 2px;
    display: inline-block;
  }
  
  #pills-connect .social_media_links .social-links li a {
    padding-top: 5px;
    width: 40px;
    text-align: center;
    line-height: 29px;
    height: 40px;
    border: 1px solid #0C9;
    border-radius: 50%;
     color: #007bff; 
    /*color: #ffffff;*/
  
    display: inline-block;
    font-size: 18px;
  
  }
  
  #pills-connect .social_media_links .social-links li a:hover {
    /*color: #ffffff;*/
    /*border-color: #3a60d0;*/
    /*background-color: #3a60d0;*/
    
    color: #ffffff;
    border-color: #0C9; /* #ffffff; */
    background-color: #007bff;
  }
  /* Footer Background */
  #pills-connect #bgclass {
    background-color: #4e73df;
  }
  
  @media screen and (max-width:600px) and (min-width:320px) {
    #pills-connect .mymb{
      padding-left: 1rem !important;
    }
  }

    /* Code :  Suraj Gharpankar : 19-01-22 */
    @media screen and (max-width:550px) and (min-width:320px) {
      #pills-connect .mymb{
        padding-left: 1rem !important;
        margin-right: 28px;
  
      }
    }
    @media screen and (max-width:2342px){
      .mymailalignright{
        text-align: right;
      }
      }
  
    @media screen and (max-width:2342px){
        .mymailalignleft{
          text-align: left;
        }
    }
    
    @media (min-width:320px) {
      .mymailaligncenter{
        text-align: center;
    
      }
    }
       /* Code Ends:  Suraj Gharpankar : 19-01-22 */
  
   /* Code Ended by : Suraj Gharpankar -> Job page footer CSS code  added */
  











/*
--------------------------------------------------
Local styles for form page.
Mobile-first design
By Amrut Todkar
--------------------------------------------------
*/



@media (min-width: 800px) {
	/*#top-container{*/
	/*background-image: url("../images/desktop-short.jpg");*/
	/*background-repeat: no-repeat;*/
	/*background-size: contain;*/
	/*background-attachment: fixed*/
	/*}*/
}
#main-search-container{
	width: 100%;
	border: 1px solid #bbb;
	background-color: #fff
}

.border-danger{
	border: 2px solid red;
}

.text-danger{
	color: yellow;
}

.job_card_section{
    position: sticky;
    /*height: 39rem;*/
    /* top: 0; */
    /*overflow-y: auto;*/
    left: 21rem;
    
}
.scrollable-element {
  scrollbar-width: thin;
}
.search_card_section{
     position: sticky;
    height: 32rem;
    /* top: 0; */
    overflow-y: auto;
    /*left: 21rem;*/
}
.btn_back_home{
    margin-left:3rem;
    padding:0.5rem;
}
.back_btn_block{
        display:block;
    }
    
/* .job_search_web{
    max-width: 326px;
} */
.btn_whatsapp:hover li{
    display:inline!important;
}

/* Code Started by : Suraj Gharpankar -> Search Input Box Width --> */
.job_search_web{
	/*max-width: 445px;*/
	max-width: 80%;
}
/* Code Ended by : Suraj Gharpankar -> Search Input Box Width --> */


.hidden{
	display: none;
}

.btn-back{
	min-width: 80px;
}

.btn-next{
	min-width: 100px;
}
.form-group{
	position: relative;
}

#main-search-container{
	background-color: #fff;
	z-index: 22;
}

/*Sameesh*/
.current {
    
    color: white;
    background: #007bff;
}
.page-link:hover {
    
    color: white;
    background: #007bff;
}
.next:hover i {
     display: inline!important; 
}
.prev:hover i {
     display: inline!important; 
}
.fas a:hover i {
     display: block!important; 
}

#pagin li {
  display: inline-block;
}


/* Code by : Suraj Gharpankar -> Job page modal CSS code --> */

.text_color{
	color: black;
	text-decoration: none;
	
}

.custombtn {
	width: 160px !important;
    height: 40px;  
    text-align:center;
	
}

@media screen and (max-width:600px) and (min-width:300px) {
	.custombtn {
		width: 9rem !important;
		height: 3rem;
		text-align: center;
	}
}

/* @media screen and (max-width:600px) and (min-width:300px) {
	.mymodal{
	  width:374px;
	  height: auto;
	  text-align: center;
	}
  } */

  .mymodaltext{
	color:white;
 	padding-bottom: 5px;
  }

  @media screen and (max-width:600px) and (min-width:300px) {
	.mymodaltext{
		margin-left: 0rem;
		font-size: 1.5rem;
	}
  }

  .myloginbtn{
	background-color: #f08a47;
	width: 6rem;
	font-size: 1.2rem;
	font-weight: 600; 
  /* add this to chanage color from black to white */
  color: rgb(255, 255, 255);

  }

  .myloginbtn:hover{
    text-decoration: none;
    /* add this to chanage color from black to white */
    color: rgb(255, 255, 255);
  }


  
  @media screen and (max-width:600px) and (min-width:300px) {
	.myloginbtn{
		margin-left: 0rem;
	}
  }

  /* Code Ended by : Suraj Gharpankar -> Job page Modal CSS code */

/* Amruta */
.job_modal_logged{
	justify-content: space-evenly;
}
/* .job_modal_user_filter{
	margin-left: 5rem;
} */
.btn_filter_fresher{
	padding: 7px 20px;
}
.hot_job_badge{
	right:50%;
	transform: translate(50%,0%);
}
.new_job_badge{
	right:50%;
	transform: translate(50%,0%);
}
/* job page button code by Amruta */
.job_know_more_btn{
	width:7rem;
	padding :0.1rem 0px;
  border-color: white;
  text-decoration: underline;
}
.job_card_body{
	padding: 1.25rem 1.25rem 0.7rem 1.25rem;
}    
/* Code by : Suraj Gharpankar -> Job page modal CSS code --> */

.custombtn {
	width: 160px !important;
    height: 40px;  
    text-align:center;
	
}

@media screen and (max-width:600px) and (min-width:300px) {
	.custombtn {
		width: 9rem !important;
		height: 3rem;
		text-align: center;
	}
}

/* @media screen and (max-width:600px) and (min-width:300px) {
	.mymodal{
	  width:374px;
	  height: auto;
	  text-align: center;
	}
  } */

  .mymodaltext{
	color:white;
 	padding-bottom: 5px;
  }

  @media screen and (max-width:600px) and (min-width:300px) {
	.mymodaltext{
		margin-left: 0rem;
		font-size: 1.5rem;
	}
  }


  
  @media screen and (max-width:600px) and (min-width:300px) {
	.myloginbtn{
		margin-left: 0rem;
	}
  }

  /* Code Ended by : Suraj Gharpankar -> Job page Modal CSS code */

  /* Card */
  @media screen and (max-width:600px) and (min-width:300px) {
    .my320px{
      margin-left: -1.3rem;
    }
    }
    /* Card */

@media (max-width: 768px){
	/* #main-search-container{
		/*width: 60%;*/
	/*} */
	.job_card_section{
	    margin-top:4rem;
	    position: inherit;
        height: auto;
	}
	.btn_back_home{
        margin-left:3px;
        padding:6px;
    }
    .back_btn_block{
        display:none;
    }
		.hot_job_title{
			padding-top: 3rem;
		}
	

}

 
/* body{
    margin: 0;
    padding: 0;
    font-family: "montserrat",sans-serif;
    background: #f1f1f1;
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
  } */
  
  .share-button{
    width: 160px;
    height: 30px;
    background: #dfe6e9;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: .9s linear;
    
  }
  
  .share-button:hover{
    transform: scale(1.1);
  }
  
  .share-button span{
    position: absolute;
    width: 100%;
    height: 100%;
    background: #ffffff;
    color: #000000;
    text-align: right;
    font-size: 20px;
    line-height: 30px;
    z-index: 999;
    transition: .4s linear;
    border-radius: 30px;
  }
  
  .share-button:hover span{
    transform: translateX(-100%);
    transition-delay: .2s;
  }


  .share-button a{
    flex: 1;
    font-size: px;
    /* color: #2d3436; */
    text-align: center;
    transform: translateX(-100%);
    opacity: 0;
    transition: 0.3s linear;
  }
  
  .share-button:hover a{
    opacity: 1;
    transform: translateX(0);
  }


  .share-button a:nth-of-type(1){
    transition-delay: 1s;
  }
  
  .share-button a:nth-of-type(2){
    transition-delay: 0.8s;
  }
  
  .share-button a:nth-of-type(3){
    transition-delay: 0.6s;
  }
  
  .share-button a:nth-of-type(4){
    transition-delay: 0.4s;
  }

  .share-button a:nth-of-type(5){
    transition-delay: 0.2s;
  }