.body-container{
  padding:0 !important;
}
section{
  padding:50px 0;
}

.primary-color{
  color: #191a51 !important;
}
.secondary-color{
  color: #702C63 !important;
}
.red-color{
  color: #d7094a !important;
}
.blue-color{
  color: #5f64fe !important;
}
 .roboto{
        font-family: Roboto, sans-serif !important;
    }
  /* ----------------------------------------- MAIN BODY STYLING------------------------------ */
    /* used bu various text/descriptions on page */
    body{
        color: #474874 ;
        font-family: Roboto, sans-serif;
        font-size: 16px;
        line-height: 1.625em;
    }

    /* ----------------------------------------- HEADINGS ------------------------------ */
    h1,h2,h3{
     font-weight: 700 !important;
    }
    h1,h2,h3,h4,h5,h6{
        font-family:Roboto !important;
        color: #191a51 !important;
        line-height: 1.3125em !important;
       letter-spacing: -0.5px !important;
    }

   
    
    ul li{
        color: #474874;
        font-family: Roboto, sans-serif;
        font-size: 18px;
        line-height: 1.5;
        list-style-type: none;
        margin-bottom: 15px;
      }

  .cp-btn {
      border:none;
      color:white;
      border-radius: 32.5px !important;
      -webkit-box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .15);
      box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .15);
      display: inline-block;
      font-size: 16px;
      font-weight: 500;
      letter-spacing: 1px;
      line-height: 1;
      overflow: hidden;
      padding: 16px 32px;
      text-transform: uppercase;

    
      /* bg styling  */
      background-color: #5f63ff;
      background-image: linear-gradient(-126deg, #5f63ff, #d653dd 51%, #d8094a);
      display: inline-block;
      position: relative;
      -webkit-transform: perspective(1px) translateZ(0);
      transform: perspective(1px) translateZ(0);
      -webkit-transition-duration: .3s;
      -o-transition-duration: .3s;
      transition-duration: .3s;
      -webkit-transition-property: color;
      -o-transition-property: color;
      transition-property: color;
      vertical-align: middle;

  }
    .cp-btn:hover{
      background-color: #5f63ff;
     -webkit-transform: perspective(1px) translateZ(0); 
    transform: perspective(1px) translateZ(0);
    -webkit-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: color;
    -o-transition-property: color;
    transition-property: color;
      background-image: none;
    
    }
    .cp-btn:before {
    background: #5f63ff;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: transform;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    -o-transition-property: transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    -webkit-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    z-index: -1;
}

.btn-purple{
    background-color: #712c63;
    border: none;
    display: block;
    padding: 10px;
    color: #fff;
    border-radius: 5px;
    font-weight:500;
    cursor:pointer;
  
}
@media screen and (min-width: 991px) {
    h1 {
        font-size: 60px !important;
        margin-bottom: 15px;
       
    }
    h2{
        font-size: 46px !important;   
       
    }
    
    /* two variation of h3 with different font sizes */
    h3{
        font-size: 34px !important;
        
    }
    /*used in cases */
    .h3{ 
        font-size: 32px;
        letter-spacing: -1px;
        line-height: 1.3125em;
    }

    p{
        font-size: 20px;
        font-size: 16px;
        line-height: 1.625em;
        color: #474874;
        font-weight: 400;
        font-family: Roboto, sans-serif;
    }
}
@media screen and (max-width: 512px) {
  h1{
    font-size:2rem !important;
  }
  h2{
    font-size:1.7rem !important;
  }
  h3{
    font-size:1.3rem !important; 
  }
   h4{
    font-size:1.2rem !important; 
  }
    ul li{
         font-size: 16px;
   
    }


}
.feature {
    display: flex;
    padding: 20px;
    align-items: center;
    gap: 19px;
    align-self: stretch;
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0px 23px 40px 7px rgba(64, 62, 62, 0.05);
    margin:10px 0;
}

.feature .svg {
    background: rgba(76, 175, 80, 0.11);
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 70px
}

.feature h6 {
    color: #1A1952;
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: Roboto !important;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
    /* 20px */
}

