:root {
   --darkblue: #1d2939;
   --grey: #667085;
   --red: rgba(202, 22, 35, 1);
   --red-hover: rgba(202, 22, 35, 0.8);
   --light-grey: rgba(248, 248, 251, 1);
   --darkest-grey: #344054;
}

/* banner */

.category__wrapper {
   background-color: #f8f9fb;
}
.banner__wrapper {
   max-width: 1200px;
   margin: 0 auto;
   padding: 67px 15px 64px 15px;
}
.banner__container {
   background-color: #fff;
   border-radius: 16px;
   padding: 32px;
   display: flex;
   gap: 96px;
}
.banner-headinng__title {
   color: var(--darkblue);
   font-size: calc(32px + (58 - 32) * ((100vw - 320px) / (1920 - 320)));
   line-height: calc(67.6 / 52);
   font-weight: 600;
}
.banner-content {
   max-width: 554px;
}
.banner-conten__title {
   color: #000;
   font-size: calc(18px + (29 - 18) * ((100vw - 320px) / (1920 - 320)));
   line-height: calc(67.6 / 52);
   font-weight: 600;
   margin: 0px 0px 10px 0px;
}
.banner-content__text {
   color: var(--grey);
   margin: 0px 0px 26px 0px;
   font-weight: 400;
   font-size: calc(14px + (19 - 14) * ((100vw - 320px) / (1920 - 320)));
   line-height: calc(24 / 16);
}
.banner-content__button {
   position: relative;
   padding: 18px 44px 18px 18px;
   background-color: var(--red);
   color: #fff;
   border: 0px;
   border-radius: 8px;
   transition: all ease 0.3s;
   font-size: 16px;
   font-weight: 600;
   display: inline-block;
   line-height: 20.8px;
   text-decoration: none;
}
.banner-content__button:hover {
   background-color: var(--red-hover);
   cursor: pointer;
   color: #fff;
}
.banner-content__button::after {
   position: absolute;
   content: url("https://ensiapukurssi.fi/wp-content/uploads/2025/03/arrow.svg");
   top: 50%;
   right: 24px;
   transform: translate(0px, -50%);
}

@media (max-width: 1200px) {
   .banner__container {
      gap: 48px;
   }
}

@media (max-width: 979px) {
   .banner__container {
      padding: 22px;
      display: flex;
      gap: 0px;
      flex-direction: column;
   }
   .banner-headinng__title {
      margin-bottom: 0px;
   }
}

/* ambulance */

.ambulance__wrapper {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0px 15px 64px 15px;
}

.ambulance__container {
   display: flex;
   gap: 42px;
}
.ambulance__image {
   flex: 1;
   height: 500px;
   padding: 0px 24px 0px 24px;
   background-color: #fff;
   border-radius: 16px;
   /* position: sticky;
   top: 32px; */
}
@media (min-width: 979px) {
   .ambulance__image {
      position: sticky;
      top: 32px;
   }
}
.ambulance__image-img {
   width: 100%;
   padding: 0;
   /* height: fit-content;
   object-fit: cover; */
}

.site {
   overflow: unset;
}

.ambulance__info {
   width: 50.8%;
}

.ambulance-arrive {
   padding: 24px;
   background-color: #fff;
   border-radius: 16px;
   margin-bottom: 32px;
}

.ambulance-arrive__title {
   font-size: calc(24px + (40 - 24) * ((100vw - 320px) / (1920 - 320)));
   line-height: calc(39.6 / 36);
   font-weight: 600;
   margin: 0px 0px 16px 0px;
}

.ambulance-arrive__content {
   color: var(--grey);
   margin: 0px 0px 47px 0px;
   font-weight: 400;
   font-size: calc(14px + (19 - 14) * ((100vw - 320px) / (1920 - 320)));
   line-height: calc(24 / 16);
}

.ambulance-arrive__items {
   display: flex;
   flex-direction: column;
   gap: 29px;
}

.ambulance-arrive__item {
   display: flex;
   gap: 14px;
   align-items: center;
}

