@import url('https://fonts.googleapis.com/css2?family=Onest:wght@100..900&display=swap');
@media (-webkit-min-device-pixel-ratio: 2) {
  body {
    text-rendering: optimizeSpeed; /* Отключает сглаживание, фиксируя размер */
  }
}


:root{
  --color-bg-main: #f2f2f2;
  --color-brand-blue: #0095ff;
  --color-brand-dark: #242424;
  --color-white: #ffffff;
}

html {
  font-size: inherit;
  line-height: normal;
  text-size-adjust: none;
  -webkit-font-smoothing: subpixel-antialiased;
}

body {
  font-family: "Onest", serif;
  font-style: normal;
  margin: 0 0;
  background-color: var(--color-bg-main);
  overflow-x: hidden;
  
}

div, p, input, button, form, span, a, ul, li {
  box-sizing: border-box;
}

h1, h2, h3, h4, h5 {
  margin: 0;
}

.case-desc, .paragraph, .text-main{
  font-size: 1.6vw;
  font-weight: 450;
  line-height: 150%;
  letter-spacing: -0.04vw;
  color: var(--color-brand-dark);
  margin: 0 0;
  text-decoration: none;
}

.nav .text-main:hover,
.step .text-main,
.location .text-main,
.cta-button .text-main:hover,
.process .text-main,
.services-side .text-main,
.case-name-container .text-main {
  opacity: 36%;
}

.services-side .text-main {
  padding-left: 3vw;
  padding-top: 6vw;
}

.process-title .text-main {
  text-align:end;
}

.nav .text-main,
.cta-button .text-main {
  transition: opacity 0.3s;
}

.cta-button .text-main {
  color: var(--color-white);
}

.hero-info .text-main {
  margin: 0.6vw 0;
}

.footer-info .text-main,
.hero-info .text-main {
  text-align: right;
}

section {
  padding-bottom: 14vw;
}

main {
  margin-top: 7.4vw;
}

.container {
  width: 97%;
  margin: 0 auto;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1vw;
  gap: 0.8vw;
}


.logo {

  display:flex;
  padding: 1.3vw 2.4vw;
}

.logo-icon{
  width:9.5vw;
  
}

.logo, .nav, .cta-button {
  background-color: var(--color-white);
  border-radius:4vw;
}

.button {
  text-decoration: none;
}



.nav {
  flex-grow: 1;
  padding: 1.4vw 1vw;
}

.nav-list {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: space-evenly;
  align-items: center; /* Добавлено */
  margin: 0;
}

.nav-item {
  max-height: 3vw;
  overflow: hidden; /* Добавлено */
  box-sizing: border-box; /* Добавлено */
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
}



.cta-button {
  display:flex;
  background-color: var(--color-brand-dark);
  color: var(--color-white);
  padding: 1.4vw 3vw;
  text-decoration: none;
  gap: 0.6vw;
  align-items:flex-end;
}

.cta-button-icon {

  width: 1vw;
  margin-bottom:0.55vw;
}





.header.mobile {
  display: none;
}

.hero .container {
  background-color: var(--color-white);
  border-radius: 4vw;
  margin-top: 4vw;
}

.location {
  display: flex;
  justify-content: space-between;
  padding: 30px 30px;
}



.location-icon{
  width: 20vw;
}

.hero-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 3vw 3vw;
}

.hero-title {
  display: flex;
  align-items: flex-end;
  gap: 1vw;
}

.team-title, .hero-text {
  font-size: 6vw;
  line-height: 100%;
  letter-spacing: -0.1vw;
  font-weight: 500;
}


.hero-icon {
  height: 3.4vw;
  margin-bottom: 0.8vw;
}



.cakeboy{
  display:flex;
  flex-direction: column;
  gap:0.8vw;
}

.case-image {
  width: 60vw;
  height: 35vw;
  border-radius: 4vw;
  object-fit: cover;
}

.case-container{
  display:flex;
  flex-direction: row;
  gap:3vw;
}



.case-name-container{
  display:flex;
  flex-direction: column;
  flex-wrap:nowrap;
  justify-content: center;
}



/*.about-title {
  font-size: 2.5vw;
  font-weight: 500;
  letter-spacing: -1.5px;
  padding-left: 60px;
} ?????? */

.about_grid {
  padding-top: 2vw;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8vw;
}

.feature {
  padding: 3vw;
  border-radius: 4vw;
  display: flex;
  flex-direction: column;
  gap: 2vw;
}

