@charset "UTF-8";
@font-face {
    font-family: "Rubik";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src:
        local("Rubik Regular"), local('Rubik-Regular'),
        url(../fonts/Rubik-Regular.woff2) format("woff2"),
        url(../fonts/Rubik-Regular.woff) format("woff");
}
@font-face {
    font-family: "Rubik";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src:
        local("Rubik Italic"), local('Rubik-Italic'),
        url(../fonts/Rubik-Italic.woff2) format("woff2"),
        url(../fonts/Rubik-Italic.woff) format("woff");
}
@font-face {
    font-family: "Rubik";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src:
        local("Rubik Medium"), local('Rubik-Medium'),
        url(../fonts/Rubik-Medium.woff2) format("woff2"),
        url(../fonts/Rubik-Medium.woff) format("woff");
}
@font-face {
    font-family: "Rubik";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src:
        local("Rubik Bold"), local('Rubik-Bold'),
        url(../fonts/Rubik-Bold.woff2) format("woff2"),
        url(../fonts/Rubik-Bold.woff) format("woff");
}
*, ::after, ::before {
    box-sizing: border-box;
}
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  font-family: sans-serif;
  scroll-behavior: smooth;
}
article, aside, footer, header, main, nav, section {display: block;}
pre {font-family: monospace, monospace; font-size: 1rem;}
abbr[title] {border-bottom: none; text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted;}
*::-webkit-input-placeholder {color: #666;opacity: 1;}
*:-moz-placeholder {color: #666;opacity: 1;}
*::-moz-placeholder {color: #666;opacity: 1;}
*:-ms-input-placeholder {color: #666;opacity: 1;}
*{outline: 0!important;}
body input:focus:required:invalid,
body textarea:focus:required:invalid {}
body input:required:valid,
body textarea:required:valid {}
body {
  min-height: 100vh;
  margin: 0;
  text-align: left;
}
img {display: block; border: none; border-style: none; max-width: 100%; height: auto; vertical-align: middle;}
a {text-decoration-thickness: 1px; text-underline-offset: 0.25ch; transition: all 0.2s;}
a:hover{text-decoration: none; }
ul, ol{padding: 0; margin: 0;}
ul li, ol li{list-style: none;}
hr {box-sizing: content-box; height: 0;overflow: visible;}
small {font-size: 80%;}
sub, sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;}
sub {bottom: -0.25em;}
sup {top: -0.5em;}
button, input, optgroup, select, textarea {font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; }
button, input {overflow: visible;}
button, select {text-transform: none;}
button, [type="button"], [type="reset"], [type="submit"] {-webkit-appearance: button;}
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {border-style: none; padding: 0;}
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {outline: 1px dotted ButtonText;}
textarea {overflow: auto;}
[type="checkbox"], [type="radio"] {box-sizing: border-box; padding: 0; }
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {height: auto;}
[type="search"] {-webkit-appearance: textfield; outline-offset: -2px; }
[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit;}
[hidden] {display: none;}
/*svg *[fill] { fill: currentColor; }
svg *[stroke] { stroke: currentColor; }
svg * { transition-property: fill, stroke;}*/

:root{
  --color-light:#ffffff;
  --color-dark:#2B2A29;
  --color-light-grey:#f1f1f1;
  --color-grey:#c5c5c5;
  --color-green:#82AF35; /*зеленый*/
  --color-green-dark:#71a31d; /*темно зеленый*/
  --color-red:#e74c3c; /*красный*/
  --color-red-dark:#bf4e42; /*темно красный*/
  --color-brown:#432105; /*коричневый*/

  --border-radius: 50px;
  --border-radius10:10px;
  --box-shadow: 0 0 38px rgb(0 0 0 / 10%);

  --font-family-base: 'Rubik', sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  font-family: var(--font-family-base);
  font-size: 1rem;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
  line-height: 1.6;
  font-weight: 400;
  color:var(--color-dark);
  background-color: var(--color-dark);
  background-image: url(../img/bg.jpg);
  background-size: contain;
  background-position: center;
}
main {flex:1 1 auto;}
h1{font-size: 2.5rem; font-size: clamp(2rem, 2.5vw, 2.5rem);}
h2{font-size: 2.1rem; font-size: clamp(1.8rem, 2.5vw, 2.1rem);}
h3{font-size: 1.5rem; font-size: clamp(1.25rem, 2.5vw, 1.5rem);}
h4,h5,h6{font-size: 1.5rem; font-size: clamp(1.25rem, 2.5vw, 1.5rem);}
h1, h2, h3, h4, h5, h6 {font-family: var(--font-family-base); margin: 2rem 0 1rem 0; line-height: 100%; font-weight: 500; color:#2d2c2a;}
h1:first-child, h2:first-child, h3:first-child {margin: 0rem 0 2rem 0;}
b,strong {font-weight: 700;}
a {color:#0f43df;}
a:hover{color:#0f43df; text-decoration: none;}
* {
  scrollbar-width: thin;
  scrollbar-color:  rgb(152 152 154) rgba(0, 0, 0, 0.099);
}
::-webkit-scrollbar{
  width: 10px;  /* for vertical scrollbars */
  height:  auto; /* for horizontal scrollbars */
}
::-webkit-scrollbar-track{
  background: rgb(49 52 57);
}
::-webkit-scrollbar-thumb{
  background: var(--color-green);
}
p {margin: 1.5em 0;}
::selection{
  background-color: var(--color-green);
  color: var(--color-light);
}
.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
  width: 100%;
  max-width: 1400px;
}
.container-narrow{
  margin: 0 auto;
  max-width: 1100px;
  display: flex;
  justify-content:center;
}
.center{
  text-align: center;
}
.color__accent{
  color:var(--color-green);
}
.color__accent2{
  color:var(--color-red);
}
.button {
  background-color: var(--color-green);
  color: var(--color-light);
  display: block;
  padding: 14px 22px;;
  white-space: nowrap;
  border-radius: var(--border-radius);
  border: none;
  border-bottom: 2px solid  var(--color-green-dark);
  font-size: clamp(1rem, 1.4rem + 0.25vw, 3rem);
  font-weight: 500;
  line-height: 1.6;
  text-decoration: none;
  text-align: center;
  transition: all 0.2s;
  text-transform:uppercase;
}
.button:hover {
  color: var(--color-light);
  opacity: .85;
}
.button-shadow {
  box-shadow: 2px 5px 8px 0px rgb(131 133 135 / 17%), 2px 1px 12px #d5d5d5;
}
.button__red{
  background-color: var(--color-red);
  border-bottom: 2px solid  var(--color-red-dark);
}
.button__red:hover {
  background-color: #eb675a;
  opacity: 1;
}
.button-full{
  width: 100%;
}
button:disabled:hover {
  color: #b7b7b7;
  background-color: #e6e6e6;
}
.product{
  display: flex;
  flex-direction: column;
  margin: 1rem 0;
  width: 515px; 
  border: 1px solid #bbbbbb; 
  border-radius: 10px 10px 40px 40px;
  padding:10px;
  background-color:var(--color-light);
  height:100%;
}
.product-img{
border-radius:var(--border-radius10);
}
.product-content{
  margin:  1rem 1rem 1rem 1rem;
  font-size: clamp(1.8rem, 1.8rem + 0.25vw, 2.2rem);
}
.product-content h1{
  text-transform:uppercase;
  font-weight:bold;
  border-left: 8px solid #e74c3c;
  padding-left: 10px;
  margin-bottom: 1rem;
}
.product-content ul {margin-left: -5px;}
.product-content ul li{padding:5px; line-height: 1.2;}
.product-content ul li:nth-child(2n){background-color:#edf2f3;}

.product-content p{line-height: 1.2;margin: 0;background-color: #00af0d;color: #fff;padding: 10px 10px 10px 20px;}

@media screen and (max-width: 1400px){
.product{max-width:445px;}
}
@media screen and (max-width: 992px){
body{background:none;}
.container{padding:0;}
.product{margin: 0; border:none;border-radius:0;}
}
@media screen and (max-width: 460px){
.product-content {margin: 1rem;}
}
@media screen and (max-width: 360px){
.product-content h1 {font-size: clamp(1.5rem, 1.5vw, 2rem); margin-bottom: 1rem;}
.product-content p {font-size: clamp(1.5rem, 1.5vw, 2rem);}
}