@media screen and (max-width: 1200px) {
  .content-mobile {
    display: none;
  }
  #preorder .order-modal h2 {
    font-size: 42px;
  }
  .hmenu {
    margin-top: 70px;
  }
  .hmenu__h-contacts {
    padding-right: 20px;
  }
  .hmenu__h-menu {
    padding-left: 35px;
  }
  .hmenu-ul__link {
    font-size: 38px;
  }
}
@media screen and (max-width: 992px) {
  .h-mid__h1-title {
    font-size: 38px;
  }
  .h-main {
    background-position: center;
  }
  #security .content-mobile {
    display: none;
  }
  #security .content {
    display: block;
  }
  .header-menu-mobile {
    display: none;
    opacity: 0 !important;
  }
  .hmenu-ul--active {
    margin-left: -35px;
  }
  .content-mobile {
    display: none;
  }
  .noscroll {
    padding: 0;
  }
  #preorder .order-modal {
    grid-template-columns: 1fr;
    padding: 60px 80px;
    text-align: center;
  }
  #preorder .order-modal p {
    margin: auto;
  }
  #security .categories {
    overflow: hidden;
  }
  #interior .head .categories {
    overflow: hidden;
  }
}
@media screen and (max-width: 768px) {
  .header__top {
    padding: 16px 14px !important;
    width: 100vw;
    position: relative;
  }
  .f-mid-title {
    text-align: left;
  }
  .h-main{
      height: 156vw !important;
      
      background-image: url("../img/header-screen-mob.webp");
  }
  .header__main {
    position: unset;
    padding: 0 !important;
  }
  .header__menu {
    width: 100vw;
    height: unset;
    height: 100vh;
    overflow-y: auto;
  }
  .noscroll {
    padding: 0;
  }
  .hmenu.container {
    display: none;
  }
  .header-menu-mobile,
  .contacts-menu-mobile {
    opacity: 1 !important;
    display: flex;
    flex-direction: column;
    align-items: start;
    margin-top: 60px;
  }
  .header-menu-mobile h2,
  .contacts-menu-mobile h2 {
    color: var(--Gray, #3c3c3c);
    font-family: "BlissPro", sans-serif;
    font-size: 40px;
    font-style: normal;
    font-weight: 900;
    line-height: 98.3%;
    text-transform: uppercase;
    margin-bottom: 18px;
  }
  .header-menu-mobile .hmenu-ul,
  .contacts-menu-mobile .hmenu-ul {
    width: 100%;
    display: flex;
    gap: 24px;
    flex-direction: column;
    padding-bottom: 20px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(112, 127, 255, 0.21);
  }
  .header-menu-mobile .hmenu-ul .hmenu-ul__item,
  .contacts-menu-mobile .hmenu-ul .hmenu-ul__item {
    color: var(--Gray, #3c3c3c);
    font-family: "BlissPro", sans-serif;
    font-size: 30px;
    font-style: normal;
    font-weight: 900;
    line-height: 38px;
    text-transform: uppercase;
  }
  .header-menu-mobile .menu-contacts h4 a,
  .contacts-menu-mobile .menu-contacts h4 a {
    color: var(--Main-color, #007295);
    font-family: "BlissPro", sans-serif;
    font-size: 23px;
    font-style: normal;
    font-weight: 900;
    line-height: 120.8%;
    text-decoration: none;
  }
  .header-menu-mobile .menu-contacts p,
  .contacts-menu-mobile .menu-contacts p {
    margin-top: 8px;
    color: #9a9c9c;
    font-family: "BlissPro", sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 120.8%; /* 18.12px */
  }
  .header-menu-mobile .mobile-map,
  .contacts-menu-mobile .mobile-map {
    width: 100vw;
    height: 370px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -16px;
    margin-top: 25px;
  }
  .header-menu-mobile .mobile-map iframe,
  .contacts-menu-mobile .mobile-map iframe {
    width: 100%;
    height: 100%;
  }
  .contacts-menu-mobile {
    height: 100%;
    display: none;
  }
  .header-nav {
    padding: 0;
  }
  .h-mid__h1-title {
    color: var(--White, #fff);
    text-align: center;
    font-family: TERRANICA;
    font-size: 35.791px;
    font-style: normal;
    font-weight: 400;
    line-height: 48.695px;
    letter-spacing: 1.432px;
    text-transform: uppercase;
  }
  .h-mid__button {
    margin-top: 0;
  }
  .header #float__video {
    width: 156px;
    height: 87px;
    bottom: 5%;
    right: 10px;
  }
  #security {
    height: unset;
    padding-bottom: 65px;
    padding-top: 45px;
  }
  #security .categories {
    margin-bottom: 21px;
  }
  #security .categories {
    flex-wrap: nowrap;
  }
  #security .bg-images {
    display: none;
  }
  #security .content {
    display: none;
  }
  #security .content-mobile {
    display: block;
  }
  #security .content-mobile h2 {
    max-width: 325px;
    white-space: pre-wrap;
    font-family: "TERRANICA", sans-serif;
    text-transform: uppercase;
    color: #fff;
    font-size: 24px;
    line-height: 48px;
    margin-bottom: 20px;
  }
  #security .content-mobile p {
    color: #9a9c9c;
    font-family: "BlissPro", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    max-width: 450px;
  }
  #security .content-mobile .content-video {
    max-width: 558px;
    border-radius: 12px;
    cursor: pointer;
    margin-bottom: 15px;
  }
  #security .content-mobile .content-video img {
    box-shadow: 0px 4px 6px 0px rgba(255, 255, 255, 0.25);
    width: 100%;
    border-radius: 12px;
  }
  #security .content-mobile button {
    color: var(--Main-color, #007295);
    font-family: "BlissPro", sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 131.8%;
    background: none;
    border: none;
    outline: none;
  }
  #three_model .colors button h5 {
    top: 40px;
  }
  #three_model {
    padding-top: 68px;
  }
  #three_model h2 {
    padding: 0 14px;
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    line-height: 168%;
    letter-spacing: 1.04px;
    text-align: left;
    margin-bottom: 17px;
  }
  #three_model p {
    padding: 0 14px;
    text-align: left;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 120.8%;
    margin-bottom: 5px;
  }
  #three_model .three-model {
    width: 80vw;
    height: 560px;
  }
  #three_model .three-model .threejs-model {
    height: 100%;
  }
  #three_model .three-model .bg-text {
    display: none;
  }
  #three_model .colors {
    gap: 0;
    overflow-x: auto;
  }
  #three_model .colors button .color-box {
    width: 40px;
    height: 40px;
  }
  #three_model .colors button span {
    width: 28px;
    height: 28px;
  }
  #three_model .colors button:hover span {
    width: 42px;
    height: 42px;
  }
  #gallery .gallery-content .carousel-item {
    height: unset;
  }
  #gallery .gallery-nav {
    align-items: center !important;
    margin: auto;
  }
  #gallery .slider-control {
    display: flex;
    align-items: center;
    gap: 23px;
  }
  #gallery .slider-control button {
    border: none;
    outline: none;
    width: 21px;
    height: 23px;
  }
  #gallery .slider-control button svg {
    width: 100%;
    height: 100%;
  }
  #gallery .slider-control .show {
    display: flex;
    align-items: flex-end;
  }
  #gallery .slider-control .show h4 {
    font-size: 44px;
    font-weight: 400;
    line-height: 46px;
    color: #007295;
  }
  #gallery .slider-control .show span {
    font-size: 22px;
    line-height: 32px;
    color: #9a9c9c;
  }
  #gallery .slider-control .show h5 {
    font-size: 22px;
    font-weight: 400;
    line-height: 32px;
    color: #9a9c9c;
  }
  #gallery .mobile-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
  }
  #gallery .mobile-controls .dots {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  #gallery .mobile-controls .dots span {
    display: block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #72adbe;
    cursor: pointer;
  }
  #gallery .mobile-controls .dots span.active {
    background: #007295;
  }
  #interior {
    padding-top: 95px;
  }
  #interior .head {
    padding-bottom: 15px;
  }
  #interior .head h2 {
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    line-height: 168%;
    letter-spacing: 1.04px;
    text-transform: uppercase;
  }
  #interior .head .categories .category-box:focus-within .popover {
    position: fixed;
    z-index: 350;
    height: 450px;
    right: 10px;
    left: 10px;
    top: 25%;
    transform: unset;
  }
  #interior .head .categories .category-box:focus-within .popover::before {
    display: none;
  }
  #interior .head .categories .category-box .popover .popover-wrapper .content h1 {
    color: var(--Main-hover, #04556d);
    font-family: BlissPro;
    font-size: 30px;
    font-style: normal;
    font-weight: 500;
    line-height: 121.3%;
    margin-bottom: 24px;
  }
  #interior .head .categories .category-box .popover .popover-wrapper .content {
    /*grid-template-columns: 1fr;*/
    display: block;
  }
  #interior .head .categories .category-box .popover .popover-wrapper .content .img-content{
    width: 100%;
  }
  #interior .head .categories .category-box .popover .popover-wrapper {
    padding: 0 22px;
  }
  #interior .head .categories .category-box .popover .popover-head {
    margin-bottom: 10px;
  }
  #preorder {
    padding-top: 46px;
    min-height: 1030px;
    background-position: bottom;
    background-size: contain;
    background-color: #e4e8e8;
  }
  #preorder .container {
    background: linear-gradient(180deg, #e4e8e8 0%, #e2e6de 100%);
  }
  #preorder .order-modal {
    border-radius: 22px;
    padding: 50px 20px 15px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(116deg, rgba(15, 15, 15, 0.17) -16.31%, rgba(184, 190, 252, 0.17) 67.57%);
  }
  #preorder .order-modal h2 {
    width: 100%;
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    line-height: 168%;
    letter-spacing: 1.04px;
    text-transform: uppercase;
    margin-bottom: 13px;
    text-align: center;
  }
  #preorder .order-modal p {
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 120.8%;
    text-align: center;
    margin-bottom: 0;
  }
  #preorder .order-modal form .submit-button {
    width: 100%;
  }
  .footer {
    position: relative;
  }
  .footer .footer__mid {
    display: flex;
    flex-direction: column;
    align-items: start !important;
  }
  .footer .f-mid-block__f-contacts {
    padding: 0;
    margin: 0;
  }
  .footer .f-mid-icon {
    position: absolute;
    top: 38px;
    right: 15px;

    width: 47px;
    height: 33px;
    border-radius: 8px;
    overflow: hidden;
  }
  .footer .f-mid-icon > img{
    width: 100%;
    object-fit: cover;
  }
  .f-mid__subtitle{
    color: #9A9C9C;
    max-width: 100%;
    font-size: 15px;
  }
  .socials-l {
      margin-top: 17px;
  }
  .socials-l span{
    width: 31px;
    height: 27px;
  }
  .f-contacts__item:not(:first-child){
    margin-top: 17px;
  }
  .f-contacts__item > span{
    display: block;
    color: #FFF;
    font-family: "BlissPro";
    font-size: 15px;
    font-weight: 700;
    line-height: 22px;
  }
  .f-contacts__item > span p{
    color: #9A9C9C;
    font-weight: 400;
    margin-bottom: 0;
    opacity: 1;
  }

  .f-mid-title{
    color: #9A9C9C;
    font-family: "BlissPro";
    font-size: 15px;
    font-weight: 4s00;
    line-height: 22px;
  }
  .f-mid-list__title{
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
  }
  .f-mid-list__title .f-mid-title{
    flex: 0 0 auto;
    opacity: 1;
  }
  .f-mid-list__title .s-list{
    margin-left: 14px;
  }
  .f-mid-list__title .s-list span{
    display: block;
    height: 38px;
  }
  .f-mid-list__title .s-list .youtube{width: 26px;}
  .f-mid-list__title .s-list .facebook{width: 22px;}
  .f-mid-list__title .s-list .vk{width: 28px;}
  .f-mid-list__title .s-list .instagram{width: 21px;}




  .hmenu-ul--active {
    margin-left: 20px;
  }
  
  #interior .head .categories{
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: flex-end;
    overflow-x: auto;

    padding-bottom: 10px;
  }
  #security .categories{
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: flex-end;
    overflow-x: auto;

    padding-bottom: 10px;
    margin-left:-12px;
    margin-right: -12px;
  }
  #interior .head .categories::-webkit-scrollbar,
  #security .categories::-webkit-scrollbar{
    display: none;
  }
  #interior .categories .category-box,
  #security .categories .category-box{
    flex: 0 0 auto;
    width: 70px !important;
    height: 48px !important;
  }
  #interior .head .categories button.interior-item,
  #security .categories button.interior-item,{
    width: 48px;
    height: 48px;
    margin: 0 auto;
  }
}
@media screen and (max-width: 576px) {
  #interior .head .categories .category-box .popover .popover-wrapper .content p{
    width: 100%;
  }
}

/*# sourceMappingURL=responsive-style.css.map */