.main-header, footer {
	display:none;
}

.quiz-header {

    background: #F5FAFF;
    transition: 0.3s;
	max-height: 85px;
	height:85px;
}

.quiz-header__wrapper {
	margin: 0 auto;
    width: 100%;
    max-width: 1224px;
	height: 100%;
    display: flex;
    align-items: center;
}

.quiz-footer {
	background:#F6F6F6;
}
.quiz-footer__wrapper {
	margin: 0 auto;
    width: 100%;
    max-width: 1224px;
	height: 100%;
    display: flex;
	flex-direction:column;
}

.quiz-footer__top {
	padding:64px 0px;
	display:flex;
	gap:80px;
}

.quiz-footer__col-ul {
	display:flex;
	flex-direction:column;
	gap:8px;
	margin-top:24px;
}

.quiz-footer__col-head,
.quiz-footer__copy {
	color:#AAB1BA;
	font-size:16px;
	line-height:22px;
}

.quiz-footer__col-link {
	font-size:16px;
	line-height:22px;
}

.footer-links__list {
	margin-top:24px;
}

.quiz-footer__border svg{
	width:100%;
}


.quiz-footer__copyline {
	display:flex;
	padding:32px 0;
	justify-content:space-between;
	align-items: center;
}

.quiz-banner {
	width:100%;
	background: linear-gradient(99.73deg, #C6FFF1 0.45%, #83D3FF 111.65%);
	height:560px;
}

.quiz-banner__wrapper {
	margin: 0 auto;
    width: 100%;
    max-width: 1224px;
	height: 560px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:32px;
}

.quiz-banner__text {
	display:flex;
	flex-direction:column;
	gap:24px;
	max-width:460px;
	flex:0 0 35%;
}

.quiz-banner__img {
	flex:0 0 64%;
}

.quiz-banner__h1 {
	font-weight: 600;
	font-size: 36px;
	line-height: 120%;
}

.quiz-banner__h2 {
	font-weight: 400;
	font-size: 18px;
	line-height: 24px;
}

.quiz-footer__up-btn {
	display:flex;
	justify-content:space-between;
	max-width:200px;
	margin-right:120px;
	gap:12px;
	align-items: center;
	cursor:pointer;
}

.quiz-footer__up-btn-img {
	width:42px;
	height:42px;
	min-width:42px;
	background:white;
	border-radius:50%;
	display: flex;
    justify-content: center;
    align-items: center;
}

.fade-out {
	opacity: 0;
	transition: opacity 0.3s ease;
}

.fade-in {
	opacity: 1;
	transition: opacity 0.3s ease;
}

#quiz, #question-text, #answers-list {
	opacity: 1;
}




.quiz__container {
	padding:64px;
	background-color: #fff;
	background-image: linear-gradient(91.79deg, rgba(33, 186, 114, 0.1) 16.79%, rgba(90, 176, 255, 0.1) 110.52%);

}

.quiz__form {
	border-radius:16px;
	border:1px solid #E1E5EA;
	padding:48px;
	display:flex;
	flex-direction:column;
	gap:36px;
	max-width:912px;
	margin:0 auto;
	background-color:white;
}

.quiz__form label {
    display: flex;
    flex-direction: column;
    gap: 24px;
}



.quiz__header {
    display: flex;
     justify-content: space-between;
    align-items: flex-start;
	margin-bottom:12px;
}

.quiz__header h2 {
	font-weight: 600;
	font-size: 16px;
	line-height: 22px;
	margin:0;
}

.quiz__start-head {
	font-weight: 600;
	font-size: 18px;
	line-height: 22px;
	margin:0;
}

.quiz__header h2 {
	max-width:730px;
	margin-bottom:8px;
}

.question__counter {
    background: #F4F7FB;
    border-radius: 16px;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    gap: 2px;
	height:28px;
	padding: 4px 15px;
    align-items: center;
	color: grey;
}

.question__counter-number {
	 color: #0087CD;
}



#restart-btn {
	align-self:flex-start;
	background-color:#21BA72;
	color:white;
	padding: 8px 32px;
	border-radius:32px;
	line-height:24px;
	transition: all 1s ease;
	margin-top:8px;
}


.quiz__form #next-btn{
	align-self:flex-start;
	background-color:#21BA72;
	color:white;
	padding: 8px 32px;
	border-radius:32px;
	line-height:24px;
	transition: all .3s ease;
	margin-top:16px;
}

