/* FEEDBACK */
#feedbackModal .modal-frame,
#educationModal .modal-frame{
  padding: 60px 60px 70px 60px;
  max-width: 1430px;
}

/* SUCCESS */
#successModal .modal-content{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100px 20px;
}
#successModal .modal-frame{
  max-width: 820px;
}
.success-modal_img{
  max-width: 120px;
}
.success-modal_img img{
  width: 100%;
}
#successModal h6{
  margin: 30px 0 20px 0;
}
#successModal p{
  margin-bottom: 60px;
  font-size: 20px;
  line-height: 30px;
  text-align: center;
}

/* FIRST SCREEN */
.first-screen{
  background: var(--blueDark);
  border-radius: 20px;
  padding: 0 65px 72px 90px;
  display: flex;
  justify-content: space-between;
}
.first-screen_text{
  max-width: 439px;
  width: 100%;
  margin-top: 85px;
  position: relative;
  z-index: 3;
}
.first-screen_btns{
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 50px;
}
.first-screen_text h1{
  color: var(--white);
}
.first-screen_text strong{
  font-size: 48px;
  line-height: 46px;
  text-transform: uppercase;
  font-weight: 700;
  font-family: 'Gotham Pro';
}
.first-screen_text span{
  font-size: 32px;
  line-height: 31px;
  margin: 30px 0;
  display: block;
  font-weight: 700;
  font-family: 'Gotham Pro';
}
.first-screen_text b{
  font-size: 24px;
  line-height: 29px;
  font-family: 'Gotham Pro';
}
.first-screen_imgs{
  top: 100px;
  position: relative;
  width: 39%;
}
.first-screen_imgs .shadow{
  position: relative;
}
.first-screen_imgs .shadow::after{
  top: 10px;
  left: 10px;
  border-radius: 20px;
}
.first-screen_imgs img{
  border-radius: 15px;
  width: 100%;
  object-fit: cover;
  display: block;
}
.first-screen_small--img{
  max-width: 217px;
  width: 49%;
  position: absolute !important;
  top: -63px;
  left: -131px;
  z-index: 2;
}
.first-screen_big--img{
  max-width: 442px;
  width: 100%;
}
.first-screen_big--img::after{
  left: 0 !important;
  width: 102%;
}

/* SECTION CATALOG */
.section-catalog_items{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.section-catalog_items a{
  display: block;
  padding: 20px;
  border: 1px solid var(--blueLight);
  border-radius: 5px;
  color: var(--blueDark);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  background: var(--bg);
  height: 100%;
}
.section-catalog_item{
  position: relative;
  z-index: 1;
}
.section-catalog_item:hover a{
  background: var(--blueBg);
}
.section-catalog_item:hover::after{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: var(--blueDark);
  border-radius: 5px;
  position: absolute;
  z-index: -1;
  top: 5px;
  left: 5px;
}
.section-catalog_more,
.section-info_link{
  font-size: 16px;
  line-height: 19px;
  color: var(--blueDark);
  font-weight: 500;
  display: none;
  text-align: center;
  width: 100%;
}
.section-catalog_more{
  margin-top: 30px;
}

/* SECTION INFO WITH IMG */
.section-info_img{
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.section-info_img--content{
  max-width: 550px;
  width: 100%;
  height: max-content;
}
.section-info_link{
  text-align: start;
  display: inline-block;
}
.section-info_img--text{
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 30px;
}
.section-info_img--img{
  max-width: 636px;
  width: 100%;
}
.section-info_img--img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}
.section-info_img--content img{
  margin-bottom: 15px;
  border-radius: 15px;
  width: 100%;
  object-fit: cover;
  height: 29%;
}

/* BLUE BG */
.blue-bg{
  background: var(--blueBg);
  padding: 60px 0;
}
.blue-bg_item{
  padding: 10px;
  background: var(--white);
  border-radius: 8px;
}
.blue-bg_item img{
  width: 100%;
  height: 224px;
  object-fit: cover;
  border-radius: 5px;
  margin-bottom: 10px;
}
.blue-bg_item a{
  font-size: 14px;
  line-height: 23px;
  color: var(--blueDark);
  margin-bottom: 10px;
  display: block;
}
.blue-bg_item p{
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}
.blue-bg_item:hover p{
  color: var(--blueDark);
}

/* SECTION QUESTIONS */
.section-questions{
  max-width: 1045px;
  width: 100%;
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  gap: 20px;
    margin: auto;
}
.section-questions .accordion-header{
  padding: 20px 30px;
  cursor: pointer;
  border-radius: 15px 15px 0 0;
}
.section-questions .accordion-header h5{
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
}
.section-questions .accordion-item{
  border: 1px solid var(--blueLight);
  border-radius: 15px;
  position: relative;
}
.section-questions .accordion-content{
  padding: 20px 30px;
  background: var(--white);
  border-radius: 0 0 15px 15px;
}
.section-questions .accordion-item:hover .accordion-header h5{
  color: var(--blueDark);
}
.section-questions .accordion-item:hover{
  border: 1px solid var(--blueDark);
}
.section-questions .accordion-item.active{
  border: 1px solid var(--blueDark);
}
.section-questions .accordion-item.active svg path:first-of-type{
  display: none;
}
.section-questions .accordion-item.active .accordion-header{
  background: var(--blueBg);
  color: var(--blueDark);
}
.section-questions .accordion-item.active::after{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: var(--blueDark);
  border-radius: 15px;
  position: absolute;
  z-index: -1;
  left: 5px;
  top: 5px;
}
.section-questions .accordion-item svg{
  min-width: 20px;
}

/* SERVICES */
.services .service{
  padding: 60px 0;
}
.services .service:nth-of-type(2n){
  background: var(--blueBg);
}

/* SERVICE */
.service .section-info_img--img img{
  max-height: 360px;
}
#serviceModal{
  padding-top: 200px;
}
#serviceModal .modal-frame{
  max-width: 610px;
  padding: 20px 30px;
}
#serviceModal .title{
  font-size: 20px;
  line-height: 30px;
}

