/* roboto-regular - cyrillic_latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-v48-cyrillic_latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-600 - cyrillic_latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/roboto-v48-cyrillic_latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-700 - cyrillic_latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/roboto-v48-cyrillic_latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-800 - cyrillic_latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 800;
  src: url('fonts/roboto-v48-cyrillic_latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-900 - cyrillic_latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/roboto-v48-cyrillic_latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}




:root{
      --navy:white; /* фон */
      --accent:#e02b2b; /* красный */
      --muted:#f2f6f8;
      --card:#0b2440;
      --white:#ffffff;
    }
    *{box-sizing:border-box}
    body{
		margin:0;
		font-family:Roboto,system-ui,Arial,sans-serif; 
		font-size-adjust: 0.5; /* примерное значение для Roboto */
		background:var(--navy);
		color:var(--muted)}

    a{color:inherit;text-decoration:none}

table {
  border-collapse: collapse; /* объединяем границы */
  width: 100%; /* по желанию */
  text-align: center; /* выравнивание по горизонтали */
}

table, th, td {
  border: 1px solid black; /* все границы черные */
}

th, td {
  padding: 8px; /* отступы внутри */
  vertical-align: middle; /* вертикальное выравнивание */
}	  
.contentfoot p {
    padding: 0;
    margin: 0;
    text-transform: uppercase;
}	  
.prefoot {
    background: url(img/footer1.webp);
    width: 100%;
    height: 470px;
    background-position: center;
}
	.contentfoot {
    background: black;
    padding: 30px 0px;
}  




.faq-section {
  max-width: 900px;
  margin: 40px auto;
  font-family: "Roboto", sans-serif;
}

.faq-section h2 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 26px;
}

.faq-question {
  background: #000;
  color: #fff;
  padding: 15px 20px;
  cursor: pointer;
  font-weight: 600;
  border-radius: 8px;
  margin-bottom: 5px;
  position: relative;
  transition: background 0.3s ease;
}

.faq-question:hover {
  background: #222;
}

.faq-question::after {
  content: "▼";
  position: absolute;
  right: 20px;
  transition: transform 0.3s ease;
}

.faq-question.active::after {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  background: #f4f4f4;
  color: #000;
  padding: 0 20px;
  border-radius: 0 0 8px 8px;
  transition: max-height 0.4s ease, padding 0.3s ease;
}

.faq-answer.active {
  padding: 15px 20px;
  max-height: 400px;
}









	  
.useful {
    display: flex
;
    gap: 12px;
    margin-top: 12px;
    margin-left: 10px;
    margin-right: 10px;
    max-width: 1400px;
    margin: 0 auto;
}
	  
	  
.opisBlock1 {
    padding: 30px;
    background: white;
    color: #020c22;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    border-radius: 20px;
}
	.titileHos {
    color: #ce3e36;
}
	.textHos {
    font-size: 14px;
    margin-top: 12px;
    line-height: 25px;
}  
	.textHos2 {
    display: flex
;
    font-size: 12px;
    column-gap: 15px;
    margin-top: 15px;
}  
.textHos21 b, .textHos22 b {
    font-size: 20px;
    color: #ff3d2b;
}
	  
.opisHos {
    width: 50%;
    font-size: 18px;
}
.opisHos2 {
    display: flex
;
    align-items: center;
    justify-content: space-evenly;
    column-gap: 30px;
    margin-bottom: 70px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}  
	  
	  
	  
	  
	  
	.opisBlock img {
    width: 100px;
}  
.opisBlock {
    display: flex
;
    column-gap: 30px;
} 
	  
.nav .menu {
  display: flex;
  gap: 15px;
}

.burger {
    display: none;
    font-size: 28px;
    cursor: pointer;
    color: black;
}  
	  
.container3 {
    padding-top: 50px;
    padding-bottom: 50px;
    background: #000c24;
}  
.content {
    padding: 50px 150px;
    color: black;
    font-size: 28px;
    line-height: 45px;
    max-width: 1400px;
    margin: 0 auto;
}
.lightbox {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.85);
  text-align: center;
}

