.container {
    max-width: calc(var(--container-width) + var(--container-padding-x) * 2);
    margin-inline: auto;
    padding-inline: var(--container-padding-x);
}

:root {
    --color-dark: #000000;
    --color-white: #FFFFFF;
    --color-gray: #797979;
    --container-width: 1920px;
    --container-padding-x: 15px;
}

/**
  Нормализация блочной модели
 */
*,
::before,
::after {
    box-sizing: border-box;
}

/**
   Убираем внутренние отступы слева тегам списков,
   у которых есть атрибут class
  */
:where(ul, ol):where([class]) {
    padding-left: 0;
}

/**
   Убираем внешние отступы body и двум другим тегам,
   у которых есть атрибут class
  */
body,
:where(blockquote, figure, fieldset):where([class]) {
    margin: 0;
}

/**
   Убираем внешние отступы вертикали нужным тегам,
   у которых есть атрибут class
  */
:where(h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    ul,
    ol,
    dl):where([class]) {
    margin-block: 0;
}

:where(dd[class]) {
    margin-left: 0;
}

:where(fieldset[class]) {
    padding: 0;
    border: none;
}

/**
   Убираем стандартный маркер маркированному списку,
   у которого есть атрибут class
  */
:where(ul[class]) {
    list-style: none;
}

:where(address[class]) {
    font-style: normal;
}

/**
   Обнуляем вертикальные внешние отступы параграфа,
   объявляем локальную переменную для внешнего отступа вниз,
   чтобы избежать взаимодействие с более сложным селектором
  */
p {
    --paragraphMarginBottom: 24px;

    margin-block: 0;
}

/**
   Внешний отступ вниз для параграфа без атрибута class,
   который расположен не последним среди своих соседних элементов
  */
p:where(:not([class]):not(:last-child)) {
    margin-bottom: var(--paragraphMarginBottom);
}


/**
   Упрощаем работу с изображениями и видео
  */
img,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

/**
   Наследуем свойства шрифт для полей ввода
  */
input,
textarea,
select,
button {
    font: inherit;
}

html {
    /**
     Пригодится в большинстве ситуаций
     (когда, например, нужно будет "прижать" футер к низу сайта)
    */
    height: 100%;
    /**
     Убираем скачок интерфейса по горизонтали
     при появлении / исчезновении скроллбара
    */
    scrollbar-gutter: stable;
}

/**
   Плавный скролл
  */
html {
    scroll-behavior: smooth;
}

body {
    /**
     Пригодится в большинстве ситуаций
     (когда, например, нужно будет "прижать" футер к низу сайта)
    */
    min-height: 100%;
    /**
     Унифицированный интерлиньяж
    */
    line-height: 1.5;
}

/**
   Нормализация высоты элемента ссылки при его инспектировании в DevTools
  */
a:where([class]) {
    display: inline-flex;
}

/**
   Курсор-рука при наведении на элемент
  */
button,
label {
    cursor: pointer;
}

/**
   Приводим к единому цвету svg-элементы
   (за исключением тех, у которых уже указан
   атрибут fill со значением 'none' или начинается с 'url')
  */
:where([fill]:not([fill="none"],
        [fill^="url"])) {
    fill: currentColor;
}

/**
   Приводим к единому цвету svg-элементы
   (за исключением тех, у которых уже указан
   атрибут stroke со значением 'none')
  */
:where([stroke]:not([stroke="none"],
        [stroke^="url"])) {
    stroke: currentColor;
}

/**
   Чиним баг задержки смены цвета при взаимодействии с svg-элементами
  */
svg * {
    transition-property: fill, stroke;
}

/**
   Приведение рамок таблиц в классический 'collapse' вид
  */
:where(table) {
    border-collapse: collapse;
    border-color: currentColor;
}

/**
   Удаляем все анимации и переходы для людей,
   которые предпочитают их не использовать
  */
