@font-face {
   font-family: 'Ruberoid';
   src: url('../Ruberoid-Light.ttf') format('truetype');
   font-weight: 300;
   font-style: normal;
}

@font-face {
   font-family: 'Ruberoid';
   src: url('../Ruberoid-Medium.ttf') format('truetype');
   font-weight: 400;
   font-style: normal;
}

@font-face {
   font-family: 'Ruberoid';
   src: url('../Ruberoid-Bold.ttf') format('truetype');
   font-weight: 700;
   font-style: normal;
}

@font-face {
   font-family: 'Ruberoid';
   src: url('../Ruberoid-ExtraBold.ttf') format('truetype');
   font-weight: 900;
   font-style: normal;
}


/* REGULAR (400) */
@font-face {
    font-family: 'UAF Sans';
    src: url('../fonts/UAFSans-Regular.woff2') format('woff2'),
         url('../fonts/UAFSans-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* MEDIUM (500) */
@font-face {
    font-family: 'UAF Sans';
    src: url('../fonts/UAFSans-Medium.woff2') format('woff2'),
         url('../fonts/UAFSans-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* SEMIBOLD (600) */
@font-face {
    font-family: 'UAF Sans';
    src: url('../fonts/UAFSans-SemiBold.woff2') format('woff2'),
         url('../fonts/UAFSans-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* BOLD (700) */
@font-face {
    font-family: 'UAF Sans';
    src: url('../fonts/UAFSans-Bold.woff2') format('woff2'),
         url('../fonts/UAFSans-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.lazy-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}

.lazy-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}


header {
  position: sticky;
  top: 0;
  z-index: 1000;

  display: flex;
  justify-content: space-between;
  padding: 0 64px;
  align-items: center;
  height: 100px;
  background-color: #942d2c;
  opacity: 1;
}

header .logo {
display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  aspect-ratio: 1/1;
  width: 190px; 
  top: 30px;
  margin-top: 100px;
}

header .logo img {
   width: 100%;
}

header .telegram {
   height: fit-content;
   margin-left: 150px;
}

header .telegram a {
   display: flex;
   gap: 5px;
}

header .telegram span, header .telegram span::before {
   color: black;
   font-size: 20px;
   font-family: UAF Sans, sans-serif;
   /*font-weight: 400;*/
   text-transform: uppercase;
   display: flex;
   align-items: center;
}
 
header .telegram img {
   filter: invert(90%);
}

header .contact {
   font-family: UAF Sans, sans-serif;
   width: fit-content;
   border-bottom: 2px solid black;
}

ul.mymenu  {
  display: flex;
  justify-content: center;  
  list-style: none;      
  padding: 0;
  margin: 0;
}

ul.mymenu  li a{
  margin: 0 15px;       
   color:#ffeebc;  
   font-family: UAF Sans, serif;
   font-size:24px;
} 

.dc9 {
	color:#ffeebc;
}

.button-link {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 260px;
   height: 60px;
   border-radius: 100px;
   border: 1px #ffeebc solid;
   color: black;
   text-align: center;
   position: relative;
   text-decoration: none;
   transition: border-color 0.1s, color 0.1s;
}

 .dog-tag {
  position: relative;
  padding: 18px 52px;
  font-size: 18px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #2a2a2a;

  background: linear-gradient(
    145deg,
    #e3e3e3,
    #bcbcbc,
    #efefef
  );

  border: none;
  cursor: pointer;

  /* Скошені кути */
  clip-path: polygon(
    12px 0,
    calc(100% - 12px) 0,
    100% 12px,
    100% calc(100% - 12px),
    calc(100% - 12px) 100%,
    12px 100%,
    0 calc(100% - 12px),
    0 12px
  );

 

  transition: transform .15s ease, box-shadow .15s ease;
}

/* Отвір */
.dog-tag::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 16px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #777;
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.6),
    0 1px 1px rgba(255,255,255,.6);
}
 

/* Hover / Active */
.dog-tag:hover {
  font-weight:bold;
}

.dog-tag:active {
font-weight:bold;
}



.all-vacancies-buttons img {
	
	height: 40px;
	
}



.button-link span {
   color: inherit;
   font-size: 20px;
   font-family: UAF Sans, sans-serif;
   font-weight: 400;
   text-transform: uppercase;
   color:#ffeebc;
}


 


@media (max-width: 900px) {

   .button-link {
      display: none;
   }
}

@media (max-width: 630px) {
   header .telegram span.text::before {
      content: "";
      font-size: 15px;
   }

   header .telegram span {
      font-size: 15px;
   }
}


section#s-1 {
   display: flex;
   justify-content: end;
   position: relative;
   width: 100%;
   height: calc(100svh - 100px);
   background-image: url("../imgs/back.png");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;

}

section#s-1 .back-img {
   
   position: relative;
   display: flex;
   overflow: hidden;
   width: 80%;
   height: 100%;
   background-image: url("../imgs/1000х1000-3.png");
   /*background-size: contain;*/
   background-position: right;
   background-repeat: no-repeat;
}

section#s-1 .back-img img {
   display: none;


}



@media (max-width: 472px) {
	
	.all-vacancies-buttons img {
	 
	 margin-top:15px;
	
}

   header {
      height: 70px;
      padding: 0;
      justify-content: center;
   }

header .logo { 
  margin-top: 0px;
}

   header .telegram img {
      width: 40px;
   }

}


section#s-1 .banner-text {
   width: 756px;
   line-height: 1.2em;
   position: absolute;
   top: 30%;
   left: 64px;
   color: #ffeebc;
   font-size: 64px;
   font-family: "UAF Sans";
   font-weight: 700;
   text-transform: uppercase;
   word-wrap: break-word; 
}

section#s-1 .button-link-center {
   display: flex;
   align-items: center;
   justify-content: center; 
   background: #772927; 
   text-align: center;
   margin: 20px auto;
   text-decoration: none;
   color: #ffeebc;
   font-size: 24px;
   font-family: UAF Sans, sans-serif; 
   text-transform: uppercase;
   position: absolute;
   top: 75%;
   left: 64px;
   text-decoration: none;
   transition: ease 0.2s;
}