.feature p {
    color: var(--grey-grey-700, #616161);
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 143%;
    /* 22.88px */
}
@media screen and (max-width: 991px) {
    .feature {
        align-items: flex-start !important;
        flex-direction: column;
    }
}

.form-control-label {
    margin-bottom: 0
}
.form-title{
color: #1A1952;
text-align: center;
font-family: Roboto;
font-size: 16px !important;
font-style: normal;
font-weight: 500 !important;
line-height: 24px; /* 150% */
}
.form-greeting{
color: var(--grey-grey-700, #616161);
text-align: center;
font-feature-settings: 'liga' off, 'clig' off;
font-family: Roboto;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 130%; /* 18.2px */
}
input,
textarea,
button {
    padding: 8px 15px;
    border-radius: 5px !important;
    margin: 5px 0px;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}
input{
    font-size: 1rem;
    line-height: 1.5rem;
    border: 1px solid #ccc;
    
}
form button{
  background:#712c63;
   border: 1px solid #712c63;
    color: #fff;
    padding: 6px 16px;
    font-size: 0.938rem;
    min-width: 64px;
    box-sizing: border-box;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    line-height: 1.75;
    border-radius: 4px;
    letter-spacing: 0.029rem;
    text-transform: uppercase;
  
}
form button:hover{
  opacity:0.8;
}

input:focus,
textarea:focus {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: 1px solid #712c63;
    outline-width: 0;
    font-weight: 400;
      font-family: 'Roboto', sans-serif;
}



button:focus {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    outline-width: 0
}
form p{
     color: #1A1952;
    font-size: 13px;
    font-weight: 400;
    line-height: 21px;
    text-align: center;
   font-family: Roboto;
}

form p a{
    display: inline-block;
    overflow-wrap: break-word;
    padding: 0 5px;
    text-decoration: underline;
    color: inherit;
    font-weight: 700;
    font-family: Roboto;
}
form p a:hover{
    text-decoration: none;
   color: inherit;
}
form .sub-text{
  color: var(--grey-grey-700, #616161);
  text-align: center;
  font-family: Roboto;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 23px; /* 153.333% */
}
form .sub-text span{
  color: #1A1952;
  font-family: Roboto;
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  line-height: 23px;
  text-decoration-line: underline;
}
/* header */


.header-wrapper {
  background-color: #fff;
  width: 100%;
  border-bottom: 1px solid #eeeeee;
/*   position: fixed; */
  top: 0;
  z-index: 1;
}
.header {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 15px;
  z-index: 1000;
  max-width: 1536px;
  margin: auto;
}

.header .logo {
  flex: 0 0 auto;
}



.header .buttons {
  display: flex;
  flex: 0 0 auto;
}

.header a {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-left: 10px;
}

.header a.clientpoint {
  background: #ffffff;
  /* Gray/300 */

  border: 1px solid #d0d5dd;
  /* Shadow/xs */

  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  border-radius: 4px;
  color: #344054;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
}

.header a img {
  height: 20px;
  width: auto;
  margin-right: 8px;
}

.header a.login {
  /* Base/White */

  background: #ffffff;
  /* Gray/300 */

  border: 1px solid #d0d5dd;
  /* Shadow/xs */

  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  border-radius: 4px;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #344054;
}

.header a.signup {
  background: #712c63;
  border: 1px solid #712c63;
  /* Shadow/xs */

  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  border-radius: 4px;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  color: #ffffff;
  line-height: 24px;
}
.header a.signup:hover{
color: #fff;
}

.header a i {
  margin-right: 10px;
}
.header a:hover {
  text-decoration: none !important;
}

.header a {
  text-decoration: none !important;

  color: #191a51;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: ease-in-out all 0.3s;
  transition: all 0.3s ease-in-out;
  text-decoration: none;
}


@media screen and (max-width: 768px) {

  .header a.clientpoint {
    display: none;
  }
}


@media screen and (max-width: 500px) {
 
  .header {
    padding: 10px 15px;
  }
  .header .logo img {
    height: 8vw;
  }
  .header a.login,
  .header a.signup {
    font-size: 14px;
  }
  

  .header a {
    padding: 6px 12px;
  }
}

/* ------------------------------------------------------ */

main{
  background:url('https://go.clientpoint.me/hubfs/raw_assets/public/HR%20Job%20Post/bg.png');
  background-size: 100% 100%;
}


  .main-card{
    border-radius:20px;
    position: relative;
   
    width: 100%;
  }
  .main{
      background: #fff;
      border-radius: 0 0 20px 20px;
      box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .25);
  }


  }
  .main .left-column {
    border-radius: 0px 0px 20px 20px;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  }
  .main .right-column {
    border-radius: 0px 0px 20px 20px;
    background: var(--grey-grey-50, #FAFAFA);
  }
  .profiles{
    margin-top:-60px;
  }
/*  profiles */
.profiles .profile-image img{
     width: 100%;
  height: 100% !important;
  object-fit: cover; /* Ensures the image covers the entire div while maintaining aspect ratio */
}
.profiles .profile-image svg{
  border-radius: 128px;
   width: 87px;
  height: 87px;
  flex-shrink: 0;
}
.profiles h6{
      color: #1A1952 !important;
      font-family: Roboto !important;
      font-size: 18px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
}
.profiles p.tagline{
  color: var(--grey-grey-500, #9E9E9E);
font-family: Roboto;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.profiles p.title{
color: var(--grey-grey-800, #424242);
font-family: Roboto;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}

.profiles .profile-image{
      width: 87px;
  height: 87px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border:2px solid white;
} 



/* job description */

.job h6{
      color: #1A1952 !important;
      font-family: Roboto !important;
      font-size: 16px;
      font-style: normal;
      font-weight: 600;
      line-height: normal;
}

.job-description p{
    color: var(--grey-grey-700, #616161);
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px; /* 150% */
}
.company .company-name{
    color: var(--grey-grey-800, #424242);
    font-family: Roboto;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.company .tagline{
  color: var(--grey-grey-600, #757575);
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.company .web-link p span:nth-child(2){
  color: var(--grey-grey-800, #424242);
  font-family: Roboto;
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;

}
.company .web-link p span:nth-child(3) a{
  color: var(--primary-main, #712C63);
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;

}
.company .about p:nth-child(1){
  color: var(--grey-grey-900, #212121);
  font-family: Roboto;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.company .about p:nth-child(2){
  color: var(--grey-grey-700, #616161);
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 21px; /* 150% */
}
@media screen and (max-width: 767px) {

  .main .right-column{
    background:#fff;
  }
}