/* @import url('http://example.com/example_style.css'); */

:root{
  --txt-primary: #EDF2F7; /**for paragprahs**/
  --txt-secondary:#6C737F; /****for subs and descriptions***/
  --txt-tertiary:#338DC6; /*******optional*******/
  --bg-default:#0A081F; /******user for background****/
  --bg-paper:#16142A; /**for cards bg**/
  --bg-paper-tertiary:#222035; /***for cards bg***/
  --blue:#0070B8;
  --blue-dark:#005A93;
  --blue-light:#80B7DB;
  --teal:#00B4AD;
  --teal-dark:#00908A;
  --pink:#D31566;
  --pink-dark:#A91152;
  --pink-light:#DC4485;
  --sand:#FDD475;
  --violet:#512873;
  --neutral-50:rgba(237, 242, 247, 0.4);
  --neutral-100:rgba(237, 242, 247, 0.3);
  --neutral-200:rgba(237, 242, 247, 0.2);
  --neutral-300:rgba(237, 242, 247, 0.1.5);
  --neutral-400:rgba(237, 242, 247, 0.1);
  --white:#fff;
  --font-xxlarge:48px;
  --font-xlarge:40px;
  --font-large:32px;
  --font-medium:24px;
  --font-regular:20px;
  --font-small:16px;
  --font-xsmall:14px;
  --font-roboto:'Roboto', sans-serif;
  --font-montseratt: 'Montserrat', sans-serif;
  
}
/*****************************************/
/* Body  */
/*****************************************/
body{
    min-width: 1240px !important;
    margin: 0 auto !important;
    display: flex !important;
    color: var(--txt-primary);
    background: var(--bg-default);
    align-items: center;
    height: 100vh;
    display:flex;
  flex-direction:column;
}
.membership_body{
  margin:0 auto;
  width:480px;
  display:flex;
  flex-direction:column;
  font-family:var(--font-roboto);
  padding:24px;
  gap: 1rem;
  justify-content: center;
  background:#16142a;
  height:auto;
  border-radius: 8px;
  border: 1px solid rgb(255 255 255 / 15%);
  box-shadow: 0 12px 12px rgb(255 255 255 / 5%);
 
}
.input:disabled{
 background-color:#0A081F !important;
}
.membership_body h1{
  font-weight:500;
}
.archax-logo{
    display: flex;
    justify-content: center;
  padding-top: 48px;
    padding-bottom: 24px;
}
.no-list{
  list-style-type:none !important;
    padding-left: 0;
  margin-top:0;
}
.hs-error-msgs > li{
  /*background:rgb(220 68 133 / 15%);*/
  color: var(--pink);
  font-size: 12px !important;
  padding: 0 8px !important;
  border-radius: 4px;
  padding-top: 2px !important;
}
.hs-form-field{
  display:flex;
  flex-direction:column;
  color:var(--txt-primary) !important;
  position:relative;
}
.hs-login-widget-show-password,
#hs_login_reset{
  color:var(--blue-light);
  font-size:14px;
}
#hs-login-widget-remember,
#hs-login-widget-remember
{
  color:var(--txt-primary) !important;
}
input[type="text"],
input[type="password"],
input[type="text"]:-webkit-autofill,
input[type="password"]:-webkit-autofill
{
  font-size: 16px !important;
  padding: 16px 10px;
  color:var(--txt-primary) !important;
  border:1px solid rgb(45, 55, 72);
  background:transparent;
  border-radius:8px;
  outline:none !important;
  margin-top:8px;
  box-shadow: 0 0 0 1px rgb(45, 55, 72);
}
input[type="password"]{
  padding-right:150px;
}
input[type="text"]:hover,
input[type="password"]:hover,
input[type="text"]:-webkit-autofill:hover,
input[type="password"]:-webkit-autofill:hover{
background-color:rgb(255 255 255 / 2%);
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="text"]:-webkit-autofill:focus,
input[type="password"]:-webkit-autofill:focus
{
  border:1px solid var(--blue);
  box-shadow: 0 0 0 1px var(--blue);
}


label{
  padding-top:16px;
}
label[for="hs-login-widget-remember"]{
  font-size:14px;
}
.txt-link-1{
  color:var(--blue-light) !important;
  text-decoration:none;
}
.form-input-error{
  border-color:var(--pink) !important;
}
.form-input-validation-message{
  margin-bottom:0 !important;
}
.field-error{}
.field-email{}
.field-password{
  position:relative;
}
.hs-login-widget-show-password
{
  position:absolute;
  right:16px;
  top: 63px;
  text-decoration:none;
  color:rgb(255 255 255 / 28%) !important;
}
.hs-reset-widget-show-password{
   position:absolute;
  right:16px;
  top: 61px;
  text-decoration:none;
  color:rgb(255 255 255 / 28%) !important;
}
.field-remember{
  display:flex;
  flex-direction:row;
  align-items: center;
  padding-top: 4px;
  gap:0.5rem;
  padding-bottom:16px;
}
#hs-login-widget-remember{
  position:relative;
  top:8px;
}
#hs_login_reset{
  text-decoration:none;
  padding-bottom: 24px;
  position: absolute;
    bottom: 67px;
    right: 0;
}
input[type="submit"]{
  width:100%;
  background:var(--blue);
  font-size:16px;
  color:var(--txt-primry);
  outline:0;
  padding:16px;
  border-radius:8px;
  margin-top:24px;
  border:none;
}
input[type="submit"]:focus,
input[type="submit"]:hover
{
  opacity:0.7;
  cursor:pointer;
}
form{
  position:relative;
}

