@font-face {
 font-family: 'Como';
 src: url('../fonts/Como-ExtraLight.woff2') format('woff2'),
      url('../fonts/Como-ExtraLight.woff') format('woff');
 font-weight: 200;
 font-style: normal;
 font-display: swap;
}

@font-face {
 font-family: 'Como';
 src: url('../fonts/Como-Light.woff2') format('woff2'),
      url('../fonts/Como-Light.woff') format('woff');
 font-weight: 300;
 font-style: normal;
 font-display: swap;
}

@font-face {
 font-family: 'Como';
 src: url('../fonts/Como-Regular.woff2') format('woff2'),
      url('../fonts/Como-Regular.woff') format('woff');
 font-weight: 400;
 font-style: normal;
 font-display: swap;
}

@font-face {
 font-family: 'Como';
 src: url('../fonts/Como-Medium.woff2') format('woff2'),
      url('../fonts/Como-Medium.woff') format('woff');
 font-weight: 500;
 font-style: normal;
 font-display: swap;
}

@font-face {
 font-family: 'Como';
 src: url('../fonts/Como-SemiBold.woff2') format('woff2'),
      url('../fonts/Como-SemiBold.woff') format('woff');
 font-weight: 600;
 font-style: normal;
 font-display: swap;
}

@font-face {
 font-family: 'Como';
 src: url('../fonts/Como-Bold.woff2') format('woff2'),
      url('../fonts/Como-Bold.woff') format('woff');
 font-weight: 700;
 font-style: normal;
 font-display: swap;
}

@font-face {
 font-family: 'Como';
 src: url('../fonts/Como-ExtraBold.woff2') format('woff2'),
      url('../fonts/Como-ExtraBold.woff') format('woff');
 font-weight: 800;
 font-style: normal;
 font-display: swap;
}

@font-face {
 font-family: 'Como';
 src: url('../fonts/Como-Heavy.woff2') format('woff2'),
      url('../fonts/Como-Heavy.woff') format('woff');
 font-weight: 900;
 font-style: normal;
 font-display: swap;
}

h1, h2, h3 {
 font-family: 'Como', sans-serif;
 font-weight: 700;
}

body, p, li, span {
 font-family: 'Montserrat', sans-serif;
 font-weight: 400;
}

/* body {
 background: url(../img/gradient-1.png), url(../img/gradient-2.png), url(../img/gradient-3.png), url(../img/gradient-4.png);
    background-position: top left -200px, top -200px right, bottom -250px left -200px, bottom -996px right -1400px;
    background-repeat: no-repeat;
    min-height: 2000px;
} */

body {
 background: url(../img/variantas-4.png) no-repeat center center/cover;
}

.container {
    margin: 0 auto;
    max-width: 1260px;
    padding-left: 56px;
    padding-right: 56px;
    width: 100%;
}

.quizhome {
 padding: 100px 0;
}

.quizhome__hero {
 background: #F4F8FB;
 border-radius: 35px;
 position: relative;
 padding: 65px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-bottom: 50px;
}

.quizhome__hero-title {
 color: #2754AF;
 font-size: 54px;
 margin-bottom: 30px;
 line-height: normal;
}

.quizhome__hero-description {
 color: #414042;
 font-size: 18px;
 line-height: 28px;
 max-width: 528px;
 margin-bottom: 45px;
}

.quizhome__hero-vvtatLogo {
 height: 102px;
}

.quizhome__line {
 position: absolute;
 left: 0;
 top: 64px;
 bottom: 64px;
 width: 10px;
 background: #2754AF;
 border-bottom-right-radius: 10px;
 border-top-right-radius: 10px;
}

.quizhome__wrapper {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 50px;
}

.quizhome__quiz {
 background: #F4F8FB;
 width: 100%;
 border-radius: 30px;
 padding: 30px;
 position: relative;
 display: flex;
 flex-direction: column;
 align-items: center;
}

.quizhome__quizLine {
 position: absolute;
 left: 0;
 top: 64px;
 bottom: 64px;
 width: 10px;
 background: #2754AF;
 border-bottom-right-radius: 10px;
 border-top-right-radius: 10px;
}

.quizhome__quizNumber {
 position: absolute;
 left: 50%;
 transform: translateX(-50%);
 top: 0;
 border-bottom-left-radius: 20px;
 border-bottom-right-radius: 20px;
 text-align: center;
 font-size: 18px;
 line-height: 28px;
 color: #fff;
 background: #2754AF;
 padding: 12px 40px;
}

.quizhome__quizContent {
 text-align: center;
 margin: 40px 0;
 padding: 0 50px;
}

.quiz-question {
  position: relative;
}

.quiz-counter {
  position: absolute;
  top: -30px;
  right: 0;
  font-size: 16px;
  font-weight: bold;
  color: #414042;
}

.quizhome__quizTitle {
 font-size: 38px;
 line-height: 48px;
 color: #2754AF;
 margin-bottom: 28px;
}
.quizhome__quizTitleInner {
 text-align: center;
}

.quizhome__quizDescription {
 text-align: center;
 font-size: 16px;
 color: #414042;
 margin-bottom: 28px;
}

.quizhome__quizButton {
 background: #2754AF;
 color: #F4F8FB !important;
 font-family: 'Montserrat', sans-serif;
 font-size: 19px;
 padding: 12px 32px;
 text-decoration: none;
 text-align: center;
 border-radius: 55px;
 transition: all 0.5s ease;
	display: block;
	width: 175px;
	margin: 0 auto;
}

