/* =========================================================
   ROVELLE – HOME
   HERO + FACTS + PREČO ROVELLE
========================================================= */


/* =========================================================
   HERO
========================================================= */

.dry-hero {
    position: relative;

    width: 100%;

    color: #fff;

    background-color: #080a0c;

    background-image:
        linear-gradient(
            90deg,
            rgba(5, 7, 9, 0.88) 0%,
            rgba(5, 7, 9, 0.65) 35%,
            rgba(5, 7, 9, 0.16) 66%,
            rgba(5, 7, 9, 0.32) 100%
        ),
        url("../images/hero-suchy-lad.webp");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    overflow: hidden;
}


.dry-hero__inner {
    min-height: 415px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;

    gap: 55px;

    align-items: center;

    padding-top: 34px;
    padding-bottom: 34px;
}


/* =========================================================
   HERO LEFT
========================================================= */

.dry-hero__content {
    max-width: 650px;
}


.dry-hero__eyebrow {
    margin-bottom: 16px;

    color: rgba(255,255,255,.92);

    font-size: 11px;
    font-weight: 600;

    letter-spacing: .15em;
}


.dry-hero__title {
    margin: 0 0 6px;

    color: #fff;

    font-size: clamp(46px, 5vw, 64px);
    font-weight: 800;

    line-height: .94;

    letter-spacing: -.035em;
}


.dry-hero__title span {
    display: block;

    margin-top: 7px;

    color: #c69a61;
}


.dry-hero__lead {
    margin: 14px 0 19px;

    color: rgba(255,255,255,.92);

    font-size: 17px;
    line-height: 1.5;
}


/* =========================================================
   HERO BENEFITS
========================================================= */

.dry-hero__benefits {
    list-style: none;

    margin: 0 0 20px;
    padding: 0;
}


.dry-hero__benefits li {
    display: flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 8px;

    color: rgba(255,255,255,.94);

    font-size: 15px;
}


.dry-hero__benefits i {
    color: #c89c63;

    font-size: 18px;
}


/* =========================================================
   HERO BUTTONS
========================================================= */

.dry-hero__buttons {
    display: flex;
    align-items: center;

    gap: 18px;

    margin-top: 19px;
}


.dry-hero__primary {
    min-height: 44px;

    padding-inline: 20px;
}


.dry-hero__secondary {
    min-height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 10px 24px;

    border: 1px solid rgba(255,255,255,.70);
    border-radius: 2px;

    color: #fff;

    font-size: 12px;
    font-weight: 600;

    letter-spacing: .03em;

    text-decoration: none;

    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease;
}


.dry-hero__secondary:hover {
    color: #0b0d10;

    background: #fff;

    border-color: #fff;
}


/* =========================================================
   HERO RIGHT CARD
========================================================= */

.dry-hero__card {
    position: relative;

    padding: 20px 22px;

    border: 1px solid rgba(255,255,255,.25);
    border-radius: 4px;

    background:
        linear-gradient(
            135deg,
            rgba(190,145,85,.92),
            rgba(157,113,60,.92)
        );

    box-shadow:
        0 12px 32px rgba(0,0,0,.30);

    backdrop-filter: blur(5px);
}


.dry-hero__card-item {
    display: grid;

    grid-template-columns: 42px minmax(0,1fr);

    gap: 12px;

    align-items: center;

    padding: 10px 0;

    border-bottom: 1px solid rgba(255,255,255,.12);
}


.dry-hero__card-item:last-child {
    border-bottom: none;
}


.dry-hero__card-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    color: #fff;

    font-size: 26px;
}


.dry-hero__card-item strong {
    display: block;

    margin-bottom: 3px;

    color: #fff;

    font-size: 14px;
    font-weight: 700;

    line-height: 1.25;
}


.dry-hero__card-item span {
    display: block;

    color: rgba(255,255,255,.83);

    font-size: 10px;
    line-height: 1.35;
}


/* =========================================================
   FACT STRIP
========================================================= */

.dry-facts {
    background: #fff;

    border-bottom: 1px solid #ececec;
}


