@font-face {
	font-family: 'Junegull';
	src: url('/fonts/Junegull.woff') format('woff');
}

@font-face {
	font-family: 'DejaVuSans';
	src: url('/fonts/DejaVuSans.woff') format('woff');
}

body {
	padding:50px;
	background:#34172f;
	
}

main {
	background-image: url('/imgs/Layer0.jpg');
	border-radius:30px;
	max-width:1300px;
	 
	margin:0 auto;
	background-size: cover;
    background-repeat: no-repeat;
	position:relative;
	  overflow: hidden;
	  padding:40px;
}

.logo {
    position: absolute;
    top: 134px;
    left: 100px;
}


.logo img {
    width: 80%;
}

.kollazh {
    margin-top: 40%;
    text-align: center;
}

.kollazh img {
    width: 90%;
}

.contacts {
	display:flex;
justify-content: space-between;
	gap:10px;
}
 
.contact {
	font-family: 'Junegull';
padding: 11px 30px;
border-radius:50px;
background-repeat:no-repeat;
transition: all 0.4s ease;
display:flex;
gap:10px;
}

	.contact:hover {
transform: scale(1.1);
	}
	
.vk,  .tg {
background:#000;
color:#fff;
font-size: 1.7vw;

}

.phone {
background:#f4d93f;
color:#000;
font-size: 1.7vw;
}


.tg:before{
mask: url('/imgs/1.svg') no-repeat center;
-webkit-mask: url('/imgs/1.svg') no-repeat center;
 background-color:#89397b;
 mask-size: 40px;
-webkit-mask-size:40px;
}

.phone:before{
mask: url('/imgs/5.svg') no-repeat center;
-webkit-mask: url('/imgs/5.svg') no-repeat center;
 background-color:#89397b;
 mask-size: 40px;
-webkit-mask-size:40px;
}

.vk:before{
mask: url('/imgs/3.svg') no-repeat center;
-webkit-mask: url('/imgs/3.svg') no-repeat center;
 background-color:#89397b;
 mask-size: 40px;
-webkit-mask-size:40px;
}

.address1:before{
mask: url('/imgs/4.svg') no-repeat center;
-webkit-mask: url('/imgs/4.svg') no-repeat center;
 background-color:#fff;
 mask-size: 28px;
-webkit-mask-size:28px;
}

.address2:before{
mask: url('/imgs/2.svg') no-repeat center;
-webkit-mask: url('/imgs/2.svg') no-repeat center;
 background-color:#f4d93f;
 mask-size: 28px;
-webkit-mask-size:28px;
}

.contact:before{
content:"";


mask-composite: subtract;
-webkit-mask-composite: destination-out;
width: 40px; 
height: 40px; 
    display: inline-block;


}
 
.contacts2 {
font-family: 'Junegull';
padding: 27px 7px;
border-radius:50px;
background:#34172fb5;
}


.address1 {
color:#fff;
font-size: 1.9vw;
}

.address2 {
color:#f4d93f;
font-size: 1.9vw;
}
 
html, body {
    min-height: 100vh;
    height: auto !important;
        }

 


/* 1. Убираем внутренние отступы и границы */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

 
html {
  /* Плавный скролл */
  scroll-behavior: smooth;
  
  /* Предотвращает изменение размера шрифта на iOS */
  -webkit-text-size-adjust: 100%;
}

 
 

/* 5. Убираем подчеркивание у ссылок */
a {
  text-decoration: none;
  color: inherit;
 
  align-items: center;
}

 

/* 7. Изображения responsive  */
.imgadapt {
  max-width: 100%;
  height: auto;
  display: block;
}

.nowraptxt {
    white-space: nowrap;
}

 
/* 9. Предотвращаем перетаскивание изображений */
img {
  -webkit-user-drag: none;
  user-select: none;
  width: 100%;
    height: auto;
}

 
 
/* 11. Базовые настройки для body */
body {
  /* Улучшает рендеринг шрифтов */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
  /* Минимальная высота */
  min-height: 100vh;
  
  /* Строки не разрываются посередине слова */
  line-height: 1.5;
}

 
.copyright {
    text-align: center;
    color: #fff;
    margin-top: 20px;
    font-family: 'DejaVuSans';
}

 
 @media (max-width: 1024px) {
	
 
.contacts {flex-direction: column;}
.vk,  .tg, .phone {font-size: 20px;}

 


}

@media (max-width: 768px) {
	
 .vk,  .tg, .phone, .address1, .address2{font-size: 14px;}



 





.vk:before, .phone:before, .tg:before {
  mask-size: 20px;
    -webkit-mask-size: 20px;
}

.contact:before {
  width: 20px;
    height: 20px;
}

main, body { padding: 20px;}
.logo img {
    width: 90%;
}

.logo {
    top: 34px;
    left: 30px;
}

.kollazh img {
    width: 100%;
}

.address1:before, .address2:before {
    mask-size: 15px;
    -webkit-mask-size: 15px;
}

.contacts2 .contact {
flex-direction: column;
}

}