@charset "utf-8";
@font-face {
  font-family: 'OpenSans';
  src: url('../fonts/OpenSans.eot?#iefix') format('embedded-opentype'),  url('../fonts/OpenSans.woff') format('woff'), url('../OpenSans.ttf')  format('truetype'), url('../fonts/OpenSans.svg#OpenSans') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'OpenSans-Bold';
  src: url('../fonts/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),  url('../fonts/OpenSans-Bold.woff') format('woff'), url('../fonts/OpenSans-Bold.ttf')  format('truetype'), url('../fonts/OpenSans-Bold.svg#OpenSans-Bold') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'OpenSans-Extrabold';
  src: url('../fonts/OpenSans-Extrabold.eot?#iefix') format('embedded-opentype'),  url('../fonts/OpenSans-Extrabold.woff') format('woff'), url('../fonts/OpenSans-Extrabold.ttf')  format('truetype'), url('../fonts/OpenSans-Extrabold.svg#OpenSans-Extrabold') format('svg');
  font-weight: normal;
  font-style: normal;
}
body{margin:0px; padding:0px; font-family: 'OpenSans'; font-size:16px; color:#333333; line-height:21px; /*padding-top:75px*/}
p{margin-bottom:20px; margin-top:0px; line-height:28px; font-size:18px; font-family: 'OpenSans';}
h1, h2, h3, h4, h5, h6{font-weight:normal;font-family: 'OpenSans-Bold'; margin:0px;}
header, footer, section{display:inline-block; width:100%; float:left; text-align:center;}
.main-container{max-width:1170px; width:96%; margin:auto; display:inline-block; text-align:left;position: relative;}
.red-text{color:rgb(228, 59, 44);}
.maroon-text{color:rgb(178, 33, 0);}
img{max-width:100%;}

/*Top Header Bar*/
.wrapper {max-width: 1024px; margin: 0 auto;}
.header {
    border-bottom: 1px solid #dbdbdb;
    padding: 10px 0 8px;
    width: 100%;
    background: #fff;
    display: inline-block;
    float: left;
}
.header small{float:left; margin: 6px 20px 0 36px; padding-right:20px; background:url(../images/border.jpg) no-repeat right center; font-size:13px; color:#c9c9c9; font-weight:300; text-align:right;max-width:124px;}
.header ul{float:left; padding: 6px 0 0; margin:0px; list-style:none;}
.header ul li{float:left; margin-right:26px;}
.topnav{text-align: center; margin-bottom: 10px;}
.topnav ul{padding:0px; margin:0px; list-style:none;}
.topnav ul li{margin:0 10px; display: inline-block;}
.logo{padding:5px 0 0 10px;float:left;}
.logo img{width:170px;}
strong{font-family: 'OpenSans-Extrabold';}
/*Top Bar*/
section.top-bar {
    background-color: #2b4dac;
    color: #fff;
    font-size: 25px;
    line-height: 30px;
    padding: 10px 0px;
    margin-bottom: 30px;
}
section.top-bar h4 {
    max-width: 560px;
    padding: 0px 10px;
    box-sizing: border-box;
    margin: auto;
}
/*Quiz Boxes*/
.quiz-box-1, .quiz-box-2, .quiz-box-3 {display: inline-block;width: 100%;text-align: center;padding: 0px;box-sizing: border-box;}
.quiz-box-1 h3, .quiz-box-2 h3, .quiz-box-3 h3 {
    font-family: 'OpenSans-Bold';
    margin-bottom: 30px;
    font-size: 25px;
    line-height: 28px;
    padding: 0px 15px;
}
.new-box, .new-box-radio, .new-box-3 {max-width: 550px; margin: auto; display: inline-block; width: 100%;}
.new-box-3-footer {
    max-width: 600px;
    margin: auto;
    display: inline-block;
    width: 96%;
    margin-top: 0;
}
footer {
    background-color: #e6e6e6;
    padding: 40px 0px 20px 0px;
    border-top: 2px solid #c3c3c4;
}
a.skip-btn {
    display: block;
    text-align: center;
    max-width: 470px;
    width: 100%;
    margin: auto;
    color: #ccc;
    text-decoration: none;
    margin-top: 130px;
    font-size: 14px;
    padding: 0px 15px;
    box-sizing: border-box;
    margin-bottom: 30px;
}

.new-box .gender-btn {width: 50%; float: left; text-align: center; padding: 0px 15px; box-sizing: border-box;}
.new-box .gender-btn a {width: 100%; border: 1px solid #52b8c4; display: inline-block; padding: 10px; border-radius: 5px; color: #52b8c4; text-decoration: none;box-sizing: border-box;}
.new-box .gender-btn a:hover {border: 1px solid #52b8c4;background-color: #52b8c4; color:#FFFFFF;}

.new-box-radio .full-btn {width: 100%; float: none; text-align: center; padding: 0px 15px; box-sizing: border-box; margin-bottom: 15px;}
.new-box-radio .full-btn a {width: 100%; border: 1px solid #52b8c4; display: inline-block; padding: 10px; border-radius: 5px; color: #52b8c4; text-decoration: none;box-sizing: border-box;}
.new-box-radio .full-btn a:hover {border: 1px solid #52b8c4;background-color: #52b8c4; color:#FFFFFF;}


.new-box-3 .full-btn {
    width: 100%;
    float: none;
    text-align: center;
    padding: 0px 15px;
    box-sizing: border-box;
    max-width: 530px;
    margin: 0px auto 10px;
}
.new-box-3 .full-btn a {
    width: 100%;
    border: 1px solid #afafaf;
    display: inline-block;
    padding: 19px;
    border-radius: 5px;
    color: #000;
    text-decoration: none;
    box-sizing: border-box;
    font-size: 21px;
    line-height: 24px;
	font-weight:bold;
}
.new-box-3 .full-btn a:hover {border: 1px solid #52b8c4;background-color: #52b8c4; color:#FFFFFF;}

.new-box-radio label, .new-box-3 label {display: block; text-align: left; padding: 5px 15px;}

.button {display: inline-block; margin: 30px 0px;}
.button a {text-align: center;border-radius: 7px; background-image: linear-gradient(to bottom,#0c0,#060); position: absolute; width: 202px; left: calc(50% - 100px); border: solid 1px #000; -webkit-animation: fadein 2s; animation: fadein 2s; color: #fff; font-size: 22px; font-weight: 700; padding: 8px 0; margin: 3px 0; text-decoration:none;}


.progress-bar {
    border: 4px solid #ddd;
    border-radius: 50px;
    height: 18px;
    width: 98%;
    max-width: 500px;
    margin: 0px auto 25px auto;
    background-color: #f3f3f3;
    overflow: hidden;
}

.outter-bar {
  width: 100%;
  height: 100%;
  background-color: #f3f3f3;
  border-radius: 50px;
}

.increasing-bar-bg {
  height: 100%;
  background-color: #52b8c4;
  border-radius: 50px;
  width: 0%; /* Start at 0% */
  transition: width 2s ease; /* Smooth transition */
}

.margin-bottom-zero {margin-bottom: 0px; font-size: 14px; line-height: 20px;}
.height-box input[type="text"] {color: rgb(25, 23, 23); font-style: normal; font-weight: normal; font-size: 18px; line-height: 26px; background-color: rgb(255, 255, 255); border-radius: 8px; box-sizing: border-box; flex: 1 1 0%; height: 62px; outline: 0px; width: 100%; border: 1px solid rgb(170, 170, 170); padding: 17px 19px; text-align: center;}
.height-box input[type="number"] {color: rgb(25, 23, 23); font-style: normal; font-weight: normal; font-size: 18px; line-height: 26px; background-color: rgb(255, 255, 255); border-radius: 8px; box-sizing: border-box; flex: 1 1 0%; height: 62px; outline: 0px; width: 100%; border: 1px solid rgb(170, 170, 170); padding: 17px 19px; text-align: center;}
#new-btn .next-btn {display: flex;-webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; font-style: normal; font-size: 30px; line-height: 26px; font-family: 'OpenSans-Bold'; border: none; border-radius: 4px; box-sizing: border-box; padding: 0px 16px; min-height: 60px; width: 100%; cursor: pointer; text-align: center; background-color: rgb(251, 81, 59); color: rgb(255, 255, 255); text-decoration: none;}
.cm-set {margin: auto 18px; position: absolute; right: 0px; top: 50%; transform: translateY(-50%); display: flex; -webkit-box-pack: center; justify-content: center; font-size: 18px; pointer-events: none; font-weight:bold;}
.align-left{text-align:left;}
#two-columns {display: flex; width: 100%; gap: 15px;}
#two-columns .height-box {width: 50%; position: relative;}
.height-box {position: relative;}
.message {text-align: left; font-size: 14px; line-height: 24px;}
span.dark-color {color: rgb(5, 114, 122); font-weight: bold; display: block;}
.align-left{text-align:left;}
.message {
    display: none;
}
.message-1 {
	text-align:center;
}
.message-1 {font-size: 18px; line-height: 28px;}
.grey-msg {
    background-color: #e3e3e3;
    padding: 15px;
    font-size: 14px;
    text-align: left;
}
/*Risk Page*/
.new-box-3 .full-btn .chekbox-box {
    width: 100%;
    border: 1px solid #000;
    display: inline-block;
    padding: 19px;
    border-radius: 5px;
    color: #000;
    text-decoration: none;
    box-sizing: border-box;
    margin-bottom: 20px;
    text-align: left;
    font-weight: bold;
    font-size: 21px;
    line-height: 25px;
}
.new-box-3 .full-btn .chekbox-box:hover {border: 1px solid #52b8c4;background-color: #52b8c4; color:#FFFFFF;}
.new-box-3 .full-btn .chekbox-box.checked {border: 1px solid #52b8c4;background-color: #52b8c4; color:#FFFFFF;}
.new-box-3 .full-btn .chekbox-box input {
    background-color: #f3f3f3;
    width: 20px;
    height: 20px;
    float: left;
    margin: 4px 15px 0px 0px;
}
.new-box-radio label, .new-box-3 label {display: block; text-align: left; padding: 5px 15px;}
.button {display: inline-block; margin: 30px 0px;}
.button a {text-align: center;border-radius: 7px; background-image: linear-gradient(to bottom,#0c0,#060); position: absolute; width: 202px; left: calc(50% - 100px); border: solid 1px #000; -webkit-animation: fadein 2s; animation: fadein 2s; color: #fff; font-size: 22px; font-weight: 700; padding: 8px 0; margin: 3px 0; text-decoration:none;}


/*Result Page*/
.progress-container {
    width: 100%;
    background-color: #ddd;
    border-radius: 20px;
    padding: 5px;
    box-sizing: border-box;
}
.progress-bar-result {width: 0; height: 30px; background-color: #52b8c4; border-radius: 15px; text-align: center; line-height: 30px; color: white; font-weight: bold; transition: width 2s ease-in-out;}
    /* Keyframes for animation */
    @keyframes progress {
      0% {
        width: 0;
      }
      100% {
        width: 100%;
      }
    }
.animate {animation: progress 5s forwards;}
.image-box {
    margin-bottom: 20px;
}
.maze-box p {
    font-size: 14px;
}
.maze-box .maze {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-image: url(../images/my-file.gif);
    background-color: #bbdbd8;
    background-size: cover;
    background-position: center;
    margin: auto;
}

/*Footer all pages*/
footer p {
    color: #ccc;
    font-size: 14px;
    line-height: 21px;
    margin: 50px 0;
}
footer ul.footerlink {
    overflow: hidden;
	padding:0px;
}
footer ul.footerlink li:first-child {
    background: none;
}
footer ul.footerlink li {
    display: inline-block;
    padding: 0 10px;
    list-style-type: none;
    font-size: 14px;
    background: url(../images/divider.jpg) no-repeat 0 50%;
}
footer ul.footerlink li a {
    color: #343434;
    text-decoration: none;
}
footer p.copyright {
    padding: 0px 0px;
    color: #343434;
    margin: 0;
}
footer p.small-text {
    font-size: 11px;
    margin: 20px 0px 0px 0px;
    line-height: 17px;
    color: #343434;
    text-align: left;
}

.bg-banner {
    background-color: #52b8c4;
    color: #fff;
    font-family: 'OpenSans-Bold';
    font-size: 30px;
    padding: 30px 0px;
    text-align: center;
}
.bg-banner h4 {
    max-width: 700px;
    line-height: 40px;
    text-align: center;
    width: 100%;
    margin: auto;
}
.three-buttons {
    display: flex;
    gap: 30px;
    width: 100%;
    max-width: 800px;
    margin: auto;
}
.three-buttons .btn-common {background-color: #52b8c4; color: #fff; font-size: 20px; padding: 20px; width: 33.333%;}
.three-buttons .btn-common {background-color: #52b8c4; color: #fff; font-size: 20px; padding: 20px;}

.word-break{white-space:nowrap;}
.progress-bar-padding {
    display: inline-block;
    width: 100%;
    padding: 0px 15px;
    box-sizing: border-box;
}
@media screen and (max-width: 560px) {
	section.top-bar {font-size: 22px; line-height: 27px;}
}
@media screen and (max-width: 370px) {
	.quiz-box-1 h3, .quiz-box-2 h3, .quiz-box-3 h3 {font-size: 20px; line-height: 23px;}
	section.top-bar {font-size: 20px; line-height: 25px;}
	.new-box-3 .full-btn a {font-size: 16px; line-height: 19px;}
}