/**
Нормализация блочной модели
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

/**
  Убираем внутренние отступы слева тегам списков,
  у которых есть атрибут class
*/
:where(ul, ol):where([class]) {
  padding-left: 0;
}

/**
  Убираем внешние отступы body и двум другим тегам,
  у которых есть атрибут class
*/
body,
:where(blockquote, figure):where([class]) {
  margin: 0;
}

/**
  Убираем внешние отступы вертикали нужным тегам,
  у которых есть атрибут class
*/
:where(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  ul,
  ol,
  dl
):where([class]) {
  margin-block: 0;
}

:where(dd[class]) {
  margin-left: 0;
}

:where(fieldset[class]) {
  margin-left: 0;
  padding: 0;
  border: none;
}

/**
  Убираем стандартный маркер маркированному списку,
  у которого есть атрибут class
*/
:where(ul[class]) {
  list-style: none;
}

/**
  Обнуляем вертикальные внешние отступы параграфа,
  объявляем локальную переменную для внешнего отступа вниз,
  чтобы избежать взаимодействие с более сложным селектором
*/
p {
  --paragraphMarginBottom: 24px;

  margin-block: 0;
}

/**
  Внешний отступ вниз для параграфа без атрибута class,
  который расположен не последним среди своих соседних элементов
*/
p:where(:not([class]):not(:last-child)) {
  margin-bottom: var(--paragraphMarginBottom);
}


/**
  Упрощаем работу с изображениями
*/
img {
  display: block;
  max-width: 100%;
  object-fit: contain;
}

/**
  Наследуем свойства шрифт для полей ввода
*/
input,
textarea,
select,
button {
  font: inherit;
}

html {
  /**
    Пригодится в большинстве ситуаций
    (когда, например, нужно будет "прижать" футер к низу сайта)
  */
  height: 100%;
  /**
    Плавный скролл
  */
  scroll-behavior: smooth;
}

body {
  /**
    Пригодится в большинстве ситуаций
    (когда, например, нужно будет "прижать" футер к низу сайта)
  */
  min-height: 100%;
  /**
    Унифицированный интерлиньяж
  */
  line-height: 1.5;
}

/**
  Приводим к единому цвету svg-элементы
*/
svg *[fill] { fill: currentColor }
svg *[stroke] { stroke: currentColor }

/**
  Чиним баг задержки смены цвета при взаимодействии с svg-элементами
*/
svg * {
  transition-property: fill, stroke;
}

/**
  Удаляем все анимации и переходы для людей,
  которые предпочитают их не использовать
*/ 
@media (prefers-reduced-motion: reduce) {
  * {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}
}

@font-face {
  font-family: 'Montserrat';
  src: url(/fonts/Montserrat-Bold.woff2) format(woff2) ;
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url(/fonts/Montserrat-Medium.woff2) format(woff2);
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url(/fonts/Montserrat-Regular.woff2) format(woff2);
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url(/fonts/Montserrat-SemiBold.woff2) format(woff2);
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}




:root{
  --color-green: #204A31;
  --header-height: 60px;
  --container-width: 1280px;
  --container-padding-x: 25px;
}