.dry-facts__grid {
    display: grid;

    grid-template-columns: repeat(5, 1fr);

    min-height: 126px;
}


.dry-facts__item {
    position: relative;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 20px;

    text-align: center;
}


.dry-facts__item:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 26px;
    right: 0;
    bottom: 26px;

    width: 1px;

    background: #e3e3e3;
}


.dry-facts__item > i {
    margin-bottom: 9px;

    color: #111;

    font-size: 32px;
    line-height: 1;
}


.dry-facts__co2 {
    margin-bottom: 9px;

    color: #111;

    font-size: 27px;
    font-weight: 800;

    line-height: 1;
}


.dry-facts__co2 sub {
    font-size: 14px;
}


.dry-facts__item strong {
    color: #111;

    font-size: 14px;
    font-weight: 700;

    line-height: 1.15;
}


.dry-facts__item strong span {
    display: block;

    margin-top: 2px;
}


/* =========================================================
   WHY ROVELLE
========================================================= */

.why-rovelle {
    padding: 28px 0 24px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fafafa 100%
        );
}


.why-rovelle__header {
    margin-bottom: 23px;

    text-align: center;
}


.why-rovelle__header h2 {
    margin: 0;

    color: #151515;

    font-size: 27px;
    font-weight: 800;

    line-height: 1.2;
}


.why-rovelle__line {
    width: 62px;
    height: 2px;

    margin: 10px auto 9px;

    background: #bd9157;
}


.why-rovelle__header p {
    margin: 0;

    color: #737373;

    font-size: 14px;
}


/* =========================================================
   WHY GRID
========================================================= */

.why-rovelle__grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 24px;
}


.why-rovelle__item {
    position: relative;

    min-height: 195px;

    padding: 23px 20px 20px;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #f7f7f7 0%,
            #ffffff 100%
        );

    border: 1px solid #f1f1f1;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.why-rovelle__item:hover {
    transform: translateY(-3px);

    box-shadow:
        0 12px 30px rgba(0,0,0,.06);
}


.why-rovelle__icon {
    min-height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 7px;

    color: #161616;

    font-size: 40px;
}


.why-rovelle__item h3 {
    margin: 0 0 10px;

    color: #171717;

    font-size: 17px;
    font-weight: 700;
}


.why-rovelle__item p {
    max-width: 215px;

    margin: 0 auto;

    color: #747474;

    font-size: 13px;

    line-height: 1.5;
}


.why-rovelle__iso {
    margin: -3px 0 7px;

    color: #111;

    font-size: 10px;
    font-weight: 700;
}


.why-rovelle__iso span {
    margin: 0 8px;

    color: #9c9c9c;
}


/* =========================================================
   1200px / LAPTOP
========================================================= */