.feature_header {
  font-size: 4.4vw;
  font-weight: 500;
  letter-spacing: -0.08vw;
  line-height: 120%;
  margin-bottom: 2vw;
}

.feature_text {
  font-size: 2.5vw;
  font-weight: 450;
  letter-spacing: -0.06vw;
  line-height: 150%;
  margin: 2vw 0;
}



.team-title {
  padding: 0 3vw;
  color: var(--color-brand-dark);
}


.scroll {
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	width: 100%;
	height: 35vw;
	padding: 0 4.5vw;
	margin: 3vw 0;
	cursor: default;
	overflow: scroll hidden;
	scroll-snap-type: x mandatory;
	scroll-padding: 0px 1.25rem;
	scrollbar-width: none;
}

.truncate {
  width: 12vw;
  margin: 0 0;
  opacity:36%;
}

.card {
    display: flex;
    align-items: center;
    user-select: none;
    gap: 3vw;
}

.responsive {
  width: 32vw;
  border-radius: 4vw;
}

.card-inner {
    display: flex;
    flex-direction: column;
    padding-right: 42vw;
}





.process-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 3vw;
}




.process-steps {
  display:flex;
  flex-direction: column;
  padding-top: 2vw;
  gap:0.8vw;
}

.step {
  border-radius: 4vw;
}

.step-wrapper {
  display: flex;
  flex-direction: column;
  padding: 3vw 3vw;
  gap: 2vw;
}

.step-header {
  display: flex;
  justify-content: space-between;
  padding-bottom:2vw;
}

.step-title {
  font-size: 4.4vw;
  font-weight: 500;
  letter-spacing: -0.08vw;
  line-height: 120%;
  width: 50%;
}



.step-description {
  font-size: 2.5vw;
  font-weight: 450;
  letter-spacing: -0.06vw;
  line-height: 150%;
  width: 50%;
  text-align: left;
  margin: 0;
}

.tab-content {
  display: none;
  gap: 0.8vw;
}

.services-side{
width:42vw;
}

.section-title, .services-button, .case-title, .text-title{
  font-size: 2.5vw;
  font-weight: 450;
  letter-spacing: -0.06vw;
  line-height: 150%;

  color: #242424;
}

.section-title{
  padding: 0 3vw;
}



.services-main {
  display:flex;
  flex-direction:column;
  gap:2vw;

}





.services .container {
  display: flex;
  justify-content: space-between;
}

.services-button {
  border: none;
  cursor: pointer;
  background-color: #ffffff00
}

.services-button.active {
  color: #0095FF;
  background-color: #ffffff00
}

.services-tab {
  display:flex;
  padding: 0 3vw;
  justify-content:space-between;
}

.services-list{
  width:64vw;
  gap: 1vw;
}

.service-header {
  display: flex;
  align-items: center;
  justify-content:space-between;
  padding-bottom: 6vw;
}

.service {
  padding: 3vw 3vw 4vw 3vw;
  border-radius: 4vw  !important;
  
  overflow: hidden  !important; /* Важно для дочерних элементов */
}



.service-title {
  font-size: 4.4vw;
  font-weight: 500;
  letter-spacing: -0.08vw;
  line-height: 120%;
  margin:0;
}

.service-price {
  font-size: 2.5vw;
  font-weight: 450;
  letter-spacing: -0.05px;
  line-height: 150%;
  opacity: 36%;
  margin:0;
}

.service-description {
  font-size: 2.5vw;
  font-weight: 450;
  letter-spacing: -0.06vw;
  line-height: 150%;
  color: #242424;

  margin: 0;

}



.webcare-wrapper {
  
  
  border-radius: 60px;
}

