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

@font-face {
    font-family: "Morebi Rounded Regular";
    font-style: normal;
    font-weight: normal;
    src: local("Morebi Rounded Regular"),
        url("../fonts/Morebi/MorebiRounded-Regular.woff") format("woff");
}

.f-morebi {
    font-family: "Morebi Rounded Regular";
}

.f-montserrat {
    font-family: "Montserrat";
}

html {
    background-color: #fff;
    color: #000;
}

button:focus,
.button:focus {
    outline: unset;
}

a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

.grid {
    min-height: unset;
}

.primary {
    color: #e60f71;
}

h1 {
    font-size: 3rem;
    font-weight: bold;
    text-align: center;
}

.h1 {
    font-size: 3rem;
    font-weight: bold;
    text-align: center;
}

h2 {
    font-size: 1.7rem;
    line-height: 2.7rem;
    text-align: center;
}

.h2 {
    font-size: 2.5rem;
    font-weight: bold;
    text-align: center;
}

h3,
.h3 {
    font-size: 1.2rem;
    text-transform: uppercase;
    font-weight: 500;
    text-align: center;
}

button,
.button {
    background-color: #e60f71;
}

button:hover,
.button:hover {
    background-color: #f83b91;
}

#app {
    max-width: 1920px;
    margin: 0 auto;
}

.navigation {
    height: 5rem;
}

.navigation--fixed {
    background-color: #e60f71;
    max-width: 1920px;
    left: unset;
    margin: auto;
}

.navigation {
    max-width: 1920px;
    left: unset;
    margin: auto;
}

.navigation__logo {
    margin-top: 0.5rem;
    height: 2rem;
    padding: unset;
}

.navigation__lnk.mPS2id-highlight,
.navigation__lnk:hover {
    color: #e60f71;
    border: 1px solid #fff;
    border-radius: 11px;
    margin-top: 0.5rem;
    height: 2rem;
}

.navigation__lnk {
    font-family: "Roboto", sans-serif;
    border: 1px solid transparent;
    margin-top: 0.5rem;
    margin-right: 0.5rem;
    height: 2rem !important;
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 300;
    color: #000;
}

.navigation--fixed .navigation__lnk {
    color: #fff;
}

#top {
    background: url("../images/header-bg.jpg") no-repeat;
}

#offer {
    background: url("../images/offer-bg.jpg") no-repeat;
}

footer {
    background: url("../images/footer-bg.jpg") no-repeat;
    height: 386px;
}

#contact h1 {
    font-size: 2rem;
}

#contact .h2 {
    font-size: 2.3rem;
    font-weight: 900;
    margin: auto;
    color: #2c4059;
}

#contact label {
    width: 100%;
    display: block;
    padding: 0.7rem 0;
    font-weight: 500;
}

#contact label em {
    margin-left: 0.2rem;
}

#contact button {
    padding-left: 5rem;
    padding-right: 5rem;
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
    border-radius: 2rem;
}

.offer h3 {
    display: block;
    font-weight: 900;
    font-size: 2.8rem;
    padding: 3rem 2rem 8rem;
    background: #f7f7f7;
}

.offer .button {
    background: #f7f7f7;
    color: rgb(2, 1, 1);
}

#offer #packets > div:hover > h3,
#offer #packets > div.active > h3,
#offer #packets > div:hover .button,
#offer #packets > div.active .button {
    background: #e60f71;
    color: #fff;
}

#offer #packets {
    max-width: 70rem;
    margin-left: auto;
    margin-right: auto;
}

#offer #packets > div > div {
    font-size: 1.2rem;
    text-align: center;
    font-weight: 500;
    padding: 1rem;
    height: 4rem;
}

#offer .desc {
    border-bottom: 1px solid #f7f7f7;
}

#about h1 {
    color: #ffd200;
    font-size: 2.5rem;
}

#about .desc {
    padding-top: 0.8rem;
    color: #c2d4ef;
    font-weight: 400;
    font-size: 0.9rem;
    text-align: left;
    letter-spacing: 1px;
}