.ambulance-arrive__static {
   background-color: var(--light-grey);
   padding: 16px 23px;
   border-radius: 16px;
   width: 156px;
   box-sizing: border-box;
   flex: 1 0 156px;
}

.ambulance-arrive__decore {
   display: flex;
   gap: 12px;
   align-items: center;
}

.ambulance-arrive__color {
   width: 30px;
   height: 30px;
   border-radius: 50%;
   background-color: red;
}

.ambulance-arrive__time {
   color: var(--darkest-grey);
   font-size: 16px;
   font-weight: 600;
   line-height: 150%;
}

.ambulance-arrive__item-text {
   font-size: 30px;
   font-weight: 600;
   line-height: 150%;
   color: var(--darkblue);
   white-space: nowrap;
}

.ambulance-arrive__item-content {
   font-size: 16px;
   color: var(--grey);
   font-weight: 400;
   line-height: 150%;
}

/* ambulance-average */

.ambulance-average {
   padding: 24px;
   background-color: #fff;
   border-radius: 16px;
   margin: 0px 0px 32px 0px;
}

.ambulance-average__title {
   font-size: calc(24px + (40 - 24) * ((100vw - 320px) / (1920 - 320)));
   line-height: 1.1;
   font-weight: 600;
   margin: 0px 0px 16px 0px;
}

.ambulance-average__content {
   color: var(--grey);
   margin: 0px 0px 47px 0px;
   font-weight: 400;
   font-size: calc(14px + (19 - 14) * ((100vw - 320px) / (1920 - 320)));
   line-height: calc(24 / 16);
}

.ambulance-average__items {
   display: flex;
   gap: 29px;
   flex-direction: column;
}

.ambulance-average__item {
   display: flex;
   /* justify-content: space-between; */
   align-items: center;
}

.ambulance-average__desc {
   display: flex;
   gap: 8px;
   align-items: center;
}

.ambulance-average__icon {
   width: 48px;
   height: 48px;
}

.ambulance-average__tooltip {
   margin: 0;
   font-size: calc(18px + (25 - 18) * ((100vw - 320px) / (1920 - 320)));
   font-weight: 600;
   color: #000;
   line-height: 1.3;
}

.ambulance-average__block {
   background-color: var(--light-grey);
   padding: 24.5px 31.5px;
   display: flex;
   align-items: center;
   width: 289px;
   gap: 10px;
   /* justify-content: space-between; */
   border-radius: 8px;
   box-sizing: border-box;
}

.ambulance-average__data {
   font-size: 30px;
   line-height: 1.5;
   font-weight: 600;
   color: var(--darkblue);
}

/* ambulance-municipality__content */

.ambulance-municipality__content {
   margin-bottom: 47px;
}

.ambulance-municipality__form {
   /* margin-bottom: 47px; */
   display: flex;
   gap: 16px;
   height: 56px;
}
.ambulance-municipality__button {
   background-color: var(--red);
   color: #fff;
   transition: all 0.3s ease 0s;
   padding: 17.5px 52px 24px 17.5px;
   border: none;
   border-radius: 8px;
   position: relative;
   font-weight: 600;
   font-size: 16px;
   line-height: 1.3;
}
.ambulance-municipality__button::after {
   position: absolute;
   content: url("https://ensiapukurssi.fi/wp-content/uploads/2025/03/arrow.svg");
   top: 50%;
   right: 24px;
   transform: translate(0px, -50%);
}
.ambulance-municipality__button:hover {
   background-color: var(--red-hover);
   cursor: pointer;
   color: #fff;
}
body .ambulance-municipality__input {
   /* height: 100%; */
   flex-grow: 1;
   outline: 0px solid transparent;
   border: 1px solid transparent;
   border-radius: 8px;
   padding: 16px 24px;
   background-color: rgba(248, 248, 251, 1);
   color: var(--grey);
   font-size: 16px;
   line-height: 150%;
   font-weight: 400;
   transition: all 0.3s ease 0s;
}
.ambulance-municipality__input::placeholder {
   color: var(--grey);
   font-size: 16px;
   line-height: 150%;
   font-weight: 400;
}