@media (max-width: 1199.98px) {

    .dry-hero__inner {
        grid-template-columns: minmax(0,1fr) 290px;

        gap: 35px;
    }


    .dry-hero__title {
        font-size: 53px;
    }


    .why-rovelle__grid {
        gap: 16px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .dry-hero {
        background-position: 60% center;
    }


    .dry-hero__inner {
        grid-template-columns: 1fr;

        gap: 26px;

        padding-top: 45px;
        padding-bottom: 40px;
    }


    .dry-hero__content {
        max-width: 600px;
    }


    .dry-hero__card {
        max-width: 600px;

        display: grid;

        grid-template-columns: repeat(2,1fr);

        gap: 0 24px;
    }


    .dry-hero__card-item {
        border-bottom: 1px solid rgba(255,255,255,.12);
    }


    .dry-facts__grid {
        grid-template-columns: repeat(3, 1fr);
    }


    .dry-facts__item:nth-child(3)::after {
        display: none;
    }


    .dry-facts__item:nth-child(-n+3) {
        border-bottom: 1px solid #eee;
    }


    .why-rovelle__grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575.98px) {

    .dry-hero {
        background-position: 62% center;
    }


    .dry-hero__inner {
        padding-top: 38px;
        padding-bottom: 30px;
    }


    .dry-hero__title {
        font-size: 42px;
    }


    .dry-hero__lead {
        font-size: 15px;
    }


    .dry-hero__buttons {
        flex-direction: column;

        align-items: stretch;

        gap: 10px;
    }


    .dry-hero__primary,
    .dry-hero__secondary {
        width: 100%;
    }


    .dry-hero__card {
        grid-template-columns: 1fr;
    }


    .dry-facts__grid {
        grid-template-columns: repeat(2,1fr);
    }


    .dry-facts__item {
        min-height: 115px;
    }


    .dry-facts__item:nth-child(3)::after {
        display: block;
    }


    .dry-facts__item:nth-child(even)::after {
        display: none;
    }


    .dry-facts__item:nth-child(-n+4) {
        border-bottom: 1px solid #eee;
    }


    .dry-facts__item:last-child {
        grid-column: 1 / -1;
    }


    .why-rovelle {
        padding-top: 30px;
    }


    .why-rovelle__header h2 {
        font-size: 23px;
    }


    .why-rovelle__grid {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .why-rovelle__item {
        min-height: auto;
    }

}

/* =========================================================
   BALÍKY SUCHÉHO ĽADU
========================================================= */

.dry-packages {
    position: relative;

    padding: 34px 0 38px;

    color: #fff;

    background-color: #0a0c0f;

    background-image:
        linear-gradient(
            180deg,
            rgba(7, 9, 11, .88),
            rgba(7, 9, 11, .94)
        ),
        url("../image/header-bg.webp");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* =========================================================
   HEADER
========================================================= */

.dry-packages__header {
    margin-bottom: 27px;

    text-align: center;
}


.dry-packages__header h2 {
    margin: 0;

    color: #fff;

    font-size: 28px;
    font-weight: 800;

    line-height: 1.2;
}


.dry-packages__line {
    width: 60px;
    height: 2px;

    margin: 10px auto 9px;

    background: #c49a61;
}


.dry-packages__header p {
    margin: 0;

    color: rgba(255,255,255,.72);

    font-size: 14px;
}


/* =========================================================
   GRID
========================================================= */

.dry-packages__grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 24px;

    align-items: stretch;
}


/* =========================================================
   CARD
========================================================= */

.dry-package-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;

    overflow: visible;

    border: 1px solid rgba(255,255,255,.38);

    background: #fff;

    box-shadow:
        0 13px 32px rgba(0,0,0,.20);

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


.dry-package-card:hover {
    transform: translateY(-4px);

    border-color: rgba(198,154,97,.75);

    box-shadow:
        0 18px 40px rgba(0,0,0,.28);
}


/* FEATURED */

.dry-package-card--featured {
    border: 2px solid #c89b5d;

    box-shadow:
        0 17px 42px rgba(0,0,0,.28);
}


.dry-package-card__badge {
    position: absolute;

    top: -15px;
    left: 50%;

    z-index: 5;

    transform: translateX(-50%);

    padding: 7px 18px;

    border-radius: 3px;

    background:
        linear-gradient(
            180deg,
            #d4ad74 0%,
            #b88a4c 100%
        );

    color: #fff;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .06em;

    white-space: nowrap;
}


/* =========================================================
   IMAGE
========================================================= */

.dry-package-card__image {
    width: 100%;
    height: 122px;

    overflow: hidden;

    background: #e9e9e9;
}


.dry-package-card__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .35s ease;
}


.dry-package-card:hover .dry-package-card__image img {
    transform: scale(1.035);
}


/* =========================================================
   BODY
========================================================= */

.dry-package-card__body {
    display: flex;
    flex-direction: column;

    flex: 1;

    padding: 20px 22px 21px;

    color: #151515;

    text-align: center;
}


.dry-package-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;

    margin-bottom: 4px;

    color: #b88c52;

    font-size: 28px;
}


.dry-package-card__body h3 {
    margin: 0 0 2px;

    color: #161616;

    font-size: 18px;
    font-weight: 800;

    letter-spacing: .015em;
}


