:root {
    --navy: #001F5B;
    --navy-100: #F2F5FC;
    --navy-200: #E0E5F2;
    --white: #ffffff;
    --text: #111827;
    --text-light: #6B7280;
    --radius: 12px;
    --shadow: 0 4px 12px rgba(0,0,0,0.05);
    --lynch-300: #8A9BA8;
    --h2: #2b4066;
}


html, body {
    overflow: auto;
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    background-color: #ffffff;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    font-family: "Golos-medium",sans-serif;
    box-sizing: border-box;

}

h1 {
    font-size: 1.8rem;
    color: var(--h2) !important;
    font-weight: 700;
    text-align: center;
    margin-bottom: 56px;
    align-self: baseline;
    font-family: "Golos-bold",sans-serif  !important;
}

h2 {
    font-size: 1.8rem;
    color: var(--h2) !important;
    font-weight: 700;
    text-align: center;
    margin: 0 auto;
    margin-top: 50px;
    margin-bottom: 30px;
    align-self: baseline;
    font-family: "Golos-semi-bold", sans-serif !important;
}

h3 {
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 40px;
    align-self: baseline;
    font-family: "Golos-semi-bold", sans-serif !important;
    color: var(--h2);
}


/*----Header---*/

/*.Header {*/
/*    background: radial-gradient(#abbacd, transparent, #898282);*/
/*}*/

.Header {
    width: 100%;
    background-color: white;
    box-shadow: rgb(0 0 0 / 13%) 0 4px 16px 11px;
    text-align: right;
    line-height: 99px;
    transition: 0.4s ease;
    transition-property: background-color, box-shadow;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 100;
    height: 111px;

}


.headerContent {

}


.subHeaderContent {
    display: flex;
    justify-content: space-evenly;
}

.contact {
    display: flex;
    align-self: center;
    gap: 10px;
}

.contact i {
    font-size: 20px;
    color: #0370ac;
}

.phoneContent a , .mailContent a{
    text-decoration: none;
    color: #7c7d7d;
    font-size: 20px;
}

.navMenu {
    display: grid;
    height: 100%;
}

.logoContent {
    padding: 10px;
    margin-top: 17px;
}

.logoContent img {
    width: 250px;
}

.navForMenu {
    list-style-type: none;
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
    align-self: center;
}

.navForMenu li a {
    text-decoration: none;
    font-size: 20px;
    color: #434040;
}

.inContent {
    display: flex;
    gap: 20px;
    align-items: center;
}

.inBurgerInfo {
    border: 1px solid #1786ec;
    padding: 5px;
    border-radius: 10px;
    box-shadow: #464e56 0 0 6px 0px;
    background: linear-gradient(307deg, #9bb5c5, transparent);
    margin-top: 17px;
    cursor: pointer;
    transition: .4s all;
}

.inBurgerInfo i {
    color: #5699d7;
    font-size: 32px;
}


.inBurgerInfo:hover {
    transform: scale(1.1);
}


.lkContent, .botContent {
    display: flex;
    gap: 10px;
    background: #1786ec;
    font-size: 20px;
    padding: 7px;
    border-radius: 5px;
    align-items: center;
    box-shadow: #333030 0 0 4px 0px;
    cursor: pointer;
    height: 30px;
    color: white;
    justify-content: center;
}

.itemLk i {
    color: white;
}

.itemBot i {
    font-size: 25px;
    color: white;
}

.BotLk {
    text-decoration: none;
    color: black;
}

.lkContent:hover, .botContent:hover {

    background: #696969;
    color: white;
}


/*****page-content*****/

.page-content-ops {
    margin: 0 0 0 -36px;
}


.home-right-content {

}


/*----DropInfoHeader---*/

.infoHeader {
    position: fixed;
    top: 112px;
    right: 0;
    z-index: -1;
    transition: .5s all;
    background: white;
    padding: 20px;
    border-radius: 0 0 10px 10px;
    box-shadow: #2b4066 0 0 12px 2px;
}

.infoHeader.showInfo {
    opacity: 1;
    z-index: 100;
}
.infoHeader.hideInfo {
    opacity: 0;
    z-index: -1;
}

.infoWindow {
    transition: transform .5s ease-in-out;

}

.itemsInfoHeader {
    display: grid;
    gap: 20px;
}

.listInfoHeaderName {
    font-size: 20px;
}

.listInfoHeaderContent {

}

.listInfoHeaderContent i {
    color: #1786ec;
}

.listInfoHeaderContent a {
    text-decoration: none;
    color: #1786ec;
    font-size: 19px;
}

.itemInfoHeader:last-child {
    display: grid;
    gap: 10px;
}






/*----ModalOrder---*/

.orderModal {}

.orderModal.showOrder .modalOverlay,
.orderModal.showOrder .modalWindow {
    opacity: 1;
    z-index: 1;

}

.orderModal.hideOrder .modalOverlay,
.orderModal.hideOrder .modalWindow {
    opacity: 1;
    z-index: 1;
}

.orderModal.showOrder .modalOverlay {
    transition: visibility 1s, opacity 1s;
}

.orderModal.hideOrder .modalOverlay {
    opacity: 0;
    visibility: hidden;
    transition: visibility 1s, opacity 1s, 1s;
}


.modalOverlay {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #161515db;
    transition: all .6s;
}

.modalWindow {
    margin: 0 auto;
    width: 600px;
    background: white;
    margin-top: 180px;
    transition: transform .5s ease-in-out;
    transform: scale(0.1);
    padding: 10px;
    border-radius: 6px;
}

.modalHeader {
    display: flex;
    justify-content: space-between;
}

.modalHeader span:nth-child(1) {
    font-size: 20px;
    color: #2b78a3;
}


.modalHeader span:nth-child(2) {
    align-self: center;
    color: #2b78a3;
    cursor: pointer;
    font-size: 18px;
}

.modalBody {
    padding: 6px;
    text-align: center;
}

.nameAuto {
    text-align: center;
    font-size: 18px;
}

.itemsModalField {
    display: grid;
    gap: 10px;
    margin-top: 15px;
    margin-bottom: 10px;
}

#marka, #model, #pokolenie, #name,#tel {
    outline: none;
    font-size: 18px;
    line-height: 1.5em;
    width: 96%;
    border: none;
    background: aliceblue;
}

