/* Base css start */

/* google fonts cdn */
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Lexend:wght@100..900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* fonts family */
  --font-lexend: "Lexend", sans-serif;
  --font-anton: "Anton", sans-serif;
}

ol,
ul {
  margin: 0;
  padding: 0;
}
li {
  list-style-type: none;
}

a,
button {
  transition: all 0.3s;
}
a {
  text-decoration: none;
}

.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  padding-inline: 20px;
  max-width: 980px;
}
body {
  font-family: var(--font-lexend);
  color: #000;
}
.theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0.09px;
  padding-inline: 24px;
  border-radius: 100px;
  background-color: #49a3f5;
  height: 48px;
  border: 0;
  gap: 10px;
}

.theme-btn:hover {
  background-color: #27375e;
}
.theme-btn--bordered {
  color: #49a3f5;
  border: 2px solid #49a3f5;
  background-color: transparent;
}
.theme-btn--bordered:hover {
  color: #fff;
  border-color: #27375e;
}
.theme-btn--dark-blue {
  background-color: #27375e;
}
.theme-btn--dark-blue:hover {
  background-color: #49a3f5;
}
.theme-btn--bordered.theme-btn--dark-blue {
  background-color: transparent;
  border-color: #27375e;
  color: #27375e;
}
.theme-btn--bordered.theme-btn--dark-blue:hover {
  background-color: #27375e;
  color: #fff;
}
.theme-btn--light-blue {
  background-color: #dfedf8;
  color: #000;
}
.theme-btn--light-blue:hover {
  background-color: #49a3f5;
}
.no-hover.theme-btn--light-blue:hover {
  background-color: #dfedf8;
  color: #000;
}
.theme-btn--sm {
  font-size: 16px;
  line-height: normal;
  height: 38px;
}
.theme-btn--lg {
  height: 48px;
}
.theme-btn--md {
  height: 48px;
}
.theme-btn--disabled {
  color: #6b7a82;
  background-color: #e6e6e6;
  pointer-events: none;
  user-select: none;
}
.theme-text-btn {
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0.09px;
  color: #27375e;
  gap: 10px;
}
.theme-text-btn svg {
  width: 18px;
}
.theme-text-btn:hover {
  color: #49a3f5;
}
.theme-btn__list {
  gap: 32px;
}
h1 {
  font-family: var(--font-anton);
  font-size: 48px;
  line-height: 1.25;
}
h2 {
  line-height: 134.375%;
}
h4 {
  line-height: normal;
  color: #27375e;
}
.text-dark-blue{
  color: #27375e;
}
p,
.para-style {
  color: #6b7a82;
  font-size: 18px;
  line-height: 24px;
}
.para-style--sm {
  font-size: 14px;
  line-height: 20px;
}
.asterisk-icon {
  color: #fc6161;
}

/* Base css end */

/* header section start */
.header {
  background: #fff;
  box-shadow: 0 1.893px 7.573px 0 rgba(24, 34, 59, 0.2);
}
.header__wrapper {
  height: 70px;
}
.header__logo img {
  width: 130px;
}
.header__logo {
  transform: translateY(35px);
}
/* header section end */

