@font-face {
    font-family: 'Segoe UI Regular';
    font-style: normal;
    font-weight: normal;
    src: url(../css/Segoe\ UI.woff) format('woff');
    }
    

    @font-face {
    font-family: 'Segoe UI Italic';
    font-style: normal;
    font-weight: normal;
    src: url(../css/Segoe\ UI\ Italic.woff) format('woff');
    }
    

    @font-face {
    font-family: 'Segoe UI Bold';
    font-style: normal;
    font-weight: normal;
    src: url(../css/Segoe\ UI\ Bold.woff) format('woff');
    }
    

    @font-face {
    font-family: 'Segoe UI Bold Italic';
    font-style: normal;
    font-weight: normal;
    src: url(../css/Segoe\ UI\ Bold\ Italic.woff) format('woff');
    }

* {width: 100%;
margin: 0px;
padding: 0px;
box-sizing: border-box;
}

body {background: #131316;
}

.container {position: relative;
margin: auto;
width: 1000px;
height: 1720px;
background: #131316;
}

.bg {position: absolute;
top: 0px;
width: 100%;
height: 660px;
background: linear-gradient(180deg, rgba(19, 19, 22, 0) 0%, #131316 100%), url(../images/pexels-jakub-novacek-924824.png);
background-size: cover;
background-position: center;
}

.containers {position: absolute;
margin: auto;
max-width: 620px;
margin: 0px 190px;
z-index:1;
}

header {
width: 100%;
height: 60px;
margin: 20px 0px;
display: flex;
justify-content: space-between;
}

.logo {width: 120px;
height: 60px;
}

.button__bg {width: 180px;
height: 40px;
background: linear-gradient(87.23deg, rgba(128, 26, 179, 0) -91.42%, #4C4CFF 99.79%);
border-radius: 4px;
margin: 10px 0px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-family: 'Segoe UI', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 21px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #FFFFFF;
}

.goods {display: flex;
width: 100%;
height: 730px;
margin: 40px 0px;
flex-direction: column;
text-align: center;
}

.title {width: 100%;
height: 50px;
font-family: 'Segoe UI', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 32px;
line-height: 43px;
color: #FFFFFF;
}

.cards--sm {display: flex;
margin: 20px 0px 0px;
}

.card--sm {width: 200px;
height: 310px;
background: #FFFFFF;
border-radius: 4px;
}

.card--sm--сenter {margin: 0px 10px 0px;
}

.name {width: 180px;
height: 60px;
font-family: 'Segoe UI', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 21.28px;
color: #131316;
margin: 0px 10px;  
}

.price {display: flex;
width: 180px;
height: 30px;
margin: 10px;
}

.price--old {display: flex;
justify-content: center;
align-items: center;
width: 90px;
height: 30px;
font-family: 'Segoe UI', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 21px;
text-decoration-line: line-through;
color: #D9D9D9;
margin: auto;
}

.price-current {display: flex;
justify-content: center;
align-items: center;
width: 90px;
height: 30px;
font-family: 'Segoe UI', sans-serif;
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 32px;
color: #131316;
margin: auto;
}

.price--discount {background: #FF0000;
border-radius: 4px;
height: 24px;
font-family: 'Segoe UI', sans-serif;
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 21px;
display: flex;
align-items: center;
text-align: center;
justify-content: center;
color: #FFFFFF;
}

.button__bg_card {width: 180px;
height: 40px;
background: linear-gradient(87.23deg, rgba(128, 26, 179, 0) -91.42%, #4C4CFF 99.79%);
border-radius: 4px;
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-family: 'Segoe UI', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 21px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #FFFFFF;
}

.cards--md {display: flex;
margin: 10px 0px 0px;
}
    
.card--md {width: 305px;
height: 340px;
background: #FFFFFF;
border-radius: 4px;
}
    
.card--md--left {margin: 0px 0px 0px 10px;
}

.name-md {width: 285px;
height: 60px;
font-family: 'Segoe UI', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 21.28px;
color: #131316;
margin: 0px 10px;  
}
        
.price-md {display: flex;
width: 285px;
height: 30px;
margin: 10px;
}
            
.button__bg_card_md {width: 285px;
height: 40px;
background: linear-gradient(87.23deg, rgba(128, 26, 179, 0) -91.42%, #4C4CFF 99.79%);
border-radius: 4px;
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-family: 'Segoe UI', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 21px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #FFFFFF;
}

.promo {display: flex;
width: 100%;
height: 540px;
margin: 50px 0px;
flex-direction: column;
text-align: center;
}

.card--ld {display: flex;
margin: 20px 0px 0px;
width: 100%;
height: 470px;
background: #FFFFFF;
border-radius: 4px;
flex-direction: column;
}

.cards--ld {display: flex;
}

.i6 {height: 305px;
width: 305px;
}

.info {display: flex;
flex-direction: column;
width: 295px;
height: 247;
margin: 30px 10px 28px;
text-align: start;
}

.rate {display: flex;
width: 172px;
height: 28px;
}

.name--lg {width: 100%;
height: 30px;
margin: 10px 0px 0px;
font-family: 'Segoe UI', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 21px;
display: flex;
align-items: center;
color: #131316;
}

.description--lg {width: 100%;
height: 30px;
margin: 5px 0px 0px;
font-family: 'Segoe UI', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 17px;
display: flex;
align-items: center;
color: #131316;  
}

.price--lg {display: flex;
width: 240px;
height: 24px;
margin: 20px 0px 0px;
align-items: center;
}

.price--original {height: 20px;
font-family: 'Segoe UI', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 21px;
display: flex;
align-items: center;
text-decoration-line: line-through;
color: #D9D9D9;
}

.price--with-discount {height: 20px;
font-family: 'Segoe UI', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 21px;
display: flex;
align-items: center;
text-decoration-line: line-through;
color: #D9D9D9;
}

.price--current {height: 20px;
font-family: 'Segoe UI', sans-serif;
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 21px;
display: flex;
align-items: center;
color: #131316;
}

.discount-discount {display: flex;
width: 240px;
height: 30px;
margin: 20px 0px 0px;
font-family: 'Segoe UI', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 17px;
align-items: center;
color: #131316;
}

.discount-promo {display: flex;
width: 240px;
height: 20px;
font-family: 'Segoe UI', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 17px;
align-items: center;
color: #131316;
}

.discount-discounts {display: flex;
width: 240px;
height: 30px;
font-family: 'Segoe UI', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 17px;
align-items: center;
color: #131316;
}

.discount-amount {display: flex;
width: 60px;
height: 30px;
font-family: 'Segoe UI', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 17px;
align-items: center;
color: #131316;
justify-content: end;
}

.discount-amount-current {display: flex;
width: 60px;
height: 30px;
font-family: 'Segoe UI', sans-serif;
font-style: normal;
font-weight: 700;
font-size: 13px;
line-height: 17px;
display: flex;
align-items: center;
justify-content: end;
color: #FF0000;
}

.promocode {display: flex;
justify-content: center;
align-items: center;
width: 280px;
height: 60px;
border: 1px dashed #131316;
border-radius: 4px;
font-family: 'Segoe UI', sans-serif;
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 21px;
text-align: center;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #131316;
text-decoration: none;
}

.button--ld {display: flex;
justify-content: center;
align-items: center;
width: 280px;
height: 60px;
background: linear-gradient(87.23deg, rgba(128, 26, 179, 0) -91.42%, #4C4CFF 99.79%);
border-radius: 4px;
font-family: 'Segoe UI', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 21px;
text-align: center;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #FFFFFF;
text-decoration: none;
margin: 10px 0px 0px;
}

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

footer {width: 620px;
height: 194px;
margin: 60px 0px 0px;
display: flex;
flex-direction: column;
align-items: center;
}

.footer-text {width: 100%;
height: 20px;
font-family: 'Segoe UI', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 21px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: #FFFFFF;
}

.social-links {width: 232px;
height: 64px;
margin: 20px 0px 0px;
display: flex;
justify-content: space-between;
}

.social-icon {display: flex;
width: 64px;
}

.contacts {display: flex;
width: 100%;
height: 60px;
margin: 30px 0px 26px;
}

.contacts__title {width: 310px;
height: 20px;
font-family: 'Segoe UI', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 17px;
color: rgba(255, 255, 255, 0.5);
}

.contacts__phone {width: 310px;
height: 20px;
font-family: 'Segoe UI', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 21px;
color: #FFFFFF;
}

.contacts__email {width: 310px;
height: 20px;
font-family: 'Segoe UI', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 21px;
text-decoration-line: underline;
color: #FFFFFF;
}

.logo-footer {display: flex;
width: 120px;
height: 60px;
}