.dry-package-card__amount {
    margin-bottom: 14px;

    color: #151515;

    font-size: 18px;
    font-weight: 700;
}


/* =========================================================
   PRICE
========================================================= */

.dry-package-card__price {
    display: flex;
    align-items: flex-end;
    justify-content: center;

    gap: 5px;

    margin-bottom: 18px;
}


.dry-package-card__price strong {
    color: #b58950;

    font-size: 32px;
    font-weight: 800;

    line-height: 1;
}


.dry-package-card__price span {
    padding-bottom: 3px;

    color: #777;

    font-size: 13px;
    font-weight: 600;
}


/* =========================================================
   FEATURES
========================================================= */

.dry-package-card__features {
    list-style: none;

    margin: 0 0 20px;
    padding: 0;

    text-align: left;
}


.dry-package-card__features li {
    display: flex;
    align-items: flex-start;

    gap: 9px;

    margin-bottom: 8px;

    color: #696969;

    font-size: 12px;

    line-height: 1.4;
}


.dry-package-card__features i {
    position: relative;

    top: 1px;

    color: #b58950;

    font-size: 15px;

    flex: 0 0 auto;
}


/* =========================================================
   CARD BUTTON
========================================================= */

.dry-package-card__button {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    width: 100%;
    min-height: 39px;

    margin-top: auto;

    border: 1px solid #b98c53;
    border-radius: 2px;

    color: #a67b45;

    background: #fff;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .04em;

    text-decoration: none;

    transition:
        color .2s ease,
        background .2s ease,
        transform .2s ease;
}


.dry-package-card__button:hover {
    color: #fff;

    background: #b98c53;

    transform: translateY(-1px);
}


.dry-package-card__button--featured {
    color: #fff;

    background:
        linear-gradient(
            180deg,
            #d1a76e 0%,
            #b88a4d 100%
        );
}


.dry-package-card__button--featured:hover {
    background:
        linear-gradient(
            180deg,
            #ddb77e 0%,
            #c49759 100%
        );
}


/* =========================================================
   NOTE
========================================================= */

.dry-packages__note {
    max-width: 840px;

    display: flex;
    align-items: flex-start;

    gap: 12px;

    margin: 25px auto 0;

    padding: 13px 18px;

    border: 1px solid rgba(255,255,255,.10);

    background: rgba(255,255,255,.05);

    color: rgba(255,255,255,.70);
}


.dry-packages__note i {
    position: relative;

    top: 1px;

    color: #c79b61;

    font-size: 16px;
}


.dry-packages__note p {
    margin: 0;

    font-size: 12px;
    line-height: 1.5;
}


/* =========================================================
   ORDER PROCESS
========================================================= */

.dry-order-process {
    padding: 28px 0 34px;

    background: #fff;

    border-bottom: 1px solid #ececec;
}


/* HEADER */

.dry-order-process__header {
    margin-bottom: 27px;

    text-align: center;
}


.dry-order-process__header h2 {
    margin: 0;

    color: #171717;

    font-size: 27px;
    font-weight: 800;
}


.dry-order-process__line {
    width: 58px;
    height: 2px;

    margin: 9px auto 8px;

    background: #be9157;
}


.dry-order-process__header p {
    margin: 0;

    color: #777;

    font-size: 13px;
}


/* =========================================================
   PROCESS GRID
========================================================= */

.dry-order-process__grid {
    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        32px
        minmax(0,1fr)
        32px
        minmax(0,1fr)
        32px
        minmax(0,1fr);

    align-items: center;
}


/* =========================================================
   STEP
========================================================= */

.dry-order-step {
    position: relative;

    min-height: 145px;

    padding: 4px 15px;

    text-align: center;
}


.dry-order-step__number {
    position: absolute;

    top: 4px;
    left: 10px;

    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #fff;

    background:
        linear-gradient(
            180deg,
            #caa064 0%,
            #ae8048 100%
        );

    font-size: 13px;
    font-weight: 700;
}


.dry-order-step__icon {
    min-height: 62px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 5px;

    color: #111;

    font-size: 37px;
}


