:root {
  --purple: #A46DAC;
}

.container {
  width: 100%;
  padding: 0 20px;
}

.title22 {
  font-size: 22px;
  line-height: 30px;
  letter-spacing: 0.190em;
  font-weight: 600;
  text-transform: uppercase;
  color: #242424;
  text-align: center;
}

.title32 {
  font-size: 32px;
  font-weight: 300;
  letter-spacing: 0.190em;
  line-height: 30px;
  text-transform: uppercase;
  color: #242424;
  text-align: center;
}

.title65 {
  font-size: 65px;
  line-height: 68px;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.03em;
  color: #242424;
  text-align: center;
}

.title90 {
  font-size: 90px;
  line-height: 110px;
  font-weight: 100;
  text-transform: uppercase;
  color: #242424;
  text-align: center;
}

@media screen and (max-width: 992px) {
  .title22 {
    font-size: 18px;
    padding-bottom: 0;
  }

  .title32 {
    font-size: 25px;
    line-height: 34px;
  }
}

#services {
  position: relative;
  padding-top: 60px;
  text-align: center;
}

#services .categs {
  margin: 26px auto 45px auto;
  gap: 44px;
}

#services .boxes {
  overflow: hidden;
}

#services .box {
  height: 650px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

#services .box .title {
  text-align: center;
  font-size: 26px;
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.19em;
  z-index: 2;
  transition: all 0.2s ease-in;
}

#services .title-text {
  max-width:800px;
}

#services .title-text p {
  font-size:18px;
  line-height:26px;
  letter-spacing: 0.02em;
  font-weight:400;
  color:#1A1A1A;
}

#services .overlay {
  position: absolute;
  inset: 0;
  background: transparent radial-gradient(closest-side at 50% 50%, #FFFFFF 0%, #808080 100%) 0% 0% no-repeat padding-box;
  mix-blend-mode: multiply;
  opacity: 0.8;
  z-index: 2;
}

#services .bg {
  position: absolute;
  background-size: cover;
  inset: 0;
  z-index: 1;
}

#services .box:active>.title,
#services .box:focus>.title,
#services .box:hover>.title {
  opacity: 0;
}

#services .box .hovered {
  transition: all 0.2s ease-in;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 0 15px;
  justify-content: center;
  align-items: center;
  opacity: 0;
  z-index: 3;
}

#services .box .hovered .title {
  color: #fff;
}

#services .box .hovered .text {
  color: #fff;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: 0.15em;
  max-width: 300px;
  margin: 14px 0 21px 0;
}


#services .box .hovered .button {
  height: 45px;
  line-height: 45px;
  background-color: var(--purple);
  font-size: 14px;
  font-weight: 600;
  padding: 3px 22px 0 22px;
  color: #fff;
  border-radius: 70px;
  text-transform: uppercase;
  display:flex;
  align-items:center;
  justify-content:center;
}

#services .box:active .hovered,
#services .box:focus .hovered,
#services .box:hover .hovered {
  opacity: 1;
}

#services .box:active .overlay,
#services .box:focus .overlay,
#services .box:hover .overlay {
  background: #505050;
  transition: all 0.2s ease-in;
  opacity: 1;
}

#services .swiper-scrollbar {
	position: relative;
	left: 0;
	width: 100%;
	max-width: 700px;
	margin: 80px auto 0 auto;
	height: 1px;
	background: #000;
}

#services .swiper-scrollbar-drag {
	top: -2px;
	height: 5px;
	background: #000;
	border-radius: 5px;
	cursor: pointer;
}
@media screen and (max-width: 992px) {
  #services .swiper-scrollbar {
    width: calc(100vw - 40px);
    margin-top: 47px;
    max-width: 350px;
  }
}


@media screen and (max-width: 992px) {
  #services {
    padding-top: 30px;
  }

  #services .categs {
    margin: 30px auto 14px auto;
    gap: 0;
  }

  #services .categ {
    font-size: 14px;
    padding: 0 18px;
    margin-right: 24px;
  }

  #services .categs .categ:nth-child(n+1):not(:last-child)::after {
    right: -15px;
  }

  #services .box {
    height: 422px;
  }

  #services .box .title {
    font-size: 22px;
  }

  #testimonials .swiper-scrollbar {
    width: calc(100vw - 40px);
    margin-top: 47px;
    max-width: 350px;
  }
}
@media screen and (max-width: 567px) {
  #services .title-text p {
    font-size: 14px;
    line-height: 21px;
  }
}

#service-categs {
  margin-top:50px;
}

#service-categs .container {
  max-width: calc(1460px + 40px);
}


#service-categs .inner {
  margin-left:192px;
  padding:84px 0;
}

#service-categs h3 {
  font-weight:500;
  color:#242424;
  font-size:26px;
  line-height:30px;
  letter-spacing: 0.19em;
}

#service-categs .desc {
  font-size:13px;
  line-height:22px;
  letter-spacing: 0.02em;
  font-weight:400;
  color:#1A1A1A;
}

#service-categs .text {
  max-width:510px;
}

#service-categs .procedures {
  margin-bottom:30px;
}

#service-categs .proc-title {
  font-size:15px;
  line-height:30px;
  letter-spacing: 0.19em;
  color:#242424;
  padding-top:25px;
}