.info-title{
  
}
.txt-subtle-1{
  color:#808080;
  font-size:14px;
  margin-bottom:4px;
}
.form-input-error{
  border-color:var(--pink) !important;
  color:var(--pink) !important;
}
/******************************/
/* Headings and title   */
/******************************/

/*****************************************/
/* Text Properties  */
/*****************************************/
.txt-primary{
  color:var(--txt-primary) !important;
}
.txt-secondary{
  color:var(--txt-secondary) !important;
}
.txt-tertiary{
  color:#338DC6;
}
.txt-link{
  color:#0070B8 !important;
  font-weight:bold;
  text-decoration:underline !important;
  font-size:initial !important;
}
.txt-blue{
  color:var(--blue) !important;
}
.txt-blue-light{
  color:var(--blue-light) !important;
}
.txt-teal{
  color:var(--teal);
}
.txt-sand{
  color:#FDD475;
}
.txt-pink{
 color:#D31566;
}
.txt-violet{
  color:#512873;
}
.txt-white{
 color:var(--white) !important;
}
.txt-black{
 color:#000;
}
.txt-default{
  color:var(--bg-paper) !important;
}
.txt-default:hover{
  opacity:0.5;
  cursor:pointer;
}
.txt-neutral-grey-50{
  color:Fvar;
}
.txt-neutral-grey-100{
  color:F5F5F5;
}
.txt-neutral-grey-200{
  color:EEEEEE;
}
.txt-neutral-grey-300{
  color:E0E0E0;
}
.txt-neutral-grey-400{
  color:BDBDBD !important;
}
.txt-neutral-grey-500{
  color:9E9E9E !important;
}

/*****************************************/
/* Font-family  */
/*****************************************/
.txt-roboto{
  font-family:var(--font-roboto);
}
.txt-montserat{
   font-family:var(--font-montseratt);
}
.underline{
  text-decoration:underline;
}
/*****************************************/
/* Buttons Properties    */
/*****************************************/
.btn-wrapper{
  display:flex;
  padding-top:24px;
  padding-bottom:24px;
  justify-content: center;
  gap:1rem;
  flex-wrap: wrap;
}
.btn{
  font-family:var(--font-montseratt);
  text-decoration:none;
  border-radius:6px;
  padding: 12px 24px;
  border-color:transparent;
  outline:0;
  font-weight:bold;
  /*transition: background-color 0.3s ease;*/
  transition: opacity 0.3s ease;
  box-shadow: 2px 2fpx 6px rgb(0 0 0 / 10%);
  /*margin-right: 24px;*/
  font-size: 16px;
  
}
/******btn for cta******/
.btn-cta{
  font-family:var(--font-montseratt);
  text-decoration:none;
  border-radius:6px;
  padding: 12px 24px;
  border-color:transparent;
  outline:0;
  font-weight:bold;
  /*transition: background-color 0.3s ease;*/
  transition: opacity 0.3s ease;
  box-shadow: 2px 2fpx 6px rgb(0 0 0 / 10%);
  /*margin-right: 24px;*/
  font-size: 16px;
  min-width:200px;
}
.btn:hover,
.btn-cta:hover
{
  outline:0;
  text-decoration:none;
   cursor:pointer;
}

