/* reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol,ul{list-style:none;margin:0px;padding:0px;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
/* start editing from here */
a{text-decoration:none;}
.txt-rt{text-align:right;}/* text align right */
.txt-lt{text-align:left;}/* text align left */
.txt-center{text-align:center;}/* text align center */
.float-rt{float:right;}/* float right */
.float-lt{float:left;}/* float left */
.clear{clear:both;}/* clear float */
.pos-relative{position:relative;}/* Position Relative */
.pos-absolute{position:absolute;}/* Position Absolute */
.vertical-base{	vertical-align:baseline;}/* vertical align baseline */
.vertical-top{	vertical-align:top;}/* vertical align top */
nav.vertical ul li{	display:block;}/* vertical menu */
nav.horizontal ul li{	display: inline-block;}/* horizontal menu */
img{max-width:100%;}
/*end reset*/
html, body{
	font-size: 100%;
    font-family: 'Raleway', sans-serif;
    background: url(../images/banner1.jpg) no-repeat 0px 0px;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    background-attachment: fixed;
}
h1,h2,h3,h4,h5,h6,input,p,a,select{
	font-family: 'Raleway', sans-serif;
	margin:0;
}
ul,label{
	margin:0;
	padding:0;
}
body a:hover,body a{
	text-decoration:none;
}
/*-- main --*/
.agileits_copyright{
	text-align: center;
}
.agileits_copyright p{
	font-size: 1em;
    color:#fff;
    line-height: 1.8em;
    padding: 0 1em;
    text-transform: capitalize;
	margin-top: 2em;
}
.agileits_copyright p a {
    color:#38a90e;
    text-decoration: underline;
}
.agileits_copyright p a:hover{
	color:#fff;
}
input[type="submit"],.agileits_copyright p a,a{
	transition:.5s ease-in;
	-webkit-transition:.5s ease-in;
	-moz-transition:.5s ease-in;
	-o-transition:.5s ease-in;
	-ms-transition:.5s ease-in;
}
.main{
	padding:3em 0;
}
.main h1{
	text-align: center;
    color:#fff;
    font-size: 3em;
    margin-bottom: 9px;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-weight: 600;
}
/*-- //main --*/
.w3_agile_main_grids{
	width:45%;
	margin:0 auto;
}
 #steps { 
	margin: 80px 0 0 0;
}

.prev {
	float:left;
}
.next, .submit {
	float:right;
}
.error { 
	color: #d65c0d;
    display: block;
    font-size: 13px;
    font-style: italic;
}
#progress { 
	position: relative;
    height: 15px;
    background-color: #eee;
    margin-bottom: 20px;
    border-radius: 20px;
}
#progress-complete { 
	border: 0;
    position: absolute;
    height: 15px;
    min-width: 10px;
    background-color: #d65c0d;
    transition: width .5s ease-in-out;
    border-radius: 20px;
}
.agile_form{
	padding:3em;
	background:#fff;
}
.w3_agile_main_grids h3 {
    margin-bottom: 2em;
    font-size: 1.5em;
    color: #333;
    border-bottom: 1px solid #e5e5e5;
    text-align: center;
    font-weight: 600;
    padding-bottom: .5em;
}
.agileits_w3layouts_form{
	width: 48.05%;
    float: left;
	margin-bottom:1.5em;
}
.wthree_input,.w3ls_description{
	position:relative;
}
.wthree_input i{
	position: absolute;
    left: 0%;
    top: 30%;
    color: #38a90e;
}
.wthree_input input[type="text"],.w3ls_description textarea,.wthree_input select,.wthree_input input[type="email"],.wthree_input input[type="password"],.wthree_input input[type="date"]{
	outline: none !important;
    background: none;
    border: none;
    border-bottom: 2px solid #212121;
    font-size: 14px;
    font-style: normal;
    color: #000000e6;
    padding: 1em 1em 1em 2em;
    width: 75.5%;
    font-weight: 600;
	font-family: 'Raleway', sans-serif;
}
.w3_agileits_margin{
	margin-right:1.5em;
}
.w3_agileits_margin select{
	width:100% !important;
}
.w3ls_description textarea{
	width: 93% !important;
	min-height: 170px;
}
.w3ls_description i{
	position: absolute;
    left: 0%;
    top: 8%;
    color: #38a90e;
}
::-webkit-input-placeholder{
	color:#777373 !important;
}
.btn-primary,button#step1Prev,button#step2Prev,button#step3Prev,button#step4Prev{
	font-size:14px !important;
	color:#fff !important;
	font-weight:600 !important;
	padding:10px 45px !important;
	background:#d65c0d !important;
	outline:none !important;
	border:none !important;
	cursor:pointer !important;
}
.w3_agile_main_grids h4{
	color: #d65c0d;
    font-size: 1em;
    text-transform: capitalize;
    text-align: center;
    margin-bottom: 2em;
    letter-spacing: 2px;
}
.agileits_circles{
	float:left;
	width:33.33%;
}



