

@media (min-width: 768px) and (max-width: 992px) {
    
    .catalog-list {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media screen and (max-width: 767px) {
    /* Paddings */
    .section-pd {
        padding: 40px 0;
    }

    .navbar {
        display: flex;
        position: fixed;
        bottom: 0;
        height: 72px;
        z-index: 11;
        width: 100%;
        background-color: var(--color-white);
        box-shadow: 0px 0.5px 0px 0px #C7C7CD inset;
    }
    .navbar .navbar-link {
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 4px;
        font-size: 12px;
        font-weight: 400;
        line-height: 150%;
        padding: 13px;
        width: 100%;
    }
    .navbar .navbar-link.active {
        color: var(--primary-color);
    }
    .navbar-fav {
        position: relative;
    }
    .navbar-fav .special-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        position: absolute;
        top: -32px;
        width: 64px;
        height: 64px;
        border-radius: 12px;
        background: var(--text-accent);
        box-shadow: 0px 8px 10px 0px rgba(58, 58, 58, 0.20);
        color: var(--color-white);
    }
    .navbar-fav.active .special-icon {
        background-color: var(--color-white);
        color: var(--primary-color);
    }

    .nav-btn {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        background: #F6F5F5;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        color: var(--text-accent);
        transition: .4s;
    }
    .nav-btn circle {
        transition: .4s;
    }
    .nav-btn:hover circle {
        cx: 7;
        cy: 7;
    }
    .nav-btn::before {
        content: '';
        width: 1.5px;
        height: 1.5px;
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        border-radius: 50%;
        background-color: #33333333;
        transition: .4s;
        transition-delay: 0.2s;
    }
    .nav-btn:hover::before {
        width: 20px;
        height: 20px;
    }
    .header-none {
        visibility: visible;
        height: auto;
        opacity: 1;
    }
    .header-edge {
        height: 4rem;
        padding: 8px 0;
        background-color: #eaeaea;
    }
    .header-inner .nav {
        display: none;
        transform: translateY(-100%);
        position: absolute;
    }
    .header-edge.active .header-inner .nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        height: 100vh;
        z-index: 10;
        top: 0;
        left: 0;
        width: 100%;
        background: white;
        transform: translateY(0);
    }
    .nav-btn.active, .header-edge.active .logo {
        z-index: 11;
    }
    .header-inner .nav .link {
        font-size: 24px;
    }
    .nav-btn.active svg {
        display: none;
    }
    .nav-btn.active::after, .nav-btn.active::before {
        content: '';
        width: 2px;
        height: 16px;
        position: absolute;
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: #333;
        border-radius: 8px;
    }
    .nav-btn.active::after {
        transform: rotate(45deg);
    }
    .nav-btn.active::before {
        transform: rotate(-45deg);
    }

    .header-inner .nav .link.active::before {
        content: unset;
    }
    
    /* Video */
    .appVideos {
        position: relative;
        height: auto;
        width: 100%;
        margin-bottom: 32px;
    }
    .appVideos .videoPlayer {
        width: 100%;
    }
    .appVideos video {
        position: relative;
        border-radius: 0;
    }
    
    .hero-block {
        height: auto;
        padding-top: 100px;
        padding-bottom: 128px;
        flex-direction: column-reverse;
    }
    .hero-text h1, .hero-text .title-hero {
        font-size: 24px;
    }
    .hero-text p {
        font-size: 16px;
    }
    .hero-text .btns { 
        flex-direction: column;
    }
    
    
    /* Name */
    .social-sub {
        height: auto;
    }
    .social-sub .social-links {
        padding: 24px;
        align-items: center;
        gap: 16px;
    }
    .social-sub .liquid {
        left: 0;
    }
    .social-links .title-h3 {
        font-size: 18px;
    }
    .what-in {
        margin-top: 24px;
        height: 260px;
    }
    .what-in img, .what-in video {
        width: 115%;
    }
    .logo-sub {
        margin-top: 24px;
        height: 260px;
    }
    .logo-sub svg {
        height: 50px;
        width: 228px;
    }

    /* Name */
    .what-is .title-main {
        margin-bottom: 16px;
    }
    .what-is p {
        margin-top: 8px;
    }

    /* Advantages */
    .card-swipe .card-item {
        padding: 24px 16px;
        flex-direction: column;
        top: 96px;
        gap: 24px;
    }
    .card-swipe .card-item .image {
        width: 100%;
        height: auto;
        padding-bottom: 100.25%;
    }
    .image .image-item img {
        width: 100%;
        height: auto;
    }
    .card-swipe .card-item .info {
        width: 100%;
    }
    .card-swipe .card-item h3 {
        margin-top: 16px;
        font-size: 20px;
        font-weight: 400;
    }
    .card-swipe .card-item p {
        line-height: 20px;
    }
    
    /* About */
    .company-logo {
        width: 100%;
        height: 100%;
        margin-top: 24px;
    }

    .news-title {
        justify-content: flex-start;
        margin-bottom: 8px;
    }
    .news-title a {
        display: none;
    }
    .news-desc {
        font-size: 16px;
    }
    .news-list {
        gap: 16px;
        overflow-x: auto;
        padding-bottom: 12px;
    }
    .news-item {
        flex: 0 0 90%;
    }
    
    .news-info h2 {
        font-size: 18px;
    }
    .news-info p {
        margin-top: 8px;
    }

     /* FAQs */
     .faq-list .faq-item .btn-collapse {
        gap: 16px;
     }
    .faq-list .faq-item .btn-collapse h3 {
        font-size: 20px;
    }
    .faq-list .faq-item p {
        color: var(--text-accent);
    }
    .faq-item .faq-btn {
        width: 24px;
        height: 24px;
    }
    .faq-item .faq-btn svg {
        width: 16px;
        height: 16px;
    }
    .faq-list .faq-item {
        padding: 16px;
        border-radius: 8px;
    }

    /* Callback */
    .group-callback, .group-radio-list {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .group-callback label, .radio-title {
        font-size: 20px;
    }
    .group-callback input, .input-callback {
        font-size: 16px;
    }
    [type="radio"]:checked + label, [type="radio"]:not(:checked) + label {
        font-size: 16px;
    }
    .radio-row .radio-subtitle {
        display: none;
    }
    textarea.input-callback {
        height: 60px;
    }
    .form-callback button {
        width: 100%;
    }

    .news, .news-block, .catalog-white {
        padding-top: 128px;
    }
    .news-info-title {
        margin-top: 32px;
    }

    /* Catalog */
    .catalog {
        background: var(--color-white);
        padding: 128px 0 64px;
    }
    .catalog-grid {
        grid-template-columns: 1fr;
    }
    .catalog-card {
        padding: 24px;
        gap: 8px;
        background: radial-gradient(84.9% 68.44% at 50% 37.08%, rgba(240, 241, 244, 0.00) 0%, #F0F1F4 62.24%);
    }
    .catalog-card .top {
        flex-direction: column-reverse;
        gap: 24px;
    }
    .catalog-card .top img {
        width: 100%;
        height: 100%;
    }
    .catalog-card .top h2 {
        font-size: 24px;
        width: 100%;
        text-align: left;
    }
    .catalog-card .bottom p {
        width: 100%;
        color: var(--text-add);
    }
    .catalog-card .link-to {
        display: none;
    }

    .mats-page .panel {
        padding: 0 16px;
    }
	
    .catalog-white .special-tabs {
        margin: 16px 0 24px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px
    }
    .catalog-white .special-tabs .tabs, .catalog-white .special-tabs .tabs li {
        width: 100%;
        text-wrap: nowrap;
    }
    .catalog-white .special-tabs .tabs li {
        background: #F5F5F5;
    }
    .catalog-white .special-tabs .tabs li:focus {
        background: none;
    }
    .special-tabs .tabs li.active {
        background: var(--primary-color);
    }
    .large-tabs span {
        display: none;
    }
    .catalog-white .special-tabs .tabs li {
        font-size: 16px;
    }
    .catalog-info h2 {
        font-size: 20px;
    }
    .catalog-images {
        margin-bottom: 24px;
    }
    .cat-detail .catalog-desc li {
        flex-direction: column;
        font-variant-numeric: lining-nums proportional-nums;
        gap: 2px;
        align-items: flex-start;
        border-radius: 8px;
        background-color: #F9FAFC;
        padding: 8px 16px;
    }
    .cat-detail .other-text {
        font-size: 14px;
    }
    
    .catalog-list {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .card-cat {
        padding: 16px;
        border-radius: 24px;
        flex-direction: column;
    }
    .card-cat img {
        width: 100%;
        border-radius: 16px;
    }


    
    .catalog-card.videoHover video {
        display: none;
    }

    .catalog-card.videoHover img {
        display: block;
    }

    /* Catalog Circulation */
    .pumps .catalog-list .card-cat .images {
        overflow-x: auto;
        padding-bottom: 12px;
    }
    .pumps .catalog-list .card-cat .images img, .dimers .catalog-list .card-cat.dimers-type-two .images img {
        width: 80%;
    }
    .pumps .catalog-list .card-cat .info .info-head .btn-show {
        display: none;
    }
    .pumps .catalog-list .card-cat .info .info-content .info-content-item, .pumps .catalog-list .card-cat .info .info-content ul li {
        flex-direction: column;
    }
    .pumps .catalog-list .card-cat .info .info-content .info-content-item {
        gap: 8px;
    }
    .pumps .catalog-list .card-cat .info .info-content ul li {
        align-items: flex-start;
        gap: 0;
    }
    .pumps .catalog-list .card-cat .info .info-content ul li span {
        font-size: 16px;
    }
    .pumps .catalog-list .card-cat .info .info-content ul li .desc {
        font-size: 13px;
    }
    .info-content-rest {
        max-height: unset;
        margin-top: 0;
        visibility: visible;
        opacity: 1;
    }

    /* Main How it work */
    .product__sticky .product__sticky-section .container {
        flex-direction: column;
        gap: 32px;
    }
    .product__sticky-section-content, .product__sticky .product__sticky-section.active .product__sticky-section-img .house-mat {
        width: 100%;
    }
    .product__sticky .product__sticky-section .container img {
        width: 100%;
        height: 100%;
    }
    

    .pumps .catalog-list .card-cat .info .info-content h3 {
        line-height: 100%;
    }
    .pumps .catalog-list .card-cat .info .info-content .content-details {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    /* Dimers */
    .dimers .catalog-list .dimers-type-one {
        flex-direction: column;
    }
    .dimers .catalog-list .dimers-type-two .info .info-content .content-details {

    }
    .dimers .catalog-list .dimers-type-two .info .info-content ul li {

    }
    .dimers .catalog-list .dimers-type-two .info .info-content ul li span {
        text-align: left;
    }

    .cat-heat .cat-item {
        flex-direction: column;
	    padding: 16px;
    }
    .cat-heat .cat-item img {
        width: 100%;
        height: 300px;
    }
    .cat-heat .cat-item .cat-info {
        overflow-x: auto;
        display: block;
    }
    .cat-heat .cat-item .cat-info tr td:nth-child(1) {
        width: 200px;
        display: block;
    }
    .heat-item .card-heat .info-content .info-content-item .model-name::before {
        content: none;
    }
    .dimers .catalog-list .dimers-type-four .info .info-content ul li {
        flex-direction: row;
        width: 100%;
        align-items: center;
        gap: 12px;
    }

    .product__sticky .product__sticky-section .product__sticky-section-img {
        height: 40vh;
    }
    .borehole-page.product__sticky .product__sticky-section .product__sticky-section-img {
        height: 30vh;
    }
    .borehole-page.product__sticky-section p {
        font-size: 14px;
    }
    .borehole-page.product__sticky .product__sticky-section.active .product__sticky-section-img img {
        width: 80%;
        object-fit: contain;
    }

    .about .partners {
        margin-top: 40px;
    }

    /* Footer */
    .footer {
        padding: 40px 0 128px;
    }
    .footer-logo {
        margin-bottom: 16px;
    }
    .footer .footer-logo .footer-adress {
        font-size: 14px;
        margin-top: 12px;
    }
    .footer ul {
        margin-top: 12px;
    }
    .footer .list-title {
        margin-top: 24px;
    }
    
    .social-footer {
        align-items: flex-start;
    }
    .copyright {
        margin-top: 16px;
    }
}