/* =========================
   MEDIA QUERIES FOR RESPONSIVE DESIGN
   ========================= */

/* До 1280px */
@media (max-width: 1280px) {
    body {
        font-size: 14px;
        transition: .3s;
        max-width: 1377px;
    }
    .menu-previews .menu-preview {
        height: 250px;
    }
    .navigation-whitespace {
        height: 50px;
    }
    .logo {
        margin: 13% 1%;
    }
    .navigation-whitespace .ribbon5 {
        left: 71%;
    }
    .header .ribbon6 {
        position: absolute;
        left: 23%;
        top: -34%;
        z-index: 2;
        width: 11%;
        height: 34%;
    }
    .header .top-whitespace {
        height: 50px;
        z-index: 2;
    }
    .breadcrumbs {
        position: relative;
        top: -40px;
        z-index: 3;
    }
    .header .bottom-whitespace {
        height: 20px;
        z-index: 2;
    }
    .footer .reviews-block .stars-block .start-empty,
    .footer .reviews-block .stars-block .start-full,
    .footer .reviews-block .stars-block .start-half {
        width: 17px;
        height: 17px;
    }
}

/* До 1106px */
@media (max-width: 1106px) {
    .footer .ribbon2 {
        left: 35%;
    }
    .footer .reviews-block {
        width: 35%;
    }
    body {
        font-size: 12px;
    }
}

/* До 1024px */
@media (max-width: 1024px) {
    body {
        font-size: 14px;
        transition: .3s;
        max-width: 1377px;
    }
    .menu-previews .menu-preview {
        height: 250px;
    }
    .header .top-whitespace {
        height: 40px;
        z-index: 2;
    }
    .header .bottom-whitespace {
        height: 20px;
        z-index: 2;
    }
    .header .callme-style,
    .header .payment {
        width: 75%;
    }
    #callback .call-text {
        font-size: 1.1em;
        padding: 2%;
        width: 38%;
    }
@media (max-width: 1024px) {
    .menu-previews .menu-preview .sign,
    .rating-xs {
        font-size: 1em; /* ≈ 14.4px */
        line-height: 1.4em;
        display: flex;
        justify-content: center;    /* Горизонтальне вирівнювання */
        align-items: center;        /* Вертикальне по центру */
        height: 15%;               /* Або вкажи потрібну висоту */
        text-align: center;
    }
}
    .navigation ul li .separator {
        height: 41px;
    }
    .footer .reviews-block {
        width: 40%;
    }
    .footer .ribbon2 {
        left: 36%;
    }
    .menu-previews .menu-preview .overlay,
    .menu-previews .menu-preview .overlay-left,
    .menu-previews .menu-preview .overlay-right {
        height: 25%;
    }
    .record-block img {
        width: 100%;
    }
}