/* hero section start */
.hero {
  padding-block: 180px 90px;
  background: linear-gradient(251deg, rgba(39, 55, 94, 0.1) 0%, #19223e 69.17%), url("../img/hero-bg.jpg") center/cover;
}

.hero__content {
  max-width: 514px;
}
.hero__desc {
  font-size: 28px;
  line-height: normal;
}
/* hero section end */

/* intro section start */
.intro {
  padding-block: 65px 52px;
}
/* intro section end */

/* benefit section start */

.benefit__top {
  padding-block: 117px 190px;
  background-image: linear-gradient(66deg, #19223e 17.13%, #00467a 74.56%);
  clip-path: polygon(
    49.664% 13.382%,
    49.664% 13.382%,
    42.896% 13.007%,
    36.002% 11.99%,
    29.178% 10.491%,
    22.623% 8.671%,
    16.534% 6.691%,
    11.109% 4.71%,
    6.545% 2.89%,
    3.041% 1.392%,
    0.793% 0.375%,
    0% 0%,
    0% 100%,
    0% 100%,
    1.045% 99.504%,
    3.966% 98.157%,
    8.445% 96.172%,
    14.162% 93.762%,
    20.799% 91.139%,
    28.035% 88.516%,
    35.552% 86.106%,
    43.031% 84.122%,
    50.152% 82.775%,
    56.596% 82.279%,
    56.596% 82.279%,
    62.671% 82.673%,
    68.789% 83.744%,
    74.791% 85.322%,
    80.514% 87.238%,
    85.797% 89.323%,
    90.481% 91.408%,
    94.404% 93.325%,
    97.406% 94.903%,
    99.325% 95.973%,
    100% 96.368%,
    100% 0.083%,
    100% 0.083%,
    99.113% 0.455%,
    96.623% 1.466%,
    92.785% 2.955%,
    87.856% 4.764%,
    82.09% 6.732%,
    75.744% 8.7%,
    69.072% 10.509%,
    62.331% 11.998%,
    55.777% 13.009%,
    49.664% 13.382%
  );
}
.benefit__top .row {
  --bs-gutter-y: 40px;
}
.benefit__item {
  gap: 20px;
}
.benefit__icon {
  width: 80px;
}
.benefit__item-desc {
  color: #b9daf4;
}
.benefit__bottom {
  transform: translateY(-130px);
  margin-bottom: -130px;
}
.benefit__bottom-wrap {
  padding: 112px 50px 62px;
  border-radius: 11px;
  background-color: #dfedf8;
}
.benefit__list {
  gap: 20px;
}
.benefit__list li {
  gap: 20px;
}
.benefit__list li img {
  width: 25px;
}
/* benefit section end */

/* steps section start */
.steps {
  padding-block: 40px 80px;
}
.steps .row {
  --bs-gutter-x: 12px;
  --bs-gutter-y: 32px;
}
.steps__card {
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 16px 0 rgba(22, 22, 22, 0.1);
}
.steps__card-thumb {
  height: 167px;
}
.steps__card-thumb img {
  transition: 1s ease-in-out;
}
.steps__card-thumb:hover img {
  transform: scale(1.1);
}
.steps__card-content {
  padding: 24px;
}
.steps__card-title {
  color: #121417;
}
.steps__divider-icon {
  width: 32px;
}
.steps__divider-border {
  width: 1px;
  background-color: #6b7a82;
  border-radius: 2px;
}
/* steps section end */

/* disease-rate section start */

.disease-rate__wrapper {
  background-image: linear-gradient(51deg, #19223e 21.31%, #00467a 105.35%);
  padding: 27px 50px 40px;
}
.disease-rate__title-wrap {
  max-width: 670px;
}
.disease-rate__card {
  border-radius: 10px;
  gap: 20px;
}
.disease-rate__card-icon {
  width: 66px;
}
.disease-rate__card-content {
  gap: 12px;
}
.disease-rate__card-icon--sm {
  width: 46px;
}
.disease-rate__card-wrap {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
/* disease-rate section end */

/* how-it-work section start */

.how-it-work {
  padding-block: 44px;
}
.how-it-work__wrapper {
  gap: 14px;
}
.how-it-work__content {
  width: 482px;
}
.how-it-work__thumb {
  padding-bottom: 54px;
}
.how-it-work__items {
  gap: 20px;
}
.how-it-work__item-title {
  gap: 12px;
  margin-bottom: 6px;
}
.how-it-work__item-title h5 {
  color: #121417;
}
.how-it-work__item-title-icon {
  width: 40px;
  height: 40px;
  background-color: #fff1ab;
}
.how-it-work__item-title-icon img {
  width: 24px;
}
/* how-it-work section end */

/* support section start */
.support__wrapper {
  padding: 15px 65px 15px 48px;
  background-color: #dfedf8;
  gap: 45px;
}
.support__content {
  width: 430px;
}
/* support section end */

/* faq section start */
.faq {
  padding-block: 56px 40px;
}
.faq__accordion {
  gap: 20px;
}
.accordion-item {
  border-radius: 12px;
  background-color: #f7fafc;
}

.packYears__accordion .accordion-item {
  border-radius: 12px;
  background-color: #dfedf8;
}
.accordion-button {
  height: 72px;
  padding: 7px 15px;
  font-weight: 600;
  color: #0d141c;
  gap: 16px;
}
.accordion-button:not(.collapsed) {
  color: #0d141c;
}
.accordion-button::after {
  display: none;
}
.accordion-button-icon {
  width: 20px;
  height: 20px;
  transition: all 0.3s;
}
.accordion-button[aria-expanded="true"] .accordion-button-icon {
  transform: rotate(180deg);
}
.accordion-body {
  padding: 0 15px 15px;
}
.accordion-body p {
  margin-bottom: 0;
  color: #0d141c;
}
/* faq section end */

/* service section start */
.service__title {
  line-height: normal;
}
.service__wrapper {
  padding: 82px 50px 105px;
  background-image: linear-gradient(66deg, #19223e 14.22%, #00467a 70.91%);
  clip-path: polygon(
    49.933% 4.733%,
    49.933% 4.733%,
    42.198% 4.6%,
    34.727% 4.241%,
    27.648% 3.711%,
    21.092% 3.067%,
    15.188% 2.366%,
    10.067% 1.666%,
    5.857% 1.022%,
    2.69% 0.492%,
    0.694% 0.133%,
    0% 0%,
    0% 93.343%,
    0% 93.343%,
    0.513% 93.53%,
    2.049% 94.035%,
    4.601% 94.781%,
    8.161% 95.686%,
    12.724% 96.672%,
    18.283% 97.657%,
    24.831% 98.562%,
    32.361% 99.308%,
    40.867% 99.814%,
    50.342% 100%,
    50.342% 100%,
    59.799% 99.814%,
    68.253% 99.308%,
    75.706% 98.562%,
    82.161% 97.657%,
    87.618% 96.672%,
    92.08% 95.686%,
    95.547% 94.781%,
    98.022% 94.035%,
    99.506% 93.53%,
    100% 93.343%,
    100% 0%,
    100% 0%,
    99.302% 0.133%,
    97.296% 0.492%,
    94.114% 1.022%,
    89.886% 1.666%,
    84.745% 2.366%,
    78.821% 3.067%,
    72.247% 3.711%,
    65.153% 4.241%,
    57.671% 4.6%,
    49.933% 4.733%
  );
}
.service .row {
  --bs-gutter-x: 32px;
  --bs-gutter-y: 32px;
}
.service__card {
  border-radius: 10px;
  background-color: #d7e8f7;
  padding: 32px;
}
.service__card-title {
  margin-bottom: 20px;
}
.service__card-desc {
  margin-bottom: 20px;
}
/* service section end */

/* about section start */
.about {
  padding-block: 76px 62px;
}

.about__certificates{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: auto; 
  justify-items: center;
  row-gap: 20px;
  column-gap: 40px;
}

.about__certificate{ display: contents; }

.about__certificate > img{
  grid-row: 1;
  align-self: end; 
  justify-self: center;
  display: block;
}

.about__certificate > p{
  grid-row: 2;
  align-self: start;
  justify-self: center;
  margin: 0;
  text-align: center;
}
.about__certificates {
  margin-bottom: 70px;  
}

.about__certificate img {
  width: 60px;
}
.about__card {
  border-radius: 10px;
  background-color: #d7e8f7;
  padding: 24px;
  max-width: 670px;
}
.about__card-logo {
  width: 90px;
  margin-bottom: 28px;
}
/* about section end */

/* footer section start */
.footer {
  padding-bottom: 140px;
  bottom: 0;
}
.footer__title a {
  color: inherit;
}
.footer__title a:hover {
  color: #27375e;
}
.footer__nav {
  gap: 12px;
}
.footer__nav-link {
  font-size: 14px;
  line-height: 20px;
  color: #6b7a82;
}
.footer__nav-link:hover {
  color: #27375e;
}
/* footer section end */

/* survey start */
.header--survey {
  padding-inline: 38px;
}
.header--survey .header__logo {
  transform: translateY(40px);
}
.header__close-icon img {
  width: 26px;
}
.header--survey .header__wrapper {
  max-width: 668px;
}
.header__back-btn img {
  width: 24px;
}
.survey main {
  height: calc(100vh - 190px);
  padding: 70px 38px 32px;
}
.survey main.last-step{
    height: 100vh;
    padding: 70px 16px 20px;
  }
.survey__body {
  max-width: 668px;
}
.survey__thumb {
  max-width: 420px;
  margin-bottom: 20px;
}
.survey__msg {
  border-radius: 10px;
  background-color: #dfedf8;
  padding: 32px;
  gap: 10px;
}
.survey__infobox {
  border-radius: 10px;
  background-color: rgba(107, 122, 130, .05);
  border: 1px solid rgba(107, 122, 130, .35);
  padding: 20px;
  gap: 12px;
}
.survey__msg-icon {
  width: 32px;
}
.footer--survey {
  box-shadow: 0 -1px 4px 0 rgba(24, 34, 59, 0.2);
  padding-inline: 38px;
  position: sticky;
}
.footer__wrapper {
  height: 90px;
  max-width: 668px;
}

.survey__progress {
  height: 3px;
  background-color: #dfedf8;
  border-radius: 6px;
  margin-bottom: 40px;
  margin-top: 20px;
}
.survey__progress .progress-bar {
  background-color: #27375e;
  border-radius: 6px;
}

/* datepicker css start */
.datepicker {
  max-width: 424px;
  margin-bottom: 75px;
}
.datepicker__field {
  border-radius: 5px;
  border: 1px solid #27375e;
  width: 90px;
  height: 50px;
  padding-inline: 14px;
  font-size: 18px;
  line-height: 24px;
  color: #000;
  font-family: var(--font-lexend);
}
.datepicker__field::placeholder {
  color: #6b7a82;
}
.datepicker__field:focus {
  outline: none;
  box-shadow: 0 0 0px 4px #4da0d8;
}
.datepicker__item--year .datepicker__field {
  width: 140px;
  padding-inline: 24px;
}
.datepicker__dropdown {
  position: absolute;
  top: 105px;
  left: 50%;
  transform: translateX(-50%);
  display: none; /* HIDDEN by default */
  max-height: 290px;
  overflow-y: auto;
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 16px 0 rgba(22, 22, 22, 0.25);
  z-index: 10;
  min-width: 100px;
  width: 100%;
  text-align: center;
}
.datepicker__item--month .datepicker__dropdown {
  width: 424px;
  grid-template-columns: repeat(4, 52px);
  justify-content: space-between;
  gap: 20px;
}
.datepicker__dropdown div {
  font-size: 18px;
  line-height: 24px;
  cursor: pointer;
  padding: 8px;
  border-radius: 5px;
}
.datepicker__dropdown div.selected {
  background-color: #27375e;
  color: #fff;
}
/* datepicker css end */

.survey__form {
  border-radius: 10px;
  border: 1px solid #6b7a82;
}
.form__input--smoking-date .date-picker-input {
  width: 100%;
  border-color: #6b7a82;
  padding-inline: 12px 32px;
  height: 48px;
}
.form__input-wrapper {
  gap: 0px;
}
.form__input-icon {
	width: 20px;
	height: 20px;
	right: 12px;
	bottom: 13px;
	pointer-events: none;
}
.form__input-icon img {
  max-width: 100%;
}
.form__input-btn {
  pointer-events: all;
}
.form__input-field {
	font-size: 18px;
	height: 48px;
  background-color: #fff;
  color: #000;
	border: 1px solid #6b7a82;
	border-radius: 5px;
	padding-inline: 12px 32px;
	padding-block: 0 !important;
	transition: all 0.3s;
}
.form__input-field:focus {
  outline: none;
  box-shadow: none;
  border-color: inherit;
}
.form__input-field--lg {
  height: 68px !important;
  border-radius: 10px;
}
.form-floating > label {
  padding: 0;
  height: auto;
  left: 12px;
  line-height: 68px;
  transition: all 0.3s;
}
.form-floating > .form__input-field:not(:placeholder-shown) ~ label,
.form-floating > .form__input-field:focus ~ label {
  padding-inline: 5px;
  line-height: 1;
  background-color: #fff;
}
.form__input-label span {
  color: #fc6161;
}
.smoking-date__list {
  gap: 20px;
}
.smoking-date__item {
  border-radius: 10px;
  background-color: #dfedf8;
  padding: 12px;
  --flash-color: rgba(189, 222, 247, 0.65);
}
.smoking-date__item p {
  letter-spacing: 0.09px;
}
.smoking-date__item-delete-btn img {
  width: 20px;
}
.smoking-date__item--yellow {
  background-color: #fff5c4;
    --flash-color: rgba(255, 230, 80, 0.7);
}

.smoking-date__item { scroll-margin-top: 12px; }
.smoking-date__item:last-child {
  scroll-margin-top: calc(12px + 72px + env(safe-area-inset-top, 0px));
}

/* Einmaliges Aufleuchten – nutzt die Variant-Farbe */
@keyframes flashOnce {
  0%   { background-color: transparent; }
  25%  { background-color: var(--flash-color); }
  100% { background-color: transparent; }
}
.flash-once {
  animation: flashOnce 800ms ease-out both;
}

.alert-box {
  border-radius: 10px;
  background-color: #ceffe2;
  gap: 12px;
}
.alert-box__msg {
  color: #0f7337;
}

.radio-box {
  border-radius: 10px;
  border: 1px solid #0f7337;
  padding: 12px;
}
.radio-item {
  gap: 12px;
  padding-block: 4px;
  cursor: pointer;
}
.radio-item__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.radio-item__icon::after {
  content: "";
  width: 100%;
  height: 100%;
  border: 2px solid #0f7337;
  border-radius: 50%;
  position: absolute;
  top: 0px;
  left: 0;
  transition: all 0.3s;
}
.radio-item__icon img {
  width: 22px;
  transition: all 0.3s;
  opacity: 0;
}
.radio-item input:checked ~ .radio-item__icon img {
  opacity: 1;
}

.radio-item:has(> input[type="radio"]:disabled) {
  cursor: default;
  pointer-events: none;
}

.iso-certificate {
  padding-block: 12px;
  margin-block: 32px;
  gap: 20px;
}
.iso-certificate__logo {
  width: 100px;
}

.checkbox {
  width: 24px;
  height: 24px;
  border: 2px solid #27375e;
  margin-right: 20px;
}
input:checked ~ .checkbox::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3.5px;
  width: 6.3636363636px;
  height: 12.3529411765px;
  border: solid #fff;
  border-top-width: medium;
  border-right-width: medium;
  border-bottom-width: medium;
  border-left-width: medium;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input:checked ~ .checkbox {
  background-color: #27375e;
}

.alert-box--danger {
  background-color: #ffd8d8;
}
.alert-box--danger .alert-box__msg {
  color: #fc6161;
}
.information {
  margin-block: 32px;
}
.information__list {
  gap: 20px;
}
.information__list li img {
  width: 24px;
}
.survey__card-thumb {
  height: 245px;
  border-radius: 10px 10px 0 0;
}
.survey__card-thumb img {
  transition: all 1s ease-in-out;
}
.survey__card-thumb:hover img {
  transform: scale(1.1);
}
.survey__card-content {
  border-radius: 0 0 10px 10px;
  background-color: #dfedf8;
}
.form__input--smoking-date .date-picker-date-container {
  width: 290px;
}
.form__input--smoking-date-end .date-picker-date-container {
  left: auto;
  right: 0;
}

.smoke-option__list {
  gap: 32px;
}
.smoke-option {
  cursor: pointer;
}
.smoke-option__btn {
  height: 70px;
  color: #27375e;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0.09px;
  padding-inline: 24px;
  border: 1px solid #27375e;
  transition: all 0.3s;
}
.smoke-option__input:checked ~ .smoke-option__btn {
  background-color: #49a3f5;
  color: #fff;
  border-color: #49a3f5;
}

.ui-widget {
  font-family: var(--font-lexend);
}

.raise-up { 
  position: relative; 
  top: -0.1em; 
}
/* survey end */