.ambulance-average__item {
   justify-content: space-between;
}

/* adaptive */

@media (max-width: 1200px) {
   .ambulance-average__block {
      font-size: 22px;
      padding: 14px 14px;
      width: 220px;
   }
   .ambulance-average__data {
      font-size: 24px;
   }
}
@media (max-width: 979px) {
   .ambulance__container {
      flex-direction: column;
   }
   .ambulance__info {
      width: 100%;
   }
   .ambulance-arrive__static {
      flex: 0 0 156px;
   }
}
.ambulance-municipality.ambulance-average {
   margin-bottom: 0;
   /* position: relative; */
}
@media (max-width: 797px) {
   .ambulance-arrive__static {
      flex: 0 0 160px;
   }
}
@media (max-width: 600px) {
   .ambulance-average__item {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
   }
   .ambulance-average__block {
      width: 100%;
      margin: 0;
   }
}
@media (max-width: 420px) {
   .ambulance-arrive__item {
      flex-direction: column;
   }
   .ambulance-arrive__static {
      flex: 1 1 auto;
      width: 100%;
   }
   .ambulance-municipality__input {
      width: 20%;
      max-width: 100vw;
   }
   .ambulance-municipality__form .ambulance-municipality__button::after {
      display: none;
   }
   .ambulance-municipality__form .ambulance-municipality__button {
      padding: 12px 14px;
   }
}

/* defibrillator */

.defibrillator__wrapper {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0px 15px 64px 15px;
}

.defibrillator__conteiner {
   display: flex;
   gap: 96px;
   background-color: #fff;
   border-radius: 16px;
   padding: 32px;
}

.defibrillator__title {
   width: calc(100% - 53.3%);
}

.defibrillator__title-text {
   font-size: calc(24px + (40 - 24) * ((100vw - 320px) / (1920 - 320)));
   line-height: 1.1;
   font-weight: 600;
   margin: 0px 0px 31px 0px;
}

.defibrillator__text {
   color: var(--grey);
   margin: 0px 0px 0px 0px;
   font-weight: 400;
   font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1920 - 320)));
   line-height: calc(24 / 16);
}

.defibrillator__content {
   width: 53.3%;
   display: flex;
   flex-direction: column;
   gap: 24px;
}

.defibrillator__block {
   border: rgba(233, 233, 233, 1) 1px solid;
   border-radius: 16px;
   padding: 25px 33px;
}

body .defibrillator-block__title {
   font-size: 27px;
   margin-bottom: 6px;
   line-height: 1.3;
   font-weight: 400 !important;
}

.defibrillator-block__cnt {
   display: flex;
   gap: 8px;
   align-items: center;
}

.defibrillator-block__image {
   width: calc((406 / (406 + 134)) * 100%);
}
.defibrillator-block__text {
   width: calc((134 / (406 + 134)) * 100%);
}
.large .defibrillator-block__value {
   font-size: 70px;
}
.defibrillator-block__value {
   font-weight: 600;
   line-height: 1;
   font-size: 34px;
}

.defibrillator-block__desc {
   color: rgba(52, 52, 52, 1);
   font-size: 23px;
   line-height: 1;
}

.defibrillator-block__title {
   overflow-wrap: break-word;
   word-break: break-all;
   hyphens: auto;
}

@media (max-width: 1200px) {
   .defibrillator__conteiner {
      gap: 46px;
   }
}
@media (max-width: 979px) {
   .defibrillator__conteiner {
      flex-direction: column;
      gap: 15px;
   }
   .defibrillator__title {
      width: 100%;
   }
   .defibrillator__content {
      width: 100%;
   }

   .defibrillator__block {
      padding: 15px 20px;
   }
}
@media (max-width: 670px) {
   .defibrillator-block__cnt {
      flex-direction: column-reverse;
      align-items: flex-start;
   }
   .defibrillator-block__image {
      width: 100%;
   }
   .defibrillator-block__text {
      width: 100%;
   }
}