#service {
    width: 96%;
    font-size: 19px;
    border: none;
    background: aliceblue;
    color: #757575;
    margin-bottom: 20px;
}

.modalFooter {
    text-align: center;
}

.modalBut {
    background: #007cf8;
    font-size: 18px;
    border-color: cadetblue;
    cursor: pointer;
    color: white;
}



.orderModal.showOrder .modalWindow {
    transform: scale(1);
}

.modalOverlay, .modalWindow {
    opacity: 0;
    z-index: -1;

}


/*----Footer---*/


.footerContent {
    background: #323232;
    border-radius: 0 100px 0 0;
}


.subFooterContent {

}

.logoFooterContent {
    padding-top: 20px;
    padding-left: 20px;
    display: flex;
    gap: 20px;
}

.contactFooter {
    align-self: center;
}

.logoFooterContent img {
    width: 130px;
}

.forColumnFooter {
    display: flex;
    justify-content: space-between;
    padding: 31px;
}

.contactFooter a, .contactFooter1 a {
    text-decoration: none;
    font-size: 40px;
    color: white;
}

.columnFooter2 {
    display: flex;
}

.footerList {
    list-style-type: none;
    font-size: 20px;
    line-height: 2.5em;
    font-weight: bolder;
    color: white;
    padding: 0 40px 0 0;
}

.titleList {
    color: #b3afab;
    padding-bottom: 21px;
    font-size: 19px;
    cursor: pointer;
}


.forFooterSoc {
    display: flex;
}

.socFooter {
    font-size: 38px;
    margin-left: 20px;
    color: white;
    cursor: pointer;
}

.forHelp {
    display: flex;
    margin-left: 20px;
    background: white;
    min-width: 188px;
    justify-content: space-evenly;
    border-radius: 50px;
    cursor: pointer;
    height: 40px;
    align-self: center;
}

.forHelp img {
    width: 30px;
    height: 30px;
    align-self: center;
}

.textHelp {
    align-self: center;
    font-size: 20px;
}

.feedback {
    display: grid;
    margin-left: 20px;
    background: white;
    min-width: 188px;
    border-radius: 50px;
    cursor: pointer;
    height: 40px;
    align-self: center;
    text-align: center;
    font-size: 20px;
    place-content: center;
}

/*----Home-Content-----*/

.home-content {
    display: flex;
    width: 1880px;
    margin: 0 auto;

}

.home-right-content {
   width: 81%;
}

.firstHome {
    position: relative;
    height: 730px;
    margin-top: 106px;

}

.oneFirstHome {
    background-image: url(/assets/image/home-page/front.png);
    display: block;
    position: absolute;
    margin: auto;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    background-position: center;
}


.oneFirstHome.locationFront {
    background-image: url(/assets/image/home-page/front-location-2.png);
    display: block;
    position: absolute;
    margin: auto;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    background-position: center;
}

.forImgLocation {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    width: 100%;
    height: 100%;
}

.forImgLocation img {
    width: 400px;
    display: grid;
    margin: 0 auto;
    align-self: center;
    transform: translateY(-47px);
}



.titleFirstHome {
    margin: 0 auto;
    transform: translateY(-310px);
}


.titleFirstHome h1 {
    color: white !important;
    font-size: 35px;


}


