@font-face{font-family:'MyFont';src:url('../fonts/Montserratarm-ExtraLight.woff2') format('woff2');font-weight:200;font-display:swap}
@font-face{font-family:'MyFont';src:url('../fonts/Montserratarm-Light.woff2')      format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'MyFont';src:url('../fonts/Montserratarm-Regular.woff2')    format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'MyFont';src:url('../fonts/Montserratarm-Medium.woff2')     format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'MyFont';src:url('../fonts/Montserratarm-SemiBold.woff2')   format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'MyFont';src:url('../fonts/Montserratarm-Bold.woff2')       format('woff2');font-weight:700;font-display:swap}

@font-face {
    font-family: 'MyFontBold';
    src:
        url('../fonts/Montserrat-SemiBold.ttf') format('opentype');
    font-display: swap;
}

body{
    margin:0;
    font-family: 'MyFont', sans-serif !important;
     /*font-family: 'MyFontBold', sans-serif !important;*/
}

.slideTop{
        width: 100%;
        height: 100vh;
}







.slide-content{
    width: 100% !important;
}
 
.dropdown * {
  box-sizing: border-box;
}

.select:hover {
  background: #323741;
}

.caret {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #fff;
  transition: 0.3s;
}


.caret-rotate {
  transform: rotate(180deg);
}

.menu {
  list-style: none;
  padding: 0.2em 0.5em;
  background: #323741;
  border: 1px #363a43 solid;
  box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.2);
  border-radius: 0.5em;
  color: #9fa5b5;
  position: absolute;
  top: 3em;
  left: 50%;
  width: 100%;
  transform: translateX(-50%);
  opacity: 0;
  display: none;
  transition: 0.2s;
  z-index: 1;
}

.menu li {
  padding: 0.7em 0.5em;
  margin: 0.3em 0;
  border-radius: 0.5em;
  cursor: pointer;
}

.menu li:hover {
  background: #2a2d35;
}


.active {
  background: #23242a;
}


.menu-open {
  display: block;
  opacity: 1;
}
.dropdown__filter-selected{
    color:#201717;
}

.headerStatic{
    /*position: absolute;*/
    position: fixed;
    top: 20px;
    /*width: 96%;*/
    width: calc(100% - 48px);
    display: flex;
    justify-content: space-between;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 16px;
        background: rgb(255 255 255 / 30%);
   backdrop-filter: blur(9.567954063415527px);
    padding: 0 81px;
   z-index: 99999999;
}

.HeaderStaticRight{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}


.mySwiper2 swiper-slide:first-child {
  margin-left: -30px;
}

.sliderText{
    position: absolute;
    top: 0;
    color: #000000;
    padding: 20px;
    text-align: left;
}

.TextSliderLabel{
        color: #F6935B;
    font-size: 50px;
    font-weight: bold;
    margin: 0;
}

.TextSliderSecondLabel{
    font-size: 26px;
        margin: 10px 0;
}
.TextSliderThirdLabel{
line-height: 30px;
}

.SliderSize{
        width: calc(100% - 194px);
    margin: 0 auto;
}

      .mySwiper5 .TextSliderLabel {
        font-size: large !important;
      }
      
      .mySwiper5 .sliderText {
        position: absolute;
        bottom: 10% !important;
        color: white;
        padding: 9px !important;
        right: 10% !important;
        top: auto !important;
        text-align: center;
        background: white !important;
        border-radius: 12px !important;
        width: 25% !important;
    }
    
    
   .mySwiper5 .slide-content{
       width: 100% !important;
   }
   
   .CompassContent{
       display: flex;
    justify-content: space-between;
    align-items: flex-start;
   }
   
   .marTop_block{
           margin: 64px auto 22px !important;
   }
    
    
    /*start portfolio*/
.portfolio{
  /*padding:80px 0;*/
  /*background: #f7f7f7;*/
}
.portfolio p{
  color: rgba(255,255,255,.6);
  margin: 20px 40px;
  letter-spacing: 1px;
  line-height:1.5em;
}

/*start tabs*/
.portfolio input[type="radio"]{
  display: none;
}
.portfolio .tabs label{
    font-size: 13px;
    display: inline-block;
    color: #3f4244;
    text-align: center;
    padding: 12px 18px;
    cursor: pointer;
    height: min-content;
    background: #F5F5F5;
    border-radius: 10px;
    margin-right: 12px;
    margin-bottom: 32px;
    color: #5E5E5E;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.portfolio .tabs .all{
  display: none;
  transform-origin: 10% 50%;
}
.portfolio .tabs .content {
  margin-bottom: 29px;
  position: relative;
  /*overflow: hidden;*/
      width: 99%;
    margin: 0 auto;
}

.mySwiper5 .slideTop{
    aspect-ratio: 1440 / 586;
    height: auto !important;
}

.administrator picture:nth-of-type(odd) {
    /*margin-right:16px;*/
    
}


.effect-3:nth-of-type(even) {
    margin-right: 0;
}

.portfolio .tabs .administrator .content{
    width: 99% !important;
    display: flex;
    flex-wrap: wrap;
}



    



.portfolio .tabs .content img {
  aspect-ratio: 1216 / 560;
    height: auto;
  width: 100%;
  cursor: pointer;
      margin-bottom: 15px;
      border-radius: 18px;
      object-fit: cover;
}
.portfolio .tabs label:not(:first-of-type){
  margin-left: -4px;
      /*flex: 0 0 calc(70% / 5);*/
    white-space: nowrap;
}
.portfolio input[id="all"]:checked ~ .content .all{
  display: block;
  animation: animateTabe 1s;
}
.portfolio input[id="administrator"]:checked ~ .content .administrator{
  display: block;
  animation: animateTabe 1s;
}
.portfolio input[id="Supermarket"]:checked ~ .content .Supermarket{
  display: block;
  animation: animateTabe 1s;
}
.portfolio input[id="children"]:checked ~ .content .children{
  display: block;
  animation: animateTabe 1s;
}

.portfolio input[id="spa"]:checked ~ .content .spa{
  display: block;
  animation: animateTabe 1s;
}

.portfolio input[id="gym"]:checked ~ .content .gym{
  display: block;
  animation: animateTabe 1s;
}

.portfolio input[id="game"]:checked ~ .content .game{
  display: block;
  animation: animateTabe 1s;
}

.portfolio input[id="coffee"]:checked ~ .content .coffee{
  display: block;
  animation: animateTabe 1s;
}

.portfolio input[id="car"]:checked ~ .content .car{
  display: block;
  animation: animateTabe 1s;
}



.portfolio input[type="radio"]:checked + label{
        
  background: #f6935b;
    cursor: default;
    color: white;
    border-radius: 12px;
}


.effect-3 .labelText{
  font-size: 24px;  
          color: #FFF;
            font-size: 24px;
            font-style: normal;
            font-weight: 400;
            line-height: 148%;
}




.effect-3 {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
      margin-right: 16px;
    margin-bottom: 16px;
}

.effect-3 .effect-img {
  font-size: 0;
  overflow: hidden;
  cursor:pointer;
}

.effect-3 .effect-img img {
  width: 100%;
  height: auto;
  transition: opacity .5s, transform .1s;
}

.effect-3:hover .effect-img img {
  transform: scale(1.05);
}

.effect-3 .effect-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 30px;
  text-align: center;
  background: rgba(0, 0, 0, .5);
  transition: opacity .5s, transform .1s;
  cursor:pointer;
  transform: scale(0);
  opacity: 0;
}

.effect-3:hover .effect-text {
  transform: scale(1);
  opacity: 1;
}

.effect-3 .effect-text h2 {
  height: 45px;
  color: #ffffff;
  font-size: 25px;
  margin: 0;
}

.effect-3 .effect-text p {
  color: #ffffff;
  font-size: 16px;
  margin: 0 0 0 0;
}

