@import "fonts.css";
@import "reset.css";
@import "global.css";

@import "header.css";
@import "footer.css";



/* =========================================== */

.swiper {
    max-width: 1294px;
    max-height: 550px;
    justify-content: center;
    align-items: center;
    gap: 15px;
    border-radius: 32px;
    background: #DCE5E2;
    margin-bottom: 73px;
}


.slider__title {
    font-family: 'Readex Pro';
    font-size: 58px;
    line-height: 69.6px;
    padding: 145px 3px 0 56px;
    margin-bottom: 20px;

    z-index: 10;
}

.slider__text {
    padding: 0px 3px 0px 56px;
    line-height: 20px;
    margin-bottom: 30px;
    max-width: 565px;
}

.slider__img img {
    position: absolute;
    bottom: 0;
    right: 0;
}

.img-2 img {
    max-width: 405px;
    width: 100%;
}

.button {
    font-size: 18px;
    line-height: 21.6px;

    background: transparent;
    border: 1.5px solid #000000;
    border-radius: 200px;
    width: 170px;
    height: 50px;

    transition: all .5s;
}

.slider__button {
    margin: 0px 3px 0px 56px;

}

.button:hover {
    background: #101010;
    color: #DCE5E2;
}

.slider__img {
    max-width: 650px;

}

/* ======================================================================= */

.gallery {
    margin-bottom: 72px;
}

.gallery__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 56px;
    flex-direction: column;
}

.gallery__title {

    text-align: center;
    margin-bottom: 3px;

}

.gallery__text {
    font-family: 'Readex Pro';
    font-size: 14px;
    line-height: 16.8px;
    text-align: center;

    max-width: 620px;
}

.gallery__slides {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(3, auto);
    grid-template-rows: repeat(2, auto);
    gap: 16px;

}

.slide-1 {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    margin-bottom: 72px;
    flex-direction: column;
    width: 639px;
    height: 472px;

}

.slide-1 img {
    object-fit: contain;
    max-width: 500px;
    margin-left: 42px;
}


.slide-1__content {
    display: flex;
    align-items: end;
    flex-direction: column;
    text-align: end;
    margin: 0 42px;
}

.slide-1__content h3 {
    text-align: end;
    font-size: 2vw;
}

.slide-2 {
    grid-column: 2;
    grid-row: 1/-1;
    max-width: 312px;
    max-height: 792px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

}

.slide-2 img {
    margin-bottom: 41px;
}

.slide-2 h3 {
    margin-bottom: 41px;
    font-size: 2vw;
}

.slide-3 {
    grid-column: 3;
    grid-row: 1/-1;
    display: flex;
    /* margin-right: 72px; */
    max-width: 312px;
    max-height: 792px;
    justify-content: center;
    align-items: center;
    flex-direction: column-reverse;

}

.slide-3 h3 {
    margin-bottom: 42px;
    font-size: 2vw;
}


.slide-4 {
    grid-column: 1;
    grid-row: 2;
    max-width: 639px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;

}

.slide-4 img {
    max-width: 381px;
    max-height: 270px;

}

.slide-4__content {
    margin-left: 46px;

}

.slide-4__content h3 {
    text-align: end;
    font-size: 2vw;
}

.slide-4__content p {
    text-align: end;
}

.gallery__img {
    width: 100%;
}

.gallery__slide {
    box-shadow: 0px 4px 35px 0px #00000040;

    transition: all .3s;
    cursor: pointer;
}

/* .gallery__slide:hover {
    box-shadow: 0px 4px 35px 0px #000000b1;
} */

.gallery__text {
    font-family: 'Inter';
    font-size: 15px;
    line-height: 19.2px;
    text-align: center;

}

.gallery__slide-title {
    font-family: 'Readex Pro';
    font-size: 32px;
    line-height: 38.4px;
    text-align: center;
}


/* =========================================== */