.textFirstHome {
    margin: 0 auto;
    width: 1200px;
    color: white;
    font-size: 25px;
    text-align: center;
    transform: translateY(-315px);

}


.forButtonsFront {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
}

.buttonBlue {
    background: #1a8ad5;
    padding: 10px;
    border-radius: 10px;
    width: 250px;
    text-align: center;
    box-shadow: #131414 0 0 6px 3px;
    cursor: pointer;
}

.buttonBlue a {
    text-decoration: none;
    color: white;
    font-size: 21px;
    font-weight: 700;
}

.buttonBlueDark {
    background: #1786ec;
    padding: 10px;
    border-radius: 10px;
    width: 250px;
    text-align: center;
    box-shadow: #131414 0 0 6px 3px;
    cursor: pointer;
}

.buttonBlueDark a {
    text-decoration: none;
    color: white;
    font-size: 21px;
    font-weight: 700;
}


.buttonBlue:hover, .buttonBlueDark:hover {
    box-shadow: inset #131414 0 0 6px 3px;
}


.rightFirstHome {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #0f10107d;
}

.subLeftFirstHome {

    display: grid;
    place-content: center;
    transform: translateY(309px);
}

.leftFirstHome img {


}

.appHome {
    margin: 0 0 0 20px;

}

.itemsAppHome {
    display: flex;
    justify-content: space-between;
    background-color: #062746;
    margin: 0 0 0 20px;
    padding: 20px;
    border-radius: 5px;
}

.itemAppHome img {
    width: 450px;
}

.forMax img {
    width: 140px;
}


.imageItemProblem:first-child img{
    width: 50px;

}

.itemProblem a {
    text-decoration: none;
    color: black;
}

.imageItemProblem:last-child img{
    width: 80px;

}

.adv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.adv-item {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.adv-item span {
    font-size: 24px;
}

.adv-item div span {
    color: var(--text-light);
    font-size: 1rem;
    line-height: 1.2em;
}


.problem {
    margin: 20px 20px 0 40px;
    background-color: #f2f8ff;
    border-radius: 10px;
}

.subProblem {
    padding: 20px;
}

.titleProblem {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: -50px;
}

.titleItemProblem {
    font-weight: 500;
    color: #2b4066;
    font-size: 22px
}

.leftTitleProblem {
    padding-bottom: 43px;
}

.leftTitleProblem h2 {
    font-weight: 600;
    color: #062746;
    margin-bottom: 10px;
    margin-left: -10px;
}

.rightTitleProblem {
    align-self: center;
    text-align: right;
    color: #1c4899;
    font-size: 14px;
}

.rightTitleProblem p {
    width: 400px;
}


.itemsProblem {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
}

.itemProblem {
    background: #ffffff;
    padding: 13px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out;
    cursor: pointer;
    line-height: 1em;
    display: flex;
    flex-direction: column-reverse;

}

.imageItemsProblem {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-top: 10px;
}

.imageItemProblem:first-child {
    align-self: center;
}

.itemProblem:hover {
    transform: translateY(-10px);
}

.lineButtons {
    background-color: #fff;
    color: #3b83d1;
    border: unset;
    padding: 10px 15px;
    margin-top: 15px;
    width: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-size: 16px;
    font-weight: bold;
}

.actionBut {
    margin-top: 20px;
    display: flex;
    justify-content: flex-start;
    padding-left: 10%;
}

.lineMinBut {
    position: relative;
    font-weight: normal;
    padding: 10px 20px;
    color: #007bff;
    background-color: white;
    border: 1px solid #007bff;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 10px;
    overflow: hidden;
    z-index: 1;

}

.lineMinBut::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 5px;
    height: 100%;
    width: 100%;
    z-index: -1;
    background: #007aea;
    transition: all .5s;
    transform: translateX(-100%);
}

.lineMinBut:hover:before {
    transform: translateX(0);
}

.myService {
    margin-top: -30px
}

.lineMinBut:hover {
    color: white;
}


.dispatcher-link {
    align-self: center;
    text-decoration: none;
    color: #007BFF;
    margin-left: 30px;
    font-weight: 500;
}


.headerLine {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    margin: 12px 0 0 50px;
    width: 93.5%;
}

.headerLine h2 {
    margin-left: -7px !important;
    margin-top: 0;
}


.nameServiceWho {
    margin-bottom: -70px;
    margin-top: -25px;
}


.serviceWho {
    margin: 0 20px 0 42px;
    padding: 18px;
    border-radius: 10px;
    position: relative;
}

.subServiceWho {
    margin-top: 50px;
    width: 100%;
}

.forButtonsWho, .forButtonsCall {
    position: absolute;
    width: 98%;
    top: 370px;
}

.subForButtonsWho, .subForButtonsCall {
    display: flex;
    justify-content: space-between;
}

