@import url('file:///C:\Users\NazarViznytsya\ConsumerWebsite\Consumer\wwwroot\css\style.css');
header {
  width: 100%;
  height: 70vh;
}
.navbar {
  height: 15%;
}
.navbar-brand > img {
    vertical-align: sub;
}
.navbar ul {
  margin-top:initial;
  margin-bottom:initial;
}
.navbar ul li {
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.navbar ul li a {
  display: block;
  padding: 10px;
  color: #000;
  text-decoration: none;
  font-size: 14px;
  text-transform: capitalize;
}
.header-content {
    position: relative;
    height: calc(70vh - 15%);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.header-content > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}
.header-content > div {
  position: absolute;
  top: 35%;
  left: 26%;
}
.header-content > div > h1 {
  width: 350px;
  margin-bottom: 1rem;
}
.header-content > div > a {
  text-decoration: none;
  color: #000;
  background-color: #f6c80f;
  padding: 7px;
  border-radius: 5px;
  padding-top: 5px;
}
main {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin-top: 2rem;
  padding-bottom: 0!important;
}
main > img {
  position: absolute;
    width: calc(100vw - 17px);
    z-index: -1;
}

.scroll-lock{
    height: 100vh;
    overflow-y: hidden;
}

.scroll-lock .helper{
    display: none;
}

.section-top{
    align-items: center;
}

section {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}
section > div {
  width: 100%;
  height: 100%;
}
section > div > div {
  width: 50%;
}
.left > div {
  width: 100%;
  margin: 0;
}
section .what-does-it-mean {
  background: linear-gradient(
      269.41deg,
      rgba(255, 255, 255, 0.2) 12.12%,
      rgba(246, 200, 15, 0.2) 69.6%
    ),
    #ffe991;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  padding: 0;
  width: 100%;
  display: flex;
  height: 50px;
}
section .section-top .right,
section .section-bottom .left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: transparent;
  justify-content: flex-end;
}
section .section-top .right {
  align-items: flex-end;
}
.slider {
    height: 100px;
    background: conic-gradient( from 43deg at 52.89% 123.37%, #ffe682 0deg, rgba(0, 0, 0, 0) 360deg ), linear-gradient( 94.79deg, rgba(255, 255, 255, 0.2) 22.66%, rgba(255, 255, 255, 0.2) 85.56% ), #ffe682;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    width: 100%;
    border-radius: 16px;
}
.left .slider-container {
  width: 80%;
  height: 90%;
}
.slider .slider-items {
  height: 100%;
  width: 100%;
}
.slider .slider-items .slider-item {
  height: 100%;
  width: 100%;
  position: relative;
}
.slider .slider-items .slider-item img {
  height: 120%;
  border-radius: 50%;
  position: absolute;
  transform: translate(-50%, -10%);
}
.slider .slider-items .slider-item span {
  width: 100px;
  margin-left: 80px;
  font-size: 25px;
}

section .slider-controller-buttons {
  display: flex;
  margin-top: 1rem;
  justify-content: center;
  border: none;
  outline: none;
}

.slider-position{
    display: flex;
    justify-content: center;
    border: none;
    gap: 0.5rem;
    margin-top: 0.5rem;
    outline: none;
}

.small-circle{
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: lightgrey;
}

.yellow {
    background-color: #f6c80f;
}

section .section-bottom {
  display: flex;
  flex-direction: row;
  justify-content: center;
  background: transparent;
}

    section .section-bottom .slider {
        height: 100px;
        background: conic-gradient( from 43deg at 52.89% 123.37%, #ffe682 0deg, rgba(0, 0, 0, 0) 360deg ), linear-gradient( 94.79deg, rgba(255, 255, 255, 0.2) 22.66%, rgba(255, 255, 255, 0.2) 85.56% ), #ffe682;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        width: 100%;
        border-radius: 16px;
        position: relative;
    }

section .section-bottom .slider .slider-items img {
  height: 150%;
  border-radius: 50%;
  position: absolute;
  right: 0;
  transform: translate(50%, -10%);
}

section .slider-buttons {
  display: flex;
  height: 100%;
  justify-content: center;
  border: none;
  outline: none;
}
section .slider-controller-buttons .left-button {
  outline: none;
  border: none;
  background: none;
}
section .slider-controller-buttons .right-button {
  background: none;
  border: none;
  outline: none;
}
section .section-bottom .left .slider .slider-items .slider-item img {
    height: 175%;
    transform: translate(60%, -22.5%);
}
section .section-top .right .slider-container {
  width: 80%;
}
.right,
.left {
  height: 100%;
}

.right{
    height: 237px;
    align-self: flex-start;
    justify-content: center !important;
}

section .section-bottom .right {
  display: flex;
  justify-content: end;
  align-items: flex-end;
}
.section-top .heading {
  background: linear-gradient(
    91.14deg,
    #f6c80f -1.86%,
    rgba(255, 204, 0, 0) 100.53%
  );
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
  border-radius: 16px;
  width: 100%;
  height: 60px;
  padding: 10px;
}
.section-top .card {
  width: 100%;
  border: none;
}

.section-top .card + .card{
    margin-top: 5px;
}

.section-top .card .upper {
    background-color: white;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    display: flex;
    justify-content: space-between;
    height: 60px;
    border-radius: 0px 16px 16px 0px;
    padding-left: 1.5rem;
    align-items: center;
}

.card-container {
    border-radius: 16px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    background-color: #ffe991;
    padding: 1rem;
}

.card{
    border-radius: 16px;
    background: none;
}

    .section-top .card .upper p{
        margin:inherit;
    }

    .section-top .card .upper.top {
        border-radius: 16px 16px 16px 0px;
    }

.section-top .card .upper.bot {
    border-radius: 0px 16px 16px 16px;
}

    .section-top .card .upper button {
        background: #f6c80f;
        border-radius: 0px 16px 16px 16px;
        border: none;
        outline: none;
        height: 100%;
        width: 60px;
    }
.section-top .card .bottom {
  height: 0;
  overflow: hidden;
  background: white;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  padding-left: 1.5rem;
  margin-top: 5px;
}
.section-top .card .bottom.show {
    padding-top: 1rem;
    padding-bottom: 1rem;
    height: 100%;
}

    .section-top .card .bottom.show > a{
        text-align: right;
        width: 100%;
        display: block;
        color: black;
        padding-right: 1rem;
    }

.section-bottom{
    margin-top: 6rem;
}

.section-top .card .bottom p{
    margin: auto;
}

.micon{
    display:none;
}

.minus button .picon{
    display:none;
}

.minus button .micon {
    display: inline;
}

.slider-text {
    margin-left: 5rem;
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
}