@media (max-width: 768px) {
   section#s-1 .back-img {
      width: 100%;
      background-size: 125%;
      background-position: center 140px;
      background-repeat: no-repeat;
   }
}


@media (max-width: 768px) and (max-aspect-ratio: 10/9) {
   section#s-1 {
      height: calc(100svh - 100px);
   }
}

@media (max-width: 844px) and (min-aspect-ratio: 4/3) {
   section#s-1 {
      height: 680px;
   }
}

@media (max-width: 472px) {
   section#s-1 {
      height: calc(100svh - 70px);
   }

   section#s-1 .back-img {
     /* background-position: center 60px;*/
   }
}

section#s-2 {
   background: rgba(20, 21, 25, 1);
   padding-inline: 64px;
   padding-block: 30px;
   height: fit-content;
   display: flex;
   flex-direction: column;
   position: relative;
}

section#s-2 .vacancies-title {
   color: #ffeebc;
   text-align:center;
   font-size: 48px;
   font-family: UAF Sans, serif;
   font-weight: 600;
   text-transform: uppercase;
   margin:0 auto;
   margin-bottom: 50px;
   position: relative;
   width: fit-content;
}

section#s-2 .vacancie-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
}

section#s-2 .vacancie-wrapper .vacancies-buttons {
   display: flex;
   gap: 20px;
   position: relative;
   justify-content: center;
   width: fit-content;
   flex-wrap: wrap;
   max-width: 1325px;
}

section#s-2 .vacancie-wrapper .vacancies-buttons .vacancy-button {
background: #7a2a29!important;
  width: 312px;
  height: 80px; 
  display: flex;
  align-items: center;
  box-sizing: border-box;
  justify-content: center;
  text-decoration: none;
  color: #ccbd93;
  padding-inline: 35px;
  font-size: 24px; 
}