/* До 992px */
@media (max-width: 992px) {
    .container-fluid,
    .nopadding-sm {
        padding: 0;
    }
    .header .mbtn,
    .text-center-sm {
        text-align: center;
    }
    .header .ribbon4 {
        left: 106%;
        width: 40%;
    }
    .logo {
        margin: 1%;
    }
    .logo img {
        box-shadow: none;
        margin-left: 5%;
    }
    .margin-top-1p-sm {
        margin-top: 1% !important;
    }
    .header .phones,
    .header .schedule {
        font-size: 2em;
    }
    .header .mobile-menu {
        font-size: 2.7em;
        margin-top: 20%;
        margin-left: 15%;
        color: #4f5566;
        background: #c5c6c6;
        padding: 3px;
        cursor: pointer;
    }
    .header .mbtn {
        border: 1px solid #b2c4d4;
        border-radius: 4px;
        background: linear-gradient(to top, #e5eaef, #fff, #e5eaef);
        padding: 1%;
        font-size: 1.2em;
        text-transform: uppercase;
        font-weight: 700;
        color: #333;
    }
    .header .mbtn:active {
        background: linear-gradient(to top, #fff, #e5eaef, #fff);
    }
    #callback,
    #modalInfo {
        width: 60%;
        left: 20%;
    }
    #callback .call-text {
        font-size: 1.4em;
        padding: 1%;
    }
    .orders-count {
        font-size: 1.8em;
    }
    .orders-sign {
        font-size: 1.1em;
    }
    .record-block .mainsign {
        font-size: 1.8em;
    }
    .record-block .sign {
        font-size: 1.2em;
    }
    .footer .mdi-vk-box {
        font-size: 3.4em;
        margin-left: 30%;
    }
    .footer .mdi-facebook-box {
        font-size: 3em;
        margin-left: 5%;
    }
    .footer .mdi-twitter-box {
        font-size: 3em;
        margin-left: 5px;
    }
    .footer .reviews-block {
        float: right;
        width: 35%;
    }
    .mobile-cover,
    .mobile-menu-content {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        display: none;
    }
    .footer .reviews-block .ribbon-reviews span {
        font-size: 1.3em;
    }
    .rating-container .star {
        margin: 0 1px;
    }
    .rating-xs {
        font-size: 1em;
    }
    .footer .reviews-count {
        font-size: 1.3em;
        padding: 0;
    }
    .footer .copyright {
        font-size: 1em;
        padding-left: 0;
    }
    .mobile-cover {
        z-index: 10;
        background: #c6c6c6;
        opacity: .8;
    }
    .mobile-menu-content {
        padding: 1%;
        z-index: 11;
        overflow-y: auto;
    }
    .mobile-menu-content .close-pane #close-mmenu {
        font-size: 3em;
        color: #000;
        font-weight: 700;
    }
}

/* До 768px */
@media (max-width: 768px) {
    .nopadding-md {
        padding: 0;
    }
    body {
        font-size: 12px;
    }
    #callback .text-right {
        text-align: center;
        margin-bottom: 2%;
    }
    #callback .btn,
    #modalInfo .btn {
        width: 100%;
    }
    .footer .reviews-count {
        font-size: 1em;
    }
    .header .phones,
    .header .schedule {
        font-size: 1.5em;
    }
    #callback,
    #modalInfo {
        width: 94%;
        left: 3%;
    }
    #callback .call-text {
        width: 36%;
    }
    .record-block img {
        width: 120%;
    }
}

/* До 500px */
@media (max-width: 500px) {
    .header .phones,
    .header .schedule {
        font-size: 1em;
    }
    .footer .mdi-vk-box {
        font-size: 2.4em;
        margin-left: 30%;
    }
    .footer .mdi-facebook-box {
        font-size: 2.1em;
        margin-left: 5%;
    }
    .footer .mdi-twitter-box {
        font-size: 2.1em;
        margin-left: 5px;
    }
    .footer .reviews-block {
        float: left;
        width: 60%;
    }
    .footer .reviews-block .ribbon-reviews span {
        font-size: 1em;
    }
}

/* До 320px */
@media (max-width: 320px) {
    .collapse-link {
        padding: 10% 4%;
    }
    .collapse-link span {
        line-height: normal;
    }
    .footer .reviews-block {
        width: 62%;
    }
    .footer .reviews-count {
        font-size: .9em;
    }
    .table-fix {
        margin-left: -5%;
    }
}

/* =========================
   Додаткові медіа-запити
   ========================= */

@media all and (max-width: 850px) {
    .social-icon div {
        margin-right: 1em;
    }
}

@media all and (max-width: 500px) {
    .page-content img {
        max-width: 100%;
        height: auto;
    }
    #OsagoForm_foreign {
        margin-top: 0;
    }
}

@media (max-width: 450px) {
    .footer i.mdi {
        font-size: 3em;
    }
    .page-content .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
    }
    .page-content table {
        width: 100%;
        height: auto;
    }
    .social-icon div {
        margin-right: .5em;
    }
    .mobile-100 {
        width: 100%;
    }
    .padding-0 {
        padding-left: 15px;
    }
}