@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');

@font-face {
   
    font-family: "seoulhangang"; 
   
    src: url("../images/fonts/seoulhangang-cb.ttf") format("truetype"); 
    font-style: normal; 
  } 


  .lobster-regular {
    font-family: "Lobster", sans-serif;
    font-weight: 400;
    font-style: normal;
  }


/*-Общие стили */

body {
    margin: 0;
  font-family: 'Roboto', sans-serif;
  background-color: #161616;
  color: #fff;
}

a { color: #fff;
    text-decoration: none;}


p{ margin: 0;}

p + p { margin-top: 15px;}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
    margin: 0;
}

img{
    max-width: 100%;
}

.container {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 15px;
}

.btn {

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

    font-weight: 500;
    font-size: 17px;

    width: 165px;
    height: 50px;

    background: #F6762C;
    border-radius: 6px;

    transition: opacity 0.3s;
  
}

.btn:hover {
    opacity: 0.7;
}

/*-Шапка сайта */

.header {

    padding: 25px 0;

}

.header .container {
   display: flex;
    justify-content: space-between;
    align-items: center; 
}

.header_logo {
}



.header_list {
    display: flex;
    gap: 30px;
}

.header_nav a {
    font-size: 17px;
    opacity: 0.7;
}

.header_nav a:hover {
    font-size: 17px;
    opacity: 0.9;
}

.header_nav a.active {
    font-size: 17px;
    opacity: 0.9;
}



/*-Приветственная секция */



