@font-face {
    font-family: Inter-M;
    src: url(../fonts/Inter_18pt-Medium.ttf);
}
@font-face {
    font-family: Inter-B;
    src: url(../fonts/Inter_18pt-Bold.ttf);
}
@font-face {
    font-family: Poppins-R;
    src: url(../fonts/Poppins-Regular.ttf);
}
@font-face {
    font-family: Poppins-M;
    src: url(../fonts/Poppins-Medium.ttf);
}
@font-face {
    font-family: Poppins-SB;
    src: url(../fonts/Poppins-SemiBold.ttf);
}


* {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: normal;
    text-decoration: none;
    outline: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    font-family: Poppins-R;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, .row, .col, ul, li {
    margin: 0;
    padding: 0;
}

a {
    display: inline-block;
}

img, picture, video, canvas, svg {
    max-width: 100%;
    display: block;
}

.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

label {
	width: 100%;
	display: block;
    font-family: Poppins-M;
    font-size: 20px;
    line-height: 30px;
    color: #2D2D2D99;
    margin-bottom: 12px;
}

/* Inputs and textarea */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="file"],
textarea,
select,
.select .selected {
	width: 100%;
	padding: 19px 15px;
    background: rgba(255, 255, 254, 1);
    border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 2px;
    font-family: Poppins-R;
    font-size: 16px;
    line-height: 24px;
    color: rgba(0, 0, 0, 0.8);
}
form .select {
    position: relative;
    cursor: pointer;
}
form .select .options {
    position: absolute;
    width: 100%;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 1;
    background: rgba(255, 255, 254, 1);
    border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 2px;
    padding: 19px 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
    max-height: 284px;
    overflow: auto;
    scrollbar-width: none;
}
form .select .options .option {
    padding: 15px;
    background: rgba(255, 255, 254, 1);
    border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 2px;
    cursor: pointer;
}
form .select .options .option:hover {
    background: #fcbc05;
    border: 1px solid #fcbc05;
    color: #ffffff;
}

textarea {
    min-height: 120px;
}

/* Select */
select, .select .selected {
	appearance: none;
	background-image: url('data:image/svg+xml,<svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 1L7 7L1 1" stroke="%232D2D2D" stroke-opacity="0.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
	background-repeat: no-repeat;
	background-position: right 22px center;
}

/* Checkbox and radio */
input[type="checkbox"],
input[type="radio"] {
	width: 19px;
	height: 19px;
    border-radius: 4px;
    border: 1px solid #0000001a;
	margin-right: 8px;
	vertical-align: middle;
	cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
}
input[type="radio"] {
    border-radius: 50%;
}
input[type="checkbox"]:checked::after,
input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 13px;
    height: 13px;
    background-color: #33c433;
    border-radius: 2px;
}
input[type="radio"]:checked::after {
    border-radius: 50%;
}
label:has(input[type="checkbox"]:checked),
label:has(input[type="radio"]:checked) {
    background-color: #f8f8fb !important;
}

/* Buttons */
button,
input[type="submit"],
input[type="button"] {
	display: inline-block;
    box-shadow: 0px 4px 10px 0px #0000001a;
    background-color: #fcbc05;
	border-radius: 10px;
    color: #2d2d2d;
	border: none;
	padding: 12px 42px;
	cursor: pointer;
	transition: 0.5s all;
    font-family: Poppins-SB;
    font-size: 16px;
    line-height: 24px;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
	background-color: #2d2d2d;
	color: #fcbc05;
}

/* Focus */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="file"]:focus,
textarea:focus,
select:focus,
.select:focus {
	outline: none;
	box-shadow: none;
    border: 1px solid rgba(255, 207, 69, 1);
} 

/* Placeholder */
::placeholder {
    font-family: Poppins-R;
    font-size: 16px;
    line-height: 24px;
    color: #2d2d2d80;
}
.pratham-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}










/* survey banner starts */
.survey-banner {
    padding: 122px 0 120px;
    background-image: url('../images/survey_banner.png');
    background-repeat: no-repeat;
    background-size: cover;    
}
.survey-banner .banner-contents {
    text-align: center;
    max-width: 740px;
    margin: 0 auto;
}
.survey-banner .banner-contents .pratham-brand {
    max-width: 247px;
    margin: 0 auto;
    margin-bottom: 24px;
    display: flex;
    justify-content: center;
}
.survey-banner .banner-contents .title-text h1 {
    font-family: Inter-B;
    font-size: 64px;
    line-height: 64px;
    color: #FFFFFF;
}
.survey-banner .banner-contents .rich-text {
    margin-top: 16px;
}
.survey-banner .banner-contents .rich-text p {
    font-family: Inter-M;
    font-size: 16px;
    line-height: 19px;
    color: #FFFFFF;
}
.survey-banner .pratham-icon {
    max-width: 56px;
    margin-bottom: -76px;
    margin-left: auto;
}
/* survey banner ends */