.background-gold{
  background:linear-gradient(to right,#E0B965,#FFEE94,#D7B15E,#FEDD99,#FFF5B6,#FFF9BC);
}

.background-gold-text{
  background:linear-gradient(to right,#E0B965,#FFEE94,#D7B15E,#FEDD99,#FFF5B6,#FFF9BC);
  color:transparent;
  -webkit-background-clip:text;
}

html::-webkit-scrollbar{
  display: none;
}

body{
  font-family: 'Montserrat';
  color: #000;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.75;
  background-color: var(--color-green);
  /* -webkit-box-shadow: inset 0px 0px 70px 5px #553B26;  */
  box-shadow: inset 0px 0px 43px 31px rgba(85, 59, 38, 1);
}


.container-wide{
  max-width: 1920px;
  margin-inline: auto;
}

.container{
  max-width:  calc(var(--container-width) + var(--container-padding-x) * 2);
  margin-inline: auto;
  padding-inline: var(--container-padding-x);
}

.title{
  font-family: 'Montserrat';
  font-size: clamp(1.563rem, 1.234rem + 1.316vi, 2.813rem);
  font-weight: 700;
}

.button {
  height: 50px;
  width: 255px;
  border-radius: 5px;
  padding: 0;
  margin: 0;
  color: #fff;
  box-shadow: 2px 3px 12px 0px #444444;
}

.button:hover{
  color: #6e6e6e;
  transition: .2s ease;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  border: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  clip-path: inset(100%) !important;
  clip: rect(0 0 0 0) !important;
  overflow: hidden !important;
}

input{
  color: #000;
  background-color: #bebebe;
  opacity: 0.4;
  width: 255px;
  height: 50px;
  padding: 0;
  border: 0;
  text-align: center;
}



/*HEADER START*/
.header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: var(--header-height);
  column-gap: 10px;
  padding: 50px;

}

.header-menu_list{
  display: flex;
  flex-wrap: wrap;
  column-gap: 50px;
}

.header-menu_link{
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  column-gap: 7px;
  height: var(--header-height);
  text-decoration: none;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1.2px;
}

.header-menu_link:hover{
  color: #cbc9c9;
  transition: .2s ease;
}




/*HEADER END*/


/*INTRO START*/

.intro{
  height: 100vh;
  background: url(/images/background-first.png) 50%/cover no-repeat ;
}

.intro-info {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: calc(100vh - 30rem)
}


.intro-title {
  color: #fff;
  font-family: 'Montserrat';
  font-size: clamp(1.813rem, 0.964rem + 2.714vi, 3rem);
  text-align: center;
  font-weight: 600;
  text-shadow: 5px 6px 7px rgba(85, 59, 38, 1);
}

.intro-title span{
  color: #fff;
  font-family: 'Montserrat';
  font-size: clamp(1.25rem, 0.893rem + 1.143vi, 1.75rem);
  text-align: center;
}

.intro-subtitle {
  line-height: 1.2;
  color: #fff;
  font-family: 'Montserrat';
  font-size: clamp(0.938rem, 0.134rem + 2.571vi, 2.063rem);
  text-align: center;
  font-weight: 700;
  text-shadow: 5px 6px 7px rgba(85, 59, 38, 1);
}

.intro-subtitle::after{
  content: "";
  display: block;
  position: absolute;
  right: calc(50% - 20px);
  height: 40px; /*media*/
  margin-top: 20px;
  aspect-ratio: 1;
  background: url('/images/icons/mouse.svg') center/contain no-repeat;
}


.intro-contacts {
  color: #fff;
  display: flex;
  justify-content: space-evenly;
  margin-top: 30px;
}


.intro-contacts-item {
  font-size: clamp(0.625rem, 0.278rem + 1.111vi, 1.25rem);
  font-weight: 400;
  position: relative;
}


.intro-contacts-item:not(:last-child):before {
  content: '';
  position: absolute;
  display: block;
  left: -30px;
  height: 30px; /*MEDIA*/
  width: 30px;  /*MEDIA*/
  background: url(/images/icons/lend/placeholder.svg);
}

.intro-contacts-item:last-child:before {
  content: '';
  position: absolute;
  display: block;
  left: -35px;
  height: 30px;  /*MEDIA*/
  width: 30px;  /*MEDIA*/
  background: url(/images/icons/lend/phone-call.svg);
}





/*INTRO END*/


/*SERVICES START*/

.services-back{
  position: absolute;
  opacity: 0.7;
  z-index: -1;
}

.services-title {
  padding-left: clamp(3.125rem, 2.632rem + 1.97vw, 5rem);
}

.services-info-title-1 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: clamp(2.188rem, 1.859rem + 1.32vw, 3.438rem);
  font-family: 'Montserrat';
  font-size: clamp(0.938rem, 0.609rem + 1.316vi, 2.188rem);
  font-weight: 500;
  color: #fff;
}
.services-info-items {
  display: flex;
  justify-content: space-between;
  font-size: clamp(0.625rem, 0.51rem + 0.46vw, 1.063rem);
  font-family: 'Montserrat';
  font-weight: 400;
  color: #fff;
  gap: clamp(1.25rem, 0.757rem + 1.97vw, 3.125rem);
}
.services-info-items-2 {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  font-size: clamp(0.625rem, 0.51rem + 0.46vw, 1.063rem);
  font-family: 'Montserrat';
  font-weight: 400;
  color: #fff;
  gap: clamp(1.25rem, 0.757rem + 1.97vw, 3.125rem);
}

.services-info-img{
  box-shadow: 10px 10px 20px 0px #000;
  width: 500px;
  height: 500px;
}

.services-info-info {
  position: relative;
  padding-top: 40px;
  margin-bottom: clamp(1.875rem, 1.382rem + 1.97vw, 3.75rem);
}

.services-info-info::before{
  content: '';
  position: absolute;
  top: clamp(-0.125rem, -0.109rem + -0.07vw, -0.188rem);
  background:linear-gradient(to right,#E0B965,#FFEE94,#D7B15E,#FEDD99,#FFF5B6,#FFF9BC);
  height: 2px;
  width: clamp(18.75rem, 7.5rem + 23.438vw, 35.625rem);
}

.services-info-ul{
  list-style: disc;
  margin-bottom: 20px;
}


.services-info-button {
  display: block;
  margin: 0 auto;
  font-size: 16px;
}

/*SERVICES END*/

/*BENEFITS START*/

.benefits-titles {
  display: grid;
  place-content: center;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 15px;
  padding-bottom: clamp(3.75rem, 2.763rem + 3.95vw, 7.5rem);
}

.benefits-title-general{
  padding-left: 80px;
  padding-bottom: 50px;
}

.benefits-image{
  margin: auto;
}

.benefits-title{
  text-align: center;
  font-size: clamp(0.625rem, 0.51rem + 0.46vw, 1.063rem);
  font-family: 'Montserrat';
  font-weight: 400;
  color: #fff;
  margin-top: clamp(0.313rem, 0.156rem + 0.63vw, 0.625rem);
}

/*BENEFITS END*/

/*ABOUT US START*/

.about-us {
  padding-bottom: 200px;
}

.about-us-title {
  padding-left: 80px;
  margin-bottom: 65px;
}

.about-us-info {
  color: #fff;
  font-weight: 500;
  font-size: clamp(0.813rem, 0.33rem + 1.288vi, 1.875rem);
  font-family: 'Montserrat';

}

/*ABOUT US END*/

/*REQUEST START*/

.request{
  height: 60vh;
  background: url(/images/request-back.jpg) center/cover no-repeat;
}

.req1{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px ;
}

.req1 p{
  font-size: 13px;
  color: #fff;
}

.request-title {
  padding-left: 70px;
  padding-bottom: 100px;
  padding-top: 35px;
}

.request-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 30px;
  margin: 0 90px 0 90px;
}
.request-text {
  color: #fff;
}