.lightbox-content {
  position: relative;
  max-width: 90%;
  margin: 40px auto;
  color: #fff;
}


.lightbox-img {
  border-radius: 10px;
  box-shadow: 0 0 15px #000;
}



.map-btn {
    display: flex
;
    align-items: center;
    gap: 5px;
    padding: 8px 15px;
    background: #ffffff;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.2s;
}
.map-btn img {
    width: 150px;
    height: auto;
}
.map-btn:hover {
  background: #444;
}

.close{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 30px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  user-select: none;
}

.close {
    top: -35px;
    right: 65px;
    font-size: 25px;
    transform: none;
    background: none;
    width: auto;
}
	  
	.lb-title.sml {
    font-size: 14px;
}  


.lb{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.85);z-index:9999}


.lb.show{display:flex}
.lb-inner {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    color: #fff;
    padding: 5px;
    border-radius: 14px;
    display: flex
;
    flex-direction: column;
    gap: 12px;
}
.lb-title {
    margin-bottom: 0px;
    font-size: 30px;
    font-weight: 600;
    text-align: center;
}
.lb-body{display:flex;align-items:center;gap:8px}
.lightbox-img {
    max-width: 70vw;
    max-height: 70vh;
    object-fit: contain;
}
.nav {
    background: transparent;
    border: 0;
    font-size: 42px;
    line-height: 1;
    color: #fff;
    cursor: pointer;
    padding: 6px 10px;
    display: flex
;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    align-content: space-around;
}

.lb-actions{
    display: flex
;
    justify-content: center;
    gap: 10px;}

button.nav:hover {
    background: #ff0000;
}


	  
	.headerBlk {
    position: sticky;
    top: 0;
    background: white;
    z-index: 9999;
}  
	  
	  
	  
	  
	  
	  
	.formaBron h3 {
    text-align: center;
}
	
.formaBron {
    max-width: 400px;
    margin: 20px auto;
    padding: 20px;
    background: #f5f5f5;
    border-radius: 8px;
    font-family: Arial, sans-serif;
}
.formaBron h2 {
    margin-bottom: 15px;
}
label {
    display: block;
    margin-top: 10px;
    font-weight: bold;
}
input, select {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    border-radius: 20px;
}
.radio-group {
    display: flex;
    gap: 10px;
    margin-top: 5px;
}
.radio-group label {
    font-weight: normal;
}
button {
    background: #020c22;
    color: #fff;
    border: none;
    padding: 10px;
    width: 100%;
    margin-top: 15px;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
    font-weight: 600;
    text-transform: uppercase;
    border: 1px solid white;
}
button:hover {
    background: #ff0000;
}
.notice {
    font-size: 12px;
    margin-top: 10px;
    color: #ffffff;
}
.popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #000826;
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 8px;
    z-index: 9999;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    max-width: 300px;
    text-align: center;
}
.popup.show {
    display: block;
}
.popup.error {
    border-color: #ff4d4d;
}
.popup.success {
    border-color: #4CAF50;
}	

    /* Header */
.header {
    display: flex
;
    align-items: center;
    justify-content: space-between;
    padding: 18px 28px;
    background: white;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}
    .logo{display:flex;align-items:center;gap:12px}
	.logo img {
    width: 100px;
}
.langButt {
    display: flex
;
    column-gap: 10px;
}   
    .logo h1{font-size:18px;margin:0;color:var(--white);font-weight:900}
 
.nav a {
    font-size: 18px;
    padding: 8px 10px;
    border-radius: 6px;
    color: #00142a;
    font-weight: 600;
}
.blueFon {
    width: 100%;
    height: 500px;
    min-height: 500px;
    position: absolute;
    background: #000c24;
    margin: 0 auto;
    margin-top: -300px;
    z-index: -1;
}