.pemServiceWho {
    margin: 0 auto;
    overflow: hidden;
}

.buttonWho, .buttonCall {
    font-size: 30px;
    border: 2px solid #001f5b;
    border-radius: 50%;
    width: 30px;
    text-align: center;
    cursor: pointer;
    background: azure;
}

.buttonWho i, .buttonCall i {
    color: #001f5b;
}

.imgService {
    border-radius: 10px;
}

.imgService img{
    width: 100%;
}


.itemsService {
    display: flex;

    gap: 26px;
}

.itemService {
    padding: 10px;
    border: 8px solid rgb(43 64 102);
    border-radius: 10px;
    margin: 0 auto;
    min-width: 280px;
    background: rgb(43 64 102);
}

.stepService {
    display: flex;
    align-items: baseline;
    background: #2b4066;
    margin-top: 0;
    padding: 7px;
    border-radius: 10px 10px 0 0;
    flex-direction: column;
}


.stepService h3 {
    color: white;
    font-size: 1.3rem;
    margin-top: 0;
}


.forMap {

    margin: 28px 46px 40px 37px;
}

.obMap {

}

.subForMap {
    display: flex;
    gap: 20px;
    align-items: center;
}


#map {
    width: 700px;
    height: 300px;
}

.titleForMap {
    margin-top: -40px;
}
.textForMap p {
    color: var(--text-light);
}


.stepNumber {
    font-size: 48px;
    font-weight: bold;
    color: #057deb;
    margin-right: 10px;
}

.stepService h2 {
    font-weight: 600;
    font-size: 20px;
    margin: 0;
}



.itemService p {
    font-size: 15px;
    padding: 8px;
    font-weight: normal;
    max-width: 276px;
    color: white;
    margin-top: -35px;
    border-radius: 0 0 10px 10px;
    background: #2b4066;
}


.trust {
    margin: 20px 20px 0 40px;


}

.subTrust {
    padding: 10px;
    background-color: #062746;
    border-radius: 5px;
    border-bottom: 8px solid #062745;
}

