* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--color-primary: #24190e;
	--color-secondary: #998156;
	--color-bg: #f8f1e7;
	--color-text: #24190e;
	--color-text-light: #666;
	--color-accent: #c9a961;
	--color-btn-primary: #434a3e;	
	--color-btn-accent: #7b8369;
	--color-light-bg: #e1dddb;
	--bg-image: url('img/bg.png');
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, 'Oswald', 'Segoe UI', 'Helvetica Neue', sans-serif;
	background-color: var(--color-bg);
	color: var(--color-text);
	background-image: url('img/bg-2.png');
	background-repeat: repeat;	
	line-height: 1.2;
	font-size: 18px;
	 -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.page {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 'header' 'main' 'footer';
    min-height: 100vh;
    
}
.page .header {
    grid-area: header;
}
.page .main {
    grid-area: main;
}
.page .footer {
    grid-area: footer;
}

.header {
    position: relative;	
	color: var(--color-text);	
}

.header__logo {
	min-height: 250px;
	display: flex; 
	padding-right: 15px;
	justify-content: end;
	align-items: center;   
	background-image: url('img/logo-bg.png');
	background-repeat: no-repeat;
	background-size: cover;       
	background-position: center bottom;   
	font-family: "Playfair Display", serif;
    font-size: 23px;
}
.header__logo img {
	display: none;	
}
.header__logo span {
	display: block;
	font-size: 14px;
}

.header__offer-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
}
.header__offer {
	padding-top: 25px;
	padding-bottom: 15px;
	
}
.offer {
	color: var(--color-text);
	font-size: 16px;
}
.offer__title{
	padding-bottom: 10px;
	color: var(--color-primary);
	font-family: "Playfair Display", serif;
	font-size: 28px;
	font-weight: 700;
}
.offer__title span {
	display: block;
	padding-top: 10px;
	color: var(--color-primary);
	font-size: 22px;	
	font-weight: 400;
}
.offer__subtitle{
	color: var(--color-secondary);
	font-size: 18px;
	margin-bottom: 20px;
}
.about__title {
	display: none;
}
.about {
	display: flex;
	justify-content: space-between; 
	align-items: center;
}
.about__left {
	width: 25%;
	overflow: hidden;
}
.about__left img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: scale-down;		
}
.about__right {
	width: 75%;
	padding-left: 15px;
	padding-right: 15px;
}
.custom-list {
  list-style: none;           /* Скрыть стандартные маркеры */
  padding: 0;                 /* Сбросить отступ списка */
  margin: 0;
}

.custom-list li {
  position: relative;         /* Для позиционирования ::before */
  padding-left: 30px;         /* Место для маркера + расстояние */
  margin-bottom: 12px;        /* Расстояние между пунктами */
  line-height: 1.5;           /* Высота строки для выравнивания */
}