section#s-2 .vacancie-wrapper .vacancies-buttons .vacancy-button span {
   font-size: inherit;
   font-family: UAF Sans, serif;
   font-weight: 400;
   text-transform: uppercase;
   text-align: center;
}


section#s-2 .vacancy2 { 
    align-items: center; 
}

.all-vacancies-buttons{
margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    font-family: 'UAF Sans';
}

.all-vacancies-buttons a{ 
color: #fff;
    font-size: 32px;
}

.vacancy2 h3 {
	text-align: center;
    font-size: 30px;
    font-family: 'RUBEROID';
    margin-top: 50px;
    color: #babd93; 
	margin-top:65px;
}

.vac-subheader {
	text-align: center;
    font-size: 30px;
    font-family: 'RUBEROID';
    margin-top: 50px;
    color: #babd93;
	margin-bottom:15px;
	font-weight:normal;
}

section#s-3 {
   padding: 100px 0 100px 0;
   height: fit-content;
   background-color: #464646;
}

section#s-3 .faq-title {
   margin-bottom: 50px;
   text-transform: uppercase;
   margin-left: 64px;
}

section#s-3 .faq-title h2 {
font-family: UAF Sans;
  color: #dc9;
  font-size: 48px;
  font-weight: 900;
  margin: 0 auto;
  text-align: center;
}

section#s-3 .faq-questions-wrapper {
   display: flex;
   justify-content: center;
}

section#s-3 .faq-questions {
   display: flex;
   flex-direction: column;
   width: 900px;
}

section#s-3 .faq-questions .faq-item {
   width: 100%;
   height: 100%;
   max-height: 80px;
   overflow: hidden;
   margin-bottom: 30px;
   border-bottom: 2px solid black;
   transition: max-height 0.2s ease;
}

section#s-3 .faq-questions .faq-item .faq-switcher {
   background: #464646;
   border: none;
   cursor: pointer;
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: 70px;
   margin-bottom: 20px;
}

section#s-3 .faq-questions .faq-item .faq-switcher .faq-question-title {
   width: fit-content;
   font-family: UAF Sans, serif;
   font-size: 24px;
   font-weight: 900;
   text-transform: uppercase;
   overflow-wrap: break-word;
   color:#ccc8c8;
}

section#s-3 .faq-questions .faq-item .faq-switcher .faq-question-icon {
   position: relative;
   width: 30px;
   height: 30px;
   background: url('../imgs/plus.svg') no-repeat center center;
   background-size: auto;
   background-size: contain;
   transition: 0.3s ease;
   margin-left: 30px;
}

section#s-3 .faq-questions .faq-item.active .faq-question-icon {
   transform: rotate(135deg);
}

section#s-3 .faq-questions .faq-text-wrapper {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.3s ease;
}

section#s-3 .faq-questions .faq-item.active .faq-text-wrapper {
   max-height: 500px; /* Приклад висоти, підлаштуйте під текст */
}

section#s-3 .faq-questions .faq-item.active {
   max-height: inherit;
}

section#s-3 .faq-questions .faq-item .faq-text-wrapper .faq-text {
   font-family: UAF Sans;
   font-size: 20px;
   margin-bottom: 20px;
   padding-left: 8px;
   color: #ccc8c8;
}

section#s-4 {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
}

section#s-4 .photo {
   position: unset !important;
   width: 100% !important;
   font-size: 0;
   line-height: 0;
   display: block;
}

section#s-4 .photo img {
   width: 100% !important;
   height: 100% !important;
   object-fit: cover !important;
}

section#s-4 .about-us {
   display: flex;
   flex-direction: column;
   padding-inline: 50px;
   padding-block: 30px;
   background-color: #464646;
}

section#s-4 .about-us .about-us-title {
   font-family: UAF Sans;
   font-weight: 900;
   text-transform: uppercase;
   color: #ffeebc;
   font-size: 48px;
   margin-bottom: 60px;
}