.quiz__start-btn {
	align-self:flex-start;
	background-color:#21BA72;
	color:white;
	padding: 12px 76px;
	border-radius:32px;
	line-height:24px;
}

.quiz__form #next-btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.quiz__start-input {
	padding: 12px 12px 12px 20px;
	color:#878B90;
	font-size:16px;
	line-height:22px;
	border-radius:12px;
	font-weight:400;
	border:1px solid #E1E5EA;
}

#answers-list {
	padding-left:13px;
	list-style: none;
  padding: 0;
  margin: 0;
	cursor:pointer;
}

#answers-list li {
	cursor:pointer;
}

.answer-btn {
    display: flex;
    align-items: center;
    font-size: 16px;

	padding-left:0;
    margin-bottom: 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: 0.2s ease;
    position: relative;
    user-select: none;
	 background-color: transparent;
}

.answer-btn::before {
    content: "";
    width: 16px;
    height: 16px;
	min-width: 16px;
    border-radius: 50%;
    margin-right: 8px;
    box-sizing: border-box;
    transition: border-color 0.2s, background-color 0.2s;
	border:2px solid #E1E5EA;
}

#answers-list .correct .answer-btn::before {
    border-color: #2e7d32;
    background-color: white;
    position: relative;
}

#answers-list .correct .answer-btn::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background-color: #2e7d32;
    border-radius: 50%;
}

#answers-list .wrong .answer-btn::before {
    border-color: #EC1B28;
    background-color: white;
    position: relative;
}

#answers-list .wrong .answer-btn::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background-color: #EC1B28;
    border-radius: 50%;
}


.answer-btn.disabled {
    pointer-events: none;
}

.answer-text {
	margin-top:2px;
}

.question__section {
	font-weight: 600;
	font-size: 36px;
	line-height: 100%;
	display: flex;
    justify-content: center;
    padding-bottom: 40px;
}

.quiz-footer__img img{
	max-width:334px;
}

.quiz-final-qr {
	gap:32px;
}

.c-select-value .c-select-text, .quiz__start-input  {
	color:black !important;
}

.quiz__start-input:focus {
    border-color: rgb(32, 159, 109); /* зелёный, как в твоих ссылках */
    outline: none; /* убираем синий обвод от браузера, если нужно */
}

.quiz__start-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.form-alert {
	color:#209F6D;
	font-size:16px;
	display:flex;
	gap:8px;
	align-items:center;
}
@media screen and (max-width:360px) {
.breadcrumbs .breadcrumbs__text {
		font-size:13px;
	}
	.breadcrumbs .breadcrumbs__arrow {
		margin-right:6px;
		margin-left:6px;
	}
}

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

	.quiz__container {
		padding:24px;
	}
	.quiz__form {
		padding:16px;
		border:unset;
	}
	.quiz__start-btn {
		align-self: stretch;
	}
	#next-btn {
		display: flex;
		justify-content: center;
		width:100%;
	}
	.answer-btn::before {
		min-width:16px;
		margin-right:5px;
	}
	#answers-list {
		cursor:unset;
	}
	.quiz-header__wrapper, .quiz-footer__wrapper {
		padding:0 24px;
	}
	.quiz-banner__wrapper {
		padding:24px;
		min-height:224px;
		flex-direction:column-reverse;
		gap:24px;
		height:auto;
		align-items:flex-start;
	}
	.quiz-banner {
		min-height:224px;
		height:auto;
	}
	.quiz-banner__h1 {
		font-size:24px;
		line-height:32px;
	}
	.quiz-banner__h2 {
		font-size:14px;
		line-height:20px;
	}
	
	.quiz-banner__text, .quiz-banner__img {
		flex:unset;
	}
	.quiz-banner__text {
		max-width:none;
		gap:16px;
		position:relative;
		z-index:1;
	}
	.quiz-banner {
		position:relative;
	}
	.quiz-banner__img img{
		width:100%;
	}
	.quiz-footer__top {
		padding:32px 0 0;
		flex-direction:column;
		gap:0;
	}
	.quiz-footer__col-link {
		display:block;
		width:max-content;
	}
	.quiz-footer__border {
		display:none;
	}
	.quiz-footer__copyline {
		flex-direction:column;
		padding-bottom:0;
	}
	.quiz-footer__copy {
		text-align:center;
		padding-bottom:40px;
		border-bottom:1px solid #E4E4E4;
	}
	.quiz-footer__up-btn {
		margin-top:40px;
	}
	.quiz__start-btn {
		padding:8px 76px;
	}
	.question__section {
		font-size:18px;
		line-height:24px;
		justify-content: flex-start;
		padding-bottom:24px;
	}
	.quiz__header {
		flex-direction:column-reverse;
		gap:10px;
	}
	.answer-btn::after, .answer-btn.selected::after {
		top: 11px !important;
	}
	.answer-btn::before, .answer-btn.selected::before {
		margin-top:3px !important;
		margin-right:8px !important;
	}
	.answer-btn {
		align-items:unset;
	}
	.quiz-final-head br{
		display:block !important;
	}
	.quiz-final-qr {
		flex-direction:column;
		gap:0;
	}
	#restart-btn {
		margin-top:20px;
	}
	.quiz-final-head {
		font-size:18px;
		line-height:22px;
	}
	.quiz-footer__up-btn {
		display:none;
	}
	.quiz-footer__col--second, .quiz-footer__col--third,.quiz-footer__col--fourth{
		border-bottom: 1px solid #E4E4E4;
		padding:24px 0;
	}
	.quiz-footer__img img{
		width:100%;
	}
	.quiz-final-text svg{
		max-height:20px;
	}
}