.quizhome__quizButtonSingle {
	margin: 50px auto 0 !important; 
	display: block;
    width: 205px;
	background: #d90974;
}

.quizhome__quizButtonSingle:hover {
	background: #2754AF !important;
}

.quizhome__quizButton:hover {
 background: #d90974;
 color: #F4F8FB;
}

.quizhome__single {
 background: #F4F8FB;
 border-radius: 35px;
 position: relative;
 padding: 65px;
}

.quizhome__quizForm {
 max-width: 650px;
 margin: 0 auto;
}

.quiz-buttons {
 display: flex;
 flex-direction: column;
 gap: 16px;
}

.quizhome__quizQuestion {
 color: #414042;
 font-size: 21px;
 line-height: 32px;
 margin-bottom: 40px;
}

.quiz-radio {
 display: flex;
 align-items: center;
 margin-bottom: 10px;
 cursor: pointer;
 font-family: 'Montserrat', sans-serif;
 font-size: 18px;
 font-weight: 500;
 position: relative;
 gap: 10px;
}

.quiz-radio input[type="radio"] {
 display: none;
}

.quiz-radio .checkmark {
 width: 20px;
 height: 20px;
 border: 2px solid #ccc;
 border-radius: 4px;
 display: inline-block;
 position: relative;
}

.quiz-radio input[type="radio"]:checked + .checkmark {
 background-color: #2754AF;
 border-color: #2754AF;
}

.quiz-radio input[type="radio"]:checked + .checkmark::after {
 content: "✓";
 color: white;
 font-size: 14px;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

.quiz-next-btn {
 background: #fff;
 border: 1px solid #2754AF;
 border-radius: 55px;
 color: #2754AF;
 transition: all 0.5s ease;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 16px;
 padding: 12px 32px;
 font-size: 16px;
 font-weight: 500;
 font-family: 'Montserrat', sans-serif;
}

.quiz-next-btn svg path {
 transition: all 0.5s ease;
}

.quiz-next-btn:hover {
 border: 1px solid #d90974;
 background: #d90974;
 color: #F4F8FB;
}

.quiz-next-btn:hover svg path {
 stroke: #F4F8FB;
}

#start-form {
 max-width: 400px;
 margin: 0 auto;
 border-radius: 16px;
 color: #414042;
}

#start-form h3 {
 text-align: center;
 margin-bottom: 25px;
 font-size: 24px;
 font-weight: 600;
 font-family: 'Como';
 color: #2754AF;
}

#start-form label {
 display: block;
 margin-bottom: 6px;
 margin-top: 15px;
 font-weight: 500;
 font-family: 'Montserrat', sans-serif;
 color: #414042;
}

#start-form label span {
 color: red;
}

#start-form input[type="text"] {
 width: 100%;
 padding: 12px 16px;
 border: 1px solid #ddd;
 border-radius: 10px;
 font-size: 16px;
 font-family: 'Montserrat', sans-serif;
 color: #414042;
 outline: none;
 transition: border 0.2s, box-shadow 0.2s;
}

#start-form input[type="text"]:focus {
 border-color: #2754AF;
 outline: none;
}

.btn-wrap {
 text-align: center;
}

#start-form button {
 background: #2754AF;
 color: #F4F8FB !important;
 font-family: 'Montserrat', sans-serif;
 font-size: 19px;
 padding: 12px 32px;
 text-decoration: none;
 text-align: center;
 border-color: none !important;
 border-radius: 55px;
 transition: all 0.5s ease;
 cursor: pointer;
 margin: 25px auto 0;
 width: 190px;
}

#start-form button:hover {
 background-color: #d90974;
}

#quiz-result h3 {
	font-size: 28px;
}
#quiz-result p {
	font-size: 21px;
}

@media screen and (max-width: 1279px) {
	.quizhome__heroImage {
		display: none;
	}
	.quizhome__hero-description {
		max-width: 100%;
	}
	.quizhome__quizContent {
		padding: 0;
	}
	body {
		height: 100vh !important;
	}
}
@media screen and (max-width: 1023px) {
	.quizhome__wrapper {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
	#quiz-result h3 {
	font-size: 21px;
}
#quiz-result p {
	font-size: 18px;
}
}
@media screen and (max-width: 767px) {
	.container {
		padding-left: 9px;
		padding-right: 9px;
	}
	.quizhome__hero {
		padding: 35px;
	}
	.quizhome__hero-title {
		font-size: 38px;
	}
	.quizhome__hero-description {
		font-size: 16px;
	}
	.quizhome__single {
		padding: 50px 35px 35px 35px;
	}
}
@media screen and (max-width: 413px) {
	.quizhome__line, .quizhome__quizLine {
		display:none;
	}
	.quizhome__hero {
		padding: 32px;
	}
	.quizhome__hero-title {
		font-size: 28px;
	}
	.quizhome__hero-vvtatLogo {
		height: 95px;
	}
	.quizhome__hero-description {
		margin-bottom: 30px;
	}
	.quizhome__quiz {
		height: auto;
		padding: 32px;
	}
	.quizhome__quizNumber {
		font-size: 12px;
	}
	.quizhome__quizTitle {
		font-size: 28px;
    	line-height: 32px;
	}
	.quizhome__quizButton {
		font-size: 16px;
	}
	.quizhome__quizButton {
		font-size: 16px;
	}
	.quizhome__single {
		padding: 50px 32px 32px 32px;
	}
}