@media (max-width: 1399px) {
    #svg-container svg {
        position: relative;
        top: 0;
        left: 50%;
        height: 100%;
        width: 120%;
        margin-left: -60%;
    }
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 100%;
    }
    .hero-section .hero-content-wrapper {
        padding: 20px 0 60px;
    }
    .hero-section .hero-content-wrapper h1 {
        font-size: 39px;
        line-height: 45px;
        margin-bottom: 20px;
        letter-spacing: -2px;
    }
    .hero-section .hero-img {
        top: 80px;
    }
}

@media (max-width: 991px) {
    #svg-container svg {
        width: 150%;
        margin-left: -75%;
    }
    .col-lg-3 {
        flex: 0 0 auto;
        width: 25%;
    }
    .stats-section {
        margin-top: 18px;
        margin-bottom: 0;
    }
    .timer {
        display: inline-block;
        font-weight: 400;
        font-size: 18px;
    }
    #interactionButtons .intButt span {
        display: none;
    }
    .hero-section .hero-img {
        top: -50px;
    }

}
@media (max-width: 767px) {
    .container {
        width: 100%;
    }
    #interactionButtons {
        position: absolute;
        left: 50%;
        top: auto;
        bottom: -20px;
        z-index: 1;
        margin-top: 0px;
        height: auto;
        /*padding: 10px 0;*/
        width: 340px;
        margin-left: -170px;
    }
    .intButt {
        display: inline-block;
        width: 30px;
    }
    .timer {
        font-size: 16px;
    }
    .typeName {
        font-size: 12px;
    }
    .arti-media {
        display: block;
         float: none;
        text-align: center;
    }
    body {
        margin-bottom: 170px !important; /* Margin bottom by footer height */
    }
    .footer {
        height: 120px;
    }
    .cercuVesel {
        display: none;
    }
    #contact.cta-bg {
      margin-top: 20px;
    }
    .comment-form-wrapper .comment-form .theme-btn, .comment-form-wrapper .contact-form .theme-btn, .contact-form-wrapper .comment-form .theme-btn, .contact-form-wrapper .contact-form .theme-btn {
        font-weight: 500;
        padding: 10px 40px;
    }
}

@media (max-width: 500px) {
    .intButt {
        display: inline-block;
        width: 25px;
    }
    .timer {
        font-size: 12px;
    }
    .typeName {
        font-size: 9px;
    }
    #interactionButtons {
        bottom: -30px;
        width: 288px;
        margin-left: -144px;
        padding: 0;
    }
    .row>* {
        padding-right: calc(var(--bs-gutter-x)/ 2.5);
        padding-left: calc(var(--bs-gutter-x)/ 2.5);
    }
    .nextText, .prevText {
        font-size: 12px;
    }
    #pinchZoom {
        display: block;
        position: absolute;
        bottom: 174px;
    }
}