.icon i {
    font-size: 2em;
    color: #38a90e;
    line-height: 3.5em;
}
.wthree_radio {
    text-align: center;
    cursor: pointer;
}
.wthree_radio span{
    font-size:2em;
	color:#38a90e;
}
/*-- start-responsive-design --*/
@media (max-width:1440px){
	.w3_agile_main_grids {
		width: 50%;
	}
}
@media (max-width: 1366px){
	.w3_agile_main_grids {
		width: 53%;
	}
}
@media (max-width: 1280px){
	.w3_agile_main_grids {
		width: 56%;
	}
}
@media (max-width: 1080px){
	.w3_agile_main_grids {
		width: 66%;
	}
}
@media (max-width: 1024px){
	.w3_agile_main_grids {
		width: 71%;
	}
}
@media (max-width: 991px){
	.w3_agile_main_grids {
		width: 73%;
	}
}
@media (max-width: 800px){
	.main h1 {
		font-size: 2.7em;
	}
	.agile_form {
		padding: 2em;
	}	
	.agileits_w3layouts_form {
		width: 47.65%;
	}
	.wthree_input input[type="text"], .w3ls_description textarea, .wthree_input select, .wthree_input input[type="email"], .wthree_input input[type="password"] {
		width: 83%;
	}
	#progress,#progress-complete {
		height: 10px;
	}
	.radio i {
		left: 33.5%;
	}
	.w3_agile_main_grids {
		width: 74%;
	}
}
@media (max-width: 768px){
	.w3_agile_main_grids {
		width: 77%;
	}
	.w3_agile_main_grids h3 {
		margin-bottom: 1.5em;
	}
	.agileits_w3layouts_form {
		width: 47.5%;
	}
}
@media (max-width: 736px){
	.main h1 {
		font-size: 2.4em;
		letter-spacing: 3px;
	}
	.w3_agile_main_grids {
		width: 81%;
	}
	.commands {
		margin-top: 1em;
	}
	.wthree_input i {
		top: 29%;
	}
	.w3ls_description i {
		top: 7%;
	}
}
@media (max-width: 667px){
	.w3_agile_main_grids {
		width: 89%;
	}
}
@media (max-width: 640px){
	.agileits_w3layouts_form {
		width: 47.5%;
	}
	.radio input + i:after {
		top: 33%;
		left: 36%;
		width: 15px;
		height: 15px;
	}
}
@media (max-width: 600px){
	.agileits_w3layouts_form {
		width: 46.7%;
	}
	.wthree_input input[type="text"], .w3ls_description textarea, .wthree_input select, .wthree_input input[type="email"], .wthree_input input[type="password"] {
		width: 80%;
	}
	.radio i {
		left: 31.5%;
	}
	.w3ls_description textarea {
		width: 90% !important;
	}
}
@media (max-width: 568px){
	.main {
		padding: 2em 0;
	}
	.main h1 {
		font-size: 2em;
	}
	.w3_agile_main_grids h3 {
		font-size: 1.3em;
		margin-bottom: 1em;
	}
	.wthree_input input[type="text"], .w3ls_description textarea, .wthree_input select, .wthree_input input[type="email"], .wthree_input input[type="password"] {
		width: 78.5%;
	}
	.agileits_copyright p {
		font-size: 14px;
	}
	.wthree_radio span {
		font-size: 1.5em;
	}
	.radio i {
		left: 34.5%;
		top: 13%;
		width: 40px;
		height: 40px;
	}
	.radio input + i:after {
		top: 38%;
		left: 36%;
		width: 10px;
		height: 10px;
	}
	label.radio {
		font-size: 14px;
	}
	.w3ls_description textarea {
		min-height: 150px;
	}
	.wthree_input select{
		margin-bottom:0 !important;
	}
}
@media (max-width: 480px){
	.wthree_input input[type="text"], .w3ls_description textarea, .wthree_input select, .wthree_input input[type="email"], .wthree_input input[type="password"] {
		width: 75.5%;
	}
	.wthree_input i {
		font-size: 14px;
	}
	.wthree_input input[type="text"], .w3ls_description textarea, .wthree_input select, .wthree_input input[type="email"], .wthree_input input[type="password"] {
		font-size: 13px;
	}
	.w3_agile_main_grids h4 {
		font-size: 15px;
	}
	.radio i {
		left: 30.5%;
	}
	.agileits_w3layouts_form {
		width: 46.5%;
	}
}
@media (max-width: 414px){
	.main h1 {
		font-size: 1.8em;
		letter-spacing: 2px;
	}
	#progress, #progress-complete {
		height: 5px;
	}
	.agile_form {
		padding: 1.5em;
	}
	.agileits_w3layouts_form {
		width: 100%;
		float: none;
	}
	.wthree_input input[type="text"], .w3ls_description textarea, .wthree_input select, .wthree_input input[type="email"], .wthree_input input[type="password"] {
		width: 87%;
	}
	.w3_agileits_margin {
		margin-right: 0;
	}
	.agileits_w3layouts_form {
		margin-bottom: 1em;
	}
	.commands {
		margin-top: 0;
		padding: 1em 0 0;
	}
	.w3_agile_main_grids h4 {
		letter-spacing: 0px;
	}
	.w3ls_description i {
		top: 7.5%;
		font-size: 14px;
	}
	.w3ls_description textarea {
		width: 87% !important;
	}
}
@media (max-width: 384px){
	.wthree_input input[type="text"], .w3ls_description textarea, .wthree_input select, .wthree_input input[type="email"], .wthree_input input[type="password"] {
		width: 86%;
	}
	.radio i {
		left: 27.5%;
	}
	.btn-primary, button#step1Prev, button#step2Prev {
		font-size: 13px;
		padding: 8px 25px;
	}
	.w3ls_description textarea {
		width: 86% !important;
	}
}
@media (max-width: 375px){
	.main h1 {
		font-size: 1.7em;
		letter-spacing: 1px;
	}
	.wthree_input input[type="text"], .w3ls_description textarea, .wthree_input select, .wthree_input input[type="email"], .wthree_input input[type="password"] {
		width: 85%;
	}
	.radio i {
		left: 26.5%;
	}
}
@media (max-width: 320px){
	.main h1 {
		font-size: 1.5em;
		letter-spacing: 0px;
	}
	.w3_agile_main_grids h3 {
		font-size: 1.2em;
	}
	.agile_form {
		padding: 1em;
	}
	.wthree_input input[type="text"], .w3ls_description textarea, .wthree_input select, .wthree_input input[type="email"], .wthree_input input[type="password"] {
		width: 83%;
	}
	.wthree_input i {
		top: 30%;
	}
	.agileits_copyright p {
		font-size: 13px;
	}
	label.radio {
		padding: 4em 0 2em;
	}
	.radio i {
		left: 28%;
		width: 30px;
		height: 30px;
	}
	.radio input + i:after {
		top: 35%;
		left: 34%;
	}
	.w3_agile_main_grids h4,label.radio {
		font-size: 13px;
	}
	.w3ls_description textarea {
		min-height: 120px;
		width: 84% !important;
	}
	.w3ls_description i {
		top: 9.5%;
	}
}