section#s-4 .about-us .about-us-description {
   font-family: UAF Sans;
   font-weight: normal;
   color: #ccc8c8;
   font-size: 20px;
   margin-bottom: 60px;
   width: fit-content;
}

section#s-4 .about-us .about-us-button {
   width: fit-content;
   height: fit-content;
}

section#s-4 .about-us .about-us-button-link {
display: flex;  
  background: #772927; 
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: #ffeebc;
  font-size: 24px;
  font-family: UAF Sans, sans-serif; 
  text-transform: uppercase;
  text-align: center;
}

section#s-5 {
   padding-inline: 64px;
   padding-block: 40px;
   height: fit-content; 
   display: flex;
   justify-content: center;
   align-items: center;
   align-content: center;
}

.help-block {
width: 100%;
  height: calc(100svh - 100px);
  background-image: url("../imgs/back.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}



section#s-5 .requisites-wrapper {
   align-items: baseline;
   display: flex;
   flex-wrap: wrap;
   /*flex-direction: column;*/
   width: 100%;
   /*max-width: 1600px;*/
}


section#s-5 .faq-title{
   width: 100%;
   font-family: UAF Sans;
   font-size: 48px;
   font-weight: 900;
   margin-bottom: 50px;
   text-transform: uppercase;
   margin-left: 45px;
   color: #ffeebc;
   margin:0 auto;
   text-align:center;
}

section#s-5 .faq-title h2 {
   width: 100%;
}

section#s-5 .requisites-bottom-section {
   width: 100%;
   padding: 45px;
   display: flex;
   justify-content: center;
   align-content: center;
   align-items: center;
}

section#s-5 .requisites-bottom-section .requisites-wrapper {
   width: 100%;
   display: flex;
   gap: 50px;
   /*justify-content: space-between;*/
}

section#s-5 .requisites-bottom-section .requisites-wrapper .requisites-half {
   width: fit-content;
   display: flex;
   width: 45%;
   flex-direction: column; 
}

section#s-5 .requisites-bottom-section .requisites-wrapper .requisites-half .about-us-description {
   font-family: UAF Sans;
   font-weight: normal;
   color: #141519;
   font-size: 20px;
   margin-bottom: 60px;
   width: fit-content; 
   color:#fff;
}

.link-container {
   position: relative; 
 }

.copy-link {
   text-decoration: none;
   cursor: pointer;   
 }
 
 .copy-icon {
   background: none;
   border: none;
   cursor: pointer;
   font-size: 18px;
   display:none;
 }

 .copy-message {
   position: absolute;
   bottom: -40px;
   left: 0;
   background: #141519;
   color: #169771;
   padding: 5px 10px;
   border-radius: 5px;
   /*font-size: 14px;*/
   display: none;
 }

section#s-5 .requisites-bottom-section .requisites-wrapper .requisites-half .about-us-description a { 
   color:#fff;
}

section#s-5 .requisites-bottom-section .requisites-wrapper .requisites-half .about-us-description .requisites {
   margin-right: 5px;
}

.requisites {
   color: #fff;
   margin-top: 5px; 
   margin-bottom: 15px;
   width: max-content !important;
   transition: ease 0.2s;
   font-size: 20px;
}

.description {
   max-width: 500px;
   word-wrap: break-word;
   overflow-wrap: break-word;
}

footer {
   background-color: #141519;
   height: fit-content;
   padding-inline: 60px;
   padding-block: 100px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
   align-content: center;
}

.footer-logo {
   margin: auto 0;
}

.footer-logo img {
   width: 150px;
   border: 0;
   /*width: 100%;*/
   max-width: 300px;
   height: auto;
}

.footer-social-medias {

   display: flex;
   justify-content: center;
   margin: 10px 0;
   gap: 25px;
}

.footer-social-medias svg {
   color: #912d2d;

}
/*sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%)*/