.request-text p{
  position: relative;
  height: 100%;
}

.request-text p::after{
  content: "Згідно з Оксфордським словником ";
  position: absolute;
  font-style: italic;
  top: 80px;
  right: 0;
}

.request-form p{
  width: 255px;
  height: 50px;
  text-align: center;
}
.request-button {
  margin-bottom: 30px;
}

.request-form-info p{
  font-size: 13px;
  color: #fff;
}
/*REQUEST END*/


/*GOOGLE MAP START*/

.google-map{
  display: flex;
  justify-content: center;
  align-items: center;
}

.google-map-title{
  margin-top: 50px;
  margin-bottom: 50px;
}

.map{
  box-shadow: 2px 2px 15px 2px #000;
  width: clamp(18.75rem, 1.875rem + 67.5vw, 69.375rem);
  height: clamp(12.5rem, 9.167rem + 13.33vw, 22.5rem);
}



/*GOOGLE MAP END*/


/*footer start*/

.footer{
  margin-top: 70px;
  padding-bottom: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-nav-link:hover {
  color: #6e6e6e;
  transition: .2s ease;
}
.footer-nav-link {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
}

.footer-items {
  color: #fff;
  font-size: 14px;
  font-weight: 400;
}

.footer-items span{
  font-weight: 500;
  background:linear-gradient(to right,#E0B965,#FFEE94,#D7B15E,#FEDD99,#FFF5B6,#FFF9BC);
  color:transparent;
  -webkit-background-clip:text;
}


.footer-icons {
  display: flex;
  gap: 20px;
  margin-top: 30px;
}


/*footer end*/



/*MEDIA*/

@media (max-width: 1200px){
  body{
    box-shadow: none;
  }
  
  .title{
    text-align: center;
    padding-left: 0;
  }
  .services-info-info{
    padding-bottom: 20px;
  }
  .services-info-img {
    width: 400px;
    height: 400px;
  }
  .header-menu{
    display: none;
  }
  .header-logo{
    margin: 0 auto;
  }
  .intro-subtitle::after{
    height: 35px;
    width: 35px;
    margin-top: 10px;
  }
  .services-info-title-1{
    max-width: 500px;
    text-align: center;
    margin: 0 auto;
  }
  .services-info-items{
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .services-info-items-2{
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .benefits-titles{
    grid-template-columns: repeat(3, 1fr)
  }
  .benefits-titles li{
    margin-bottom: 10px;
  }
  .about-us-info{
    margin-right: 20px;
    margin-left: 20px;
  }
  .request-info{
    flex-direction: column-reverse;
    align-items: center;
  }
  .request-title{
    padding-bottom: 40px;
  }
  .request-text{
    opacity: 0.7;
    font-size: 14px;
  }
  .footer-nav-link{
    font-size: 12px;
  }
  .footer-items{
    font-size: 12px;
  }
}

@media (max-width:768px){
  input{
    font-size: 14px;
  }
  .intro-contacts{
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 30px;
    line-height: 1.5;
    margin-bottom: 0;
  }
  .intro-contacts-item:last-child:before{
    left: -20px;
    width: 18px;
    height: 18px;
    background: url(/images/icons/lend/small-phone-call.svg) ;
  }
  .intro-contacts-item:not(:last-child):before{
    left: -20px;
    width: 17px;
    height: 17px;
    background: url(/images/icons/lend/small-placeholder.svg) ;
  }
  .services-info-img {
    width: 250px;
    height: 250px;
  }

  .benefits-titles{
    grid-template-columns: repeat(1, 1fr);
    padding-bottom: 30px;
    
  }
  .benefits-titles li{
    margin-bottom: 30px;
  }
  .about-us{
    padding-bottom: 100px;
  }
  .request{
    height: 100%;
  }
  .request-text{
    display: none;
  }
  .req1{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
  }
  .request-form{
    gap: 20px;
  }
  .request-form-info{
    flex-direction: column-reverse;
    gap: 10px;
  }
  .footer{
    flex-direction: column-reverse;
    gap: 20px;
    text-align: center;
    margin-top: 30px;
  }
  .footer-nav{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    align-items: center;
    justify-content: center;
    line-height: 1.2; 
  }
  .footer-icons{
    justify-content: center;
    margin-top: 10px;
  }

}