.titleTrust {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.titleTrust h2 {
    margin: 0;
    font-weight: 600;
    color: white;
}

.butABlue {
    font-weight: normal;
    display: inline-block;
    padding: 10px 20px;
    background-color: #00aaff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}


.trustItems {
    background: white;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding: 16px;
    border-radius: 5px;
}

.trustItem {
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.trustItem span {
    color: #017ae9;
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 5px;
}


.trustItem p {
    font-size: 16px;
    text-align: left;
    color: #7e8ea1;
    font-weight: normal;
    margin-top: 0;
    margin-bottom: 0;
}

.advantages-section {
    background: #f5fafe;
    padding: 10px;
    width: 94%;
    margin: 0 auto;
    border-radius: 10px;
}


.price {
    margin: 20px 20px 0 40px;
    border-radius: 5px;
    padding: 0;
    background: linear-gradient(to right, #f5fafe, #f6fafe);
    border-radius: 10px;
}

.subPrice {
    padding: 10px;
}


.titlePrice h2 {
    margin-left: 0;
}


.titlePrice, .titleBrand {
    display: flex;
    justify-content: space-between;
    padding-bottom: 25px;
    margin-top: -40px;
}

.titleForPrice, .titleForBrand {
    margin-bottom: 20px;
    color: #062746;
    font-weight: 600;
    font-size: 25px;
}

.changeForPrice, .changeForBrand {
    display: flex;
    gap: 20px;
    font-weight: 600;
    color: #062746;
    padding: 7px 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin: 0 5px;
    overflow: hidden;
    /*background: #aab6c2;*/
    min-height: 28px;
    align-self: baseline;
}

.lineForPrice, .lineForPrice {
    background: linear-gradient(to right, #f5fafe, #ffffff, #f5fafe);
    display: flex;
    border-radius: 5px;
    justify-content: space-between;
    padding: 10px;
    margin-bottom: 10px;
}

.itemLineForPrice:last-child, .itemLineForPrice:last-child {
    color: #247ed3;
    font-weight: 600;
}

.itemLineForPrice {
    font-weight: 300;
}

.itemsTabLink {
    display: none;
    transition: all .5s;
    opacity: 0;
}

.itemForPrice, .itemForBrand {
    align-self: center;
    transition: transform .5s ease-in-out ;
}

.itemForPrice:hover, .itemForBrand:hover {
    background: #062746;
    border-radius: 5px;
    color: white;
}

.activeChange {
    background: #062746 !important;
    border-radius: 5px;
    padding: 4px 7px 4px 7px;
    color: white;
}




.brand {
    margin: 20px 20px 0 40px;
}

.subBrand {
    padding: 10px;
}


.subContainerBrand {
    display: none;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

}

.itemConBrand {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    width: 150px;
    height: 100px;
    margin: 10px 0;
}

div:has(img:hover) .itemConBrand img:not(:hover) {
    filter:grayscale(90%);
    opacity: .5;
}


.itemConBrand img {
    max-width: 80%;
    max-height: 60%;
    height: auto;
    object-fit: contain;
    margin-bottom: 10px;
}

.okrug {
    margin-top: 20px ;
}

.subOkrug {
    padding: 10px;
}

.itemsOkrug {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));

    margin-top: 30px;
    margin-left: 25px;
}

.itemOkrug {
    border: 6px solid #f5fafe;
    margin: 10px;
    border-radius: 5px;
    padding: 10px;
    position: relative;
    box-sizing: border-box;
    width: 100%;
}

.itemOkrug a {
    text-decoration: unset;
}

.itemOkrug:last-child {
    grid-column: span 3;

}

.tabForOkrug {
    display: none;
    position: absolute;
    top: 65px;
    left: 10px;
    background: white;
    z-index: 1;
    font-size: 17px;
    padding: 37px;
    border: 2px solid rgb(0, 0, 0);
    border-radius: 5px;
    width: 80%;
}

.lineInForRayon {
    transition: transform .5s ease-in;
    position: relative;
    cursor: pointer;
}

.lineInForRayon a {
    text-decoration: none;
    color: #007cf8;
    transition: transform .5s ease-in;
}

.lineInForRayon i {
    position: absolute;
    right: 0px;
    bottom: 0px;
    align-self: anchor-center;
}

.lineInForRayon:hover :not(input){
    transform: scale(1.1);
    font-weight: bold;
    color: black;
    background: aliceblue;
    border: 1px solid #000;
    border-radius: 10px;
    padding: 11px;
    text-align: center;
}

.inRayon {
    outline: none;
    font-size: 18px;
    line-height: 1.5em;
    border-radius: 10px;
    border: none;
    width: 100%;
}

.subItemOkrug {
    background: #f5fafe;
    padding: 10px;
    border-radius: 10px 10px 10px 10px;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}

.subItemOkrug a {
    display: flex;
    justify-content: space-between;
    width: 100%;
    text-decoration: none;
    align-items: baseline;
}

.titleOkrug {
    font-size: 18px;
    margin: 3px 0 0 0;
    font-weight: 600;
    color: #2b3f65;
}

.rightList {
    display: flex;
    gap: 15px;
}


.arrowOkrug {
    cursor: pointer;
    font-size: 17px;
    color: #007bff;
}

.forImgList img {
    width: 39px;
    height: 32px;
}



.right-content {
    margin: 0 0 0 30px;
}

.upContentLocation {
    display: flex;
    justify-content: space-between;
}


/*-----Sidebar-CheckBox-----*/


.titleItemSidebarCheck {
    font-size: 19px;
    margin: 0;
    color: #264064;
}


.sidebarCheck {
    margin-left: 21px;
    margin-top: 21px;
    border: none;
    min-width: 330px;
    border-radius: 0 25px 0 0;
    align-self: flex-start;
    position: sticky;
    top: 0;

}

.subItemsSidebarCheck {
    display: grid;
    gap: 17px;
    margin-top: -11px;
}

.subSidebarCheck {
    padding: 0;
}

.nameForBlockSidebarCheck {
    display: flex;
    justify-content: left;
    font-size: 14px;
    font-weight: bold;
    background:#73899d;
    padding: 11px;
    align-items: center;
    border-radius: 0 25px 0 0;
    gap: 10px;
    padding-left: 20px;
    height: 28px;
}

.nameForBlockSidebarCheckTitle {
    display: flex;
    justify-content: left;
    font-size: 14px;
    font-weight: bold;
    background: #f5fafe;
    padding: 11px;
    align-items: center;
    border-radius: 10px;
    gap: 10px;
    padding-left: 20px;
    height: 30px;
    border: 1px solid #264064;
    margin-top: 10px;
    margin-bottom: 50px;
}

.nameForListSidebarCheck {
    cursor: pointer;
    background: #2b4066;
    font-size: 15px;
    color: white;
    padding: 7px;
    border-radius: 10px;
    width: 100%;
    text-align: center;
    transition: all .6s;
}

.nameForListSidebarCheck:hover {
    background: #89919f;
    transform: scale(1.1);

}


.iconForListSidebarCheck {
    background: #eff4f7;
    font-size: 24px;
}

.iconForListSidebarCheck img {
    width: 45px;
    background: #f5fafe;
}



.itemListSidebarCheck {
    display: flex;
    justify-content: unset;
    font-size: 15px;
    padding: 1px;
    align-items: center;
    gap: 5px;
    margin-left: 27px;
    width: 80%;
    margin-top: -63px;
}


.checkBoxForListSidebarCheck {

}

.checkBoxForListSidebarCheck i {
    margin: 0;
    font-size: 22px;
    color: #007aea;
}

.itemListSidebarCheck input {
  visibility: hidden;
}

.call-section {
    position: relative;
    margin-top: 30px;
}


.subCall-section {
    width: 100%;
}

.pemCall-section {
    margin: 0 auto;
    overflow: hidden;
}

.trackCall-section {
    display: flex;
    gap: 20px;
}



.container-card {
    box-shadow: #f5fafe 0 0 5px 7px;
    border-radius: 10px;
    padding: 10px;
    min-width: 330px;
    margin: 0 auto;
}

.forImgCard {
    display: flex;
    justify-content: center;
    padding: 10px;
    gap: 20px;
}

.container-card div:nth-child(2) {
    gap: 17px !important;
    justify-content: center;
}

.master-card div:nth-child(5) {
    margin-top: -15px;
}

.forImgCard img {
    width: 140px;
    border: 2px solid #77a2ec;
    border-radius: 10px;
    padding: 0;
    box-shadow: #726e69 0 0 5px 4px;
}

.card-telegram {
    background: #1a8ad5;
    color: white;
    padding: 12px 20px;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.card-telegram i {
    font-size: 28px;
}



/*Box-Content*/


.box-content {}


.content-page {
    min-height: 600px;
}


.contentInfoFooter {
    border-top: 1px solid #fff;
    width: 98%;
    margin: 0 auto;
    margin-top: 20px;
    color: #b5b5b5;
}


.copyrightFooter {
    margin: 0 auto;
    color: white;
    margin-left: 20px;
}

/*---Content-Page---*/

.block2 {
    margin: 0 0 0 41px;
    width: 96%;
}

.special {
    margin: 5px 7px 6px 48px;
}

.listRayon {
    margin: 5px 7px 6px 48px;
}

.content-page {
    margin: 0 auto;
    display: flex;
    gap: 40px;
    width: 98%;
}

.content-page.page-rayon-okrug {
    gap: 0;
}

.content-page p  {
    font-size: 17px;
    line-height: 1.4em;
}


.forList {
    margin: 20px 20px 0 20px;
    
}


/* Bottom App Bar — ONLY ON MOBILE */
.app-bar-bottom {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--white);
    border-top: 1px solid #e2e8f0;
    padding: 10px 0;
    justify-content: space-around;
    align-items: center;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
    border-radius: 10px 10px 0 0;
}

.app-bar-bottom a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--lynch-300);
    font-size: 0.75rem;
    padding: 6px 4px;
    transition: color 0.2s;
}

.app-bar-bottom a.active,
.app-bar-bottom a:hover {
    color: var(--navy);
}

.app-bar-bottom i {
    font-size: 1.3rem;
    margin-bottom: 4px;
    color: #2b4066;
}



.urFace {
    margin: 20px 0 0 0;
}

.subUrFace {
    display: flex;
    background: #f5fafe;
    padding: 31px;
    width: 92%;
    margin: 0 auto;
    border-radius: 10px;
    margin-left: 35px;
    gap: 60px;
}

.forImgUrFace {
    align-self: center;
}

.forUrFaceName {
    transform: translateY(-23px);
    margin-top: -20px;
}

.forApiH2 {
    margin-left: 10px;
    margin-top: -30px;
}


.forImgUrFace img {
    width: 600px;
}

.advantages-section-ur {
    display: grid;
}

.container-ur {
    align-self: center;
    margin-top: 60px;
}

.api {
    margin: 20px 0 0 0;
}

.subApi {
    width: 93.5%;
    margin: 0 auto;
    background: #f5fafe;
    display: flex;
    gap: 40px;
    padding: 20px;
    border-radius: 10px;
    margin-left: 47px;
}

.forTextApi {
    align-self: center;
}


.nameApi {
    /*text-align: left;*/
    /*transform: translateY(-20px);*/
}

.forTextContentApi {
    display: flex;
    gap: 10px;

}

.imgApiContent {
    align-self: center;
    font-size: 33px;
}

.textForApi {
    display: grid;
    gap: 10px;
    padding: 20px;
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow);
    font-size: 20px;
}