:root {
	--card-line-height: 1.2em;
	--card-padding: 1em;
	--card-radius: 0.5em;
	--color-green: #558309;
	--color-gray: #e2ebf6;
	--color-dark-gray: #c4d1e1;
	--radio-border-width: 2px;
	--radio-size: 1.5em;
  }
  
  .grid {
	display: grid;
	grid-gap: var(--card-padding);
	margin: 0 auto;
	max-width: 60em;
	padding: 0;
  }
  @media (min-width: 42em) {
	.grid {
	  grid-template-columns: repeat(3, 1fr);
	}
  }
  
  .card {
	background-color: #fff;
	border-radius: var(--card-radius);
	position: relative;
  }
  .card:hover {
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15);
  }
  
  .card .radio {
	font-size: inherit;
	margin: 0;
	position: absolute;
	right: calc(var(--card-padding) + var(--radio-border-width));
	top: calc(var(--card-padding) + var(--radio-border-width));
  }
  
  @supports (-webkit-appearance: none) or (-moz-appearance: none) {
.card .radio {
	  -webkit-appearance: none;
	  -moz-appearance: none;
	  background: #fff;
	  border: var(--radio-border-width) solid var(--color-gray);
	  border-radius: 50%;
	  cursor: pointer;
	  height: var(--radio-size);
	  outline: none;
	  transition: background 0.2s ease-out, border-color 0.2s ease-out;
	  width: var(--radio-size);
	}
	.card .radio::after {
	  border: var(--radio-border-width) solid #fff;
	  border-top: 0;
	  border-left: 0;
	  content: "";
	  display: block;
	  height: 0.75rem;
	  left: 25%;
	  position: absolute;
	  top: 50%;
	  transform: rotate(45deg) translate(-50%, -50%);
	  width: 0.375rem;
	}
	.card .radio:checked {
	  background: var(--color-green);
	  border-color: var(--color-green);
	}
	.card:hover .radio {
	  border-color: var(--color-dark-gray);
	}
	.card:hover .radio:checked {
	  border-color: var(--color-green);
	}
  }
  .plan-details {
	border: var(--radio-border-width) solid var(--color-gray);
	border-radius: var(--card-radius);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	padding: var(--card-padding);
	transition: border-color 0.2s ease-out;
  }
  
  .card:hover .plan-details {
	border-color: var(--color-dark-gray);
  }
  
  .radio:checked ~ .plan-details {
	border-color: var(--color-green);
  }
  
  .radio:focus ~ .plan-details {
	box-shadow: 0 0 0 2px var(--color-dark-gray);
  }
  
  .radio:disabled ~ .plan-details {
	color: var(--color-dark-gray);
	cursor: default;
  }
  
  .radio:disabled ~ .plan-details .plan-type {
	color: var(--color-dark-gray);
  }
  
  .card:hover .radio:disabled ~ .plan-details {
	border-color: var(--color-gray);
	box-shadow: none;
  }
  
  .card:hover .radio:disabled {
	border-color: var(--color-gray);
  }
  
  .plan-type {
	color: var(--color-green);
	font-size: 1.5rem;
	font-weight: bold;
	line-height: 1em;
  }
  