.welcome {

    padding: 250px 0; 
    margin-top: -170px;

    background-image: url("../images/welcome-bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}


.welcome .container_text{
    width: 1140px;
    align-items: center;
}
.welcome_subtitle {
    font-size: 15px;
    letter-spacing: 0.1em;
    text-align: center;
}

.welcome_title {
    font-size: 58px;
    text-align: center;
    justify-content: center;
    font-family:seoulhangang;
}


.welcome_desk {
    margin: 40px  110px;
    font-size: 18px;
    opacity: 0.7;
   text-align: center;
   
}

.buttons_welcome {
    display:flex;
    justify-content: center;
   gap: 20px;
   text-align: center;

}

/*-Плюсы ковки */

.plusy_kovki {
    padding: 100px 0;
}


.plusy_kovki .container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}


.plusy_kovki_card {
    width: 260px;
    background: #312f30;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
}

.plusy_kovki_image {
    width: 100%;
    height: 175px;
    object-fit: cover;
}

.plusy_kovki_title {
    font-size: 20px;
    margin-bottom: 15px;
}


.plusy_kovki_desk {
    font-size: 16px;
    opacity: 0.7;
}

.plusy_kovki_text_wrapper {
  padding:30px 20px;
}



/*-Kovka 3D Standart */

.order {
    background: #312f30;
    padding: 60px;
    margin-right: 4px;
}

.order .container { display: flex; justify-content: space-between; align-items: center; padding-right: 200px;}

.order_image { max-width: 470px;
margin-left: 124px;}

.order_text {max-width: 370px;}

.order_title { font-size: 44px; margin-bottom: 25px;}

.order_desc { opacity: 0.7; margin-bottom: 15px;}

.order_price { font-weight: 500; font-size: 20px; color: #F6762C; }

.order_old_price { font-weight: 500; font-size: 16px; text-decoration: line-through; color: #F6762C; opacity: 0.5; }

.order .btn { margin-top: 10px;}



/*-Feedback */
.feedback {
    padding-bottom: 200px;
}
.feedback .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.feedback_img {
}
.feedback_text {
    margin:0;
    text-align: center;
    display: flex;
    flex-direction: column;
    
}
.feedback_desc {
    text-align:left;
    opacity: 0,7;
    margin: 30px 105px;
}
.feedback_author {
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    color: #F6762C;
    margin: 20px 105px;
    text-align:left;
}


.feedback_nazvanie {
    margin: 30px 105px;
    text-align:left;
    font-style: normal;
    font-weight: 500;
    font-size: 34px;
    color: #f7f7f7;
}

.feedback_subauthor {
    font-weight: 500;
    font-size: 12px;
    opacity: 0,7;
    margin: 5px 105px;
    text-align:left;
}












/*-MINI AND PRO */

.miniandpro {
    padding:90Px 0 0 0;
}
.miniandpro .container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}

.miniandpro_card {
    box-sizing: border-box;
    width:555px;
    min-height: 300px;   
    padding: 60px 30px 60px 290px;
}


.miniandpro_card:nth-child(even){
    padding-left: 30px;
    padding-right: 290px;
}

.miniandpro_title {
    margin-bottom: 20px;
    font-size: 30px;
    color: #424242;
}
.miniandpro_desc {
    margin-bottom: 10px;
    opacity: 0,7;
    color: #424242;
}

.miniandpro_price { 
    font-weight: 500;
    letter-spacing: 0.1em;
    color: #F6762C;
}
.miniandpro_price + .miniandpro_price {
    margin-left: 5px;
}
.miniandpro_price--old {
    text-decoration: line-through;
    opacity: 0.5;
}
.miniandpro  .btn {
    margin-top: 10px;
}

.order .btn {
    margin-top: 10px;
}

.card_kovka3dmini {
    background-image: url("../images/product-1.jpg");
    border-radius: 10px 10px 10px 10px;
}
.card_kovka3dpro {
    background-image: url("../images/product-2.jpg");
    border-radius: 10px 10px 10px 10px;
}


.miniandpro .h4 {
    color: #161616;
}

.miniandpro  .p {
    color: #161616;
    
}


/*-END MINI AND PRO */




/*-OPISANIJA */

.opisanija_wrapper {
    display: flex;
    justify-content:space-between;
    padding-top: 10px;
    padding-bottom: 40px;
    padding-right: 75px;
}

.kovka_3dmini_spisok {
    padding: 30px 0 30px 0;
}

.opisanie_nazvanie{
    font-size: 45px;
}
.kovka_3dpro_spisok {
    padding: 30px 0 30px 0;
}


/*- END OPISANIJA */




.social_icon{
    padding: 7px 7px 10px 0;
    text-align: center;
    position: relative;
    z-index: 6;
    display: inline-flex;
    justify-content: space-between;
    gap: 10%;
}

.social_icons{
    display: flex;
    gap: 58px;
}


/*-ZWONOK */
.zwonok {
    padding: 60px 0;
    background-color: #312f30;
}

.zwonok .container {
    display: flex;
    justify-content: space-around;
}

.zwonok_title {
    font-weight: 500;
    font-size:  40px;
}
/*-END ZWONOK */


/*-FOOTER */

.footer_wrapper{
    margin: 70px 0px 20px 0px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

/*- END FOOTER */


.li {
    margin-bottom: 44em;
}



/* CHECKBOX */

.checkbox {
    --checkbox-size: 24px;
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  .checkbox:not(:disabled):focus .checkbox__icon:before {
    outline: 4px solid rgba(19, 19, 19, 0.3);
  }
  
  .checkbox input {
    display: none;
  }
  
  .checkbox input:checked ~ .checkbox__icon:after {
    transform: translateY(0px) scale(1);
    opacity: 1;
  }
  
  .checkbox input:disabled ~ .checkbox__text,
  .checkbox input:disabled ~ .checkbox__icon {
    cursor: not-allowed;
    opacity: 0.3;
  }
  
  .checkbox__text {
    padding-left: calc(var(--checkbox-size) + 8px);
    font-size: 18px;
    line-height: var(--checkbox-size);
    letter-spacing: -0.154px;
  }
  
  .checkbox__icon:before,
  .checkbox__icon:after {
    position: absolute;
    top: 0;
    left: 0;
    transition:
      background 275ms ease-in-out,
      opacity 275ms ease,
      transform 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    content: "";
  }
  
  .checkbox__icon:before {
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    background: #fff;
    border-radius: 2px;
  }
  
  .checkbox__icon:after {
    top: calc((var(--checkbox-size) - var(--checkbox-size) * 0.8) / 2);
    left: calc((var(--checkbox-size) - var(--checkbox-size) * 0.8) / 2);
    width: calc(var(--checkbox-size) * 0.8);
    height: calc(var(--checkbox-size) * 0.8);
    -webkit-mask-image: url("../images/icons/check-ui.svg");
    mask-image: url("../images/icons/check-ui.svg");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    background: rgb(19, 19, 19);
    transform: translateY(6px) scale(0.8);
    opacity: 0;
  }
  
  /* END CHECKBOX */
  
  /* FIELDS */
  
  .field-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
  }
  
  .field-box__name {
    display: inline-flex;
    align-items: center;
    margin-bottom: 8px;
    color: rgb(19, 19, 19);
    font-weight: 300;
    font-size: 18px;
  }
  
  .field-box__name > span {
    display: inline-block;
    margin: 0px 8px;
    color: rgb(var(--error-color));
    font-weight: bold;
  }
  
  .field-box__name .icon {
    width: 16px;
    height: 16px;
    margin: 0px 8px;
  }
  
  .field-box__error:not(:empty),
  .field-box__hint:not(:empty) {
    display: flex;
    flex-direction: column;
    padding-top: 8px;
    font-size: 14px;
  }
  
  .field-box__error:not(:empty) {
    color: rgb(var(--error-color));
  }
  
  .field-box__hint:not(:empty) {
    color: rgb(19, 19, 19);
  }
  
  .field-box__error p {
    margin: 0;
    color: rgb(var(--error-color));
    font-size: 14px;
  }
  
  .field-box__error p + p {
    margin-top: 4px;
  }
  
  .field-box_error:not(.field-box_nolight) .field {
    color: rgba(var(--error-color), 0.8);
    background: rgba(var(--error-color), 0.06);
    border-color: rgba(var(--error-color), 0.8);
  }
  
  .field-box_error:not(.field-box_nolight) .field:hover,
  .field-box_error:not(.field-box_nolight) .field[data-focus] {
    color: rgb(var(--error-color));
    background: rgba(var(--error-color), 0.1);
    border-color: rgb(var(--error-color));
  }
  
  .field-box_success:not(.field-box_nolight) .field {
    color: rgba(var(--success-color), 0.8);
    background: rgba(var(--success-color), 0.06);
    border-color: rgba(var(--success-color), 0.8);
  }
  
  .field-box_success:not(.field-box_nolight) .field:hover,
  .field-box_success:not(.field-box_nolight) .field[data-focus] {
    color: rgb(var(--success-color));
    background: rgba(var(--success-color), 0.1);
    border-color: rgb(var(--success-color));
  }
  
  .field {
    --field-color: #131313;
    position: relative;
    width: 100%;
    max-width: none;
    padding: 8px 12px;
    color: var(--field-color);
    -moz-column-gap: 12px;
    column-gap: 12px;
    background: #fff;
    border-radius: 4px;
    outline: none;
    resize: none;
    display: flex;
    align-items: center;
  }
  
  .field :is(input, select, textarea) {
    width: 100%;
    outline: none;
    border: none;
  }
  
  .field__input {
    width: 100%;
    color: inherit;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    /* 24px */
    letter-spacing: -0.176px;
    background-color: transparent;
    border-radius: 0;
  }
  
  .field__input::-moz-placeholder {
    color: inherit;
    font-weight: 400;
  }
  
  .field__input::-ms-input-placeholder {
    color: inherit;
    font-weight: 400;
  }
  
  .field__input::placeholder {
    color: inherit;
    font-weight: 400;
  }
  
  .field textarea {
    min-width: 100%;
    max-width: 100%;
    min-height: 100px;
    max-height: 300px;
  }
  
  .field .icon {
    --icon-color: var(--field-color);
    flex-shrink: 0;
  }
  
  /* END FIELDS */

  /* MODAL */

.modal {
  color: #131313;
}

.modal .tingle-modal-box__content {
  background: #d1d1d1;
}

.modal .tingle-modal-box__footer {
  padding: 0 3rem 2rem;
  text-align: right;
}

.modal-content__header {
  margin-bottom: 30px;
  text-align: center;
}
.modal-content__title {
  font-family: century_gothic_b;
  font-size: 40px;
  text-align: center;
  color: #131313;
}

/* END MODAL */

.alert {
  background: rgb(249 250 251);
  color: rgb(31 41 55);
}

.alert_info {
  background: rgb(214, 235, 255);
  color: rgb(30 66 159);
}

.alert_error {
  background: rgb(251, 226, 226);
  color: rgb(155 28 28);
}

.form .alert {
  margin-bottom: 24px;
}

.form__footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
}


@media (max-width: 430px){



  /*-Приветственная секция */



.welcome {

  padding: 260px 0; 
  margin-top: -170px;

  background-image: url("../images/welcome-bg.jpg");
  background-repeat: no-repeat;
  background-size:auto;
  background-position: center;
}


.welcome .container_text{
  width: 389px;
  align-items: center;
}
.welcome_subtitle {
  font-size: 15px;
  letter-spacing: 0.1em;
  text-align:center;
}

.welcome_title {
  font-size: 34px;
  text-align: center;
  justify-content: center;
  font-family:seoulhangang;
}


.welcome_desk {
  margin: 30px  40px;
  font-size: 14px;
  opacity: 0.7;
 text-align:center;
 
}

.buttons_welcome {
  display:flex;
  justify-content: center;
 gap: 10px;
 text-align: center;

}




/*-Шапка сайта */

.header {

  padding: 25px 0;

}

.header .container {
 display: flex;
  justify-content: space-between;
  align-items: center; 
}

.header_logo {
}



.header_list {
  display:inline-block;
  gap: 50px;
}

.header_nav a {
  display: none;
  font-size: 17px;
  opacity: 0.7;
}

.header_nav a:hover {
  font-size: 17px;
  opacity: 0.9;
}

.header_nav a.active {
  font-size: 17px;
  opacity: 0.9;
}


.social_icons{

  gap: 28px;
}




/*-Плюсы ковки */

.plusy_kovki {
  padding: 100px 0;
}


.plusy_kovki .container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}


.plusy_kovki_card {
  width: 360px;
  background: #312f30;
  border-radius: 10px;
  overflow: hidden;
  text-align: center;
}

.plusy_kovki_image {
  width: 100%;
  height: 175px;
  object-fit: cover;
}

.plusy_kovki_title {
  font-size: 20px;
  margin-bottom: 15px;
}


.plusy_kovki_desk {
  font-size: 16px;
  opacity: 0.7;
}

.plusy_kovki_text_wrapper {
padding:30px 0px;
}


.plusy_kovki .container{

    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 95px;
}




/*-Kovka 3D Standart */




.order {
  background: #312f30;
  padding: 22px;
  margin-right: 4px;
}

.order .container { display:block; justify-content: space-between; align-items: center; padding-right: 10px;}

.order_image { max-width: 320px;
margin-left: 14px;}

.order_text {max-width: 370px;}

.order_title { font-size: 24px; margin-bottom: 25px;}

.order_desc { opacity: 0.7; margin-bottom: 15px;}

.order_price { font-weight: 500; font-size: 20px; color: #F6762C; }

.order_old_price { font-weight: 500; font-size: 16px; text-decoration: line-through; color: #F6762C; opacity: 0.5; }

.order .btn { margin-top: 10px;}





/*-MINI AND PRO */

.miniandpro {
  padding:90Px 0 0 0;
}
.miniandpro .container {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}

.miniandpro_card {
  box-sizing: border-box;
  width:355px;
  min-height: 00px;   
  padding: 30px 30px 60px 90px;
}


.miniandpro_card:nth-child(even){
  padding-left: 50px;
  padding-right: 90px;
}

.miniandpro_title {
  margin-bottom: 20px;
  font-size: 30px;
  color: #424242;
}
.miniandpro_desc {
  margin-bottom: 10px;
  opacity: 0,7;
  color: #424242;
}

.miniandpro_price { 
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #F6762C;
}
.miniandpro_price + .miniandpro_price {
  margin-left: 5px;
}
.miniandpro_price--old {
  text-decoration: line-through;
  opacity: 0.5;
}
.miniandpro  .btn {
  margin-top: 10px;
}

.order .btn {
  margin-top: 10px;
}

.card_kovka3dmini {
  background-image: url("../images/product-1.jpg");
  border-radius: 10px 10px 10px 10px;
  margin
}
.card_kovka3dpro {
  background-image: url("../images/product-2.jpg");
  border-radius: 10px 10px 10px 10px;
}


.miniandpro .h4 {
  color: #161616;
}

.miniandpro  .p {
  color: #161616;
  
}


/*-END MINI AND PRO */



/*-OPISANIJA */

.opisanija_wrapper {
  display:block;
  justify-content:space-between;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-right: 35px;
}

.kovka_3dmini_spisok {
  padding: 40px 0 20px 0;
}

.opisanie_nazvanie{
  font-size: 35px;
}
.kovka_3dpro_spisok {
  padding: 20px 0 30px 0;
}


/*- END OPISANIJA */


/*-Feedback */
.feedback {
  padding-bottom: 10px;
}
.feedback .container {
  display:block;
  align-items: center;
  text-align: center;
  justify-content: space-between;
}
.feedback_img {
}
.feedback_text {
  margin:0;
  text-align: center;
  display: flex;
  flex-direction: column;
  
}
.feedback_desc {
  text-align:left;
  opacity: 0,7;
  margin: 30px 15px;
}
.feedback_author {
  font-style: normal;
  font-weight: 500;
  font-size: 24px;
  color: #F6762C;
  margin: 20px 15px;
  text-align:left;
}


.feedback_nazvanie {
  margin: 30px 15px;
  text-align:left;
  font-style: normal;
  font-weight: 500;
  font-size: 34px;
  color: #f7f7f7;
}

.feedback_subauthor {
  font-weight: 500;
  font-size: 12px;
  opacity: 0,7;
  margin: 5px 15px;
  text-align:left;
}



/*-ZWONOK */
.zwonok {
  padding: 60px 20px;
  background-color: #312f30;
}

.zwonok .container {
  display:block;
  justify-content:space-around;
  a
}

.zwonok_title {
  font-weight: 500;
  font-size:  25px;
}
/*-END ZWONOK */



/*-FOOTER */

.footer_wrapper{
  margin: 30px 0px 20px 0px;
  display:block;
  justify-content: space-evenly;
  align-items: center;
}

/*- END FOOTER */




}