.forImgApi img {
    width: 250px;
}

.forTitleApi {
    display: flex;
    gap: 10px;
}

.forTitleApi div {
    align-self: baseline;
}



@media screen and (max-width: 1700px){


    .home-content {
      width: 100%;
    }

    .home-right-content {
        width: 80%;

    }

    .appHome {
        width: 94%;
    }

    .itemAppHome img {
        max-width: 100%;
    }

    .footerList {
        font-size: 15px;
    }

    .contactFooter a, .contactFooter1 a {
        font-size: 25px;
    }

}

@media screen and (max-width: 1450px){

    .home-right-content {
        width: 80%;
    }

    .textFirstHome {
        width: 500px;
    }

    .itemAppHome img {
        max-width: 100%;
    }


    .navForMenu li a {
        font-size: 17px;
    }


    .lkContent, .botContent {
        font-size: 17px;
    }

    .contact {
        flex-direction: column;
        line-height: 1em;
    }

    .itemService {

    }

    .forColumnFooter {
        flex-direction: column;
        gap: 20px;
    }

    .adv-grid-ur {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    }

    .subUrFace {
        width: 100%;
    }

}

@media screen and (max-width: 1250px){



    .titleFirstHome h1 {
        text-align: center;
        font-size: 25px;
        margin-top: 0;
    }

    .textFirstHome {
        width: 86%;
    }

    .titlePrice {
        flex-direction: column;
        text-align: center;
    }
    .changeForPrice, .changeForBrand {
        align-self: center;
    }

    .buttonBlue {
        text-align: center;
    }

    .itemForPrice {
        font-size: 14px;
    }


}