.dry-order-step h3 {
    margin: 0 0 7px;

    color: #191919;

    font-size: 15px;
    font-weight: 700;
}


.dry-order-step p {
    max-width: 190px;

    margin: 0 auto;

    color: #767676;

    font-size: 12px;

    line-height: 1.45;
}


/* =========================================================
   ARROWS
========================================================= */

.dry-order-process__arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    color: #b98c53;

    font-size: 22px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .dry-packages__grid {
        grid-template-columns: 1fr;

        max-width: 620px;

        margin-inline: auto;

        gap: 30px;
    }


    .dry-package-card__image {
        height: 180px;
    }


    .dry-order-process__grid {
        grid-template-columns: repeat(2, 1fr);

        gap: 28px 20px;
    }


    .dry-order-process__arrow {
        display: none;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575.98px) {

    .dry-packages {
        padding-top: 32px;
    }


    .dry-packages__header h2,
    .dry-order-process__header h2 {
        font-size: 23px;
    }


    .dry-package-card__image {
        height: 150px;
    }


    .dry-package-card__price strong {
        font-size: 29px;
    }


    .dry-order-process__grid {
        grid-template-columns: 1fr;

        gap: 10px;
    }


    .dry-order-step {
        min-height: auto;

        padding: 20px 15px 22px;

        border-bottom: 1px solid #eeeeee;
    }


    .dry-order-step:last-child {
        border-bottom: 0;
    }


    .dry-order-step__number {
        top: 20px;
        left: 12px;
    }

}

/* =========================================================
   HOME – VYBRANÉ POUŽITIE + FAQ
========================================================= */

.home-closing-section {
    width: 100%;

    background: #fff;

    padding: 0px;
}


/* =========================================================
   MAIN GRID
========================================================= */

.home-closing {
    display: grid;

    grid-template-columns:
        minmax(0, 2fr)
        minmax(330px, 1fr);

    overflow: hidden;

    border-top: 1px solid rgba(255,255,255,.10);
    border-bottom: 1px solid rgba(0,0,0,.10);
}


/* =========================================================
   LEFT – USES
========================================================= */

.home-uses {
    padding: 27px 30px 30px;

    color: #fff;

    background-color: #101316;

    background-image:
        linear-gradient(
            180deg,
            rgba(10,12,15,.88),
            rgba(10,12,15,.96)
        ),
        url("../image/header-bg.webp");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* HEADER */

.home-uses__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 25px;

    margin-bottom: 18px;
}


.home-uses__header h2 {
    margin: 0;

    color: #fff;

    font-size: 25px;
    font-weight: 800;

    line-height: 1.2;
}


.home-section-line {
    width: 43px;
    height: 2px;

    margin-top: 9px;

    background: #c1975e;
}


.home-uses__all {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    padding-top: 6px;

    color: #c89c63;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .025em;

    text-decoration: none;

    white-space: nowrap;

    transition: color .2s ease;
}


.home-uses__all:hover {
    color: #e0b77e;
}


.home-uses__all i {
    font-size: 16px;

    transition: transform .2s ease;
}


.home-uses__all:hover i {
    transform: translateX(4px);
}


/* =========================================================
   USE CARDS
========================================================= */

.home-uses__grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 17px;
}


.home-use-card {
    overflow: hidden;

    border: 1px solid rgba(255,255,255,.28);
    border-radius: 2px;

    background: rgba(7,9,11,.62);

    transition:
        transform .2s ease,
        border-color .2s ease;
}


.home-use-card:hover {
    transform: translateY(-3px);

    border-color: rgba(199,154,96,.85);
}


/* IMAGE */

.home-use-card__image {
    display: block;

    width: 100%;
    height: 132px;

    overflow: hidden;
}


.home-use-card__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    filter: saturate(.70);

    transition:
        transform .35s ease,
        filter .35s ease;
}


.home-use-card:hover img {
    transform: scale(1.04);

    filter: saturate(.90);
}


/* BODY */

