:root {
    --pw: 8px; /* 8px */
    --mw: -16px;
    --mt: -16px;
    --pt: 16px;
}
:root {
    /* The intrinsic width of the underline stroke (in pixels). This is 
     * the same as the height of the cap images. Don't specify the
     * units! This is because of some of the calculations we do later on. */
    --underline-intrinsic-width: 8;
    
    /* The actual width of the underline stroke we want to render (in pixels).
     * You can modify this, and the sizing and positioning should be calculated
     * accordingly. Again, Don't specify the units! */
    --underline-width: 12;
    
    /* The colour used to draw the underline. It should match the colour
     * used in the cap images... unfortunately we can't modify the SVG
     * fill via CSS because it's a background image. */
    --underline-color: #FDCF00;
    
    /* We need to know the width of the cap images so that we
     * can position everything on the x axis accordingly. */
    --underline-cap-width: 3px;
    
    /* The border is positioned relative to the bottom of the line.
     * We can move it upwards a little to create an overlap effect. */
    --underline-offset-y: -2px;
    
    /* The padding to add to the x axis. By default, the caps would be
     * aligned with the beginning and end of the line. */
    --underline-padding-x: 0.01em;
    
    /* The cap images to use that form the left and right rounded
     * shape. I guess these could be any shape, they don't
     * necessarily have to be round 🙂.
     */
    --cap-image-left: url(../images/svg/underline-left.svg);
    --cap-image-right: url(../images/svg/underline-right.svg);
}
/* bootstrap */
.container {
    padding-right: 16px;
    padding-left: 16px;
}
/* SM */
.row {

    margin-right: -8px;
    margin-left: -8px;
    /* margin-right: var(--mw);
    margin-left: var(--mw); */
}
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: var(--pw);
    padding-left: var(--pw);
}
.container-fluid {
    padding-right: var(--pw);
    padding-left: var(--pw);
}
/* / SM / */
/* / bootstrap / */
html {
    font-size: 14px;
}
body {
    font-size: 14px;
    color: #3d3d3d;
    font-family: 'Noto Sans', sans-serif;
    background-color: #f2f2f2;
}
button:focus, input:focus, textarea:focus {
    outline: none;
}
p {
    margin-top: 0;
    margin-bottom: 0;
}
.black_color {
    color: #3d3d3d;
}
.white_color {
    color: #ffffff;
}
.spy {
    position: fixed;
    font: bold 16px/1.2 Arial, sans-serif;
    text-align: center;
    color: #ff0;
    padding: 0 5px;
    bottom: 0;
    right: 0;
    background: #000;
    z-index: 9999;
}
.spy_grn {
    color: #0c0;
}
.pos-r {
    position: relative;
}
.header_top
{
    display: none;
}
.header_menu {
    display: none;
}
.right_content {
    display: flex;
}
.header_mid {
    background: #F3E275;
}
.hamburger_menu {
    border-radius: 50px;
    background-color: #FDCF00;
}
.hamburger {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    justify-content: space-around;
    align-items: center;
    align-content: center;
}
.hamburger_button {
    width: 44px;
    height: 44px;
    padding: 12px 12px;
}