/* CONTENT */
.content{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.content blockquote{
  padding: 5px 0 5px 20px;
  border-left: 1px solid var(--blueLight);
  font-size: 20px;
  line-height: 30px;
  font-weight: 500;
  color: var(--blueDark);
}
.content p{
  font-size: 18px;
  line-height: 27px;
}
.content li,
.seo-text li{
  font-size: 18px;
  line-height: 27px;
  color: var(--black)
}
.content ol li,
.seo-text ol li{
  list-style: decimal;
}
.content ul li,
.seo-text ul li{
  list-style: disc;
}
.content ol,
.content ul,
.seo-text ol,
.seo-text ul{
  padding-left: 20px;
}
.content a,
.seo-text a{
  color: var(--blueDark);
  font-weight: 500;
}
.content h2,
.content h3,
.seo-text h2,
.seo-text h3{
  font-size: 32px;
  line-height: 48px;
  font-weight: 700;
}
.content h4,
.content h5,
.content h6,
.seo-text h4,
.seo-text h5,
.seo-text h6{
  font-size: 20px;
  line-height: 30px;
}
.content strong,
.seo-text strong{
  font-weight: 700;
  margin-bottom: 10px;
  display: block;
}
.content img{
  object-fit: cover;
  max-height: 416px;
  width: auto;
  border-radius: 8px;
  border: 1px solid var(--blueLight);
}
.content-gallery{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.content-gallery img{
  width: 100%;
  max-height: 254px;
  border-radius: 5px;
  border: 1px solid var(--blueLight);
  display: block;
}
.content .btn{
  width: max-content;
}

/* CARD */
.card{
  display: flex;
  gap: 20px;
}
.card-img{
  max-width: 420px;
  width: 100%;
  min-width: 260px;
}
.card-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
  display: block;
}
.card-content h6{
  font-size: 20px;
  line-height: 26px;
  font-weight: 700;
  color: var(--black);
  margin-bottom: 4px;
}
.card-content p{
  font-size: 16px;
  line-height: 24px;
  color: var(--black);
  margin-bottom: 12px;
}
.card-content span{
  display: block;
  font-size: 14px;
  line-height: 21px;
  color: #585F82;
  margin-bottom: 10px;
}

/* BRANDS */
.brands{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  row-gap: 60px;
  column-gap: 20px;
}
.brands .circle-item_img{
  border: 1px solid var(--blueDark);
}

/* EDUCATION */
.point-module{
  padding: 20px;
  border: 1px solid var(--blueLight);
  border-radius: 5px;
}
.point-module .shadow{
  width: 40px;
  height: 40px;
}
.point-module .shadow span{
  width: 40px;
  height: 40px;
  background: var(--blueBg);
  border-radius: 5px;
  font-size: 20px;
  line-height: 30px;
  color: var(--blueDark);
  font-family: 'Gotham Pro';
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.point-module .shadow::after{
  top: 3px;
  left: 3px;
  border-radius: 5px;
}
.point-module h6{
  margin: 15px 0;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
}
.point-module h6 strong{
  font-weight: 700;
}

/* CONTACTS */
.map{
  position: relative;
  overflow: hidden;
}
.map iframe{
  width: 100%;
  height: 431px;
  border: 1px solid var(--blueLight);
  border-radius: 15px;
}
.contacts p{
  font-size: 18px;
  line-height: 23px;
  color: #333333;
}
.contacts span{
  font-size: 32px;
  line-height: 48px;
}
.contacts-phone{
  font-size: 32px;
  line-height: 48px;
  font-weight: 700;
  color: var(--blueDark);
  display: block;
  margin: 10px 0;
}
.contacts-socials{
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contacts-social{
  display: flex;
  align-items: center;
  gap: 10px;
}
.contacts-social:hover p{
  color: var(--blueDark);
}
.contacts-social:hover svg path:not(.contacts-social:first-of-type svg path){
  fill: var(--blueDark);
}
.contacts-social:first-of-type:hover svg path{
  stroke: var(--blueDark);
}

/* SEO TEXT */
.seo-text{
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.seo-more,
.seo-less{
  font-size: 18px;
  line-height: 24px;
  color: var(--blueDark);
  margin-top: 20px;
  cursor: pointer;
}

/* PRODUCTS */
.catalog-sidebar{
  min-width: 310px;
  max-width: 310px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.categories{
  border: 1px solid var(--blueLight);
  border-radius: 8px;
  padding: 20px;
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.categories a,
.categories p,
.filter-modal_categories label{
  font-size: 16px;
  line-height: 24px;
  color: var(--black);
}
.categories a:hover{
  color: var(--blueDark);
}
.categories svg{
  min-width: 10px;
  margin-top: 5px;
}
.categories ul{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.categories .accordion ul{
  padding-left: 20px;
}
.categories .accordion-header{
  gap: 10px;
  cursor: pointer;
}
.categories .accordion-content{
  margin-top: 10px;
}
.categories .accordion,
.filter-modal_categories .accordion{
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.categories .accordion-item,
.filter-modal_categories .accordion-item{
  position: relative;
}
.categories .accordion-item::after,
.filter-modal_categories .accordion-item::after{
  content: '';
  width: 100%;
  height: 1px;
  display: block;
  background: var(--blueLight);
  position: absolute;
  bottom: -20px;
  left: 0;
}
.categories .accordion-item:last-of-type::after,
.filter-modal_categories .accordion-item:last-of-type::after{
  display: none;
}
.categories .accordion-item svg,
.filter-modal_categories .accordion-item svg{
  transition: all 0.3s ease;
}
.categories .accordion-item.active svg,
.filter-modal_categories .accordion-item.active svg{
  transform: rotate(-180deg);
}
.categories .accordion-item.active .accordion-header a,
.categories .accordion-item.active .accordion-header p{
  color: var(--blueDark);
}
.categories-back{
  display: flex;
  gap: 20px;
}
.products{
  width: 75%;
}
#categoriesResetBtn{
  padding: 12px 25px 14px 25px;
  font-size: 16px;
}
.categories-checkbox{
  cursor: pointer;
  display: flex;
  align-items: start;
  gap: 6px;
}
.categories-checkbox input{
  border: 1px solid var(--blueLight);
  border-radius: 5px;
  background-color: var(--white);
  background-position: center;
  background-repeat: no-repeat;
  appearance: none;
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.categories-checkbox input:checked{
  background-image: url('../images/icons/arr-white-bottom.svg');
  background-color: var(--blueDark);
  border: 1px solid var(--blueDark);
}
.categories-checkbox label{
  cursor: pointer;
}
.products .product,
.products-slider .product{
  border: 1px solid var(--blueLight);
  border-radius: 8px;
  padding: 20px;
  display: block;

  display: flex;
  flex-direction: column;
  height: fit-content;
  min-height: 100%;
  /* min-height: 368px; */
}
.products .product-img,
.products-slider .product-img{
  max-height: 224px;
  height: 100%;
  background: var(--white);
}
.products .product-img img,
.products-slider .product-img img{
  width: 100%;
  height: 100%;
  max-height: 224px;
  object-fit: cover;
  border: unset;
}
.products .product p,
.products-slider .product p{
  color: var(--black);
  font-size: 18px;
  line-height: 27px;
  font-weight: 600;
  margin-top: 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-status {
    margin-block: 10px;
    font-size: 14px !important;
    line-height: 1.5 !important;

    &.in-stock {
        color: #004080 !important;
    }
    &.on-order {
        color: #A90C0C !important;
    }
}
.products .product:hover,
.products-slider .product:hover{
  border: 1px solid var(--blueDark);
}
.products .product:hover p,
.products-slider .product:hover p{
  color: var(--blueDark);
}
#catalogSort{
  appearance: none;
  border: 1px solid var(--blueLight);
  background-color: var(--white);
  padding: 20px;
  border-radius: 8px;
  font-size: 16px;
  line-height: 15px;
  color: var(--blueDark);
  font-family: 'Gotham Pro';
  font-weight: 500;
  outline: none;
  cursor: pointer;
  width: 310px;
  -webkit-appearance: none;
  position: relative;
  background-position: right 20px center;
  background-repeat: no-repeat;
  background-image: url(../images/icons/arr-blue-bottom.svg);
}
#catalogSort.open{
  background-image: url(../images/icons/arr-blue-top.svg);
}
.filter-open_btn{
  cursor: pointer;
  display: none;
}
.filter-modal{
  position: fixed;
  right: -100%;
  top: 0;
  background: var(--white);
  max-width: 500px;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
  z-index: 10;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  overflow: auto;
}
.filter-modal.show{
  right: 0;
}
.filter-modal_btns button{
  padding: 12px 25px 14px 25px;
  font-size: 16px;
  line-height: 15px;
}
.filter-modal_back{
  align-items: center;
  width: 100%;
  gap: 20px;
  font-size: 16px;
  color: var(--black);
  line-height: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--blueLight);
}
.filter-modal_submenu{
  padding-left: 10px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.filter-modal_subcategory .filter-modal_submenu{
  gap: 30px;
}
.filter-modal_categories{
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  gap: 40px;
}
.filter-modal_categories input[type="radio"]{
  display: none;
}
.filter-modal_categories input:checked + label{
  color: var(--blueDark);
}
.filter-modal_category,
.filter-modal_subcategory{
  position: relative;
}
.filter-modal_category::after,
.filter-modal_subcategory::after{
  width: 100%;
  height: 1px;
  content: '';
  background: var(--blueLight);
  display: block;
  position: absolute;
  bottom: -20px;
}
.filterCategory.active,
.filterSubcategory.active{
  margin-bottom: 30px;
  display: block;
}
.filter-modal_categories .accordion{
  margin-top: 60px;
}
.filter-modal_category.noborder::after{
  display: none;
}
.filter-modal_category .accordion-content{
  margin-top: 20px;
}

/* PRODUCT */
.product-imgs_list{
  overflow: auto;
  min-width: 90px;
  scrollbar-width: none;
  -ms-overflow-style: none;

  max-height: 530px;
  mask-image: linear-gradient(to bottom, hsl(0 0% 0% / 1), hsl(0 0% 0% / 1) 80%, hsl(0 0% 0% / 0));
}
.product-imgs_list::-webkit-scrollbar,
.products-params .tabs-links::-webkit-scrollbar{
  display: none;
}
.product-imgs_list button{
  min-width: 90px;
  max-width: 90px;
  min-height: 90px;
  max-height: 90px;
  overflow: hidden;
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid var(--blueLight);
  background-color: var(--white);
}
.product-imgs_list button.active{
  border: 1px solid var(--blueDark);
}
.product-imgs_list img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-img{
  overflow: hidden;
  background-color: var(--white);
  max-height: 550px;
}
.product-img img{
  border-radius: 5px;
  border: 1px solid var(--blueLight);
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-info p{
  color: var(--black);
  font-size: 16px;
  line-height: 24px;
}
.product-info .mb-2 p{
  font-size: 18px;
  line-height: 27px;
}
.product-info strong{
  font-weight: 500;
}
.product-info a{
  color: var(--blueDark);
  font-weight: 500;
}
.product-info .btn{
  width: 35%;
  min-width: 153px;
}
.products-params .tabs-content{
  margin-top: 60px;
}
.product-features ul{
  padding-left: 20px;
}
.product-features li{
  list-style: disc;
  font-size: 16px;
  line-height: 24px;
  color: var(--black);
}
.product-specification{
  display: flex;
  gap: 20px;
}
.product-specification p{
  font-size: 20px;
  line-height: 24px;
  color: var(--black);
}
.product-specification span p{
  font-weight: 500;
}
.product-specification span {
  width: 30%;
}
.product-specification_content{
  width: 66%;
}
.products-slider .owl-stage{
  margin-left: 1px;
}
#buyProductModal .modal-frame{
  max-width: 610px;
  padding: 20px 30px;
}
#buyProductModal .title{
  font-size: 20px;
  line-height: 30px;
}
#buyProductModal .input:nth-of-type(3), #buyProductModal .input:nth-of-type(4){
  grid-column: span 1;
}