.footer-social-media-img {
   width: 40px;
   height: 40px; 
}

.header-social-media-img {
   width: 20px;
   height: 20px; 
}

.footer-copyright {
   text-align: center;
   padding: 20px 0;
   font-size: 14px;
   color: #777;
   margin-top: auto;
   font-family: 'UAF Sans';
}	


.recrut  { 
	 font-family: Inter;
	 margin: 0 auto;
    font-size: 150%;
	text-align: center;
  color: #fff;
line-height:1.5em;
}





@media (max-width: 1400px) {
header .telegram { 
  margin-left: 0px;
}
}

@media (max-width: 1920px) {

   @media (max-width: 1200px) {
      section#s-3 .faq-title {
        margin-left: 0;
        font-family: 'UAF Sans';
		font-weight: 700;
        display: flex;
        align-items: center;
        font-style: normal;
        padding-top: 10%;
        margin-bottom: 5px;
        justify-content: space-between;
      }

      section#s-5 .requisites-wrapper {
         display: flex;
         flex-direction: column;
         gap: 0px;
      }

      section#s-5 .faq-title h2 {
         margin-left: 0;
         font-family: 'UAF Sans'; 
         align-items: center;
         font-style: normal; 
         margin-bottom: 5px;
         justify-content: space-between;
      }

      section#s-5 .requisites-bottom-section .requisites-wrapper {
         display: flex;
         flex-direction: column;
         gap: 0px;
      }




   }

   @media (max-width: 1075px) {
      .vacancies-container {
        justify-content: center;
        align-content: center;
        align-items: center;
      }

      section#s-3 {
         padding-inline: 64px;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-content: center;
         align-items: center;
      }

      section#s-3 .faq-questions {
         width: 100%;
      }

      section#s-5 .requisites-bottom-section {
         padding: 0;
      }

   }

   @media (max-width: 1031px) {
      section#s-4 .about-us .about-us-description {
         font-size: 18px;
      }
   }

   @media (max-width: 928px) {
      /*section#s-1 {
          background: url(../imgs/1000х1000.png) no-repeat 45%;
          
      }*/

      header .telegram {
         margin: 0;
      }
      
      section#s-1 .banner-text {
         width: fit-content;
         font-size: 48px;
      }

   }

   @media (max-width: 768px) {
	   
 
.recrut { 

  font-size: 100%; 
}

      section#s-1 .banner-text, section#s-1 .button-link-center  {
         left: 40px;
      }

      section#s-2 {
         padding-inline: 40px;
      }

      section#s-3 {
         padding-inline: 40px;
      }

      section#s-3 .faq-title {
        margin-left: 0;
        font-family: 'UAF Sans-Bold';
        display: flex;
        align-items: center;
        font-style: normal;
        padding-top: 10%;
        margin-bottom: 5px;
        justify-content: space-between;
        font-size: 32px;
      }

      section#s-4 {
         display: flex;
         flex-direction: column;
      }

      section#s-4 .about-us {
         justify-content: center;
         align-items: center;
         align-content: center;
      }

      section#s-5 {
         padding: 40px;
      }

      section#s-5 .faq-title {
         font-size: 32px;
         margin-left: 0;
      }

      section#s-5 .requisites-bottom-section {
         padding: 0;

      }

      section#s-5 .requisites-bottom-section .requisites-wrapper .requisites-half {
         width: 100%;
      }


      section#s-5 .requisites-bottom-section .requisites-wrapper .requisites-half .about-us-description {
         font-size: 18px;
         max-width: 400px;
      }

   }

   @media (max-width: 654px) {
      section#s-3 .faq-title {
        margin-left: 0;
        font-family: 'UAF Sans';
        font-size: 32px;
        display: flex;
        align-items: center;
        font-style: normal;
        padding-top: 10%;
        margin-bottom: 5px;
        justify-content: space-between;
      }

      section#s-3 .faq-questions .faq-item .faq-switcher .faq-question-title {
         font-size: 16px;
      }

      section#s-3 .faq-questions .faq-item .faq-text-wrapper .faq-text {
         font-size: 16px;
      }

      section#s-4 .about-us .about-us-description {
         font-size: 13px;
      }

      section#s-5 .requisites-bottom-section .requisites-wrapper {
         gap: 0;
		 text-align: center;
      }

   }

   @media (max-width: 651px) {
      section#s-3 {
        padding: 0px 18px 30px 18px;
      }

      section#s-3 .faq-questions .faq-item {
         max-height: 50px;
      }

      section#s-3 .faq-questions .faq-item .faq-switcher {
         height: 40px;
      }
   }

   @media (max-width: 537px) {
      section#s-4 .about-us .about-us-description {
        max-width: 400px;
		font-size: 14px;
      line-height: 1.5em;
      }
   }

   @media (max-width: 472px) {
	   
	   .vac-subheader { 
    margin-top: 10px; 
}

section#s-4 .about-us .about-us-title { 
  margin-bottom: 20px;
}
	   
	   #header-socials {
		   display:none;
	   }
	   
	   h2 {
		   font-size:32px;
		   text-align:center;
	   }
	   
	   .all-vacancies-buttons a{ 
	  margin-right:20px; 
	   }
	   
	   .all-vacancies-buttons { 
	   display: block;
	    text-align: center;
	   }
	   
	   ul.mymenu li a {
  margin: 0 5px;
  color: #dc9;
  font-family: UAF Sans, serif;
  font-size: 14px;
}