.hamburger__line {
    width: 100%;
    height: 2px;
    border-radius: 50px;
    background-color: #3d3d3d;
}
.jcsb {
    justify-content: space-between;
}
.aic {
    align-items: center;
}
.phone_icon {
    width: 32px;
    height: 32px;
    margin-right: 8px;
    cursor: pointer;
}
.logo img {
    width: 46px;
    height: 46px;
    margin-right: 3px;
}
.logo_title {
    font-weight: 900;
    font-size: 16px;
    line-height: 22px;
}
.box-shadow {
    box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.2);
    /* filter: drop-shadow(2px 2px 15px rgba(0, 0, 0, 0.2)); */
}
.mt20 {
    margin-top: 20px;
}
.mb15 {
    margin-bottom: 15px;
}
.mb20 {
    margin-bottom: 20px;
}
.mb30 {
    margin-bottom: 30px;
}
.mb40 {
    margin-bottom: 40px;
}
.pb40 {
    padding-bottom: 40px;
}
.mr-2 {
    margin-right: 2px;
}
.image_main_top_block {
    /* background-image: url('../images/img/main-top-img.png'); */
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.image_main_top {
    width: 100%;
    height: 243px;
    object-fit: cover;
    border-radius: 4px;
    filter: drop-shadow(2px 2px 15px rgba(0, 0, 0, 0.2));
}
.main_top_title {
    position: absolute;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 4px;
    min-width: 230px;
    width: 310px;
    left: 0;
    height: 161px;
    right: 0;
    bottom: 0;
    top: 52px;
    margin: auto;
    text-align: center;
    padding: 15px 10px;
}
.main_top_title h1 {
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.title1 {
    font-size: 26px;
    line-height: 35px;
}
.main_top_title b::before {
    content: "";
    position: absolute;
    left: 7%;
    bottom: 16px;
    width: 150px;
    height: 14px;
    transform: skew(-12deg) translateX(-50%);
    background: rgba(238,111,87,0.5);
    z-index: -1;
}
.main_top_title_desc {
    font-weight: 600;
}
.fz16 {
    font-size: 16px;
}

.section-mb20 {
    margin-bottom: 20px;
}
.section-mb30 {
    margin-bottom: 30px;
}
.inform-items-text {
    background: #FEFEFE;
    box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    color: #3d3d3d;
    text-align: center;
    position: relative;
    margin-bottom: 20px;
}
.inform-items-text-last {
    margin-bottom: 0;
}
.inform-items-img-block {
    position: absolute;
    width: 48px;
    height: 48px;
    background-color: #FDCF00;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    font-size: 48px;
    top: -0.5em;
    left: 0;
    right: 0;
    box-shadow: 0px 4px 20px rgba(158, 158, 158, 0.25);
}
.inform-items-img-block img {
    width: 24px;
    height: 24px;
}
.pt-4_1 {
    padding-top: 1.75rem!important;
}
.pt-4_2 {
    padding-top: 2rem!important;
}
.inform-items-text-mt {
    margin-top: 1.7144em;
}
.inform-title {
    line-height: 25px;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1rem;
}
.inform-title {
    display: inline-block;
    margin-bottom: 3px;
}
.inform-desc {
    display: inline-block;
    text-align: left;
    line-height: 19px;
    font-size: 1rem;
}
.section-shop-items-title {
    text-align: center;
}
.section-shop-items-title b {
    font-weight: 700;
    text-transform: uppercase;
}
.title2 {
    font-size: 18px;
    line-height: 25px;
}
.section-shop-items {
    text-align: center;
}

.shop-items {
    background: #FEFEFE;
    box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    border: 6px solid #FEFEFE;
}
.shop-items img {
    width: 100%;
    border-radius: 2px;
}
.shop-item-name {
    text-align: center;
}
.shop-btn {
    background: #FDCF00;
    border-radius: 5px;
    max-width: 195px;
    min-width: 136px;
    height: 50px;
    display: flex;
    align-items: center; 
    letter-spacing: 0.02em;
    font-size: 12px;
    margin: auto;
    text-transform: uppercase;
    border: none;
    justify-content: center;
    filter: drop-shadow(0px 4px 15px rgba(0, 0, 0, 0.2));
}
.shop-items-mb {
    margin-bottom: 10px;
}
.margin-b:last-child {
    margin-bottom: 0;
}
.margin-b:nth-last-child(2) {
    margin-bottom: 0;
}
.title-about {
    font-weight: 700;
    text-transform: uppercase;
    color: #3A3A3A;
}
.about-desc {
    font-weight: 500;
}
.tac {
    text-align: center;
}
.about-service {
    display: flex;
    flex-direction: column;
    padding: 16px 8px;
    background: #FEFEFE;
    box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}
.about-service img {
    margin: auto;
    margin-bottom: 15px;
    width: 52px;
    height: 52px;
}
.about-service-name {
    display: flex;
    flex-grow: 1;
    word-wrap: break-word;
}
.margin-b {
    margin-bottom: 16px;
}
.q-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: 195px;
    background: #FDCF00;
    border-radius: 5px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border: none;
    filter: drop-shadow(0px 4px 15px rgba(0, 0, 0, 0.2));
}
.q-btn::after {
    content: url(../images/svg/arrow-btn.svg);
    margin-left: 6px;
    position: relative;
    width: 24px;
    height: 24px;
    transition: all 0.5s ease-in-out;
    -webkit-transform: all 0.5s ease-in-out;
}
.section-question .title2 {
    font-weight: 700;
}
.section-question-block-bg {
    background: #FEFEFE;
    box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}
.section-question-block {
    padding: 15px;
}
.footer-top-bg {
    background-color: #3D3D3D;
}
.footer-bottom-bg {
    background-color: #1D1D1D;
}
.footer-company-name {
    font-weight: 700;
    font-size: 18px;
    line-height: 25px;
    letter-spacing: -0.5px;
}
.footer-company {
    background-color: #FDCF00;
    box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    max-width: 328px;
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
}
.footer-company-name {
    --underline-color: #fff;
    --cap-image-left: url(../images/svg/underline-left-white.svg);
    --cap-image-right: url(../images/svg/underline-right-white.svg);
}
.footer-contacts {
    color: #ffffff;
}
.footer-contacts a {
    color: #ffffff;
}
.footer-contacts-title {
    font-weight: 900;
}
.footer-contacts-items {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.footer-contacts-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.footer-contacts-item:last-child {
    margin-bottom: 0;
}
.footer-contacts-item img {
    height: 42px;
    width: 42px;
    margin-right: 10px;
}
.footer-bottom-bg {
    background: #1D1D1D;
}
.footer-bottom {
    font-size: 12px;
    line-height: 180.6%;
    color: #ffffff;
}
.footer-bottom a {
    color: #ffffff;
}
.footer-bottom-fx {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
}
.developer {
    text-decoration: underline;
    text-transform: uppercase;
}
.image-mail {
    position: absolute;
    right: 12px;
    bottom: 8px;
}
.right_content-md {
    display: none;
}
.header-top-item {
    display: flex;
}
.header-top-item img {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}
.header_top-bg {
    display: none;
} 
.header_menu-bg {
    background: #3D3D3D;
    display: none;
}
.header_menu {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: #ffffff;
    padding-top: 1em;
    padding-bottom: 1em;
}
.header_menu a {
    color: #ffffff;
    margin-left: 15px;
    margin-right: 15px;
    display: inline-block;
}
.main_top_block_banner {
    display: none;
}
.mid-content {
    font-size: 16px;
    line-height: 22px;
}
.logo-fx {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.inform-items-text-contact {
    width: 100%;
}
.bread_crumbs_item {
    margin-right: 10px;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0.36px;
}
.bread_crumbs {
    display: flex;
    align-items: center;
}
#map {
    border: 3px solid #FFFFFF;
    border-radius: 10px;
    margin-top: 30px;
    margin-bottom: 30px;
}
.contact-title {
    --underline-offset-y: 2px;
}
.inform-items-text-contact {
    display: flex;
    flex-direction: column;
}
.inform-items-text-contact .inform-title {
    text-transform: none;
    font-weight: 700;
}
.inform-items-text-contact .inform-desc {
    display: flex;
    justify-content: center;
}
    
    

/* codepen.io custom underline */

.heading {
    display: inline;
    --underline-width-scale: calc(var(--underline-width) / var(--underline-intrinsic-width));
    /* padding: 0 calc(var(--underline-padding-x) + calc(var(--underline-cap-width) * var(--underline-width-scale))); */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background-repeat: no-repeat;
    /* color: #1221ff; */
    background-image:
      linear-gradient(180deg, var(--underline-color), var(--underline-color)),
      var(--cap-image-left),
      var(--cap-image-right);
    background-position-x:
      calc(var(--underline-cap-width) * var(--underline-width-scale)),
      0,
      100%;
    background-position-y: calc(100% - var(--underline-offset-y) * -1);
    background-size:
      calc(100% - calc(var(--underline-cap-width) * var(--underline-width-scale) * 2)) calc(var(--underline-width) * 1px),
      auto calc(var(--underline-width) * 1px),
      auto calc(var(--underline-width) * 1px);
}
.heading--2 {
    --underline-width: 10;
    --underline-offset-y: -1px;
}
/* / codepen.io custom underline / */


/* sm */
@media (min-width: 576px) {
    .section-mb30 {
        margin-bottom: 40px;
    }
    .shop-items-mb {
        margin-bottom: 15px;
    }
    .main_top_title {
        width: 360px;
        height: 168px;
    }
    .image_main_top {
        height: 311px;
    }
    .title1 {
        font-size: 30px;
        line-height: 41px;
    }
    .title2 {
        font-size: 24px;
        line-height: 33px;
    }
    .shop-btn {
        width: 190px;
        font-size: 14px;
        line-height: 19px;
    }
    .shop-btn::after {
        content: url(../images/svg/arrow-btn.svg);
        margin-left: 6px;
        position: relative;
        width: 24px;
        height: 24px;
        transition: all 0.5s ease-in-out;
        -webkit-transform: all 0.5s ease-in-out;
    }
    .about-service {
        padding: 16px 13px;
    }
    .contact-title {
        --underline-offset-y: -2px;
    }
    
}

/* md */
@media (min-width: 768px) {
    :root {
        --pw: 16px;
    }
    .title1 {
        font-size: 36px;
        line-height: 49px;
    }
    .title2 {
        font-size: 26px;
        line-height: 35px;
    }
    .right_content-md {
        display: block;
    }
    .right_content {
        display: none;
    }
    .logo_title {
        font-size: 24px;
        line-height: 33px;
    }
    .logo img {
        width: 58px;
        height: 58px;
    }
    .header_top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        /* background: #3D3D3D; */
        color: #fff;
    }
    .header_top a {
        color: #fff;
    }
    .header_top-bg {
        display: block;
        background: #3D3D3D;
    }
    .header_menu-bg {
        display: block;
    }
    .margin-b {
        margin-bottom: 32px;
    }
    .main_top_title {
        width: 420px;
        height: 200px;
    }
    .image_main_top {
        height: 420px;
    }
    .main_top_title {
        bottom: 43px;
        top: auto;
    }
    .inform-title {
        margin-top: 5px;
        margin-bottom: 10px;
    }

    .inform-items-img-block {
        width: 64px;
        height: 64px;
        font-size: 64px;
        border: 8px solid #ffffff;
        box-shadow: 0px 4px 20px rgba(158, 158, 158, 0.25);
    }
    .section-shop-items .margin-b:nth-last-child(3) {
        margin-bottom: 0;
    }
    .row {
        margin-right: -16px;
        margin-left: -16px;
    }
    .section-about .margin-b {
        margin-bottom: 0;
    }
    .section-question-block {
        max-width: 420px;
    }
    .image-mail {
        display: flex;
        position: unset;
        width: calc(100% - 420px);
        justify-content: right;
        align-items: center;
    }
    .image-mail img {
       width: 100%;
       max-width: 207px;
    }
    .footer-company {
        max-width: none;
        width: 50%;
        margin-right: 16px;
        margin-bottom: 0;
        margin-left: 0;
    }
    .footer-contacts {
        width: 50%;
        margin-left: 16px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .inform-items-text-mt {
        margin-top: 2.29em;
    }
    .inform-items-text {
        display: flex;
        margin-bottom: 0;
        flex-direction: column;
    }
    .inform-items-text.inform-items-text-first {
        margin-bottom: 20px;
    }
    .inform-desc {
        display: flex;
        flex-grow: 1;
    }
    .inform-items-text-advantages {
        background: #FDCF00;
        width: 100%;
        align-items: center;
        font-weight: 700;
        text-transform: uppercase;
    }
    .inform-items-text-advantages .inform-desc {
        align-items: center;
        font-size: 20px;
        line-height: 27px;
    }
    .footer-contacts-block {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    :root {
        --underline-offset-y: -5px;
    }
        
    .inform-items-text-contact {
        margin-bottom: 16px;
    }

    
}

/* lg */
@media (min-width: 992px) {
    .section-mb20 {
        margin-bottom: 30px;
    }
    .about-service img {
        margin-bottom: 20px;
        width: 74px;
        height: 74px;
    }
    .title1 {
        font-size: 42px;
        line-height: 57 px;
    }
    .main_top_block_banner {
        display: block;
    }
    .inform-items-img-block-banner {
        background-color: #FDCF00;
        border-radius: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 64px;
        height: 64px;
        font-size: 64px;
        border: 8px solid #ffffff;
        box-shadow: 0px 4px 20px rgba(158, 158, 158, 0.25);
        margin: auto;
    }
    .main_top_block_banner .banner-logo {
        display: block;
        width: 100px;
        height: 100px;
        margin: auto;;
    }
    .main_top_block_banner {
        background: #FEFEFE;
        box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        height: 100%;
    }
    .main_top_title {
        bottom: 23px;
        top: auto;
        width: 660px;
        height: 140px;
    }
    .section-shop-items .margin-b:nth-last-child(4) {
        margin-bottom: 0;
    }
    .section-question-block-bg {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
    .footer-company-name {
        font-size: 26px;
        line-height: 35px;
        letter-spacing: -1px;
    } 
    .footer-contacts {
        width: 40%;
        align-items: flex-end;
    }
    .main_top_title_desc {
        font-size: 18px;
        line-height: 25px;  
    }
    .img-footer {
        position: absolute;
        bottom: -19px;
        left: 0;
        cursor: pointer;
    }
    .block-developer {
        width: 40%;
        text-align: right;
    }
    #map {
        margin-top: 60px;
        margin-bottom: 110px;
    }
}

/* xl */
@media (min-width: 1200px) {
    .section-mb30 {
        margin-bottom: 60px;
    }
    .about-service img {
        width: 95px;
        height: 95px;
    }
    .footer-contacts {
        width: 43%;
    }
    .image_main_top {
        height: 505px;
    }
    .main_top_title {
        width: 767px;
    }
    .mid-content {
        width: 37%;
    }
    .main_top_block_banner-text {
        padding-left: 2.2rem !important;
        padding-right: 2.2rem !important;
    }
    .block-developer {
        width: 35%;
    }
    
}