.custom-list li::before {
  content: '';                /* Обязателен для ::before */
  position: absolute;
  left: 0;
  top: 6px;                   /* Выравнивание по вертикали */
  width: 20px;                /* Размер маркера */
  height: 20px;
  background-image: url('img/marker.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.custom-list li span{
  display: none;
}
.cta {    
	margin-bottom: 20px;	
}
.cta p {  	
	font-family: "Playfair Display", serif;
	color: var(--color-text);
	font-weight: 400;
    font-size: 14px;
	text-align: center;
}
.cta__btn {
    width: 100%;
	margin: 20px 0 10px 0;
}
.btn {
    display: block;
    padding: 12px 24px;
    margin: 0;
    text-align: center;
    color: var(--color-light-bg);
    background: linear-gradient(135deg, var(--color-btn-primary) 0%, var(--color-btn-accent) 100%);
    background-size: 120% 120%;     /* Увеличить размер градиента */
    background-position: 0% 0%;    /* Начальная позиция */
    border-radius: 2px;
    font-size: 14px;
    font-family: "Playfair Display", serif;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
	letter-spacing: 2px;
    outline: 0;
    cursor: pointer;
    transition: background-position 0.5s ease;
    position: relative;
	border-radius: 0 30px;
    box-shadow: 0 8px 20px rgba(62, 59, 55, 0.3);
}

.btn span {
    display: block;
    padding-top: 5px;
    font-weight: 400;
    font-size: 14px;
    text-transform: lowercase;
	letter-spacing: 1px;
}

.btn span::after {
    content: ' →';
    margin-left: 4px;
    transition: margin-left .5s;
}
.btn:hover  {
    background-position: 100% 100%;  /* Новая позиция при наведении */
}
.btn:hover span::after {
    margin-left: 8px;
}

.footer {
	display: flex;              /* Добавить flex контейнеру */
	flex-direction: column;      /* Вертикальная ориентация */
	min-height: 150px;
	padding: 25px 15px 15px 15px;    
	background-image: url('img/footer-bg.png');
	background-repeat: no-repeat;	
	background-size: cover;        /* Заполнит весь объем */
	background-position: right bottom;   /* Центрирует изображение */
	color: var(--color-btn-primary);
	font-weight: 500;
	
}
.footer a {
	color: var(--color-btn-primary);
}
.footer__inner {	
	display: flex; 
	justify-content: center;
	align-items: flex-end;      /* Выравнить к низу */
	margin-top: auto;           /* Прижимает к низу */  
}
.footer__inner p {
	width: 100%;
	font-size: 14px;
	font-family: "Playfair Display", serif;
	margin: 0;                  /* Сбросить margin абзаца */
	text-align: center;
}
@media (min-width: 480px) {
	.header__logo {		
		font-size: 36px;
	}
	.header__logo span {		
		font-size: 22px;
	}
	.offer__title{
		font-size: 36px;		
	}
	.offer__title span {		
		font-size: 28px;	
	}
	.about__left {
		width: 35%;		
	}	
	.about__right {
		width: 65%;	
		padding-left: 50px;		
	}
	.cta {    
		margin-bottom: 30px;	
	}
	.cta__btn {
		width: 330px;
		margin: 30px auto 10px auto;
	}
	.footer {		
		background-image: url('img/footer-bg-main-2.png');
		background-repeat: no-repeat;	
		background-size: cover;        /* Заполнит весь объем */
		background-position: right bottom;   /* Центрирует изображение */
		background-size: 100% auto;
		background-position: right bottom;   /* Центрирует изображение */
	}
}
@media (min-width: 640px) {
	.header__logo {	
		min-height: 350px;	
		font-size: 46px;
	}
	.header__logo span {		
		font-size: 28px;
	}
	.about__left {
		width: 45%;		
	}	
	.about__right {
		width: 55%;	
		padding-left: 15px;		
	}
	.custom-list li {
	  font-size: 20px;
	  font-weight: 700;
	  font-family: "Playfair Display", serif;
	}
	.custom-list li span{
	  display: inline-block;
	  font-size: 18px;
	  font-weight: 200;
	  letter-spacing: 1px;
	  font-family: "Oswald", sans-serif;
	}
	.footer {		
		background-position: right bottom;   
	}
}
@media (min-width: 768px) {   
	.header {
		background-image: url('img/header-bg.png');
		background-repeat: no-repeat;
		background-size: 200% auto;
		background-position: center bottom;   /* Центрирует изображение */		
	}
	.header__inner {
		min-height: 450px;
	}
	
	.header__logo {		
	    min-height: 50px;
		padding-top: 15px;
		padding-left: 15px;
		justify-content: flex-start;	
		align-items: flex-start;		
		background-image: none;	
		font-size: 16px;
		color: var(--color-bg);
		text-transform: uppercase;
		
	}
	.header__logo p {
		width: 50%;
		line-height: 36px;
	}
	.header__logo img {
		display: inline-block;	
		height: 36px;
		margin-right: 10px;
	}
	.header__logo span {
		display: inline;
		font-size: 16px;	
		text-transform: lowercase;		
	}	
	.header__offer-wrap {
		position: relative;
		transform: translateY(50%);		
	}	
	.offer__title{		
		font-size: 24px;		
	}
	.offer__title span {
		font-size: 20px;
    }
	.header {
		background-size: 170% auto;
		background-position: 50% bottom;   /* Центрирует изображение */		
	}
	.header__inner {
		min-height: 400px;
	}	
	.header__offer-wrap {		
		transform: translateY(20%);		
	}
	.header__offer {
		width: 230px;	
		margin-left: -50px;
	}
	.about__title {
		display: block;
		padding-top: 25px;
		padding-bottom: 25px;
		font-size: 24px;
		letter-spacing: 1px;
		font-weight: 500;
		font-family: "Playfair Display", serif;
		text-align: center;
	}	
	.about__left {
		width: 40%;		
	}	
	.about__right {
		width: 60%;	
		padding-left: 15px;		
	}
	.cta {    
		margin-bottom: 35px;	
	}
	.cta__btn {		
		margin: 35px auto 10px auto;
	}	
	.footer {
		min-height: 250px;		
	}
}
@media (min-width: 960px) {
    .container {
		padding-left: 15px;
		padding-right: 15px;
		margin: 0 auto;
		width: 960px;
	}
	.header__offer {
		width: 330px;	
		margin-left: -50px;
	}
	.offer__title{		
		font-size: 34px;		
	}
	.offer__title span {
		font-size: 26px;
    }
	.about__title {	
		font-size: 30px;		
	}	
	.about__title img{
		display: block;
		width: 50%;
		margin: 0 auto;
	}	
	.custom-list li {
	  font-size: 22px;
	  margin-bottom: 48px;
	}
	.custom-list li br{
	  display: none;
	}
	.custom-list li span{
	  display: block;
	  font-size: 20px;	  
	}
	.cta__btn {		
		width: 500px;
	}
	.cta p {		
		font-size: 20px;
	}
	.btn {
		font-size: 20px;
	}
	.btn span {		
		font-size: 20px;		
	}
	.footer {
		min-height: 250px;			
		background-position: center top;  
	}
}
@media (min-width: 1200px) {
    .container {
        width: 1200px;
    }
	.header {
		background-size: 120% auto;
	}
	.about__left {
		width: 35%;		
	}	
	.about__right {
		width: 65%;	
		padding-left: 55px;		
	}
	.custom-list li {
	  font-size: 28px;
	  margin-bottom: 48px;
	}
	.custom-list li span {	  
	  font-size: 26px;	  
	}
	.custom-list li::before {
	  top: 12px;      
	}
	.footer {
		min-height: 350px;	
	}
}
@media (min-width: 1440px) {
    
	.header__inner {
		min-height: 500px;
	}
	.header__offer {
		width: 350px;	
	}
	.header__offer-wrap {		
		transform: translateY(40%);		
	}
	.offer__title{
		font-size: 36px;		
	}
	.offer__title span {		
		font-size: 28px;	
	}
}
@media (min-width: 1660px) {
    
	.header {
		background-size: 140% auto;
	}
	.header__inner {
		min-height: 700px;
	}
	.header__offer {
		width: 500px;	
	}
	.offer__title{
		font-size: 48px;		
	}
	.offer__title span {		
		font-size: 36px;	
	}
}
@media (min-width: 1920px) {
    
}
@media (min-width: 2560px) {
    
	.header {
		background-size: 100% auto;
	}
}