.items__inner {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.items__title {
    margin-bottom: 9px;
}

.items__text {
    margin-bottom: 60px;

}

.products {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(4, auto);
    gap: 56px;
    margin-bottom: 74px;
}

.products__item {
    cursor: pointer;
    max-width: 30vw;
}

.products__img {
    margin-bottom: 37px;
}

.products__title {
    font-family: 'Readex Pro';
    font-size: 22px;
    line-height: 27.5px;
    margin-bottom: 9px;

}

.products__text {
    max-width: 261px;
    margin-bottom: 8px;
    display: flex;
    align-items: end;
    justify-content: end;
}

.products__price {
    font-family: 'Inter';
    font-size: 18px;
    line-height: 21.6px;


}

/* ======================================================= */

.best {
    display: flex;
    justify-content: center;
    margin-bottom: 75px;
}

.best__inner {
    text-align: center;
    margin-bottom: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.best__items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.best__item {
    text-align: center;
    background: #F8F9FA;
    display: flex;
    align-items: center;
    justify-content: start;
    flex-direction: column;
    max-width: 413px;

}

.best__img {
    max-width: 30vw;
}

.best__item:first-child {
    margin-left: 73px;
}

.best__item:last-child {
    margin-right: 73px;
    margin-left: -10px;
}

.best__item-text {
    margin-top: 41px;
}

.best__item-title {
    font-family: 'Readex Pro';
    font-size: 28px;
    line-height: 35px;
    margin-bottom: 30px;
}

.best__button {
    margin-bottom: 30px;
}

/* ============================================ */

.ideas__inner {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ideas__title {
    margin-bottom: 9px;
}

.ideas__text {
    margin-bottom: 56px;
}

.ideas__content {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 35px;
    justify-content: center;
}

.ideas__img {
    margin-left: 73px;
    margin-bottom: 73px;
    max-width: 43vw;
}

.ideas__quotes {
    max-width: 639px;
    margin-right: 73px;
    margin-top: 14px;
}

.ideas__content-text {
    font-family: 'Inter';
    font-size: 24px;
    line-height: 30px;
    margin-bottom: 23px;
    margin-left: -10px;
}

.seeall {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 75px;
}

.seeall__link {
    font-family: 'Inter';
    font-size: 24px;
    line-height: 28.8px;
    text-transform: capitalize;
}

.seeall__img {
    max-width: 30px;
}

/* -=================================================================== */


.search__container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.search__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.search__title {
    margin-bottom: 24px;
}


.search__form-img {
    width: 30px;
    height: 29px;

    margin-left: 20px;
    margin-right: 26px;
}

.search__form {
    max-width: 47vw;
    width: 100%;
    height: 60px;
    border-radius: 100px;
    border: 1px solid #C5C5C5;
    background: #F8F9FA;
    margin-bottom: 18px;

    display: flex;
    align-items: center;
}

.search {
    background: transparent;
}

.search::placeholder {
    font-family: 'Inter';
    font-size: 14px;
    line-height: 16.8px;
    text-align: center;
    color: #000000;
    text-align: start;

}

.things {
    max-width: 40vw;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
    margin-bottom: 61px;
}

.search__button {
    height: 42px;
    border-radius: 200px;
    background: transparent;
    border: 1px solid #C5C5C5;
    transition: all .5s;


}

.search__button {
    white-space: nowrap;
    padding: 12px 22px 13px 22px;
}

.search__button:hover {
    background: #000000;
    color: #DCE5E2;
}


.search__content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    max-width: 935px;
    width: 100%;
    height: 450px;
    border-radius: 16px;
    background: #DCE5E2;
    margin-bottom: 19px;

}

.search__content-title {
    margin-bottom: 9px;
}

.search__content-text {
    margin-bottom: 14px;
}

.email {
    width: 285px;
    height: 50px;
    border: 2px solid #000000;
    border-top-left-radius: 54px;
    border-bottom-left-radius: 54px;
    background: transparent;
    padding-left: 32px;
}

.email::placeholder {
    font-family: 'Inter';
    color: #000000;
}

.email input {
    display: flex;
    padding-left: 32px;
}

.submit {
    width: 115px;
    height: 50px;
    background: #000000;
    color: #ffffffe8;
    border-top-right-radius: 200px;
    border-bottom-right-radius: 200px;
    cursor: pointer;
}

.search__content-img {
    margin-bottom: 14px;
}

.search__content-form {
    display: flex;
}

/* ==================================================================== */
/* ============================================================== */

@media (max-width: 1536px) {
    .nav {
        padding: 30px 130px;
    }
}



@media (max-width: 1300px) {
    .slider__text {
        max-width: 400px;
    }

    .slider__title {
        font-size: 45px;
    }


    /* ========================================== */
    .gallery__slides {
        margin-left: 50px;
        margin-right: 50px;
    }

    .slide-1 {
        width: 42vw;
        max-height: 450px;
    }

    .slide-1 img {
        object-fit: contain;
        max-width: 35vw;
    }

    .slide-1__content {
        padding-right: 20px;
        margin: 0;
    }

    .slide-4 {
        width: 42vw;
    }

    .slide-4 img {
        object-fit: contain;
        max-width: 35vw;
    }

    .slide-4__content {
        padding-right: 20px;
    }

    /* ========================================== */



    /* ========================================== */

    .products {
        display: grid;
        grid-template-columns: repeat(2, auto);
        align-items: center;
        justify-content: center;
        margin-left: 73px;
        gap: 90px;
        margin-bottom: 74px;
    }



}


@media (max-width: 1150px) {
    .slider__img img {
        max-width: 500px;
    }

    .slider__title {
        margin-top: -50px;
    }

    /* ================================== */

    .slide-1 {
        width: 42vw;
        max-height: 400px;
    }





    /* ================================== */
    .ideas__content {
        margin-bottom: 60px;
    }

    /* ================================== */

    .footer__col:last-child {
        margin-right: 0px;
    }
}

@media (max-width: 1000px) {
    .slider__img img {
        max-width: 450px;
    }

    .gallery__slide h3 {
        font-size: 2.5vw;
    }

    /* ==================================== */

    .search__content {
        max-width: 90vw;
    }
}

@media (max-width: 930px) {
    .img-2 img {
        max-width: 300px;
    }

    .slider__title {
        font-size: 35px;
    }


    /* ================================== */



    .gallery__slide-title {
        line-height: 24.4px;
    }

    .slide-1 {
        width: 42vw;
        max-height: 320px;
    }




    /* ================================== */

    .best__item {
        max-width: 30vw;
    }

    .best__items {
        gap: 30px;
    }

    /* ===================== */


    /* ================================= */


}

@media (max-width: 880px) {

    .title-2,
    .title-3 {
        margin-bottom: 65px;
    }

    /* ============================== */

    .nav {
        position: fixed;
        background: #DCE5E2;
        z-index: 10;
        inset: 0;
        padding: 10vh 15px 30px;
        font-size: 24px;

        transform: translateY(-50%);
        opacity: 0;
        visibility: hidden;
        transition: .4s;
    }

    .header__img {
        position: absolute;
        top: 125px;
    }


    .nav__list {

        flex-direction: column;
        align-items: center;

        position: absolute;
        right: 42%;
        top: 165px;

    }

    .nav__list.close {
        display: none;

    }


    .nav__tools {
        position: absolute;
        right: 90px;
        top: 125px;
    }


    .body--opened-menu .nav.open {
        transform: translateY(-25%);
        opacity: 1;
        visibility: visible;
        position: relative;

        height: 400px;
    }


    .burger-icon {
        display: flex;
        position: absolute;
        cursor: pointer;
        right: 10px;
        top: 0;
    }




    /* ========================================= */
    .solutions__menu {
        display: none;
    }

    /* ========================================= */
    .gallery__slides {
        align-items: center;
        justify-content: center;
        grid-template-columns: repeat(2, auto);
        grid-template-rows: repeat(3, auto);
    }

    .slide-1 {
        grid-column: 1 / -1;
        grid-row: 1;
        margin-bottom: 0;
        max-width: 640px;
        width: 100%;
        position: relative;
    }

    .slide-1 img {
        max-width: 402px;
        width: 100%;
        margin-bottom: 0;
    }

    .slide-1__content {
        position: absolute;
        top: 140px;
        right: 15px;
        padding-right: 110px;
        margin: -100px;
    }

    .slide-1__content h3 {
        font-size: 3vw;
    }



    .slide-2 {
        grid-column: 1;
        grid-row: 2;
        width: 40vw;
        margin-left: 0;
    }

    .slide-2 h3 {
        font-size: 3vw;
    }

    .slide-3 {
        grid-column: 2;
        grid-row: 2;
        width: 40vw;
        height: 100%;
    }

    .slide-3 h3 {
        font-size: 3vw;
    }

    .slide-4 {
        grid-column: 1 / -1;
        grid-row: 3;
        max-width: 640px;
        width: 100%;
    }


    .slide-4__content {
        margin-left: 100px;
    }

    .gallery__slide h3 {
        font-size: 3vw;
        line-height: 1.3;
    }

    .slider__img img {
        max-width: 400px;
    }

    .slider__title {
        margin-top: -100px;

    }

    .slider__text {
        max-width: 300px;
        margin-bottom: 60px;
    }

    /* ============================================ */

    .ideas__img {
        align-self: center;
    }


    /* ================================================ */

    .things {
        max-width: 60vw;
    }

    /* ================================================ */

    .footer__col-title {
        font-size: 2vw;
    }

    .footer__list-item {
        font-size: 1.6vw;
    }

    .madeBy p {
        font-size: 2vw;
    }

    .madeBy a {
        font-size: 2vw;
    }

    .madeBy img {
        max-width: 2.5vw;
    }

    .poweredBy p {
        font-size: 2vw;
    }

    .poweredBy a {
        font-size: 2vw;
    }

    .poweredBy img {
        max-width: 2.5vw;
    }

}


@media (max-width: 760px) {

    .title {
        font-size: 3.5vw;
    }

    /* ===================================== */
    .slider__inner {
        text-align: center;
    }

    .slider__img img {
        display: none;
    }

    .slider__title {
        line-height: 1.3;
        padding: 145px 0px 0 0px;
    }

    .slider__text {
        display: inline-block;
        font-size: 24px;
        margin-bottom: 60px;
        padding: 30px 3px 0 0;
        max-width: 430px;
        line-height: 1.2;
    }

    .slider__button {
        margin: 0px 3px 0px 0px;
    }

    /* ========================== */


    .best__items {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
    }

    /* ================================ */


    .ideas__content {
        align-items: center;
        justify-content: center;
        display: flex;
        flex-direction: column;
    }

    .ideas__content-text {
        font-size: 3vw;
    }

    .ideas__quotes {
        margin-right: 0;
    }

    .ideas__img {
        margin-left: 10px;
        margin-bottom: 10px;
        max-width: 55vw;
    }

    /* ================================ */

    .search__content-text {
        max-width: 40vw;
    }

    /* ================================ */

    .footer__inner {
        padding: 44px 30px 78px;
    }

    .footer__text {
        font-size: 2vw;
        max-width: 180px;
    }

    .footer__col-title {
        font-size: 2.5vw;
    }

    .footer__list-item {
        font-size: 2vw;
    }

}

@media (max-width: 670px) {

    .title {
        font-size: 5vw;

    }

    /* ======================================= */

    .slider__inner {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        max-width: none;
    }

    .slider__img img {
        display: none;
    }

    .slider__text {
        width: 400px;
        margin-bottom: 80px;
    }


    .slider__button {
        margin: 0;
    }

    /* ======================================== */

    .products {
        display: grid;
        grid-template-columns: repeat(1, auto);
        justify-content: center;
        margin-left: 0;
        gap: 70px;
        margin-bottom: 74px;
    }

    .products__item {
        max-width: 35vw;
    }

    .best__items {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        align-items: start;
        justify-content: center;
    }

    .best__item {
        max-width: 35vw;
    }

    .best__item:first-child {
        justify-self: center;
        margin: 0;
    }

    .best__item:last-child {
        justify-self: center;
        margin: 0;
    }


    .title-2 {
        margin-bottom: 65px;
    }


    /* ========================================== */

    .footer__inner {
        padding: 30px 20px 78px;
    }

    .footer__text {
        font-size: 2vw;
        max-width: 90px;
    }

    .footer__list-item {
        font-size: 2vw;
        margin-bottom: 0px;
    }

    .footer__col-title {
        font-size: 2.5vw;
        line-height: 16.5px;
    }
}


@media (max-width: 600px) {

    .slider__button {
        width: 200px;
    }

    /* ================================== */

    .slider {
        margin: 75px 50px 64px 50px;
    }


    .slider__img img {
        display: none;
    }



    .slider__text {
        width: 300;
        margin-bottom: 75px;
    }



    /* ================================= */

    .slide-1 img {
        max-width: 340px;
    }


    .gallery__text {
        max-width: 460px;
    }


    /* ========================= */
    .ideas__content-text {
        font-size: 16px;
    }


    /* ========================= */

    .email {
        width: 30vw;
    }
}

@media (max-width: 500px) {

    .header__img {
        display: none;
    }

    /* ======================== */
    .slider__title {
        font-size: 40px;
        padding-left: 10px;
        padding-right: 10px;
    }


    .swiper-pagination {
        display: none;
    }

    /* ================================= */


    /* ================================= */

    .slide-1 {
        max-height: 223px;
    }

    .slide-1 img {
        max-width: 295px;
        margin-left: 20px;
    }

    .gallery__title {
        font-size: 20px;
    }

    .gallery__text {
        font-size: 14px;
        max-width: 300px;
    }

    .gallery__slide h3 {
        font-size: 4vw;

    }

    /* ================================= */

    .products__item {
        max-width: 45vw;
    }

    .title-2 {
        margin-bottom: 65px;
    }

    /* ================================= */



    .seeall__link {
        font-size: 24px;
    }

    .seeall__img {
        max-width: 30px;
    }

    /* ===================================== */

    .footer__inner {
        display: flex;
        flex-direction: column;
        align-items: center;
    }


    .footer__logo {
        max-width: 50vw;

    }

    .footer__text {
        font-size: 3.5vw;
        max-width: none;
    }


    .footer__col {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer__col-title {
        font-size: 6vw;
    }

    .footer__link {
        font-size: 4vw;
    }

    /* ================================== */

    .madeBy {
        margin-left: 30px;
    }

    .poweredBy {
        margin-right: 30px;
    }


    .madeBy p {
        font-size: 3vw;
    }

    .madeBy a {
        font-size: 3vw;
    }

    .madeBy img {
        max-width: 3.5vw;
    }

    .poweredBy p {
        font-size: 3vw;
    }

    .poweredBy a {
        font-size: 3vw;
    }

    .poweredBy img {
        max-width: 3.5vw;
    }
}

@media (max-width: 470px) {
    .slider {
        margin: 75px 25px 64px 25px;
    }

    .slider__title {
        font-size: 30px;
    }

    .slider__text {
        max-width: 250px;
    }

    /* ==================================== */

    .best__items {
        grid-template-columns: repeat(1, auto);
    }

    .best__item {
        max-width: 60vw;
        width: 100%;
    }

    .best__text {
        max-width: 200px;
    }

    .best__item:first-child,
    .best__item:last-child {
        margin: 0;
    }
}


@media (max-width: 420px) {

    .title {
        line-height: 35.5px;
    }

    /* =================================================== */

    .header__img img {
        display: none;
    }

    .nav__tools {
        left: 10px;
    }

    .nav__list {
        right: 36%;
    }

    /* ================================================= */



    /* ================================================= */

    .swiper-wrapper {
        max-height: 450px;
    }

    .slider__title {
        font-size: 30px;
        line-height: 35px;
    }


    .swiper-pagination {
        display: none;
    }

    .slider__title {
        margin-bottom: 70px;
    }

    .slider__text {
        padding: 0;
        max-width: 300px;
        font-size: 18px;
    }

    .gallery__title {
        margin-bottom: 20px;
    }

    /* ===================================== */


    .slide-1 {
        max-height: 181px;
    }

    .slide-1 img {
        max-width: 240px;
        margin-left: 20px;
    }





    /* ===================================== */


    .products__item {
        align-items: center;
        display: flex;
        flex-direction: column;

    }

    .products__img {
        max-width: 50vw;
    }


    /* ===================================== */

    .items__text {
        max-width: 210px;
    }


    /* ====================================== */

    .ideas__text {
        max-width: 50vw;
    }

    .ideas__quotes {
        max-width: 270px;
    }

    .seeall__link {
        font-size: 18px;
    }

    .seeall__img {
        max-width: 25px;
    }

    /* =========================== */

    .search__form {
        max-width: 65vw;
    }

    .things {
        max-width: 60vw;
        width: 100%;
    }

    .email {
        width: 40vw;
    }


    /* ========================================= */

    .footer__bottom {
        gap: 60px;
    }

    .madeBy {
        margin-left: 15px;
    }

    .poweredBy {
        margin-right: 15px;
    }
}




@media (max-width: 360px) {

    .nav__list {
        right: 30%;
    }

    /* =========================================== */
    .slider__title {
        font-size: 25px;
    }

    .slider__text {
        max-width: 200px;
        margin-bottom: 40px;
    }

    /* ======================================== */


    .items__text {
        max-width: 210px;
        margin-left: 0;
    }


    .products__item {
        max-width: 65vw;
    }

    /* ======================================== */


    .ideas__img {
        max-width: 75vw;
    }

    /* ========================================= */

    .things {
        max-width: 80vw;
    }

    .search__form {
        max-width: 80vw;
    }
}