@media screen and (max-width: 1100px){
    .lkContent, .botContent {
        font-size: 15px;

    }

    .inContent {
        flex-direction: column;
        margin-top: 16px;
    }
}

@media (min-width: 1000px) {




    .app-bar-bottom {
        display: none;
    }


}

@media screen and (max-width: 1000px){

    html, body {
        overflow-x: hidden;
    }

    .infoHeader {
        top: 90px;
        border-radius: 10px 10px 10px 10px;

    }

    .itemInfoHeader:last-child {
        display: flex;
        gap: 10px;
        justify-content: center;

    }

    .home-content {

    }

    .navContent {
        display: none;
    }

   .sidebarCheck {
       display: none;
   }


    .home-right-content {
        width: 100%;
        margin-left: unset;
    }

    .leftFirstHome {
        background: aliceblue;
    }

    .rightFirstHome img {
        width: 250px;
    }

    .textFirstHome {
        width: 100%;
        margin: 0 auto;
        padding: 15px;
    }


    .forMap {
        margin: 0;
    }

    .subForMap {
        flex-direction: column;

    }

    #map {
       width: 350px;
    }

    .textForMap {
        margin: 0 auto;
        width: 95%;
    }

    .itemsAppHome {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .actionBut {
        padding-left: 5%;
        flex-direction: column-reverse;
        gap: 10px;
    }

    .dispatcher-link {
        text-align: center;
    }


    .columnFooter2 {
        display: none;
    }

    .footerList {
        font-size: 13px;
    }

    .subUrFace {
        width: 74%;
        display: flex;
        flex-direction: column;
        margin: 0 auto;
    }

    .forUrFaceName h2 {

    }
    .forImgUrFace img {
        width: 100%;
    }

    .advantages-section-ur {
        display: flex !important;
        flex-direction: column !important;
        margin: 0 auto;
        margin-top: -25px;
    }
    .adv-grid-ur {
        margin-bottom: 32px;
        display: flex !important;
        flex-direction: column !important;
        gap: 20px;
        width: 100%;
    }
    .subApi {
        display: flex;
        flex-direction: column;
        margin-left: unset;
        padding: 10px;
    }
    .nameApi {

    }

    .forTextApiContent {
        font-size: 14px;
    }

    .forImgApi {
        margin: 0 auto;

    }

    .textForApi {
        margin-left: unset;
        width: 82%;
    }

    .forImgApi img {
        width: 200px;
    }

    .nameSubForApi {
        font-size: 17px;
    }

    .forTitleApi div {
        font-size: 17px;
    }

    .forUrFaceName {
        transform: translateY(-7px);
    }


}