.card_list{
	list-style: disc;
	margin: 10px;
}
.card{
	width: 45%;
	float: left;
	margin: 4px 4px 50px 4px;
}

select{
	width: 90% !important;
}




/* The checkbox_style */
.checkbox_style {
	display: block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 12px;
	margin-top: 15px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	font-weight: 500;
  }
  
  /* Hide the browser's default checkbox */
  .checkbox_style input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
  }
  
  /* Create a custom checkbox */
  .checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: #eee;
  }
  
  /* On mouse-over, add a grey background color */
  .checkbox_style:hover input ~ .checkmark {
	background-color: #ccc;
  }
  
  /* When the checkbox is checked, add a blue background */
  .checkbox_style input:checked ~ .checkmark {
	background-color: #2196F3;
  }
  
  /* Create the checkmark/indicator (hidden when not checked) */
  .checkmark:after {
	content: "";
	position: absolute;
	display: none;
  }
  
  /* Show the checkmark when checked */
  .checkbox_style input:checked ~ .checkmark:after {
	display: block;
  }
  
  /* Style the checkmark/indicator */
  .checkbox_style .checkmark:after {
	left: 9px;
	top: 5px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
  }

textarea{
	resize: none;
}


.main_card {
	width: 190px;
	height: 254px;
	border-radius: 20px;
	background: #f5f5f5;
	position: relative;
	padding: 1.8rem;
	border: 2px solid #c3c6ce;
	transition: 0.5s ease-out;
	overflow: visible;
   }
   
   .main_card .card-details {
	color: black;
	height: 100%;
	gap: .5em;
	display: grid;
	place-content: center;
   }
   
   .main_card .card-button {
	transform: translate(-50%, 125%);
	width: 60%;
	border-radius: 1rem;
	border: none;
	background-color: #008bf8;
	color: #fff;
	font-size: 1rem;
	padding: .5rem 1rem;
	position: absolute;
	left: 50%;
	bottom: 0;
	opacity: 0;
	transition: 0.3s ease-out;
   }
   
   .text-body {
	color: rgb(134, 134, 134);
   }
   
   /*Text*/
   .text-title {
	font-size: 1.5em;
	font-weight: bold;
   }
   
   /*Hover*/
   .main_card:hover {
	border-color: #008bf8;
	box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.25);
   }
   
   .main_card:hover .card-button {
	transform: translate(-50%, 50%);
	opacity: 1;
   }


   pre{
	white-space: pre-line;
   }