/* survey form starts */
.survey-form {
    padding: 80px 0;
    background-color: #FFFFFF;
    box-shadow: 0px 4px 15px 12px #9797970D;
    border-radius: 30px;
    margin: -44px 0 40px;
    position: relative;
}
.survey-form .form-submit {
    margin-top: 80px;
    display: flex;
    justify-content: end;
    gap: 10px;
}
.survey-form .form-set .form-set-head .title-text h3 {
    font-family: Poppins-SB;
    font-size: 24px;
    line-height: 36px;
    margin-bottom: 24px;
    color: #2D2D2DCC;
}
.survey-form .form-set .field-group {
    padding: 40px 75px;
    border-radius: 15px;
    background-color: #FFF8E2;
    background-image: url('../images/survey_form_set_bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 80px;  
    row-gap: 40px;  
}
.survey-form .form-set .field.full-width {
    grid-column: span 2;
}
.survey-form .form-set .field.full-width .field-group {
    padding: 0;
}
.survey-form .form-set .field .radio-check {
    background-color: #ffffff;
    border: 1px solid #0000001a;
    border-radius: 5px;
    padding: 8px;
}
.survey-form .form-set .field .radio-check .field:not(:last-child) {
    margin-bottom: 8px;
}
.survey-form .form-set .field .radio-check label {
    margin-bottom: 0;
    background-color: transparent;
    border-radius: 2px;
    padding: 10.5px 8px;
    font-family: Poppins-R;
    font-size: 16px;
    line-height: 19px;
    color: #2d2d2d80;
    cursor: pointer;
}
.survey-form .form-set .field .sub-question {
    padding: 10px;
    background: rgba(255, 255, 254, 1);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 2px;
}
.survey-form .form-submit button {
    width: 155px;
    padding: 12px;
}
/* survey form ends */

footer {
    margin-top: auto;
    background: #FCBC05;
    padding: 57px 0 20px;
}
footer a {
    color: #FFFFFF;
}
footer a:hover {
    color: #2D2D2D;
}
.footer-top-block {
    padding-bottom: 32px;
    display: flex;
    justify-content: space-between;
    row-gap: 20px;
    column-gap: 40px;
}
.footer-top-block .footer-brand {
    display: flex;
    max-width: 166px;
}
.footer-top-block .partners-logos {
    display: flex;
    align-items: center;
    gap: 20px;
}
.footer-bottom-block {
    border-top: 1px solid #FFFFFF;
    padding-top: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.footer-bottom-block .copyright {
    font-family: Poppins-M;
    font-size: 16px;
    line-height: 24px;
    color: #FFFFFF;
    text-align: center;
}
.footer-bottom-block .social-icons {
    display: flex;
    gap: 16px;
}
.footer-bottom-block .social-icons .icon:hover svg path {
    fill: #2D2D2D;
}


.error-404 {
    padding: 80px 0;
    background-color: #FFFFFF;
    /* box-shadow: 0px 4px 15px 12px #9797970D; */
    border-radius: 30px;
    margin: -44px 0 40px;
    position: relative;
}
.error-404 .error-block {
    text-align: center;
}
.error-404 .error-block .title-text h1 {
    font-family: Inter-B;
    font-size: 64px;
    line-height: 64px;
    color: #000000;
}
.error-404 .error-block .rich-text p {
    font-family: Inter-M;
    font-size: 16px;
    line-height: 19px;
    color: #000000;
}

input.error, .select.error, .survey-form .form-set .field .radio-check.error {
    border: 1.5px solid #d00000;
}

.alert-success {
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 8px;
    font-size: 17px;
    color: green;
}
.alert-success .icon {
    width: 24px;
    height: 24px;
}
.alert-success .icon svg {
    width: 100%;
    height: 100%;
}
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
    background: #FCBC05 !important;
    border-color: #FCBC05 !important;
}

.survey-form .consent-letter p:not(:last-child) {
    margin-bottom: 20px;
}
.survey-form .consent-letter p {
    font-size: 20px;
}