a.book-btn {
    color: white;
    text-align: center;
}
.lang a {
    padding: 0px;
}
.lang {
    display: flex
;
    justify-content: center;
    color: #00142a;
    column-gap: 2px;
    font-weight: 900;
    align-items: center;
}
.heder {
    width: 100%;
}
.heder img {
    width: 100%;
}
    .book-btn{background:var(--accent);color:#fff;padding:10px 14px;border-radius:8px;font-weight:700}

    /* Hero */
 .hero {
    padding: 26px;
    border-top: 3px solid rgba(255, 255, 255, 0.03);
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
}
.hero-inner {
    display: block;
    align-items: flex-start;
    max-width: 1400px;
    margin: 0 auto;
}
 
 .hero h2 {
    font-size: 95px;
    margin: 0 0 6px;
    line-height: 0.9;
}
.hero h2 span {
    font-size: clamp(40px, 12vw, 185px) !important;
}
.hero p.lead {
    margin: 10px 0 18px;
    color: #0c131c;
    font-size: 30px;
    text-transform: uppercase;
    width: 50%;
}
p.lead span {
    font-size: 18px;
    line-height: 10px;
    text-transform: lowercase;
}
.title {
    position: absolute;
    margin-left: 20px;
    display: flex
;
    margin-top: -235px;
}
.badges {
    display: flex
;
    gap: 10px;
    justify-content: flex-end;
}
.badge {
    background: #6b6b6b;
    padding: 12px;
    border-radius: 40px;
    width: 190px;
    text-align: center;
    margin-top: 10px;
}
.badge small {
    display: block;
    color: #ffffff;
    font-weight: 600;
}
    .badge strong{display:block;margin-top:6px;font-size:18px;color:var(--white)}

.formaBron {
    position: absolute;
    top: 0px;
    background: #00000099;
    right: 100px;
    width: 460px;
    height: 610px;
    border-radius: 30px;
    padding: 40px;
}

    /* Separator skyline */
.skyline, .skyline2 {
    position: relative;
}
.skyline:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -12px;
     height: 380px;
    width: 100%;
    background: url(img/white.webp) repeat-x; background-position: center;
}
.skyline2:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -12px;
    height: 380px;
    width: 100%;
    background: url(img/black.webp) repeat-x; background-position: center;
}
    /* Gallery */
.container, .container2 {
    margin: 0 auto;
    /* padding: 26px; */
}
.container2 {
    background: #000c24;
    padding-bottom: 330px; padding-top: 50px;
}
.container {
padding-top: 50px;
    padding-bottom: 330px;
}





	
.gallery {
    display: flex
;
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
    align-content: space-around;
    align-items: stretch;
}

.big {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.big img {
  max-width: 100%;
  max-height: 100%;
  border: 2px solid #ccc;
  border-radius: 5px;
}

.thumbs {
    width: 640px;
    display: grid
;
    grid-template-columns: repeat(2, 300px);
    overflow-y: auto;
    max-height: 920px;
}

.thumbs img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 5px;
  transition: border 0.3s;
}

.thumbs img:hover {
  border-color: #666;
}