.home-use-card__body {
    min-height: 110px;

    padding: 13px 14px 15px;
}


.home-use-card__body h3 {
    margin: 0 0 7px;

    font-size: 14px;
    font-weight: 700;

    line-height: 1.25;
}


.home-use-card__body h3 a {
    color: #fff;

    text-decoration: none;
}


.home-use-card__body p {
    margin: 0;

    color: rgba(255,255,255,.67);

    font-size: 11px;
    line-height: 1.45;
}


/* =========================================================
   RIGHT – FAQ
========================================================= */

.home-faq {
    position: relative;

    padding: 27px 31px 30px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #c29a66 0%,
            #a97b47 100%
        );

    overflow: hidden;
}


/* subtle texture */

.home-faq::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .12;

    background-image:
        url("../image/header-bg.webp");

    background-size: cover;
    background-position: center;
}


.home-faq > * {
    position: relative;

    z-index: 2;
}


/* TOP */

.home-faq__top {
    display: grid;

    grid-template-columns: 58px 1fr;

    gap: 18px;

    align-items: start;
}


.home-faq__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    color: rgba(255,255,255,.92);

    font-size: 39px;
}


.home-faq__top h2 {
    margin: 0;

    color: #fff;

    font-size: 16px;
    font-weight: 700;

    line-height: 1.35;

    letter-spacing: .025em;
}


.home-faq__line {
    width: 43px;
    height: 2px;

    margin: 13px 0 13px 76px;

    background: rgba(255,255,255,.68);
}


/* NUMBER */

.home-faq__number-row {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-bottom: 14px;
}


.home-faq__count {
    color: #f3cf92;

    font-size: 54px;
    font-weight: 800;

    line-height: 1;

    letter-spacing: -.04em;
}


.home-faq__number-row span {
    color: rgba(255,255,255,.82);

    font-size: 11px;

    line-height: 1.3;
}


/* TEXT */

.home-faq__text {
    max-width: 300px;

    margin: 0 0 18px;

    color: rgba(255,255,255,.86);

    font-size: 12px;
    line-height: 1.5;
}


/* BUTTON */

.home-faq__button {
    min-width: 185px;
    min-height: 39px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    padding: 9px 18px;

    border: 1px solid rgba(255,255,255,.72);
    border-radius: 2px;

    color: #fff;

    background: transparent;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .04em;

    text-decoration: none;

    transition:
        color .2s ease,
        background .2s ease;
}


.home-faq__button:hover {
    color: #9c713f;

    background: #fff;
}


.home-faq__button i {
    transition: transform .2s ease;
}


.home-faq__button:hover i {
    transform: translateX(4px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .home-closing {
        grid-template-columns: 1fr;
    }


    .home-uses__grid {
        grid-template-columns: repeat(3, 1fr);
    }


    .home-faq {
        display: grid;

        grid-template-columns: 1fr auto;

        column-gap: 30px;
    }


    .home-faq__top,
    .home-faq__line,
    .home-faq__number-row,
    .home-faq__text {
        grid-column: 1;
    }


    .home-faq__button {
        grid-column: 2;
        grid-row: 1 / 5;

        align-self: center;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .home-uses {
        padding:
            26px 18px
            24px;
    }


    .home-uses__header {
        align-items: flex-start;
    }


    .home-uses__header h2 {
        font-size: 22px;
    }


    .home-uses__grid {
        grid-template-columns: 1fr;
    }


    .home-use-card {
        display: grid;

        grid-template-columns: 145px 1fr;
    }


    .home-use-card__image {
        height: 100%;

        min-height: 130px;
    }


    .home-use-card__body {
        min-height: 130px;
    }


    .home-faq {
        display: block;

        padding: 27px 22px 30px;
    }


    .home-faq__button {
        width: 100%;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .home-uses__header {
        flex-direction: column;

        gap: 8px;
    }


    .home-use-card {
        display: block;
    }


    .home-use-card__image {
        height: 160px;
    }


    .home-use-card__body {
        min-height: auto;
    }


    .home-faq__count {
        font-size: 48px;
    }

}