@media screen and (max-width: 768px){

    .box-content {

    }

    .Header {
        height: 90px;
        border-radius: 0 0 10px 10px;
    }

    .headerContent {
        margin-top: -11px;
    }

    .contact {
        display: none;
    }

    .subHeaderContent {
        justify-content: space-around;
    }

    .itemsProblem {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }

    .titleProblem {
        align-items: unset;
        flex-direction: column;
        text-align: center;
    }

    .headerLine {
        flex-direction: column;
        text-align: center;
        margin: unset;
        gap: 20px;
    }

    .headerLine h1 {
        font-size: 20px;
    }

    .itemsService {

    }

    .firstHome {
        margin-top: 77px;
        height: 580px;
    }


    .changeForPrice, .changeForBrand {
        flex-direction: column;
        gap: 10px;
        font-size: 14px;
        align-self: center;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        background: unset;
        width: 100%;
        text-align: center;
    }

    .itemForPrice, .itemForBrand {

        border-radius: 5px;
    }

    .subContainerBrand {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .itemConBrand {
        width: 100px;
    }

    .itemConBrand img  {
       max-width: 60%;
    }

    .app-bar-top {
        display: flex;
    }

    .main-layout {
        flex-direction: column;
        padding-top: 0;
    }

}

@media screen and (max-width: 665px){
    .modalWindow {
        width: 94%;
    }
}

@media screen and (max-width: 568px){

    .phoneContent a, .mailContent a {
        font-size: 15px;
        color: black;
    }

    .headerContent {
        padding-bottom: 7px;;
    }

    .itemLk:last-child, .itemBot:last-child {
        display: none;
    }

    .lkContent, .botContent {
        width: 60px;
        display: block;
        text-align: center;
        height: 20px;
    }

    .lkContent i, .botContent i {
        text-align: center;
        font-size: 20px;
    }

    .forImgLocation img {
        width: 330px;
    }

    .left-content {
        display: none;
    }

    .right-content {
        margin: 0;
        width: 100%;
    }

    .content-page p {
        font-size: 16px;
    }

    .upContentLocation {
        flex-direction: column-reverse;
    }

    .location:nth-child(2) {
        width: 100%;
        text-align: center;
    }

    .mailContent {
        display: none;
    }


    .logoContent {
        align-self: center;
    }

    .logoContent img {
        width: 250px;
    }

    .imgService img {
        max-width: 100%;
    }

    .content-page.page-rayon-okrug {
        gap: 40px;
    }

    .block2 {
        margin: 0 0 0 8px;
    }

    .forBlock2 {
        font-size: 15px;
    }

    .serviceWho {
        margin: 0;
    }

    .call-section {
        margin: 20px 20px 0 20px;
    }

    .subLeftFirstHome {
        transform: translateY(210px);
    }

    .forUrFaceName {
        margin-top: -50px;
    }


    .textFirstHome {
        font-size: 20px;
        line-height: 1em;
        text-align: center;
    }

    .forButtonsFront {
        flex-direction: column;
        margin-left: 10px;
    }

    .buttonBlue {
        width: 92%;
        padding: 10px;
        line-height: 2em;
    }

    .buttonBlue a {
        font-size: 20px;
    }

    .buttonBlueDark {
        width: 92%;
        padding: 10px;
        line-height: 2em;
    }

    .trust {
        margin: 20px 20px 0 20px;
    }

    .brand {
        margin: 20px 20px 0 20px;
    }

    .titleFirstHome {
        transform: translateY(-190px);
        background: #0000007a;
        height: 60%;
    }

    .textFirstHome {
        width: 94%;
        background: #0000007a;
        transform: translateY(10px);
    }


    .forApiH2 {

    }

    .headerLine h1 {
        font-size: 22px;
    }


    .appHome {
        margin: 20px 0px 0 0;
    }



    .rightTitleProblem {
        text-align: center;
        margin-top: -40px;
    }

    .rightTitleProblem p {
        width: 98%;
    }

    .problem {
        margin: 20px 0px 0 0px;
    }


    .titleItemProblem {
        font-size: 16px;
    }

    .dispatcher-link {
        margin-left: 0;
    }

    .titleTrust {
        flex-direction: column;
        gap: 20px;
    }

    .titleTrust h2 {
        text-align: center;
    }

    .trustItems {
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
    }


    .trustItem {
        margin: 0 auto;
    }

    .trustItem span {
        margin: 0 auto;
    }


    .price {
        margin: 20px 0px 0 0px;
    }

    .titlePrice, .titleBrand {
        flex-direction: column;
    }

    .titleForPrice, .titleForBrand {
        text-align: center;
    }

    .itemLineForPrice {
        font-size: 16px;
    }


    .subContainerBrand {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    }

    .itemConBrand {
        width: 75px;
        height: 60px;
    }

    .okrug {
        margin: unset;
    }

    .subOkrug {
        padding: unset;
    }


    .itemsOkrug {
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
        margin: 0 auto;
    }

    .itemOkrug {
        width: 95%;
    }

    .itemOkrug:last-child {
        grid-column: unset;

    }

    .lineButtons {
        width: 98%;
        margin: 0 auto;
        margin-top: 15px;
    }

    .forFooterSoc {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }


    .contentInfoFooter {
        width: 94%;
    }

    .copyrightFooter {
        margin-left: unset;
        text-align: center;
    }



    .forButtonsWho {
        display: none;
    }

    .forButtonsCall {
        display: none;
    }

    .itemService {
        min-width: 290px;
    }

    .titlePrice h2 {
        margin-left: unset;
    }

}

@media screen and (max-width: 410px) {

    .subHeaderContent {
        margin-right: 5px;
    }

    .phoneContent {
        margin-right: 8px;
    }

    .adv-grid {
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
    }



    .subContainerBrand {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }

    .itemConBrand {
        width: 55px;
        height: 40px;
    }

    .itemConBrand img {
        max-width: 98%;
    }

    .tabForOkrug {
        width: 67%;
    }
}