.fill-primary{ /*gradient-blue*/
  background-color:var(--blue) !important;
  background-image: -webkit-gradient(linear, left top, right top, color-stop(13%, #338dc6), color-stop(92%, var(--blue)));
  background-image: linear-gradient(90deg, #338dc6 13%, var(--blue) 92%);
  color:var(--white)!important;
}
.fill-primary-blue{ /*blue*/
  background-color:var(--blue) !important;
  color:var(--white)!important;
}
.fill-pink{
  background-color:#D31566 !important;
  color:var(--white)!important;
}
.fill-teal{
  background-color:#00B4AD !important;
  color:var(--white)!important;
}

.fill-violet{
  background-color:#512873 !important;
  color:#fff;
}
.fill-white{
  background-color:#fff;
  color:#000;
}
.fill-black{
  background-color:#000 !important;
  color:#fff;
}
.fill-sand{
  background-color:#FDD475 !important;
  color:#13103e;
}
.fill-teal:hover, .fill-teal:focus,
.fill-primary:hover,.fill-primary:focus,
.fill-violet:hover, .fill-violet:focus,
.fill-white:hover, .fill-white:focus,
.fill-black:hover, .fill-black:focus, 
.fill-pink:hover,.fill-pink:focus
{
  border-color:transparent !important;
outline:0 !important;
  opacity:0.8 !important;
 
}
/***Button Text**/
.btn-txt{
  padding: 12px 24px;
  text-decoration:underline;
  transition: opacity .3s ease;
  font-size:16px;
}
.btn-txt:hover
{
  outline:0;
  opacity:0.8;
   cursor:pointer;
}
.btn:disabled {
    cursor: not-allowed !important;
    opacity: 0.7;
    border: transparent !important;
    pointer-events:all;
  background:rgba(255, 255, 255, 0.12) !important;
  color:rgba(108, 115, 127, 0.62) !important;
}
.outline-white{
  background-color:transparent !important;
  color:#EDF2F7 !important;
  border:1px solid #EDF2F7;
}
.outline-white:hover{
  background-color:#EDF2F7 !important;
  color:#0A081F !important;
  cursor:pointer;
}
.outline-blue-white{
  background-color:transparent !important;
  color:#EDF2F7 !important;
  border:1px solid #0070B8;
  transition: all 0.3s ease; 
}
.outline-blue-white:hover{
  background-color:#0070B8 !important;
  color:#FFF !important;
  cursor:pointer;
  border-color:transparent !important;
}
/*****************************************/
/* Align Properties    */
/*****************************************/
.align-left{
  justify-content:flex-start;
}
.align-center{
  justify-content:center;
}
.align-right{
  justify-content:flex-end;
}
.align-items-left{
  align-items: flex-start;
}
.align-items-center{
  align-items: center;
}
.align-items-right{
  align-items: flex-end;
}
.space-between{
    justify-content: space-between;
}
.space-around{
  justify-content: space-around;
}
.space-evenly:{
   justify-content:space-evenly;
}
/*****************************************/
/* Backgrounds   */
/*****************************************/

.bg-primary{
  background-color:var(--bg-default);
}
.bg-secondary{
  background-color:var(--bg-paper);
}
.bg-tertiary{
  background-color:var(--bg-paper-tertiary);
}
.bg-blue{
  background-color:var(--blue);
}
.bg-blue-light{
  background-color:var(--blue-light);
}
.bg-teal{
  background-color:#00B4AD;
}
.bg-sand{
  background-color:#fff;
}
.bg-pink{
  background-color:#fff;
}
.bg-violet{
  background-color:#512873;
}
.bg-neutral-50{
  background-color:var(--neutral-50);
}
.bg-neutral-100{
  background-color:var(--neutral-100);
}
.bg-neutral-200{
  background-color:var(--neutral-200);
}
.bg-neutral-300{
  background-color:var(--neutral-300);
}
.bg-neutral-400{
  background-color:var(--neutral-400);
}

.bg-black{
  background-color:#000;
}
.bg-white{
  background-color:#fff;
}
/*****************************************/
/* Layouts    */
/*****************************************/
.container{
  display:flex;
}
.container-column{
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
 
}
.container-row{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  padding:48px 0;
  width:100%;
}

/***********Text Clamp**********/
.props-clamp-2{
 display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


/************************/
/*       Font Size      */
/************************/
.txt-xxlarge{
  font-size:var(--font-xxlarge) !important;
}
.txt-xlarge{
  font-size:var(--font-xlarge) !important;
}
.txt-large{
  font-size:var(--font-large) !important;
}
.txt-medium{
  font-size:var(--font-medium) !important;
}
.txt-regular{
  font-size:var(--font-regular) !important;
}
.txt-small{
  font-size:var(--font-small) !important;
}

.txt-xsmall{
  font-size:var(--font-xsmall) !important;
}
/*****************************************/
/* Margin and Spaces  */
/*****************************************/
.margin-0{
  margin:0 !important;
}
.margin-left-0{
  margin-left:0 !important;
}
.margin-right-0{
  margin-right:0 !important;
}
.margin-top-0{
  margin-top:0 !important;
}
.margin-bottom-0{
  margin-bottom:0 !important;
}

.padding-0{
  padding:0 !important;
}
.padding-left-0{
  padding-left:0 !important;
}
.padding-right-0{
  padding-right:0 !important;
}
.padding-top-0{
  padding-top:0 !important;
}
.padding-bottom-0{
  padding-bottom:0 !important;
}



@media only screen and (max-width:1125px)/****For tablet and small laptops***/

{
  body{
    min-width:auto !important;
  }
}

@media only screen and (max-width:768px)/****For small tablets***/
{

}


@media only screen and (max-width:600px)/****For wide screen mobile***/
  
{
 
}

@media only screen and (max-width:468px)/****For smaller screen mobilee***/
{

}