.step { display: none; }
.active { display: block; }

body{
	margin: 0;
	height: 100vh;
	font-family: "Open Sans", sans-serif;
}
.container{ 
	max-width: 1140px; 
	margin: 0 auto;
}

header{
	margin: 70px 0 0;
	position: absolute;
	width: 100%;
	z-index: 10;
}
.header-row{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.logo{ 
	width: 35%; 
	color: #fff;
}
.header-social{ 
	width: 55%; 
}
.header-social a{ 
	background: #fff;
    color: #159684;
    display: inline-flex;
    padding: 5px;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    text-decoration: none;
 }
.menu{ 
	width: 10%; 
	text-align: right;
}
.menu a{
	background: #EDEDED;   
    display: inline-flex;
    padding: 5px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    text-decoration: none;
	color: #000;
} 
.content-section{
	background: rgb(26,183,166);
	background: linear-gradient(90deg, rgba(26,183,166,1) 50%, rgba(255,255,255,1) 50%);
	min-height: 100vh;
} 
.content-row{
	display: flex;
	padding: 200px 0px 100px 0;  
	flex-wrap: wrap;
}
.left-section{
	width: 50%;
}
	
.right-section {
	width: 50%;
}

.left-content{
	 padding:  0px 100px 0  0;
}
.left-content h1{
	color: #FFF;
	font-size: 50px;
	text-align: center;
	margin: 0 0 75px;
	text-transform: uppercase;
}
.left-content h4{
	font-size: 20px;
	color: #fff;
	margin: 0;
	line-height: 30px;
}
.left-content p{
	font-size: 16px;
	color: #fff;
	line-height: 24px;
}
.right-panel{
	padding:  0px 0 0 80px;
}
.top-counter{
	/* margin-bottom: 30px; */
	position: relative;
    width: 100%;
    margin-bottom: 30px;
}
.top-counter h4{
	font-size: 16px;
	color: #999999;
	font-weight: 400;
	margin: 0;
	display: inline-block;
	/* border-top: solid 2px #19B4A2; */
	padding: 10px 0 0 0;
}
.pro-bar{
	display: block;
    /* width: 20%; */
    /* background: #19B4A2; */
	border-top: solid 3px #19B4A2;
    height: 2px;
}
.form-section h3{
	color: #000;
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 30px;
}
.field{
	margin-bottom: 30px;
}
.field-label label{
	font-size: 16px;
	font-weight: 600;
	color: #000;
	display: block;
	margin-bottom: 10px;
}

.form-row{
	display: flex;
	flex-wrap: wrap;
}
.form-left-col{
	width: 45%;
}
.form-right-col{
	width: 55%;
}

.radio-wrap {
  margin-bottom: 5px;
  margin-left: 35px;
}
.text_input{
    width: 100%;
    height: 30px;
    padding: 5px 10px;
	border: 2px solid #ccc;
	border-radius: 5px;
}

.alert.alert-danger{
	
	padding:10px; text-align:left; margin-bottom:40px; color:red;
}


.field-content-text label.error{
	color: red;
}

.field-content-text .error{
	color: #000;
} 

.radio_input {
  display: none;
}
.radio_input:checked ~ .radio__label::after {
  opacity: 1;
  transform: scale(1);
}
.radio__label {
  cursor: pointer;
  line-height: 30px;
  position: relative;
  /* margin-left: 35px; */
}
.radio__label::before, .radio__label::after {
  border-radius: 50%;
  position: absolute;
  top: -1.5px;
  left: -35px;
/*   transition: all 0.3s ease-out; */
  z-index: 2;
}
.radio__label::before {
  content: "";
  border: 1.5px solid #E4E4E4;
  width: 20px;
  height: 20px;
}
.radio__label::after {
  content: "\f00c";
  background: #1CB9A8;
  border: 1.5px solid #1CB9A8;
  color: #FFF;
   font-family: "Font Awesome 6 Free";
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  width: 20px;
  height: 20px;
  transform: scale(0);
  font-weight: 900;
}

.step-form-button{
	margin-top: 70px;
	text-align: right;
	padding-top: 15px;
	border-top: solid 1px #ededed;
}
.btn-black{
	background: #000;
	padding: 12px 40px;
	color: #fff;
	font-size: 14px;
	cursor: pointer;
	border: none;
	box-shadow: none;
	border-radius: 3px;
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
	.container{
		max-width: 960px;
	}
	.left-content h1{
		font-size: 40px;
	}
	.left-content{ padding-right: 30px; }
	.right-panel{ padding-left: 30px; }
	
}
@media screen and (min-width: 768px) and (max-width: 991px){
	.container{
		max-width: 720px;
	}
	.left-content{ padding-right: 30px; }
	.right-panel{ padding-left: 30px; }
	.form-left-col{ width: 100%; }
	.form-right-col{ width: 100%; }
	.left-content h1{
		font-size: 35px;
		margin-bottom: 30px;
	}
}


@media screen and (max-width: 767px){
	.container{
		max-width: 100%;
		padding: 0 15px;
	}
	 .content-row .left-section, .right-section{
	 	width: 100%;
		margin-top: 100px;
	 }

	 .content-section{
		background: linear-gradient(180deg, rgba(26, 183, 166, 1) 50%, rgba(255, 255, 255, 1) 50%);
		
	 }
    .left-content{ padding-right: 0px; }
	.right-panel{ padding-left: 0px; }
	.form-left-col{ width: 50%; }
	.form-right-col{ width: 50%; }

	.left-content h1{
		font-size: 35px;
		margin-bottom: 30px;
	}
	.top-counter h4{
		/* color: #FFF;
		border-color: #FFF; */
		position: relative;
		z-index: 2;
		font-size: 16px;
		color: #040404;
		font-weight: 400;
		margin: 0;
		display: inline-block;
		border-top: solid 2px #FFF;
		padding: 5px 0 5px 0;
		width: 100%; /* Center the text */
		/* text-align: center; Center the text */
		/* background-color: rgba(0, 0, 0, 0.5); Optional: Semi-transparent background for better readability	 */
	}

	.progress-bar {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		background-color: #19B4A2; 
		width: 0;
		z-index: 1;
		border-top: solid 2px #19B4A2; 
	}

	.form-section h3{
		color: #000;
	}
	.field-label label{
		color: #000;

	}
	.radio__label{
		color: #000;

	}
	.radio__label::after{
		border: solid 1px #ededed;
	}
	header{
		margin-top: 30px;
	}

	.logo{ 
		width: 100%; 
		color: #fff;
		text-align: center;
		margin-bottom: 15px;
	}
	.header-social{ 
		width: 100%;
		text-align: center; 
	}
	.header-row{
		position: relative;
	}
	.menu{ 
		width: 50px; 
		text-align: right;
		position: absolute;
		right: 0;
	}
	.content-row{
		padding-top: 135px;
	}
}

 /* step 2 */
 .hide-section {
	display: none;
}
/* step 3 */
.hide-section-hist-breast-cancer {
	display: none;
}
/* step 4 */
.hidden {
	display: none;
}
/* step 5 */
.hiddenstep-5 {
	display: none;
}

.inner-radio {
	padding-left: 35px;
}


.other-input {
    /* width: calc(100% - 20px); */
    width: calc(28% - 20px);
    padding: 8px;
    border: none; /* Remove all borders */
    border-bottom: 1px solid #ccc; /* Only show bottom border */
    border-radius: 0; /* Remove border radius */
    font-size: 16px;
    outline: none; /* Remove default focus outline */
}

/* Optional: Style the input field when focused */
.other-input:focus {
    border-bottom: 1px solid #aaa; /* Change color or keep the same */
}

/* side menu */
/* Basic styling for the header */
.container {
    position: relative;
}

.header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}

.menu a {
    cursor: pointer;
}

/* Side Menu Styling */
.side-menu {
    height: 100%;
    width: 0;
    position: fixed;
    top: 0;
    right: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    z-index: 1000;
}
.side-menu a.close-btn {
	 font-size: 25px;
    color: #818181;
}
.side-menu a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 16px;
    color: #FFF;
    display: block;
    transition: 0.3s;
}

.side-menu a:hover {
    color: #f1f1f1;
}

.close-btn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    cursor: pointer;
}
input,
input:focus-visible {
	outline-color : #ccc;
  }