:root {
  --color-main: #3f88f5;
  --color-price-btn: rgba(244, 150, 210, 0.2);
  --price-title-color: #231d4f;
  --price-card-color: #848199;
  --footer-bg: #0b0d17;
  --acc-title-color: #383838;
  --acc-body-color: #7e848c;
  --gift-color: rgba(0, 123, 255, 0.65);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Poppins", sans-serif;
}

header section {
  margin-bottom: 0;
}

main {
  margin-top: 2.5rem;
}

section {
  margin-bottom: 2.5rem;
}

footer {
  padding: 1rem;
  color: aliceblue;
  background: var(--footer-bg);
}

footer img {
  margin-bottom: 0.5rem;
}

h2 {
  font-family: 600;
}

h3 {
  font-weight: 500;
}

textarea:focus,
textarea.form-control:focus,
input.form-control:focus,
button.btn:focus,
button.btn:active,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
[type="text"].form-control:focus,
[type="password"].form-control:focus,
[type="email"].form-control:focus,
[type="tel"].form-control:focus,
[contenteditable].form-control:focus {
  box-shadow: inset 0 -1px 0 #ddd;
  outline: none !important;
}

:hover {
  outline: 0 !important;
}

:focus {
  outline: 0 !important;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
}

.flag {
  border-left: 0.5rem solid var(--color-main);
}

.color-gift {
  color: var(--gift-color);
}

.navbar-light .navbar-toggler {
  color: unset;
  border: 0;
}
.navbar-toggler:focus,
.navbar-toggler:active {
  outline: none;
  box-shadow: none;
}

#hero-slider {
  padding: 0;
}

.hero-bg,
.floor-bg {
  height: 80vh;
  background-position: center;
  background-size: cover;
}

.floor-bg {
  height: 20rem;
  width: 20em;
  filter: grayscale(80%);
  -webkit-filter: grayscale(90%);
}

.bg-floor-dark {
  background: rgba(0, 0, 0, 0.5);
}

.bg-darken {
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 1rem 100vh rgba(0, 0, 0, 0.5);
}

.features {
  list-style: none;
  padding: 0;
}

.feature {
  margin-bottom: 1rem;
}

.feature::before {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "Raycon" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\ea41";
  margin-right: 0.3rem;
  padding: 0.05em;
  color: rgb(82, 67, 194);
  background: rgba(82, 67, 194, 0.1);
  border-radius: 50%;
}

.rounded-5 {
  border-radius: 1.5rem;
  -webkit-border-radius: 1.5rem;
  -moz-border-radius: 1.5rem;
  -ms-border-radius: 1.5rem;
  -o-border-radius: 1.5rem;
}

.btn {
  font-weight: 600;
}

.btn-main,
.bg-main {
  color: aliceblue;
  background: var(--color-main);
}

.btn-price {
  color: var(--color-main);
  background: var(--color-price-btn);
  font-size: 0.9rem;
  padding: 0.4rem 1.8rem;
}

#hero-slider .btn-main {
  color: var(--color-main);
  background: #fff;
  padding: 0.4rem 2rem;
}

.price-card {
  color: var(--price-card-color);
  font-size: 0.894rem;
  padding: 3rem 2rem;
  border-radius: 1rem;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  -ms-border-radius: 1rem;
  -o-border-radius: 1rem;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.05);
}

.price,
.price-title {
  color: var(--price-title-color);
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.bg-main .price,
.bg-main .price-title,
.bg-main .feature::before {
  color: aliceblue;
}

.price-card.bg-main {
  color: aliceblue;
  box-shadow: 0 2rem 3rem rgba(63, 136, 245, 0.4);
}

.bg-main .btn-price {
  color: var(--color-main);
  background: aliceblue;
}

.accordion-flush .accordion-item {
  margin: 0.3rem 0;
  border-radius: 0.3rem;
  border: 0.1rem solid rgba(63, 136, 245, 0.4);
  -webkit-border-radius: 0.3rem;
  -moz-border-radius: 0.3rem;
  -ms-border-radius: 0.3rem;
  -o-border-radius: 0.3rem;
}

.accordion-flush .accordion-item:first-child {
  border-top: 0.1rem solid rgba(63, 136, 245, 0.4);
}

.accordion-flush .accordion-item:last-child {
  border-bottom: 0.1rem solid rgba(63, 136, 245, 0.4);
}

.accordion-button {
  color: var(--acc-title-color);
}

.accordion-button:focus {
  border-color: inherit;
}

.accordion-button:not(.collapsed) {
  color: var(--acc-title-color);
  background-color: inherit;
  box-shadow: 0;
}

.accordion-body {
  color: var(--acc-body-color);
  padding: 1rem;
}

.clients p {
  margin: 0.1rem 0;
}

.clients img {
  width: 35%;
  padding: 0.5rem;
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .price-card {
    padding: 2rem;
  }

  .bg-main {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
  }

  footer img:first-of-type {
    margin-bottom: 0.45rem;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .price-card {
    padding: 2rem 0.5rem;
  }
}