.webcare-linkbox{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.webcare-wrapper .service-description {
  margin: 0;
  padding-bottom:4vw;
  padding-top:6vw;
}

.webcare-wrapper .service-price {
  margin: 0;
}

.service-white h3, .service-white p {
  color: white;
}

.contacts .container {
  display: flex;

  justify-content:space-between;
}

.contacts-side {
  display:flex;
  flex-direction:column;
  gap:5vw;
}

.contacts-title {
  font-size: 2.5vw;
  font-weight: 500;
  letter-spacing: -1.5px;
  line-height: 150%;
  padding-left: 60px;
  color: #242424;
}

.contacts-info {
  display:flex;
  flex-direction:column;
  gap:1.6vw;
  font-size: 2.5vw;
  font-weight: 450;
  letter-spacing: -0.06vw;
  line-height: 150%;
  padding-left: 3vw;
  opacity: 36%;
  color: #242424;

}

.contacts-item {
  margin: 0;
  color: #242424
}

.contacts-main {
  display:flex;
  flex-direction:column;
  gap:1.2vw;
}

.contacts-form{
  display:flex;
  flex-direction:column;
  gap:0.8vw;
}

.form-group {
  display: flex;
  justify-content: flex-end;

}

.form-group input{
  font-family: "onest", serif;
  width: 64vw;
  height: 7.6vw;
  border: 0.1vw solid white;
  border-radius: 4vw;
  background-color: white;
  font-size: 2.5vw;
  font-weight: 450;
  letter-spacing: -0.05vw;
  line-height: 150%;

  margin:0;
}

input::placeholder{
  font-size: 2.5vw;
  font-weight: 450;
  color: #A8A8A8;
}

input[type="text"]
{
  padding-left: 3vw;
}

.form-button {
  font-family: "Onest", serif;
  padding: 1.8vw 3vw;
  background-color: #242424;
  border: none;
  border-radius: 4vw;
  cursor: pointer;
  display: inline-block;
  gap:0.2vw;
  transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}

.form-button button {
  background-color: #242424;
  color: white;
  cursor: pointer;
  display: inline-block;
  border: 0;
  padding:0;
  font-size: 2.5vw;
  font-weight: 450;
  letter-spacing: -0.05vw;
  line-height: 150%;
}



.button-icon {
  width: 1.3vw;
  padding-left: 0.6vw;
  padding-top: 0.2vw;
}

.submit {
  display: flex;
  align-items: center;
  gap: 3vw;
  font-size:0;
}

.form-policy {
  font-size: 1.6vw;
  font-weight: 450;
  line-height: 150%;
  letter-spacing: -0.06vw;
  color: #242424;
  opacity: 36%;

  margin:0;

}

.footer .container {
  background-color: #fff;
  border-radius: 4vw;

}

.hero-text-2{
  font-size: 6vw;
  line-height: 100%;
  letter-spacing: -0.6vw;
  font-weight: 400;
}

.footer{
  margin-bottom:2vw;
}

.location {
  display: flex;
  justify-content: space-between;
  padding: 3vw 3vw;
}



.footer-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 3vw 3vw;
  padding-top: 8vw;
}

.footer-logo {
  width: 30vw;
  height: 100%;
}




/* Burger-menu */
.burger-menu {
  cursor: pointer;
  font-size: 30px;
  padding: 15px;
}

.burger-menu-content {
  display: none;
  position: fixed;
  top: 80px;
  left: 0;
  width: 100%;
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
  z-index: 999;
  animation: fadeIn 0.3s ease-out;
}

.burger-menu-content a {
  display: block;
  padding: 15px 0;
  color: #242424;
  font-size: 24px;
  text-decoration: none;
  border-bottom: 1px solid #f2f2f2;
  transition: all 0.3s ease;
}

.burger-menu-content a:hover {
  color: #0095FF;
}

/* Анимация */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

.burger-menu svg rect {
  transition: all 0.3s ease;
}

.burger-menu.active .top {
  transform: rotate(45deg) translate(5px, 5px);
}

.burger-menu.active .middle {
  opacity: 0;
}

.burger-menu.active .bottom {
  transform: rotate(-45deg) translate(5px, -5px);
}

.burger-menu {
  position: relative;
  z-index: 1001;
  cursor: pointer;
}

.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 999;
}

.menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

.burger-menu-content {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  transform: translateX(-100%);
  transition: transform 0.4s ease;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

.burger-menu-content.active {
  transform: translateX(0);
}

.burger-menu-content a {
  font-size: 2rem;
  margin: 15px 0;
  text-decoration: none;
  color: #242424;
  transition: color 0.3s ease;
}

.burger-menu-content a:hover {
  color: #0095FF;
}

.burger-menu span {
  display: block;
  width: 30px;
  height: 3px;
  background: #242424;
  margin: 5px 0;
  transition: all 0.3s ease;
}

.burger-menu.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.burger-menu.active span:nth-child(2) {
  opacity: 0;
}

.burger-menu.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}


.case-img{
  width:96vw;
  border-radius:1.4vw;
}

.case-images{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding: 0 3vw;
  gap:0.8vw;
}