.effect-3 .effect-btn .btn {
  display: inline-block;
  height: 35px;
  padding: 7px 15px;
  color: #333333;
  background: #ffffff;
  text-decoration: none;
}





















@keyframes animateTabe{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

.classic-list{
  list-style-type: none;
}

.mySwiper3 .slideTop , .mySwiper31 .slideTop, .mySwiper32 .slideTop,  .mySwiper4 .slideTop{
       height: auto;
        aspect-ratio: 1316 / 300;
    
}
    
    
    
.tabs.text-left{
       /*display: flex;*/
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px;
        margin-top: 19px;
}

.tabs .all{
    width:100%;
}

.contactInfoTop{
        background: #f6935b;
    color: white;
    border-radius: 10px;
    padding: 9px 18.5px;
    margin-right: 35px;
    
}

.contactInfoTop:hover{
       text-decoration: none;
    outline: none;
    color: white;
}

.contactInfoTop img{
    margin-right: 12px;
}


    .contactInfoTop .phone-img {
  display: none;
}

.contactBTN{
    position: absolute;
    bottom: 62px;
    z-index: 99999;
    right: 0;
    width: 20%;
    right: 112px;
        padding: 24px 30px;
    min-width: 382px;
    border-radius: 16px;
background: rgba(255, 255, 255, 0.30);
backdrop-filter: blur(11px);
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
}

.contactBTNA{
    background: #F7904B;
    text-align: center;
    border-radius: 10px;
    padding: 12px;
    width: 100%;
    display: block;
    text-decoration: solid;
    color: white !important;
}

.contactBTNA:hover{
    text-decoration: none !important;
}

h4[data-lange="ciran_label"]{
    font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 139%;
}

h1[data-lange="about_label"]{
    color: #F6935B;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
    margin-bottom: 16px;
}


p[data-lange="park_text"]{
    color: #201717;
font-size: 18px;
font-style: normal;
font-weight: 300;
line-height: 28px; 
margin-bottom: 32px;
}


h1[data-lange="contact"]{
    color: #201717;
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: 32px;
}



hr{
    margin-top: -4px !important;
    margin-bottom: 16px !important;
}

h4[data-lange="consultation_label"]{
    color: #F6935B;
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: 32px;
}

p[data-lange="consultation_text"]{
    color: #414651;
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 28px;
}


p[data-lange="about_text"]{
    color: #201717;
font-size: 18px;
font-style: normal;
font-weight: 300;
line-height: 28px; 
}

p[data-lange="entakarucvacq_text"]{
    color: #201717;
font-size: 18px;
font-style: normal;
font-weight: 300;
line-height: 28px; 
}

h1[data-lange="pulayin_label"]{
    color: #F6935B;
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: 32px;
margin-bottom: 16px;
}

h1[data-lange="entakarucvacq_label"]{
   color: #F6935B;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
margin-bottom: 16px;
}

h1[data-lange="park_label"]{
   color: #F6935B;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
margin-bottom: 16px;
}




p[data-lange="pulayin_text"]
{
    color: #201717;
font-size: 18px;
font-style: normal;
font-weight: 300;
line-height: 28px;
margin-bottom: 32px;
}

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

.w_50{
    width:40%;
}

.contactForm{
    display: flex;
    flex-direction: column;
}
 
hr{
    background: #f6935b;
}

.contactPart input{
    border: none;
    border-radius: 10px;
    padding: 8px 25px;
    outline: none;
    margin-bottom:10px;
}

.contactPart input::placeholder {
   color: rgba(32, 23, 23, 0.32);
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

div[data-lange="additional_info"]{
    color: #201717;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 148%; /* 23.68px */
}

.d_fl{
    display:flex;
    flex-direction:column;
}

.contactPart button{
    border: white;
    color: white;
    background: #F6935B;
    padding: 8px;
    border-radius: 10px;
    cursor:pointer;
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 1.6px;
}
.contactPart button:focus{
outline:none;

}

span[data-lange="goRegion"], span[data-lange="goRoom"]{
        margin: 0px 20px;
    color: #5E5E5E;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.MapPart{
   position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex; 
}
.map_component{
    display: flex;
    width: 100%;
    background: #ffffff;
    color: #5E5E5E;
    align-items: center;
    margin-right: 23px;
    border-radius: 10px;
    white-space: nowrap;
        padding: 10px 40px;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.ToHref{
           font-weight: bold;
    align-items: center;
    margin: 0px 20px;
    color: #5E5E5E;
}

.ToHref:hover{
    color:white;
    text-decoration:none;
}

/* Footer address section — Figma "Address section" (1349:15713).
   Left half: two rows of address blocks over a row of socials. Right half:
   the project contractor, hung on a divider that runs the full height. */
.footerBlock{
    display:flex;
    flex-direction: column;
    gap: 24px;
    flex: 1 1 0;
    min-width: 0;
}

.contactRows{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.flexFooter{
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 64px;
    margin: 32px auto 22px !important;
}

.footerPartner{
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    border-left: 1px solid #D5D7DA;
}

.partnerCard{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
    width: 252px;
}

.partnerLogo{
    width: 188px;
    height: 32px;
    display: block;
    object-fit: contain;
}

.partnerLines{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    width: 100%;
}

.partnerRole{
    color: #828282;
    font-size: 10px;
    font-weight: 400;
    line-height: normal;
    text-align: right;
}

.partnerName{
    color: #181D27;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: right;
}

.partnerBtn{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #DBDBDB;
    color: #474747;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .2s ease;
}

.partnerBtn:hover,
.partnerBtn:focus{
    background: #CFCFCF;
    color: #474747;
    text-decoration: none;
}

/* the design parks the ArrowRight glyph pointing up; it swings to the right on
   hover, same as the map pills */
.partnerBtn img{
    width: 16px;
    height: 16px;
    display: block;
    transform: rotate(-90deg);
    transition: transform .3s ease;
}

.partnerBtn:hover img,
.partnerBtn:focus-visible img{
    transform: rotate(0deg);
}

h6[data-lange="address_label"],
h6[data-lange="builder_1"],
h6[data-lange="room_address_label"],
h6[data-lange="builder_2"]
{
    color: #181D27;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

.contact_info{
        display: flex;
        flex-direction: row;
        gap: 16px;
        margin-bottom: 0;
}

.contact_info > div{
        width: 250px;
        margin: 0;
}

.contact_info h6{
        margin: 0 0 8px;
}

/* the address is split across two keys; inline so it wraps as one paragraph
   instead of breaking mid-phrase on narrow screens */
.contact_info p{
        margin: 0;
        display: inline;
}

.firstEl1{
        margin-right: 0;
        margin-bottom: 0;
}

p[data-lange="address_1"], 
p[data-lange="address_2"],
p[data-lange="town_name"],
p[data-lange="room_address_text"],
p[data-lange="const_name"]
{
        margin: 0;
        color: #717680;
        font-size: 16px;
        font-style: normal;
        font-weight: 300;
        line-height: 24px;
}

.flexFooterSocial{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    gap: 12px;
}

.flexFooterSocial a {
        margin-bottom: 0;
        display: block;
        width: 32px;
        height: 32px;
}

.flexFooterSocial img {
width: 32px;
height: 32px;
display: block;
}

.footerBlock h4{
    white-space: nowrap;
}
.footerBottom{
    text-align: right;
    padding: 12px 0;
    margin: 0;
        margin: 32px auto 0 !important;
}

.footerBottomParent .mobileSizeLogo{
    width: 73px;
    height: 40px;
    object-fit: contain;
}

.lngChange[data-lang="rus"]{
    padding-top: 2px;
    padding-bottom: 2px;
    font-family: system-ui;
    font-weight: 600;
    font-size: 16px;
    
}

.lngChange[data-lang="eng"]{
      padding-top: 2px;
    padding-bottom: 2px;
    font-family: system-ui;
    font-weight: 600;
    font-size: 16px;
}

.ciran_label{
    font-weight: 700;
    line-height: 139%;
}

.desktopMap{
    height: 252px;
    object-fit: cover;
}



.dropdown {
  width: auto;
  font-family: "Helvetica", sans-serif;
  font-weight: 300;
}



.dropdown__switch:checked + .dropdown__options-filter .dropdown__select {
  transform: scaleY(1);
  opacity: 1;
  border-radius: 10px;
    padding: 0;
    text-align: center;
    background: rgb(255 255 255);
    /*backdrop-filter: blur(9.567954063415527px);*/
}
.dropdown__switch:checked + .dropdown__options-filter .dropdown__filter:after {
  transform: rotate(-135deg);
}
.dropdown__options-filter {
  width: 100%;
      margin: 0;
  cursor: pointer;
}
.dropdown__filter {
    margin: 0;
  position: relative;
  display: flex;
  padding: 0 13px;
  color: #000000;
  font-weight: bold;
  border-radius: 18px;
  font-size: 16px;
  transition: 0.3s;
  width: 150%;
    list-style-type: none;
}
.dropdown__filter:focus {
  outline: none;
}
.dropdown__filter::after {
  position: absolute;
  top: 30%;
  right: 20px;
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1px solid #201717;
    border-bottom: 1px solid #201717;
    color: #201717;
  transform: rotate(45deg) translateX(-45%);
  transition: 0.3s ease-in-out;
}
.dropdown__select {
  position: absolute;
  top: 100%;
  left: -10px;
  width: 140%;
  margin-top: 5px;
  overflow: hidden;
  transform: scaleY(0);
  transform-origin: top;
  border-radius: 20px;
  
  opacity: 0;
  transition: 0.2s ease-in-out;
  list-style-type: none;
}
.dropdown__select-option {
        padding-bottom: 10px;
    padding-top: 14.81px;
      /*padding: 11.89px 20px;*/
  /*border-bottom: 1px solid #e9ecef;*/
  transition: 0.3s;
}
.dropdown__select-option:last-of-type {
  border-bottom: 0;
}
.dropdown__select-option:hover {
  background-color: #F7904B;
}


.mySwiper2 .slideTop{
    border-radius: 28px;
    height: auto;
        aspect-ratio: 346 / 433;
}



   
.modal-backdrop.show{
    opacity:0 !important;
}

.modal-content{
        background: rgb(255 255 255 / 50%) !important;
    border-radius: 10px !important;
    backdrop-filter: blur(10px) !important;
    border: 0 !important;
}
.modal-header{
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.close {
    font-weight: 200 !important;
        opacity: 1 !important;
    color: #7f7f7f !important;
   
}



.mobsizepul{
    width: calc(100% - 222px);
        margin: 64px auto 22px;
}

p[data-lange="about_text"]{
    font-size: 18px;
    font-weight: 300;
    line-height: 28px;
     margin-bottom: 25px;
}
h1[data-lange="home_type"]{
        color: #F6935B;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
}


.mySwiper7{
       width: calc(100% - 222px);
}

.mySwiper7.tabslider{
    width: 100% !important;
}

.mySwiper7 .slideTop{
     aspect-ratio: 1216 / 560;
     height: auto !important;
}

.contactPart{
    margin: 37px auto 22px;
}

.consultation_label{
    
color: #F6935B;
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: 32px;
    
}

.flexFooterSocial img{
        width: 32px;
        height: 32px;
    }
    
.phone-text{
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

label img{
    display:none;
}


.portfolio .tabs .administrator .content img {
        margin-bottom:0 !important;
    }





    


/* ===== header, matched to Figma 984:8569 ===== */
.headerStatic{
    height: 80px;
    padding: 20px 24px;
    align-items: center;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(11px);
    -webkit-backdrop-filter: blur(11px);
}
.headerStatic .mobileSizeLogo{
    /* !important: the markup carries an inline width */
    width: 116px !important;
    height: 64px;
    padding: 0 !important;
    object-fit: contain;
}
.HeaderStaticRight{ gap: 24px; }
.headerStatic .phone_icon{
    display: block;
    width: 18px;
    height: 18px;
}

.contactInfoTop{
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 8px 16px;
    margin-right: 0;
    border-radius: 8px;
    color: #201717;
}
.phone-text{
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
}

/* the switcher inherits the page font instead of Helvetica */
.dropdown{ font-family: inherit; font-weight: 400; }
.dropdown__filter{
    padding: 0 18px 0 0;
    width: auto;
    border-radius: 0;
    font-size: 16px;
    font-weight: 500;
    color: #201717;
    
}
.dropdown__filter::after{ right: 2px; top: 32%; }
.dropdown__filter-selected{ 
    color: #201717;
    font-family: system-ui;
    line-height: 15px; 
}

.dropdown__switch:checked + .dropdown__options-filter .dropdown__select{
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(9.568px);
    -webkit-backdrop-filter: blur(9.568px);
    
}
.dropdown__select-option{
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    color: #201717;
    transition: background-color .18s ease, color .18s ease;
    font-family: system-ui;
    
}
.dropdown__select-option:hover{
    background-color: #F6935B;
    color: #FFFFFF;
}
/* the design lists only the languages you can switch to */
.dropdown__select-option.is-current-lang{ display: none; }

@media only screen and (max-width: 768px) {
    
    .effect-3 .labelText{
          font-size:13px;  
          color: #FFF;
            font-size: 24px;
            font-style: normal;
            font-weight: 400;
            line-height: 148%;
        }
    
     .administrator .content img{
        aspect-ratio: 346 / 433 !important;
        height: auto !important;
        border-radius: 18px;
    }
    
    
    
    
    
    .mySwiper7.tabslider .slideTop{
            aspect-ratio: 343 / 464 !important;
        height: auto !important;
    }
    
    .portfolio .tabs label:not(:first-of-type) {
        margin-left: 0;
    }
    
    .mySwiper5 .slideTop{
        aspect-ratio: 375 / 600;
        height: auto !important;
    }
    
    .mySwiper .slideTop{
        height: auto;
        aspect-ratio: 375 / 464;
    }
    
    .mySwiper3 .slideTop , .mySwiper31 .slideTop, .mySwiper32 .slideTop,  .mySwiper4 .slideTop{
        aspect-ratio: 343 / 464;
        height: auto !important;
    }
    
    label img{
        display:block;
    }
    
    h1[data-lange="entakarucvacq_label"],
    h1[data-lange="park_label"],
    h1[data-lange="pulayin_label"],
    h1[data-lange="home_type"],
    h1[data-lange="about_label"],
    h1[data-lange="contact"]{
     font-size: 21px ;
     margin-bottom: 8px;
    }
    
    p[data-lange="about_text"],
    p[data-lange="pulayin_text"],
    p[data-lange="entakarucvacq_text"],
    p[data-lange="park_text"]{
        font-size: 12px;
        font-style: normal;
        font-weight: 300;
        color: #414651;
        line-height: 22px;
    }

    h4[data-lange="ciran_label"]{
        font-size: 16px;
    }
    .contacts.mobileS{
        margin-bottom: 0;
    }
    
    div[data-lange="additional_info"] {
    
    font-size: 12px;
        font-style: normal;
        font-weight: 300;
        line-height: 18px;
    }
    
    .map_component{
        padding: 10px 10px;
        justify-content: center;
    }
    
    span[data-lange="goRegion"], 
    span[data-lange="goRoom"] {
        margin: 0px 12px 0 0;
    }

    .park.mobsizepul.marTop_block{
        margin: 32px auto 22px !important;
    }
    
    h4[data-lange="consultation_label"] {
        font-size: 16px;
    }
    
    p[data-lange="pulayin_text"]{
            margin-bottom: 16px;
    }
    
    h1[data-lange="pulayin_label"] {
        margin-bottom: 8px;
    }
    
    .desktopHide{
        display:none;
    }
    
    .portfolio input[type="radio"]:checked + label {
        background: linear-gradient(90deg, #F68F4D 0%, #F69050 25%, #F6935A 45%, #F6986B 64%, #F69F84 82%, #F6A9A3 99%, #F7AAA5 100%);
    }
    
    .whiteicon {
        display: none;
    }

    .portfolio input[type="radio"]:checked + label img.whiteicon {
        display: block;
        width: auto;
        height: 60px;
    }
    
    .portfolio input[type="radio"]:checked + label img.blackicon {
        display: none;
        width: 20px;
        height: 21px;
    }
    
    
    
    label[for="Supermarket"],label[for="spa"] {
        margin-right:0 !important;
    }
    
    /*.portfolio input[type="radio"]:checked + label{*/
    /*  background: linear-gradient(90deg, #F68F4D 0%, #F69050 25%, #F6935A 45%, #F6986B 64%, #F69F84 82%, #F6A9A3 99%, #F7AAA5 100%);*/
    /*}*/
    
    


    
    
        
    
       
    
    
    
    .contactPart {
        margin: 4px auto 58px;
    }
    .mobileS{
        margin-bottom: 34px;
    }
    
    
    
    .mySwiper2 .slideTop{
        border-radius: 14px;
        height: auto;
        aspect-ratio: 287 / 360;
    }

.mySwiper7{
    width:90% !important;
}
    
    .headerStatic{
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.50);
        backdrop-filter: blur(11px);
    }
    
    .phone_icon{
        display:none;
    }
    
    .contactInfoTop img {
         margin-right: 0; 
    }
    
    .contactInfoTop {
    margin-right: 10px;
    }
    
    .dropdown__filter-selected {
        font-size: 20px;
    }
    
    .footerBottomParent .footerBottom{
        margin: 0 !important;
        text-align: center;
        width: 100% !important;
        margin:0 !important;
        padding: 14px !important;
    }
    
    .flexFooterSocial a {
    width: 32px;
    margin-bottom: 0;
    }

    .flexFooterSocial{
        justify-content: flex-start;
        align-items: center;
        flex-direction: row;
        margin-top: 0;
        margin-bottom: 0;
    }

    .firstEl1, .contact_info {
        margin-bottom: 0;
    }

    /* the design has no mobile state — the two 250px columns wrap instead */
    .contact_info{
        flex-wrap: wrap;
        gap: 22px 16px;
    }

    .contact_info > div{
        width: auto;
        flex: 1 1 45%;
        min-width: 150px;
    }

    .contactRows{
        gap: 22px;
    }

    .mobileHide{
        display:none;
    }




    .flexFooter{
    display: flex;
    justify-content: space-between;
        margin: 20px auto 0 !important;
        flex-direction: column;
        gap: 28px;
}

    .footerBlock {
    flex-direction: column;
    }

    /* no vertical rule once the halves stack */
    .footerPartner{
        border-left: 0;
        align-items: flex-start;
    }

    .partnerCard{
        align-items: flex-start;
        width: auto;
    }

    .partnerLines{
        align-items: flex-start;
    }

    .partnerRole,
    .partnerName{
        text-align: left;
    }
    
    .mapMobile{
            width: 100%;
    height: 300px;
    object-fit: cover;
    }
    
    .ToHref{
        width: 95%;
    padding: 7px;
    margin: 0 8px;
    }
    .MapPart{
        flex-direction: column;
        top: 50%;
        right: 0;
        left: 50%;
        transform: translate(0, -50%);
        align-items: flex-end;
    }
    
    .contactPart{
        flex-direction: column;
    width: 100% !important;
    }
    
    .w_50{
        width:100%;
    }
    
    .contactPart button {
        font-weight: 600;
        height: 52px;
        margin-top: 14px;
    }
    
    .dropdown__select {
        left: -12px;
    }
    
    .d_fl {
    width: 100%;
    margin-top: 30px;
    }
    
    .contactBTN {
    bottom: -48px;
    width: calc(100% - 32px);
    left: 50%;
    transform: translateX(-50%);
    padding: 35px;
    border-radius: 16px;
    }
    
    .headerStatic {
    width: calc(100% - 32px);
   padding: 10px 35px 10px 23px;
    }
    .mobileSizeLogo{
        width: 28% !important;
    height: auto;
    object-fit: contain;
    }
    
    .footerBottomParent .mobileSizeLogo{
                width: 13% !important;
                height: auto;
    }
    
        
    
    .contactInfoTop .phone-text {
    display: none;
  }
  .contactInfoTop .phone-img {
    display: inline;
    width: 27px; /* adjust size */
    height: auto;
  }
    
    .mobsize,.mobsizepulh1{
            font-size: x-large;
    }
    
    .mobsizepul{
        width: 90% !important;
                /*margin: 180px auto !important;*/
        padding: 0 !important;
        
    }
    
    .mobileHeight{
        margin: 80px auto 22px !important;
    }
    .mobileHeight2{
        margin: 32px auto 22px;
    }
    
    .marTop_block {
        margin: 72px auto 22px !important;
    }
    
    
    .portfolio .tabs .administrator .content{
         width: 95% !important;
         margin-top: 4px;
    }
  
    
    .portfolio .tabs .content{
         width: 97% !important;
         margin-top: 4px;
    }
    
    /* Figma 1430:37836 lays these out as an even 5x2 grid of squares: five
       62.2px cells with 8px gaps come to exactly the 343px column. Wrapping a
       space-between flex row instead left 4+3+3 with uneven gaps. */
    .tabs.text-left {
    display: grid;
    /* minmax(0,1fr), not 1fr: one of the icons is intrinsically 80x60 and a bare
       1fr track cannot shrink below its content, so that single icon widened
       every column to 80 and pushed the row past the text column. */
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-top: 16px;
}
    /* the tab panels are siblings of the buttons, so they have to break the grid
       rather than land in one of its cells */
    .portfolio .tabs .content{ grid-column: 1 / -1; }

.mySwiper7 .slideTop {
        aspect-ratio: 343 / 464;
        height: auto !important;
}


.portfolio .tabs label {
    font-size: 12px;
    width: auto;
    aspect-ratio: 1;
    height: auto;
    margin: 0;
    padding: 0;
    justify-content: center;
    display: flex;
    align-items: center;
}
/* The set was drawn at wildly different sizes — 13px up to 80x60 — so pin them
   all to one box and let each keep its own proportions inside it. The checked
   state needs naming explicitly: its own rule above sets height:60px on the
   white variant and would otherwise keep stretching that one cell. */
.portfolio .tabs label img,
.portfolio input[type="radio"]:checked + label img.whiteicon{
    width: 28px;
    height: 28px;
    object-fit: contain;
}

label[for="all"] {
  display: none !important;
}

.mySwiper3 .sliderText, .mySwiper4 .sliderText,.mySwiper31 .sliderText, .mySwiper32 .sliderText{
    width:45%;
}



    
    .mySwiper5 .sliderText{
            left: 0 !important;
        bottom: 3.5% !important;
        margin-left: 24px !important;
        width: calc(89%) !important;
        
        }
        
    .mySwiper2 swiper-slide:first-child {
        margin-left: 15px !important;
    }
    
    .SliderSize{
        width: 90%;
        padding-left: 0;
        margin: 0 auto;
    }
    
    
    .TextSliderLabel{
        font-size: 21px;
}

.TextSliderSecondLabel{
    font-size: 13px;
    margin: 6px 0;
}
.TextSliderThirdLabel{
    line-height: 20px;
    font-size: 13px;
    margin: 0;
}

}



/* ---- infrastructure slider pagination (Figma 1203:47279) ----------------------------------------
   Swiper builds these bullets inside the custom element's shadow DOM, so an
   ordinary selector cannot reach them — ::part() is the only way in. The width
   transition is what makes the active dot stretch into its pill instead of
   snapping, and it has to sit on the shared rule so both directions animate. */
swiper-container.mySwiper7::part(pagination){
    bottom: 24px;
}
swiper-container.mySwiper7::part(bullet),
swiper-container.mySwiper7::part(bullet-active){
    width: 8px;
    height: 8px;
    margin: 0 1px;
    border-radius: 10px;
    background: #ffffff;
    opacity: 1;
    transition: width .35s ease, background-color .35s ease;
}
swiper-container.mySwiper7::part(bullet-active){
    width: 40px;
    background: #F6935B;
}
/* the design rounds these slides more than the 16px baked into the markup */
swiper-container.mySwiper7 img.slideTop{
    border-radius: 20px !important;
}


/* ---- infrastructure slider spans the viewport (Figma 1203:47279) --------------------------
   The design runs this strip the full 1440 while the heading and tabs stay in
   the 1220 text column, which is what lets the neighbouring slides show at the
   edges. Two existing rules pin the slider to its column — .mySwiper7 and
   .mySwiper7.tabslider, the latter with !important — so this one is written to
   outrank both, and is kept to desktop so the mobile width rule still stands. */
@media (min-width: 992px){
    swiper-container.mySwiper7,
    swiper-container.mySwiper7.tabslider{
        width: var(--vw, 100vw) !important;
        max-width: var(--vw, 100vw) !important;
        margin-left: calc(50% - var(--vw, 100vw) / 2) !important;
        margin-right: 0 !important;
    }
}


/* ---- floating "pick your home" button (Figma 1199:40165) ------------------------------------
   The close control overhangs the pill's top-right corner, so the wrapper cannot
   clip and the padding on top reserves room for it — otherwise the first hover
   would nudge the layout. Hidden over the map exactly like .headerStatic. */
.pickHome{
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 60;
    padding-top: 8px;
    padding-right: 8px;
    transition: opacity .25s ease, transform .25s ease;
}
.pickHome.is-over-map,
.pickHome.is-dismissed{
    opacity: 0;
    transform: translateY(150%);
    pointer-events: none;
}
.pickHomeBtn{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border: 0;
    border-radius: 99999px;
    background: #F6935B;
    color: #ffffff;
    font-size: 18px;
    font-weight: 500;
    line-height: 24.72px;
    white-space: nowrap;
    cursor: pointer;
}
.pickHomeIco{
    width: 24px;
    height: 24px;
    display: block;
}
.pickHomeClose{
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9.27px;
    border: 0;
    border-radius: 50%;
    background: rgb(32, 23, 23);
    cursor: pointer;
    opacity: 0;
    transform: scale(.8);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
}
.pickHomeClose img{
    width: 9px;
    height: 9px;
    display: block;
}
/* Armed only by real pointer movement over the pill. The button slides back in
   when the map scrolls out of the way, and if that happens under a resting cursor
   a plain :hover would pop the close open by itself, with nobody touching it.
   :focus-visible keeps it reachable from the keyboard without reacting to clicks. */
.pickHome.is-armed .pickHomeClose,
.pickHomeBtn:focus-visible ~ .pickHomeClose{
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}


/* ---- anchor links glide instead of jumping ----------------------------------------
   The hero's "Կապ" is a plain <a href="#footer">, so it teleported the page.
   Setting this on the root covers every hash link at once; the buttons that
   already call scrollIntoView({behavior:'smooth'}) are unaffected. */
html{
    scroll-behavior: smooth;
}


/* ---- house type cards (Figma 1014:1049 / 1014:1413) ---------------------------------
   The render sits at the bottom-right and the copy sits over the card's own
   background on the left, which is how the design has it — the difference is
   that the copy is now text, so it translates and scales like everything else.
   Slide images were cropped at the point where the baked-in text ended. */
.htTypes{
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.htCard{
    position: relative;
    height: 293px;
    padding: 24px;
    background: #f6f6f6;
    border-radius: 16px;
    overflow: hidden;
}
.htSlider{
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    width: auto;
    height: 293px;
}
.htSlider picture{
    display: block;
    width: 100%;
    height: 100%;
}
.htSlider img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right;
    display: block;
}
.htText{
    position: relative;
    z-index: 2;
    width: 356px;
}
.htSize{
    margin: 0;
    color: #F6935B;
    line-height: normal;
}
.htNum{ font-size: 40px; font-weight: 700; }
.htUnit{ font-size: 24px; font-weight: 400; }
.htType{
    margin: 16px 0 0;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: .2px;
    line-height: normal;
    color: #201717;
    text-transform: uppercase;
}
.htRule{
    display: block;
    width: 31px;
    height: 3px;
    margin: 16px 0;
    border-radius: 2px;
    background: #F6935B;
}
.htList{
    display: flex;
    flex-direction: column;
    width: 356px;
}
.htRow{
    display: flex;
    justify-content: space-between;
    gap: 18px;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.69;
    color: #312929;
    white-space: nowrap;
}
/* same pill as the infrastructure slider: the stretching active dot */
swiper-container.htSlider::part(pagination){ bottom: 12px; }
swiper-container.htSlider::part(bullet),
swiper-container.htSlider::part(bullet-active){
    width: 8px;
    height: 8px;
    margin: 0 1px;
    border: 0;
    border-radius: 10px;
    background: #ffffff;
    opacity: 1;
    transition: width .35s ease, background-color .35s ease;
}
swiper-container.htSlider::part(bullet-active){
    width: 40px;
    background: #F6935B;
}

@media (max-width: 991px){
    /* Figma 1430:37834: card 343x464 with 16px of padding, and the render sits
       full-bleed at the bottom in a 343x254 box — not inset like the text. */
    .htCard{ height: auto; padding: 16px; }
    .htText{ width: auto; }
    .htList{ width: auto; }
    /* Type sizes solved from the widths Figma gives each text box — "Հողամաս" is
       64px wide there, "141 - 147 քմ" 71, "ԹԱՈՒՆՀԱՈՒՍ" 102 — which lands on 12px
       for the rows and 14px for the type. The stack then measures
       39 + 12 + 17 + 12 + 4 + 12 + 80 = 176, the height Figma draws. */
    /* 37px and 22px on one baseline make the line box grow past any line-height
       set on it — the two inline boxes get different half-leading and the union
       came out 46. Laying the row out as flex pins it to the drawn 39. */
    .htSize{ display: flex; align-items: baseline; gap: 6px; height: 39px; line-height: 1; }
    .htNum{ font-size: 37px; }
    .htUnit{ font-size: 22px; }
    .htType{ margin-top: 12px; font-size: 14px; line-height: 17px; }
    .htRule{ width: 32px; height: 4px; margin: 12px 0; }
    .htRow{ font-size: 12px; line-height: 20px; }
    /* Pagination deliberately keeps the site's own stretching pill here rather
       than the outlined circles Figma draws for this card. */
    .htSlider{
        position: static;
        width: auto;
        height: 294px;
        margin: 18px -16px -16px;
    }
    /* The portrait render is 1372x1856; scaled to the card's width it stands 464
       tall, and the design shows its bottom 254 — matched against the Figma crop,
       which lined up at the very end of the travel. Fitting it whole instead left
       the building small with a band of empty plan above it. */
    .htSlider img{
        object-fit: cover;
        object-position: center bottom;
    }
}


/* ---- hero card clears the floating button ----------------------------------
   The hero keeps its full-height background; only the card moves. It sat at
   bottom:62px, ending 19px inside the fixed button — raised so the two stack
   the way the design has them, card above and button below. Desktop only:
   on narrow screens the button is not beside the card. */
@media (min-width: 992px){
    .contactBTN{
        bottom: 105px;
        right: 32px;
    }
}


/* the footer ends with a logo in the same corner the button occupies, so at the
   very bottom of the page the button steps up out of its way */
#pickHomeEnd{ height: 1px; }
.pickHome.is-at-end{ transform: translateY(-60px); }


/* =====================================================================
   Contact section — Figma 1349:15699 (1440x330).
   Heading column 476 and form column 500 with a 239 gutter; fields 42px
   with a 16px leading icon; send button on Brand color/400 #E98850.
   ===================================================================== */
.contactPart{
    align-items: flex-start;
    margin: 0 auto !important;
}

/* The two-column split and the desktop type scale are scoped, or they beat the
   phone rules on specificity and squeeze the form to 41% at 375. */
@media (min-width: 769px){
    .contactPart > .w_50:first-child{
        width: 39%;
    }

    .contactPart form.w_50{
        width: 41%;
    }

    h4[data-lange="consultation_label"]{
        line-height: normal;
        margin: 0 0 12px;
    }

    div[data-lange="additional_info"]{
        color: #414651;
        font-size: 18px;
        font-weight: 300;
        line-height: 28px;
    }
}

/* consultation_text is an empty string in every language; additional_info
   carries the paragraph the design shows */
.contactPart p[data-lange="consultation_text"]{
    display: none;
}

.contactPart input{
    height: 42px;
    padding: 12px 12px 12px 36px;
    margin-bottom: 12px;
    border-radius: 8px;
    background: #ffffff no-repeat 12px center;
    background-size: 16px 16px;
    font-size: 12px;
    font-weight: 300;
    line-height: 18px;
    color: #414651;
}

.contactPart input.name{ background-image: url('../images/ic-user.svg'); }
.contactPart input.phone{ background-image: url('../images/ic-phone.svg'); }
.contactPart input.email{ background-image: url('../images/ic-mail.svg'); }

.contactPart input::placeholder{
    color: #D5D7DA;
    font-size: 12px;
    font-weight: 300;
    line-height: 18px;
}

.contactPart button{
    height: 48px;
    padding: 12px;
    border-radius: 8px;
    background: #E98850;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0;
}


/* =====================================================================
   Map call to action — Figma 1349:15709 (1440x252).
   Two #fafafa pills centred over the map, 16px apart. The ArrowRight glyph
   is parked pointing up and swings to the right on hover.
   ===================================================================== */
.MapPart{
    gap: 16px;
    align-items: center;
}

.ToHref{
    margin: 0;
    text-decoration: none;
}

.ToHref:hover{
    text-decoration: none;
}

.map_component{
    width: auto;
    margin-right: 0;
    gap: 4px;
    justify-content: center;
    padding: 12px 40px;
    border-radius: 8px;
    background: #fafafa;
    color: #201717;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    transition: background-color .25s ease;
}

.ToHref:hover .map_component{
    background: #ffffff;
    color: #201717;
}

.mapArrow{
    width: 16px;
    height: 16px;
    display: block;
    flex-shrink: 0;
    transform: rotate(-90deg);
    transition: transform .3s ease;
}

.ToHref:hover .mapArrow,
.ToHref:focus-visible .mapArrow{
    transform: rotate(0deg);
}

/* The 40px desktop padding makes these pills too wide for a 375 viewport, and
   the phone rule anchors the column at left:50%, so they ran off the right
   edge. Keep them compact and pinned to the right margin instead. */
@media only screen and (max-width: 768px){
    .map_component{
        padding: 10px 16px;
    }
    .MapPart{
        left: auto;
        right: 16px;
        transform: translate(0, -50%);
    }
}


/* The administrator tab is a slider now, like the other seven. Its tiles keep
   the .effect-3 hover caption, so the old grid gutters have to go and the
   wrapper must not stay a wrapping flex row. */
.portfolio .tabs .administrator .content{
    display: block;
    flex-wrap: nowrap;
}



/* =====================================================================
   Infrastructure tabs — Figma 1203:47250 / 1406:15323.
   The pills were restyled: flat #f5f5f5, 8px radius, 12/16 Regular, and the
   row now spreads across the full text column with a flat orange active
   state instead of the old gradient. Icons are gone from the desktop pill.
   .tabs itself becomes the flex row — the radios are display:none so they
   are not flex items, and .content wraps to its own line, which keeps the
   `input:checked ~ .content` sibling selectors working untouched.
   ===================================================================== */
@media (min-width: 769px){
    /* The frame is a fixed 1440 where the pills happen to fill the column, so
       space-between reads as an even ~11px gap there. This layout is fluid: on
       a 1920 screen the same rule spread the leftover into ~63px gaps. A fixed
       gap keeps the design's spacing at every width. 10px is the largest that
       still fits the row on one line at 1440. */
    .portfolio .tabs{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
    }

    .portfolio .tabs > .content{
        flex: 0 0 100%;
        width: 100%;
        margin: 24px auto 0;
    }

    .portfolio .tabs label,
    .portfolio .tabs label:not(:first-of-type){
        margin: 0;
        padding: 12px 10px;
        border-radius: 8px;
        background: #f5f5f5;
        color: #5e5e5e;
        font-size: 12px;
        font-weight: 400;
        line-height: 16px;
    }

    .portfolio input[type="radio"]:checked + label{
        background: #f6935b;
        color: #ffffff;
        border-radius: 8px;
    }

    /* the updated pills are text only */
    .portfolio .tabs label img.blackicon,
    .portfolio .tabs label img.whiteicon{
        display: none;
    }
}

/* two of the ten pills reuse the single-colour mainplan icons, which have no
   white variant — invert them when the pill goes orange */
.portfolio input[type="radio"]:checked + label img.monoicon{
    filter: brightness(0) invert(1);
}
.portfolio input[id="syunar"]:checked ~ .content .syunar,
.portfolio input[id="clean"]:checked ~ .content .clean{
  display: block;
  animation: animateTabe 1s;
}

/* =====================================================================
   Phone: the floating call to action carries its icon only. With the label
   it grew wide enough to sit on top of the footer's "Այցելել կայք" button.
   Deliberately at the end of the file: the base .pickHomeBtn rule is declared
   after the main phone block, so a copy inside that block loses on source
   order and the 12px 24px padding survives.
   ===================================================================== */
@media only screen and (max-width: 768px){
    .pickHomeBtn span{ display: none; }
    .pickHomeBtn{ gap: 0; padding: 12px; }
}

/* =====================================================================
   Phone footer — Figma 1430:37869 "Contact section".
   The address column there is 351 wide on 12px gutters, and the holding mark
   sits at the left of the dark bar at 51x28. The shared .mobsizepul container
   gives every section 90% (338 at 375) and centres that mark, so both are
   overridden here rather than in .mobsizepul, which the whole page uses.
   At the end of the file on purpose: the base rules are declared after the
   main phone block and would otherwise win on source order.
   ===================================================================== */
@media only screen and (max-width: 768px){
    .flexFooter{
        width: calc(100% - 24px) !important;
        margin-left: auto;
        margin-right: auto;
        gap: 24px;
    }
    /* Stacked, the halves lose the vertical rule — but the design still separates
       them, with a full-width hairline 24px under the first social row and the
       Syunar mark 24px below it. */
    .footerPartner{
        border-top: 1px solid #D5D7DA;
        padding-top: 24px;
        padding-bottom: 24px;
        width: 100%;
    }
    /* .footerBottomParent .footerBottom, not the bare class: the phone block sets
       padding:14px there with !important, and only equal specificity beats it.
       That 14px made the bar 56 tall against the drawn 52 and pushed the mark to
       x=14. */
    .footerBottomParent .footerBottom{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 12px !important;
    }
    .footerBottomParent .mobileSizeLogo{
        width: 51px !important;
        height: 28px;
        object-fit: contain;
    }
    /* the drawn button is a flat 125 wide; a min-width keeps it there in all
       three languages rather than letting the label decide */
    .partnerBtn{
        min-width: 125px;
        justify-content: center;
    }
}

/* =====================================================================
   Single-colour tab icons must survive the active state.
   'input:checked + label img.blackicon{display:none}' assumes every icon has a
   white twin to swap in. The .monoicon ones (syunar, clean, game, coffee,
   children) have none - they are whitened by a filter instead - so that rule
   left those five buttons with no icon at all once selected. It also forces
   20x21, so the size is restated. Scoped to phones because desktop hides every
   tab icon (the pills are text only) with a rule this one would outrank.
   ===================================================================== */
@media only screen and (max-width: 768px){
    .portfolio input[type="radio"]:checked + label img.blackicon.monoicon{
        display: block;
        width: 28px;
        height: 28px;
    }
}

/* =====================================================================
   Phone infrastructure gallery runs edge to edge, the way .mySwiper2 does
   (measured 375@0 against this one's 347@14). The slider sits inside .content,
   inside the 90% .mobsizepul container, so it is pulled back out to the
   viewport rather than the column.
   ===================================================================== */
@media only screen and (max-width: 768px){
    .portfolio .tabs .content{
        width: 100vw !important;
        /* a full-bleed carousel has to clip its own off-screen slides, or they
           extend the document and the page scrolls sideways */
        overflow: hidden;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
    }
}

/* =====================================================================
   Phone infrastructure slider behaves like .mySwiper2: it spans the viewport
   and shows 1.3 slides 24 apart, with the first one inset 15px, so the next
   card peeks at the right edge. Two rules pinned it to the text column -
   .mySwiper7{width:90%} and .mySwiper7.tabslider - so this outranks both.
   ===================================================================== */
@media only screen and (max-width: 768px){
    swiper-container.mySwiper7,
    swiper-container.mySwiper7.tabslider{
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .mySwiper7 swiper-slide:first-child{
        margin-left: 15px;
    }
}

/* =====================================================================
   Phone footer type — Figma 1430:37869.
   The address blocks there are 169.5 wide with a 20px heading line and a 36px
   two-line address (18px leading), giving 64 and 48.9 tall rows. At the 16/24
   the site used, the heading wrapped to two lines and the address ran to three.
   ===================================================================== */
@media only screen and (max-width: 768px){
    .flexFooter .contact_info h6{
        font-size: 14px;
        line-height: 20px;
        margin: 0;
    }
    .flexFooter .contact_info p{
        font-size: 12px;
        line-height: 18px;
        margin: 8px 0 0;
    }
}

/* =====================================================================
   Phone contact form — Figma 1430:37858 "Contact detail" (375x366).
   Content sits on 24px gutters at 327 wide; the three fields are 40 tall,
   12 apart, and the send button is another 40 sixteen below them. The site
   ran 338 wide on 19px gutters with 42px fields and a 48px button 26 below,
   which is what made the block 447 tall against the drawn 366.
   ===================================================================== */
@media only screen and (max-width: 768px){
    .mobileS .contactPart{
        width: calc(100% - 48px) !important;
        margin-left: auto;
        margin-right: auto;
    }
    .mobileS .contactPart form input{
        height: 40px;
    }
    /* !important is load-bearing: the element carries padding:60px 0px as an
       inline style, which outranks any plain rule. */
    .contacts.mobileS{
        padding: 24px 0px !important;
    }
    .marTop_block{
        margin: 32px auto 22px !important;
    }
    .mobileS .contactPart h4{
        font-size: 20px;
        line-height: 24px;
        margin: 0;
    }
    /* the fields already carry 12 below, so the button only needs the remainder
       to land the drawn 16 under the last one */
    .mobileS .contactPart form input:last-of-type{
        margin-bottom: 0;
    }
    .mobileS .contactPart form .sendEmailOut{
        height: 40px;
        margin-top: 16px;
    }
    /* The field styling and its leading icons live in @media (min-width:769px),
       so phones got plain white boxes. Same treatment here: 16px glyph inset 12,
       text 12/18. */
    .mobileS .contactPart input{
        padding: 12px 12px 12px 36px;
        border-radius: 8px;
        background: #ffffff no-repeat 12px center;
        background-size: 16px 16px;
        font-size: 12px;
        font-weight: 300;
        line-height: 18px;
        color: #414651;
    }
    .mobileS .contactPart input.name{ background-image: url('../images/ic-user.svg'); }
    .mobileS .contactPart input.phone{ background-image: url('../images/ic-phone.svg'); }
    .mobileS .contactPart input.email{ background-image: url('../images/ic-mail.svg'); }
    /* the instruction line is drawn in the regular weight, not semibold */
    .mobileS .contactPart div[data-lange="additional_info"]{
        font-size: 12px;
        font-weight: 300;
        line-height: 18px;
        color: #414651;
    }
}

/* the house-type renders sit on the card's own grey, so the slide fills any
   letterboxing with it instead of showing white */
.htSlider img{
    background: #fafafa;
}


/* =====================================================================
   TABLET — Figma 1519:52540 (960 wide; every section is 912 of content
   inside 24px gutters).

   The site only ever had a phone band (<=768) and a desktop band, so a
   960 viewport was served desktop type squeezed into 738px of content
   *and* the phone's stacked house-type card, because those phone rules
   were scoped to 991 rather than 768. This band carries the tablet
   frame's own type scale and spacing. It sits last in the file on
   purpose: several of the rules it replaces live in earlier @media
   blocks at the same specificity, so source order is what settles them.

   Type scale used (Montserrat arm):
     Title/Medium            24/32 w500
     Paragraph Large/Light   16/24 w300
     Paragraph Medium/Medium 14/20 w500
     Paragraph Medium/Light  14/20 w300
     Paragraph Small/Light   12/18 w300
   ===================================================================== */
@media (min-width: 769px) and (max-width: 1199px){

    /* ---- content column: 24px gutters, not the desktop's 111/97 ------ */
    .mobsizepul{
        width: calc(100% - 48px);
        margin: 32px auto 24px;
    }
    .SliderSize{
        width: calc(100% - 48px);
    }

    /* ---- section heading over description, 16 apart ------------------
       Each heading also carries its own h1[data-lange="…"] rule at 32px,
       so the tag has to be named here to match that specificity. */
    h1.mobsizepulh1{
        font-size: 24px;
        font-style: normal;
        font-weight: 500;
        line-height: 32px;
        margin-bottom: 16px;
    }
    .mobsizepul p,
    p[data-lange="about_text"]{
        font-size: 16px;
        font-weight: 300;
        line-height: 24px;
        margin-bottom: 0;
    }
    /* Armenian leaves home_type_text empty; without this the heading keeps
       its 16px gap to nothing and the cards sit 40 below the drawn 24 */
    .mobsizepul:has(p:empty) h1.mobsizepulh1{
        margin-bottom: 0;
    }
    /* the mainplan block is the one section the design tightens to 12 */
    .mobsizepul:has(+ .map){
        margin-bottom: 12px;
    }

    /* ---- header 912x72 at y=16 (1519:53146) -------------------------- */
    .headerStatic{
        top: 16px;
        height: 72px;
        padding: 16px 24px;
    }

    /* ---- hero info card 304x128 (1519:52543) ------------------------- */
    .contactBTN{
        right: 24px;
        bottom: 80px;
        width: 304px;
        min-width: 0;
        padding: 16px;
        border-radius: 8px;
    }
    .contactBTN .ciran_label{
        margin: 0 0 12px;
        font-size: 18px;
        font-weight: 700;
        line-height: 24px;
    }
    .contactBTNA{
        padding: 8px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
    }

    /* ---- map chip strip below the map (1524:53363) -------------------
       The strip is a child of .stage, which is scaled w/1440 to fit the
       plan — so at this width its 36px pills render 24 tall and all eleven
       stay jammed on one line over the map's bottom edge. The design puts
       them under the map at full size in two rows, so the strip undoes the
       stage scale with --mp-k (published by fit()) and is measured in stage
       units that cancel out to the frame's own width.

       The tag names are in the selectors on purpose: mainplan.css is linked
       after this file, so a plain .mainplan .mapnav ties on specificity and
       loses on source order. */
    .mainplan{ padding-bottom: 100px; }
    .mainplan div.frame,
    .mainplan div.stage{ overflow: visible; }
    .mainplan nav.mapnav{
        top: 100%;
        left: 0;
        width: calc(1440px * var(--mp-k, 1));
        margin-top: calc(16px / var(--mp-k, 1));
        transform: scale(calc(1 / var(--mp-k, 1)));
        transform-origin: top left;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 12px;
        padding: 0 24px;
    }
    .mainplan button.navBtn{
        flex: 0 0 auto;
        border-radius: 8px;
        background: #fafafa;
    }
    .mainplan button.navBtn.is-active{ background: #f6935b; }

    /* ---- floating "pick your home" button (1519:53030) ---------------
       The tablet frame draws it as a 48x48 disc with no label — at this
       width the full pill runs into the hero card. 24px glyph on 12 of
       padding is the 48. */
    .pickHomeBtn span{ display: none; }
    .pickHomeBtn{ gap: 0; padding: 12px; }
    /* the wrapper keeps 8px on the right for the overhanging close control,
       so it sits at 16 for the disc itself to land on the drawn 24 */
    .pickHome{ right: 16px; }

    /* ---- mainplan tab buttons 36 tall (1524:53442) -------------------
       The design pads them 12 all round on a 10px label with a 14px icon
       4 away, and spaces the buttons 12 in both directions — which the
       flex gap already does, so the label's own margins are cleared. */
    .tabs.text-left{
        gap: 12px;
        margin-top: 24px;
    }
    .portfolio .tabs label,
    .portfolio .tabs label:not(:first-of-type){
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        height: 36px;
        margin: 0;
        padding: 12px;
        border-radius: 8px;
        font-size: 10px;
        font-weight: 400;
        line-height: normal;
    }
    /* the desktop band strips these pills back to text; the tablet frame
       keeps the icon, at 14 beside a 10px label */
    .portfolio .tabs label img.blackicon,
    .portfolio .tabs label img.whiteicon{
        display: block;
        /* the markup puts the label span first, the design puts the icon */
        order: -1;
        width: 14px;
        height: 14px;
        object-fit: contain;
    }

    /* ---- house-type cards 912x220, side by side (1516:51986) ---------
       The phone card is stacked and scoped to 991, which caught this band
       too; here the render goes back to filling the card with the text
       laid over its left 300. */
    .htTypes{
        gap: 12px;
    }
    .htCard{
        height: 220px;
        padding: 16px 24px;
        background: #fafafa;
    }
    .htText,
    .htList{
        width: 300px;
    }
    .htSize{
        display: flex;
        align-items: baseline;
        gap: 6px;
        height: auto;
        line-height: 1;
    }
    .htNum{ font-size: 28px; }
    .htUnit{ font-size: 16px; }
    .htType{
        margin: 16px 0 0;
        font-size: 16px;
        line-height: normal;
        letter-spacing: .16px;
    }
    .htRule{
        width: 31px;
        height: 3px;
        margin: 16px 0;
    }
    .htRow{
        font-size: 14px;
        line-height: 1.69;
    }
    .htSlider{
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        height: 220px;
        margin: 0;
    }
    .htSlider img{
        object-fit: cover;
        object-position: center;
    }

    /* ---- contact section: 48/24 padding, 80 gutter (1519:52679) ------
       !important because the section carries its padding inline. */
    .contacts{
        padding: 48px 0 !important;
    }
    .contactPart{
        justify-content: flex-start;
        gap: 80px;
    }
    .contactPart > .w_50:first-child{
        flex: 1 1 auto;
        width: auto;
    }
    .contactPart form.w_50{
        flex: 0 0 440px;
        width: 440px;
        gap: 12px;
    }
    /* the fields carry their own 12 bottom margin, which doubles the flex gap */
    .contactPart form.w_50 input{
        margin-bottom: 0;
    }
    h4[data-lange="consultation_label"]{
        margin: 0 0 16px;
        font-size: 24px;
        font-weight: 500;
        line-height: 32px;
    }
    div[data-lange="additional_info"]{
        color: #414651;
        font-size: 14px;
        font-weight: 300;
        line-height: 20px;
    }
    /* .contactPart button pins this to 48 at 16/24, so it has to be named
       through that selector to be reachable */
    .contactPart button.sendEmailOut{
        height: 44px;
        padding: 12px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
    }

    /* ---- footer addresses (1519:52696) -------------------------------
       The design reads as two columns — the two addresses, then the two
       company lines — which is the transpose of the markup's two rows,
       so the axes swap here. Headings 14/20 Medium #181d27 over text
       14/20 Light #717680, 8 apart, blocks 16 apart, columns 24. */
    .contactRows{
        flex-direction: row;
        gap: 24px;
    }
    .contact_info{
        flex-direction: column;
        gap: 16px;
    }
    /* the block also has to carry the 14/20 itself: the address lines are
       inline, so the wrapper's own strut is what sets their first line box,
       and a 16/24 strut opened an extra 8 inside every block */
    .contactRows > .contact_info > div{
        font-size: 14px;
        line-height: 20px;
    }
    .contactRows > .contact_info:first-child > div{ width: 219px; }
    .contactRows > .contact_info:last-child  > div{ width: 151px; }
    .footerBlock h6{
        margin: 0 0 8px;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
    }
    .footerBlock p{
        margin: 0;
        font-size: 14px;
        font-weight: 300;
        line-height: 20px;
    }
}


/* the header logo is pinned to 116 by .headerStatic .mobileSizeLogo, so the
   phone size needs that same reach to land */
@media only screen and (max-width: 768px){
    .headerStatic .mobileSizeLogo{
        width: 72px !important;
    }
}


/* the send button centres its own label rather than relying on the button's
   default text alignment */
.mobileS .contactPart form .sendEmailOut{
    display: flex;
    align-items: center;
    justify-content: center;
}

/* the phone block above leaves 10 to the right of the call pill; the header row
   spaces itself, so that margin only pushes the language picker off */
@media only screen and (max-width: 768px){
    .contactInfoTop{
        margin-right: 0;
    }
}


/* the base card carries min-width:382px, which outranks any width on a phone
   and pushed the card 3px past the left edge at 375 — cleared here so the
   19px of gutter this asks for actually lands */
@media only screen and (max-width: 768px){
    .contactBTN{
        width: calc(100% - 38px);
        min-width: 0;
    }
}


@media only screen and (max-width: 768px){
    .dropdown__filter{
        margin-top: 3px;
    }
    /* the phone block above leaves 35 on the right and 23 on the left; the row
       is symmetric in the design, and 16 shorter than the 80 it inherits */
    .headerStatic{
        height: 64px;
        padding: 10px 24px 10px 24px;
    }
}


/* the wrapper reserves 8px top and right for the overhanging close control, so
   the disc itself ends up 24 from the right edge and 16 from the bottom */
@media only screen and (max-width: 768px){
    .pickHome{
        right: 16px;
        bottom: 16px;
    }
}


/* ---- house-type render, full screen on a phone tap ----------------------
   Opened only below 769; the overlay itself is styled unconditionally so it
   cannot half-exist if the breakpoint is ever moved. */
.htFull{
    position: fixed;
    inset: 0;
    /* above .headerStatic, which sits at 99999999 and otherwise covers the
       overlay along with its close button */
    z-index: 100000000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(32, 23, 23, .92);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.htFull[hidden]{ display: none; }
/* whole render, fitted — the card crops these images, so anything but contain
   here would show a different framing than the one that was tapped */
.htFullImg{
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: 8px;
}
.htFullClose{
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    /* the glyph inside is a white stroke, so the button carries the brand
       colour rather than a white plate it would disappear against */
    background: #F6935B;
    cursor: pointer;
}
.htFullClose img{
    width: 20px;
    height: 20px;
    display: block;
}
/* the renders are only tappable where tapping does something */
@media only screen and (max-width: 768px){
    .htSlider img{ cursor: zoom-in; }
}