@media (prefers-reduced-motion: reduce) {

    *,
    ::before,
    ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

.noto-sans {
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: weight;
    font-style: normal;
}

.nunito-sans {
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: weight;
    font-style: normal;
}

.head-sec {
    position: relative;
    width: 100%;
    height: 100%;
}

.big-back-img-head {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 1;
    /* Фонове зображення — нижче */
}

.div-head-z-index {
    position: absolute;
    top: 35px;

    left: 70px;

    z-index: 2;

}

.black-1-head {
    width: 40px;
    height: 15px;
    background-color: #000000;
}

.black-2-head {
    width: 40px;
    height: 15px;
    background-color: #000000;
}

.black-3-head {
    width: 35px;
    height: 15px;
    background-color: #000000;
}

.black-4-head {
    width: 70px;
    height: 15px;
    background-color: #000000;
}

.black-5-head {
    width: 35px;
    height: 15px;
    background-color: #000000;
}

.ul-div-black {
    /* position: absolute;
    z-index: 2;
    top: 35px;
    left: 50px;
    column-gap: 48px; */
    display: flex;
    position: absolute;
    z-index: 2;
    top: 35px;
    left: 50px;
    /* Підрегулюєш як треба */
    column-gap: 48px;
    /* Відстань між блоками */
    list-style: none;
}

.div-palka2 {
    position: absolute;
    top: 700px;
    left: 70px;
    z-index: 2;
    height: 1.2px;
    background-color: black;
    width: calc(100% - 140px);
}

.div-palka {
    position: absolute;
    top: 70px;
    left: 70px;
    z-index: 2;
    height: 2px;
    background-color: black;
    width: calc(100% - 140px);
}

.head2 {
    background-image: url(./big-back/big-first-back.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.ul-serch-card-head {
    display: flex;
    justify-content: flex-end;
    margin-right: 100px;
    align-items: center;
    column-gap: 25px;
}

.li-lypa {
    display: flex;
    column-gap: 15px;
    font-size: 20px;
    align-items: center;
}

.coshik {
    display: flex;
    column-gap: 15px;
    font-size: 20px;
}

.small-peple-head {
    display: flex;
    column-gap: 25px;
}

.header-icons {
    position: absolute;
    top: 35px;
    right: 70px;
    display: flex;
    align-items: center;
    gap: 25px;
    font-family: 'Arial', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
}

.header-icons .icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-left: 5px;
    cursor: pointer;
}

.header-icons .bookmark,
.header-icons .profile {
    display: flex;
    align-items: center;
    gap: 5px;
}

.header-icons .cart {
    display: flex;
    align-items: center;
    gap: 5px;
}

.header-icons .search {
    display: flex;
    align-items: center;
    gap: 5px;
}

.div-strilka-head {
    display: flex;
    position: relative;
    top: 330px;
    left: 100px;
    column-gap: 1250px;
}

.mixed-tex {
    margin-top: 450px;
    margin-left: 135px;
}

@media (max-width:530px) {
    .mixed-tex {
        position: relative;
        right: 50px;
    }
}

@media (max-width:460px) {
    .mixed-tex {
        position: relative;
        right: 100px;
        bottom: 100px;
    }
}

.h1-mix-fix {
    font-size: 45px;
}

.p-mix-fix {
    font-size: 15px;
    margin-top: 6px;
}

.butt-mix-fix {
    margin-top: 25px;
    border: none;
    outline: 1.5px solid black;
    font-size: 10px;
    width: 190px;
    height: 35px;
    color: #000000;
    background-color: transparent;
}

.p-first-sec {
    font-size: 25px;
    display: flex;
    justify-content: center;
    margin-top: 150px;
    text-align-last: center;
}

.ul-categories {
    display: flex;
    justify-content: flex-start;
    margin-top: 130px;
    column-gap: 40px;
    margin-left: 130px;
}

@media (max-width:600px) {
    .ul-categories {
        position: relative;
        right: 100px;
    }
}

@media (max-width:1000px) {
    .col-adapt {
        color: #5c5858;
    }
}

@media (max-width:570px) {
    .header-icons {
        margin-top: 40px;
    }
}

.posision-summary {
    display: flex;
    justify-content: end;
    margin-right: 140px;
}

.img-first-sec-photo {
    outline: #000000 1px solid;
    height: 500px;
    width: 400px;

}
@media (max-width:440px) {
    .img-first-sec-photo {
        width: 350px;
        height: 450px;
    
    }
    .p-span-first-sec {
       width: 350px;
       height: 40px;
    }
    .img-pacet{
        position: relative;
        right: 30px;
    }
}
@media (max-width:395px) {
    .img-first-sec-photo {
        width: 300px;
        height: 400px;
    
    }
    .p-span-first-sec {
       width: 300px;
       height: 30px;
    }
    .img-pacet{
        position: relative;
        right: 80px;
    }
    .first-clothes-sec{
        margin-left: 50px;
    }
}
.p-span-first-sec {
    outline: #000000 1px solid;
    max-width: 400px;
    height: 60px;
    margin-top: 3px;
    padding-left: 15px;
    padding-top: 3px;
}

.sdfs {
    margin-top: 500px;
}

.img-pacet {
    width: 17px;
    margin-left: 345px;
    margin-top: -40px;

}

.first-clothes-sec {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

/* @media (max-width:1900px) {
    
} */
.mar-top-fir-sec-photo {
    margin-top: 20px;
}

@media (max-width:1645px) {
    .mar-top-one {
        margin-top: 20px;
    }
}

@media (max-width:1290px) {
    .mar-top-one {
        margin-top: 20px;
    }
}

@media (max-width:1155px) {
    .mar-top-one {
        margin-top: 20px;
    }
}

@media (max-width:785px) {
    .mar-top-one {
        margin-top: 20px;
    }
}

.man-woman-sec {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 120px;
}

.man {
    background-image: url(./big-back/man-big-photo.png);
    width: 740px;
    height: 600px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.woman {
    background-image: url(./big-back/girl-big-photo.png);
    width: 740px;
    height: 600px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.text-sec-man-woman {
    /* display: flex;
    justify-content: center; */
    /* align-items: center; */
    /* margin-top: 250px; */
    font-size: 25px;
}

.left-butt-man-woman {
    display: flex;
    justify-content: center;
}

.man,
.woman {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 740px;
    height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.text-sec-man-woman {
    font-size: 25px;
}

.left-butt-man-woman1 {
    padding: 10px 20px;
}

.x-small-ele {
    display: flex;
    justify-content: center;
    text-align-last: center;
    margin-bottom: 25px;
}

.img-company {
    display: flex;
    justify-content: center;
    column-gap: 60px;
}

.sec-small-eleme {
    margin-top: 150px;
}

/* .img-man-girl2 {
    background-image: url(./big-back/big-back-man-girl.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    width: 1340px;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 17px;
    color: white;
    flex-direction: column;
    padding: 20px;
    box-sizing: border-box;
} */
.img-man-girl2 {
    background-image: url(./big-back/big-back-man-girl.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    width: 100%;
    aspect-ratio: 1340 / 500;
    min-height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    color: white;
    padding: 20px;
    box-sizing: border-box;
}

.man-girl-two {
    margin-top: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

a {
    color: white;
}

.zagol-sec-three-photos {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    margin-top: 100px;
}

.three-photo-sec {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* flex-direction: column; */
    margin-top: 100px;
    column-gap: 50px;
    flex-wrap: wrap;
}

.one-fot-three-photo-sec {
    background-image: url(./three-sec-photo/first-kyrtka.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 450px;
    height: 550px;
}

.two-fot-three-photo-sec {
    background-image: url(./three-sec-photo/sec-two-man.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 100px;
    width: 450px;
    height: 450px;
}

.three-fot-three-photo-sec {
    background-image: url(./three-sec-photo/third-man.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 450px;
    height: 550px;
}

.p-three-sec-photo {
    display: flex;
    justify-content: flex-start;
    outline: #000000 2px solid;
    width: 160px;
    margin-top: 20px;
    margin-left: 30px;
    background-color: #FFFFFF;
    padding: 3px;
}

.p-three-sec-photo2 {
    position: relative;
    top: 530px;
}

.p-three-sec-photo3 {
    position: relative;
    top: 430px;
}

.palka-three-sec-photo2 {
    position: relative;
    top: 420px;
    height: 1.2px;
    background-color: black;
    width: calc(100% - 0px);
}

.palka-three-sec-photo {
    position: relative;
    top: 520px;
    height: 1.2px;
    background-color: black;
    width: calc(100% - 0px);
}

@media (max-width:1500px) {
    .three-fot-three-photo-sec {
        margin-top: 130px;
    }
}

@media (max-width:1000px) {
    .three-fot-three-photo-sec {
        margin-top: 10px;
    }

    .two-fot-three-photo-sec {
        margin-top: 130px;
    }

    .three-fot-three-photo-sec {
        margin-top: 40px;
    }
}

.a-three-photos2 {
    position: relative;
    top: 450px;
    color: #000000;
    font-size: 12px;
}

.a-three-photos {
    position: relative;
    top: 540px;
    color: #000000;
    font-size: 12px;
}

.img-sec-back {
    margin-top: 200px;
    background-image: url(./big-back/back-sec.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
}

.h1-sing-up-se-back {
    font-size: 30px;
}

/* .gmail-sec-back{
    margin-top: 50px;
    width: 500px;
    outline: none;
    border-bottom: 1px solid black;
    
} */
.img-sec-back {
    display: flex;
    flex-direction: column;
    align-items: center;
}


.gmail-sec-back {
    margin-top: 50px;
    border: none;
    border-bottom: 1px solid black;
    background: transparent;
    outline: none;
    font-size: 16px;
    width: 500px;
    padding: 5px;
    color: black;
}

.gmail-sec-back::placeholder {
    color: #999;
}

.img-sec-back button {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 20px;
    margin-left: 400px;
    transform: translateY(-30px);
    /* Підтягуємо стрілку догори */
}

.img-sec-back button span {
    display: inline-block;
}

@media (max-width: 768px) {
    .gmail-sec-back {
        width: 70%;
        font-size: 14px;
    }

    .img-sec-back button {
        font-size: 20px;
        margin-left: 120px;
        transform: translateY(-34px);
    }
}

/* Адаптив для мобільних */
@media (max-width: 480px) {
    .gmail-sec-back {
        width: 80%;
        font-size: 13px;
    }

    .img-sec-back button {
        font-size: 18px;

        transform: translateY(-32px);
    }
}

.two-sec-photo {
    margin-top: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-wrap: wrap;
    column-gap: 40px;
}

.div-two-sec-img {
    margin-left: 50px;
}

.butt-mix-fix2 {
    border: none;
    outline: 1.5px solid black;
    font-size: 10px;
    width: 190px;
    height: 35px;
    color: #000000;
    background-color: transparent;
    /* position: relative;
    left: 80px; */
}

@media (max-width:890px) {
    .img-two-sec-widt {
        width: 600px;
    }
}

.smal-sec {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    margin-top: 100px;
    margin-left: 100px;
}

.slider-container {
    margin-top: 100px;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.slider {
    display: inline-block;
    white-space: nowrap;
    animation: scroll-left 20s linear infinite;
}

.slider img {
    width: 250px;
    height: 250px;
    display: inline-block;
    margin-right: 20px;
}

/* Адаптив */
@media (max-width: 768px) {
    .slider img {
        width: 150px;
        height: 150px;
    }
}

@keyframes scroll-left {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.div-allfoot {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 120px;
    font-size: 15px;
    
    align-items: center;
    height: 300px;
}
.gmail-sec-back2 {
    margin-top: 50px;
    border: none;
    border-bottom: 1px solid black;
    background: transparent;
    outline: none;
    font-size: 16px;
    width: 250px;
    padding: 5px;
    color: black;
}
.p-sec-foot{
    margin-top: 20px;
}
.first-list-foot{
    margin-top: 30px;
}
.h3-foot-sec{
    position: relative;
    top: 30px;
}
@media (max-width:1285px) {
    .div-allfoot{
     height: 400px;
    }
}
@media (max-width:815px) {
    .div-allfoot{
     height: 650px;
    }
}
@media (max-width:405px) {
    .div-allfoot{
     height: 900px;
    }
}
.first-list-foot3{
    position: relative;
    bottom: 13px;
}