#offer #packets > div {
    min-height: 12rem;
    background: #fff;
    padding-bottom: 3rem;
    margin-bottom: 3rem;
    /* box-shadow: 0px 0px 19px -11px #989696; */
    box-shadow: 1px 0px 26px 13px #d3d2d2;
}

#about {
    background: url("../images/about-bg.jpg") no-repeat;
}

#benefits {
    background: url("../images/benefits-bg.jpg") no-repeat;
}

#portfolio {
    background: url("../images/portfolio-bg.jpg") no-repeat;
}

#contact {
    background: url("../images/contact-bg.jpg") no-repeat;
}

/* #about,
#benefits {
  background-size: contain;
} */

#portfolio .glide__slide > div {
    width: 313px;
    height: 634px;
    margin: auto;
    padding: 73px 20px;
}

#portfolio .glide__slide.is-active > div {
    background: url("../images/slider-bg.png") no-repeat;
}

#portfolio .glide__arrow--left {
    -webkit-transform-origin: 50% 25%;
    -moz-transform-origin: 50% 25%;
    -o-transform-origin: 50% 25%;
    transform-origin: 50% 25%;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

#portfolio .glide__arrow {
    background: url("../images/arrow-next.png") no-repeat;
    width: 24px;
    height: 38px;
    border: unset;
    box-shadow: unset;
    opacity: 0.3;
}

#portfolio .glide__arrow:hover {
    opacity: 1;
}

.form {
    margin: 2rem auto;
}

.form form > div {
    margin-bottom: 2rem;
}

.form form > div,
.form form > div > div {
    position: relative;
}

.form input,
.form textarea {
    width: 100%;
    background-color: #ffffff;
    border-radius: 5px;
    text-indent: 26px;
    box-shadow: 1px 0px 26px 13px #d3d2d2;
}

.form input {
    height: 4rem;
}

.form .md\:grid {
    padding-bottom: unset;
}

.site-footer {
    background-color: transparent;
}

.validation-error {
    color: red;
    display: block;
    position: absolute;
    width: 100%;
    padding: 0.2rem 0;
    text-align: left;
}

.hamburger:focus {
    outline: unset;
}

#about .icon {
    display: inline-block;
    vertical-align: top;
    margin-right: 2rem;
}

#about .content {
    display: inline-block;
    width: 80%;
}

#benefits .content {
    text-align: center;
}

#benefits .content > div:first-child {
    padding: 1rem;
}

#benefits h3 {
    color: #e60f71;
    text-transform: none;
    font-weight: bold;
}

#benefits .desc {
    font-size: 1.1rem;
    line-height: 2rem;
}

/* icons */

.icon {
    width: 33px;
    height: 33px;
}

.icon.large {
    width: 93px;
    height: 95px;
}

.icon.notes {
    background: url("../images/icons/notes.png") no-repeat;
}

.icon.vinyl {
    background: url("../images/icons/vinyl.png") no-repeat;
}

.icon.phones {
    background: url("../images/icons/phones.png") no-repeat;
}

.icon.invoice {
    background: url("../images/icons/invoice.png") no-repeat;
}

.icon.payment {
    background: url("../images/icons/payment.png") no-repeat;
}

.icon.history {
    background: url("../images/icons/history.png") no-repeat;
}

.icon.fuel {
    background: url("../images/icons/fuel.png") no-repeat;
}

.icon.map {
    background: url("../images/icons/map.png") no-repeat;
}

.icon.phone {
    background: url("../images/icons/phone.png") no-repeat;
}

.icon.mail {
    background: url("../images/icons/mail.png") no-repeat;
}

.icon.instagram {
    background: url("../images/icons/instagram.png") no-repeat;
}

.icon.facebook {
    background: url("../images/icons/facebook.png") no-repeat;
}

.social .icon {
    width: 39px;
    height: 39px;
}

.social .icon-face {
    background: url("../images/icons/face.jpg") no-repeat;
}

.social .icon-insta {
    background: url("../images/icons/insta.jpg") no-repeat;
}