.thumbsBlk {
    overflow: hidden;
    flex: 1;
    display: flex
;
    justify-content: center;
}


 
 .section-title, .section-title2 {
    color: var(--white);
    font-weight: 700;
    margin: 18px 0;
    text-align: center;
    font-size: 36px;
    text-transform: uppercase;
}
.section-title2 {
 color: #000c24;
}
.zagl {
    padding: 10px;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}
    /* Rooms */
    .rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:26px}
    .room{background:linear-gradient(180deg,#0f263d,#021428);height:120px;border-radius:6px}
    .rooms-2{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:26px}

    /* What nearby */
 .nearby {
    display: grid
;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-width: 1400px;
    margin: 0 auto;
    margin-bottom: 26px;
}
    .nearby .card{background:linear-gradient(180deg,#0d2540,#021024);border-radius:10px}

    /* Amenities */
    .amenities{padding:18px 0}
.icons {
    display: grid
;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-left: 10%;
    margin-right: 10%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}
.icon {
    display: flex
;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px;
    background: linear-gradient(180deg, #999999, #03203a);
    border-radius: 8px;
}
    .icon .ic {
    width: 100px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    display: flex
;
    justify-content: center;
}
.card {
    display: flex
;
    flex-direction: column;
    padding: 10px;
}
.knopk {
    display: flex
;
    column-gap: 5px;
}
	  a.podr.butOn {
    background: linear-gradient(160deg, #15e121, #064e0a);
}
.opis {
    padding: 10px;
    background: #343333;
    border-radius: 5px;
    text-align: center;
}
	  .container2 h4 {
    text-align: center;
    font-size: 24px;
}
.butOn, .butOn2 {
    color: white;
    border: none;
    border-radius: 40px;
    font-size: 12px;
    padding: 10px 10px;
    font-weight: 600;
    min-width: 125px;
    width: 100%;
    display: flex
;
    justify-content: center;
    background: linear-gradient(160deg, #aad6f6, #207fc1);
    cursor: pointer;
    align-items: center;
    text-align: center;
}
.useful .card p {
    text-transform: uppercase;
    text-align: center;
}
.card img {
    width: 400px;
    width: 100%;
    border-radius: 10px;
}
.timeWork {
    margin-top: 15px;
    margin-bottom: 15px;
}
.ic img {
    width: 90px;
    height: 90px;
}
.icon p {
    font-size: 14px;
    color: #cfe4ff;
    text-align: center;
    margin: 0;
}
	  
.lang-dropdown {
  display: none;
  position: relative;
}

.lang-dropdown button {
    border-radius: 6px;
    border: 1px solid #aaa;
    background: #fff;
    cursor: pointer;
    margin-top: 0;
    color: black;
    font-weight: 600;
}

.lang-dropdown .lang-menu {
    display: none;
    position: absolute;
    top: 110%;
    left: 0;
    background: white;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    color: black;
}

.lang-dropdown .lang-menu div {
  padding: 8px 12px;
  cursor: pointer;
}

.lang-dropdown .lang-menu div:hover {
  background: #eee;
}
.cardMap img {
    width: 230px;
}
.karty {
    display: flex
;
    justify-content: center;
    gap: 10px;
}  
.cardMap {
    display: flex
;
    padding: 10px;
    border: 2px solid #051021;
    border-radius: 10px;
    flex-direction: column;
    align-items: center;
}	  

    /* Useful & footer */

.useful .card {
    flex: 1;
    height: auto;
    border-radius: 8px;
    background: linear-gradient(180deg, #071a2b, #031022);
    display: flex
;
    align-items: center;
    justify-content: space-around;
    align-content: center;
    flex-wrap: nowrap;
    flex-direction: column;
    padding: 20px;
}
.useful .card img {
    width: 100px;
}
	  
	  
    footer {
    text-align: center;
}


/* Запрет прокрутки при открытом лайтбоксе */
body.locked {
  overflow: hidden;
}

/* Языковое меню */
.lang-menu {
 
  
  transform: translateY(-10px);
  transition: 0.2s ease;
  position: absolute;
  z-index: 1000;
}

.lang-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Бургер-меню */
.menu {
    transform: translateX(0%);
    transition: transform 0.3s ease;
}

.menu.active {
  transform: translateX(0);
}

    /* Responsive */
	  
	    @media (max-width:1250px){
			
			
	.content {
    padding: 25px 50px;
    color: black;
    font-size: 24px;
    line-height: 45px;
}		
			
			.hero h2 span {
    font-size: 11vw;
}
		.badges {
    display: flex
;
    gap: 10px;
    justify-content: flex-start;
}	
		.container, .container2 {
    margin: 0 auto;
    padding-left: 10px;
    padding-right: 10px;
}	
			
.thumbs {
    width: 46vw;
    display: grid
;
    grid-template-columns: repeat(2, 22vw);
    overflow-y: auto;
    max-height: 64vw;
}
			
			.thumbs img {
    width: 22vw;
    height: 22vw;
   
}
			
.gallery {
    gap: 1vw;
}			
			
	  }
			
	 @media (max-width:1110px){	
		 .badges {
        display: flex
;
        gap: 10px;
        justify-content: center;
        align-content: center;
        margin-top: 9%;
        width: 100%;
    }
			}
	  
    @media (max-width:990px){
	.big {
    width: 100% !important;
    height: auto !important;
}	
		
	.dateBlk {
    display: flex
;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: center;
    column-gap: 10px;
}
 .dateBlk div {
    display: flex
;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}	
		
      .hero-inner{flex-direction:column}
      .gallery{grid-template-columns:1fr 1fr;grid-auto-rows:80px}
      .rooms,.rooms-2{grid-template-columns:repeat(2,1fr)}
      .icons{grid-template-columns:repeat(2,1fr)}
		
		
		.hero p.lead {
    width: 100%;
}
		
    .formaBron {
        position: relative;
        right: 0;
        width: 100%;
        height: auto;
        max-width: 100%;
        background: #020c22;
    }
		
		.title {
    position: absolute;
    margin-left: 20px;
    display: flex
;
    margin-top: -379px;
}
		    .hero h2 span {
        font-size: 19vw;
    }
		    .badges {
        margin-top: 0%;
    }
		
		.nearby {
    overflow: scroll;
    width: 100%;
}
		
		.card {
    display: flex
;
    flex-direction: column;
    padding: 10px;
    min-width: 330px;
    justify-content: space-between;
}
		
		.useful .card {
    flex: 1;
    
    border-radius: 8px;
    background: linear-gradient(180deg, #071a2b, #031022);
    min-width: auto;
}
    }
	  
	 @media (max-width:880px){  
		    .title {
        margin-top: -333px;
    }
		 .hero h2 {
    font-size: 9vw;
}
	    .hero h2 span {
        font-size: 16vw;
    }	
		 
	.opisHos2 {
    display: flex
;
    width: 100%;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;
}
	.opisHos {
    width: 100%;
    font-size: 18px;
    padding: 20px;
}	 
	.opisBlock {
    display: flex
;
    column-gap: 30px;
    width: 100%;
    justify-content: space-evenly;
}	 
    .container2 {
        background: #000c24;
        padding-bottom: 250px;
        padding-top: 1px;
    } 
	  }

	   @media (max-width:820px){  
		.container3 {
    padding-top: 40px;
    padding-bottom: 40px;
}   
		   .cardMap img {
    width: 160px;
}
		.heder {
    width: 100%;
    overflow: hidden;
    border-radius: 40px;
}
		.heder img {
    width: auto;
}   
	  }
	  
	   @media (max-width:720px){  
		   
		.map-btn img {
    width: 80px;
    height: auto;
}   
	.lb-title {
    margin-bottom: 0px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}	   

    .close {
        font-size: 16px;
    }
	    .card {
        display: flex
;
        flex-direction: column;
        padding: 10px;
        min-width: 270px;
        justify-content: space-around;
    }	
		  
	 .burger {
    display: block;
  }

    .nav .menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 65px;
        right: 11px;
        background: #000000;
        padding: 20px;
        border-radius: 10px;
    }
.menu.active a {
    color: white;
}
  .nav .menu.active {
    display: flex; /* показываем при открытии */
  }	  
		   .icon .ic {

    background: none;
}
	  }
	  
    @media (max-width:600px){
		
		.container3 {
    padding-top: 30px;
    padding-bottom: 30px;
}
	    .content {
        padding: 5px 20px;
        color: black;
        font-size: 16px;
        line-height: 30px;
    }	
		p {
    font-size: 12px;
}
		.useful {
    display: flex
;
    gap: 12px;
    margin-top: 12px;
    margin-left: 10px;
    margin-right: 10px;
    flex-direction: column;
}
	.karty {
    display: flex
;
    justify-content: center;
    gap: 10px;
    flex-direction: column;
}	
		
		    .prefoot {
        
        width: 100%;
        height: 34vw;
        margin-bottom: -2px;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
		
		.badges {
    display: flex
;
    flex-direction: row;
    flex-wrap: wrap;
}
		    .dateBlk {
        display: flex
;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-items: center;
        column-gap: 10px;
        flex-direction: row;
    }
	    .heder {
        width: 100%;
        overflow: hidden;
        border-radius: 40px;
        height: 400px;
    }
		
	    .title {
        margin-top: -165px;
    }
		
      .header{padding:12px}
      .hero h2{font-size:34px}
      .gallery{grid-template-columns:1fr}
      .rooms,.rooms-2{grid-template-columns:1fr}
    }
	  @media (max-width:450px){
	    .container3 {
        padding-top: 20px;
        padding-bottom: 20px;
    }	  
		.hero {
    padding: 0;
}  
		  
    .heder {
        margin-top: -75px;
        border-radius: 0px;
        margin-bottom: -60px;
    }
    .hero p.lead {
        width: 85%;
        font-size: 22px;
        margin-left: 10px;
    }
		.gallery {
    display: flex
;
    flex-direction: column;
}  
	    .thumbs {
        width: 100%;
        overflow-x: auto;
        max-height: 64vw;
        display: flex
;
    }	 
		  
		  
	.opisBlock1 {
    padding: 30px;
    background: white;
    color: #020c22;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    border-radius: 20px;
    width: 100%;
    display: flex
;
    flex-direction: column;
    align-items: center;
}	  
	    .opisBlock {
        display: flex
;
        column-gap: 30px;
        width: 100%;
        justify-content: space-around;
        flex-wrap: wrap;
        align-items: stretch;
        row-gap: 10px;
    }
		  
	.titileHos {
    color: #ce3e36;
    margin-top: 10px;
}	  
		  
		  
		  
	  }
	  
	  

/* адаптив */
@media (max-width: 450px) {
  .lang { display: none; }
  .lang-dropdown { display: inline-block; }
	
	.langButt {
    display: flex
;
    column-gap: 10px;
    align-items: center;
}
}	
	  
.book-btn .book-icon {
    display: none;
    width: 19px;
    height: 19px;
}

/* при маленьком экране */
@media (max-width: 450px) {
	

	
  .book-btn .book-text {
    display: none; /* убираем текст */
  }
.lightbox-content {
    position: relative;
    max-width: 90%;
    margin: 30% auto;
    color: #fff;
}

  .book-btn .book-icon {
    display: inline-block; /* показываем иконку */
  }
	.lb-inner {
    max-width: none;
}
}  
	  
	  @media (max-width: 385px) {
		 .badge strong {
    display: block;
    margin-top: 0px;
    font-size: 14px;
    color: var(--white);
}
		  .badge {
    background: #999999;
    padding: 3px;
    border-radius: 40px;
    width: 150px;
    text-align: center;
    margin-top: 3px;
}
		  .ic img {
    width: 60px;
    height: 60px;
}
		  .map-btn {
    display: flex
;
    align-items: center;
    gap: 5px;
    padding: 2px 2px;
    background: #ffffff;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.2s;
}
	  }

 @media (max-width: 320px) {
.section-title, .section-title2 {
    
    font-weight: 700;
    margin: 18px 0;
    text-align: center;
    font-size: 20px;
    text-transform: uppercase;
}	 
	 .container3 {
    padding-top: 20px;
    padding-bottom: 20px;
}
	    .content {
        padding: 5px 10px;
        color: black;
        font-size: 12px;
        line-height: 22px;
    } 
.icon {
    display: flex
;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    padding: 6px;
    background: linear-gradient(180deg, #999999, #03203a);
    border-radius: 8px;
}
	 .icon .ic {
    width: 70px;
    background: none;
    border-radius: 10px;
    display: flex
;
    justify-content: center;
}
    .ic img {
        width: 80%;
        height: auto;
    }
	 .icon p {
    font-size: 10px;
    color: #cfe4ff;
    text-align: center;
    margin: 0;
    padding: 5px;
}
	     .hero p.lead {
        width: 95%;
        font-size: 19px;
        margin-left: 10px;
        margin-bottom: 80px;
    }
	     .heder img {
        width: 200%;
        margin-left: -10%;
    }
	 
	    .heder {
        margin-top: -75px;
        border-radius: 0px;
        margin-bottom: -190px;
    } 
	     .title {
        margin-top: -110px;
    }
	 
}

 @media (max-width: 290px) {
	     .map-btn img {
        width: 50px;
        height: auto;
    }
}