/* change */

.chance__wrapper {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0px 15px 65px 15px;
}

.chance__conteiner {
   display: flex;
   gap: 96px;
   background-color: #fff;
   border-radius: 16px;
   padding: 32px;
}

.chance__title {
   width: calc((486 / (486 + 554)) * 100%);
}

.chance__list {
   width: calc((554 / (486 + 554)) * 100%);
   gap: 24px;
   display: flex;
   flex-direction: column;
}

.chance__item {
   padding: 40px 24px;
   background-color: rgba(248, 248, 251, 1);
   color: rgba(102, 112, 133, 1);
   border-radius: 16px;
   font-weight: 400;
   line-height: 1.5;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 16px;
}
.chance__item p {
   margin: 0;
}
.chance__item strong {
   color: var(--red);
   font-weight: 600;
}

@media (max-width: 1200px) {
   .chance__conteiner {
      gap: 36px;
   }
}

@media (max-width: 797px) {
   .chance__conteiner {
      flex-direction: column;
      gap: 15px;
   }
   .chance__title {
      width: 100%;
   }
   .chance__list {
      width: 100%;
   }
   .chance__item {
      padding: 30px 24px;
   }
}

/* products */

.products__wrapper {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0px 15px 64px 15px;
}
.products__conteiner {
}
.products__title {
   margin: 0px 0px 57px 0px;
   font-size: 36px;
   line-height: 1.1;
   text-align: center;
   color: var(--darkblue);
}
.products__grid {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 26px;
}
.products__item {
   display: flex;
   flex-direction: column;
}
.products-item {
   background-color: #fff;
   border-radius: 16px;
   padding: 25px;
}
.products-item__label {
   background-color: var(--red);
   padding: 3px 32px 3px 21px;
   border-radius: 0px 20px 20px 0px;
   color: #fff;
   font-size: 16px;
   font-weight: 400;
   width: 132px;
   transform: translate(-36px, -10px);
}
.products-item__image {
   margin-bottom: 9px;
   height: 189px;
   object-fit: cover;
   width: 100%;
}
.products-item__button {
   position: relative;
   padding: 18px 44px 18px 18px;
   background-color: var(--red);
   color: #fff;
   border: 0px;
   transition: all 0.3s ease 0s;
   border-radius: 8px;
   transition: allease 0.3s;
   font-size: 16px;
   font-weight: 600;
   display: inline-block;
   line-height: 20.8px;
   text-decoration: none;
}
.products-item__button {
   position: relative;
   padding: 18px 44px 18px 18px;
   background-color: var(--red);
   color: #fff;
   border: 0px;
   border-radius: 8px;
   transition: all ease 0.3s;
   font-size: 16px;
   font-weight: 600;
   display: inline-block;
   line-height: 20.8px;
   text-decoration: none;
   width: 137px;
   margin: 0px auto;
   box-sizing: border-box;
   margin-bottom: 16px;
}
.products-item__button:hover {
   background-color: var(--red-hover);
   cursor: pointer;
   color: #fff;
}
.products-item__button::after {
   position: absolute;
   content: url("https://ensiapukurssi.fi/wp-content/uploads/2025/03/arrow.svg");
   top: 50%;
   right: 24px;
   transform: translate(0px, -50%);
}
.products-item__desc {
   text-align: center;
   color: rgba(33, 33, 33, 1);
   font-size: 14px;
   line-height: 25px;
}

@media (max-width: 979px) {
   .products__grid {
      grid-template-columns: 1fr 1fr;
   }
}
@media (max-width: 700px) {
   .products__grid {
      grid-template-columns: 1fr;
   }
   .products__title {
      margin: 0px 0px 32px 0px;
   }
}

/* error */
.erorr {
   color: var(--red);
   margin: 10px 0px;
   font-size: 16px;
   font-weight: 400;
   line-height: 1.5;
}
.none {
   display: none;
}