header .logo { 
  width: 60px; 
  margin-right:20px;
}
	   
      section#s-1 {
         align-content: center;
         align-items: center;
         justify-content: center;
         /*height: 600px !important;*/
         background-size: cover;
      }

      section#s-1 .banner-text {
         width: 100%;
         font-size: 30px;
         text-align: center;
         top: 10%;
         left: 0;
      }

      section#s-1 .button-link-center {
         /*top: 390px;*/
         left: 50%;
         transform: translateX(-50%);
         /*position: relative;*/
      }

      section#s-2 .vacancies-title {
         font-size: 24px;
         width: 100%;
      }

      section#s-2 .vacancies-title h2 {
         text-align: center;
      }

      section#s-2 .vacancie-wrapper .vacancies-buttons .vacancy-button {
         width: 280px;
         height: 70px;
       }

       section#s-2 .vacancie-wrapper .vacancies-buttons .vacancy-button span {
         font-size: 20px;
      }

      section#s-3 .faq-questions .faq-item .faq-switcher .faq-question-title {
         font-size: 11px;
      }

      section#s-3 .faq-questions .faq-item .faq-switcher .faq-question-icon {
         width: 23px;
         height: 23px;
      }

      section#s-3 .faq-questions .faq-item .faq-text-wrapper .faq-text {
         font-size: 12px;
      }

      section#s-5 {
         overflow-x: hidden;
      }

      section#s-5 .faq-title {
         font-size: 30px;
         margin: 0;
		 margin-bottom: 20px;
      }

      section#s-5 .requisites-bottom-section {
         padding: 0;
      }

      section#s-5 .requisites-bottom-section .requisites-wrapper .requisites-half {
         width: 100%;
      }

      section#s-5 .requisites-bottom-section .requisites-wrapper .requisites-half .about-us-description  {
         max-width: 280px;
		 margin: 0 auto;
    margin-bottom: 0px;
      margin-bottom: 30px;
      }

      .footer-logo {
         margin-top: auto;
         margin-bottom: auto;
      }

      .footer-social-medias {
         display: flex;
         justify-content: center;
         margin: 10px 0;
         gap: 25px;
      }

      .footer-social-media-img {
         width: 25px;
         height: 25px;
      }

      .footer-logo img {
         width: 150px;
         height: 150px;
      }

  }

   @media (max-width: 400px) {
      section#s-4 .about-us .about-us-description {
        max-width: 320px;
      }
   }

}