#service-categs .item a {
  max-width:300px;
  font-size:13px;
  line-height:18px;
  font-weight:400;
  color:#1A1A1A;
  letter-spacing: 0.02em;
  border-bottom:1px solid #E0E0E0;
  padding:10px 10px;
  background:url(../images/arrow-right2.svg) no-repeat center right 10px;
}

#service-categs .small-image {
  bottom:-15px;
  right:5px;
}

#service-categs .image img {
  box-shadow: 0px 2px 7px 0px rgba(0,0,0,0.25);
}
#service-categs .left-text-right-images {
  justify-content:space-between
}

#service-categs .left-image-right-text {
  background-color:#FBF9F4;
  padding-left:2000px;
  padding-right:2000px;
  margin:0 -2000px 0 -2000px;

}

#service-categs .left-image-right-text .image  {
  margin-left:192px;
  width:calc(50% - 98px);
}

#service-categs .left-image-right-text .image img {
  margin-left:55px;
}

#service-categs .left-image-right-text .text {
  order:1;
}

#service-categs .image .decor {
  width:601px;
  height:514px;
  content:'';
  position:absolute;
  top:-122px;
  background-image:url(../images/waves.svg);
}

#service-categs .left-image-right-text .image .decor {
  left:-272px;
}

#service-categs .left-text-right-images .image .decor {
  right:-100px;
}

@media screen and (max-width: 576px) {
  #service-categs .desc br {
    display:none;
  }
}


#bottom {
	padding:80px 0 60px 0;
	background-color:#fbf9f4;
}

#bottom h3 {
	padding:0;
	margin:0;
	font-weight:600;
	font-family: "Garamond Premier Pro Display";
	font-size:22px !important;
	letter-spacing: 0.19em;
	line-height:30px;
	color:#242424;
	position:relative;
	display:inline-block;
}
#bottom h3 strong {
	letter-spacing: 0.19em;
	font-size:32px;
	font-weight:300;
	color:#1a1a1a;
	font-family: 'Montserrat';
}
#bottom .subtitle p {
	color:#242424;
	font-family: 'Montserrat';
	font-weight:400;
	font-size:18px;
	line-height:26px;
	margin:0 auto;
	padding-top:15px;
	max-width:663px;
}
#bottom .subtitle p a {
	color:#242424;
}
#bottom .button {
	width:236px;
	height:45px;
	line-height:45px;
	border-radius:27px;
	border:1px solid #242424;
	display:inline-block;
	font-size:14px;
	color:#000;
	letter-spacing: 0.04em;
	font-family: 'Montserrat';
	margin:30px 15px;
	font-weight:600;
  padding:0;
}
#bottom .button.button-purple {
	border-color:var(--purple);
	background-color:var(--purple);
	color:#fff;
}

#bottom h3:before {
	position:absolute;
	width:38px;
	height:37px;
	top:-30px;
	left:116px;
	content:'';
	background:url(../images/decor.png);
}

@media screen and (max-width: 576px) {
  #bottom {
    padding:65px 0 50px 0;
  }
  #bottom h3 {
    font-size:18px !important;
  }
  #bottom h3 strong {
    font-size:25px;
  }
  #bottom .subtitle p {
    font-size:13px;
    line-height:18px;
    padding-top:5px;
  }
  #bottom h3:before {
    left:0;
  }
  #bottom .buttons {
    flex-direction: column;
    align-items:center;
  }
  #bottom .button {
    margin:20px 0 0 0;
  }
}

@media screen and (min-width: 768px) {
  #service-categs .left-text-right-images .image .img{
    background:transparent !important;
  }
}


@media screen and (max-width: 1300px) {
  #service-categs .left-text-right-images.inner,
  #service-categs .left-image-right-text .image {
    margin-left:0
  }

  #service-categs .left-text-right-images .text {
    padding-right:20px;
  }

  #service-categs .left-image-right-text {
    justify-content:space-between;
  }
}

@media screen and (max-width: 768px) {
  #service-categs .small-image {
    display:none;
  }

  #service-categs .image {
    order:0 !important;
  }

  #service-categs .text {
    order:1 !important;
  }

  #service-categs #section-1  {
    padding-top:0;
  }

  #service-categs #section-1 .image {
    display:none;
  }

  #service-categs .flex {
    flex-direction: column;
  }

  #service-categs .flex > div {
    width:100%;
  }

  #service-categs .inner {
      padding: 50px 0;
  }

  #service-categs .left-image-right-text {
    margin:0 -50px;
    padding-left:50px;
    padding-right:50px;
    padding-bottom: 70px;
  }

  #service-categs .left-image-right-text .image img {
    margin-left: -70px;
  }

  #service-categs .image .decor {
    width:368px;
    height:315px;
    background-size:100%;
    left:-84px !important;
    top:-13px;
  }

  #service-categs .left-text-right-images .image .decor {
    left: 132px !important;
    top: -171px;
  }

 #service-categs .left-image-right-text .image {
    width:295px;
    margin-top: -95px;
  }

  #service-categs h3 {
    padding-top:10px;
  }

  #service-categs .left-text-right-images {
    padding-bottom:80px;
  }

  #service-categs .left-text-right-images .image img {
    display:none;
  }

  #service-categs .left-text-right-images .img {
    height:206px;
    width:300px;
    box-shadow: 0px 2px 7px 0px rgba(0,0,0,0.25);
    margin-left: 20vw;
    margin-bottom:15px;
    margin-top:-80px;
  }

  #service-categs .inner:last-child {
    padding-bottom: 50px;
} 
}