.ambulance-average__items.insert {
   margin-top: 47px;
   /* position: relative; */
}

.styled-links p {
   padding: 0;
   margin: 0;
}
.styled-links a {
   color: rgba(46, 121, 189, 1);
   transition: all 0.3s ease 0s;
   text-decoration: underline;
   font-size: 12px;
   font-weight: 500;
   padding: 0px 4px;
   transform: translate(0px, -6px);
   display: inline-block;
}
.styled-links.large h3 a {
   font-size: 16px;
   transform: translate(0px, -12px);
}
.styled-links a:hover {
   color: rgb(32, 131, 224);
}
.chance__item p {
   text-align: center;
}
@media (max-width: 979px) {
   /* .ambulance__image {
      height: 700px;
      max-height: 700px;
   } */
   .ambulance__image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
   }

   .banner-content {
      max-width: 100%;
   }
   .defibrillator__text {
      margin-bottom: 22px;
   }
   .defibrillator__content {
      gap: 32px;
   }
}

@media (max-width: 979px) {
   body .defibrillator-block__title {
      margin-bottom: 32px;
   }
   .ambulance-average__item {
      gap: 2px;
   }
   body .banner-headinng__title {
      font-size: 32px !important;
      margin-bottom: 5px;
   }
   .defibrillator__conteiner {
      padding: 24px;
   }
}
@media (max-width: 797px) {
   .defibrillator-block__text {
      margin-bottom: 32px;
   }
   .products-item__image {
      height: 250px;
   }
   .ambulance-average__item {
      gap: 8px;
   }
   .ambulance__container {
      gap: 32px;
   }
}

body .ambulance-municipality__input:focus {
   background-color: rgba(248, 248, 251, 1);
}
body .ambulance-municipality__input:focus {
   background-color: rgba(248, 248, 251, 1);
}

.ambulance-municipality__input::placeholder {
   color: rgba(102, 112, 133, 1);
   transition: all ease 0.3s;
}

.ambulance-municipality__input:focus::placeholder {
   color: #000;
}
/* body .ambulance__image {
   flex: 1;
   height: 500px;
   padding: 0px 24px 0px 24px;
   background-color: #fff;
   border-radius: 16px;
   position: sticky;
   top: 32px;
} */
body .ambulance__image-img {
   width: 100%;
   padding: 0;
   /* height: fit-content;
   object-fit: cover; */
}

@media (max-width: 797px) {
   .ambulance-average__title {
      line-height: 32px !important;
   }
   .ambulance-average__title a {
      line-height: 32px;
   }
   .styled-links.large h3 a {
      line-height: 32px;
   }
   .styled-links.large h3 {
      line-height: 32px;
   }
}
body input[type="text"]:focus {
   background: rgba(248, 248, 251, 1);
   border: 1px solid transparent;
}
body input[type="text"]:focus::placeholder {
   color: var(--grey);
}
body input[type="text"]::placeholder {
   color: var(--grey);
}

body .ambulance__image {
   height: fit-content;
   padding: 0;
}
.loading__wrappew {
   position: absolute;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
   z-index: 1;
   display: flex;
   align-content: center;
   justify-content: center;
   background-color: rgba(255, 255, 255, 0.73);
   border-radius: 16px;
   overflow: hidden;
   transition: all 0.3s ease 0s;
   opacity: 1;
}
.loading__wrappew.hidden {
   opacity: 0;
   visibility: hidden;
   display: none;
}
.loading__wrappew .loading__img {
   width: 220px;
}

.ambulance-municipality.ambulance-average {
   position: relative;
}

.ambulance-arrive__items.items-little {
   flex-direction: row;
   gap: 16px;
}
@media (max-width: 979px) {
   .ambulance-arrive__items.items-little {
      flex-direction: column;
   }
   .ambulance-arrive__items.items-little .ambulance-arrive__static {
      width: 100%;
      flex: 1 1 100%;
   }
}
.ambulance__image.side {
   display: flex;
   flex-direction: column;
   gap: 50px;
   padding: 19px;
}