@media screen and (min-width:568px) and (max-width:1199px){
	.quiz-final-text svg{
		max-height:24px;
	}
	.quiz-banner__text {
		flex:0 0 47%;
	}
	.quiz-banner__img {
		flex:0 0 53%;
	}
	.quiz-banner__wrapper {
		padding-left:36px;
		height:380px;
	}
	.quiz-header__wrapper {
		padding:0 36px;
	}
	.quiz__container {
		padding:40px 36px;
	}
	.quiz-footer__top {
		flex-wrap:wrap;
	}
	.quiz-footer__col--first {
		flex:1;
	}
	.quiz-footer__col--second {
		flex:0 0 50%;
	}
	.quiz-footer__col .quiz-header__img svg {
		width:400px;
		height:57px;
	}
	.quiz-footer__top {
		padding:40px 36px;
		gap:40px;
	}
	.quiz-footer__copyline {
		padding:36px;
		flex-direction: column;
        align-items: flex-start;
        gap: 36px;
	}
	.question__section {
		padding-bottom:24px;
		justify-content:flex-start;
	}
	.quiz-final-qr {
		gap:32px;
	}
	.quiz-banner__img img{
		width:100%;
	}
	.quiz-banner {
		height:auto;
	}
	.quiz-banner__text {
		max-width:none;
	}
}

@media (min-width:568px) and (max-width:767px) {
	.quiz-banner__img img{
		width:100%;
	}
	.quiz-banner__wrapper {
		height:auto;
		flex-direction:column-reverse;
		padding:24px;
		gap:24px;
		align-items:flex-start;
	}
	.quiz-banner {
		height:auto;
	}
	.quiz-banner__text {
		max-width:none;
	}
}


@media (min-width:809px) and (max-width:1199px) {
	.quiz-footer__col--first {
		flex:0 0 100%;
	}
	.quiz-footer__col--second, .quiz-footer__col--third, .quiz-footer__col--fourth {
		flex:0 0 25%;
	}
	.quiz-footer__col-link {
		display:block;
		width:max-content;
	}
}

@media (min-width:1200px) and (max-width:1400px) {
	.quiz-banner__wrapper, .quiz-header__wrapper {
		padding:0 36px;
	}
	.quiz-footer__copyline {
		padding:36px;
	}
}

@media (min-width:767px) and (max-width:1200px) {
	.quiz-banner__wrapper {
		gap:0;
	}
	.quiz-banner__h1 {
		font-size:31px;
	}
}



.quiz-final-head br{
	display:none;
}

.quiz-final-head {
	font-weight: 600;
	font-size: 20px;
	line-height: 28px;
	margin-bottom:24px;
}

.quiz-final-text {
	font-size: 16px;
	line-height: 22px;
	margin-bottom:16px;

}

.quiz-final-qr {
	display:flex;
}
.quiz-final-qr img{
	max-width:105px;
}