/*-----------------------------------*\
  #service.css
	#тут мы стилизуем блоки
\*-----------------------------------*/

/*
# Root
*/

:root {
	/**
   * colors
   */
	--violet-blue-crayola: hsla(234, 50%, 64%, 1);
	--dark-cornflower-blue_a7: hsla(214, 88%, 27%, 0.07);
	--white: hsla(0, 0%, 100%, 1);
	--white_a3: hsla(0, 0%, 100%, 0.03);
	--white_a8: hsla(0, 0%, 100%, 0.08);
	--white_a12: hsla(0, 0%, 100%, 0.12);
	--white_a70: hsla(0, 0%, 100%, 0.7);
	--cultured: hsla(220, 20%, 97%, 1);
	--lavender-web: hsla(233, 52%, 94%, 1);
	--cadet-blue-crayola: hsla(220, 12%, 70%, 1);
	--cadet-blue-crayola_a20: hsla(222, 23%, 71%, 0.2);
	--charcoal: hsla(218, 22%, 26%, 1);
	--raisin-black: hsla(216, 14%, 14%, 1);
	--light-gray: hsla(0, 0%, 79%, 1);
	--blue-crayola: hsla(219, 72%, 56%, 1);
	--black-coral: hsla(220, 12%, 43%, 1);
	/*
   * typography
   */
	--ff-manrope: 'Manrope', sans-serif;
	--fs-1: calc(2.7rem + 1.38vw);
	--fs-2: calc(2.6rem + 0.66vw);
	--fs-3: 2.2rem;
	--fs-4: 1.9rem;
	--fs-5: 1.8rem;
	--fs-6: 1.7rem;
	--fs-7: 1.5rem;
	--fs-8: 1.4rem;
	--fw-700: 700;
	/** 
   * spacing
   */
	--section-padding: 60px;
	/**
   * box shadow
   */
	--shadow-1: 0 0 20px hsla(216, 14%, 14%, 0.05);
	--shadow-2: 0 0 0 0.05rem hsla(214, 88%, 27%, 0.08),
		0 0 1.25rem hsla(216, 14%, 14%, 0.06);
	--shadow-3: 0 0 1.25rem hsla(216, 14%, 14%, 0.04);
	/**
   * border radius
   */
	--radius-circle: 50%;
	--radius-pill: 100px;
	--radius-10: 10px;
	--radius-8: 8px;
	--radius-6: 6px;
	/**
   * transition
   */
	--transition-1: 0.25s ease;
	--transition-2: 0.5s ease;
	--transition-3: 0.3s ease-in-out;
}

/*
# navbar
*/

.navbar-add {
	background-image: url('./hero-bg.jpg');
	background-color: black;
	display: block;
	margin-block-end: 20px;
	margin-bottom: 50px;
	margin-top: -40px;
}

.navbar-link2 {
	font-weight: var(--fw-700);
}

.navbar-list2 {
	color: var(--white);
	padding: 20px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 60px;
	z-index: 2;
	transition: var(--transition-3);
}

/*
  #Information block
*/

.info-container {
	margin-left: 100px;
	margin-top: -100px;
}

/*
.content {
	display: flex;
	flex-direction: column;
	overflow: auto;
	scroll-snap-type: x mandatory;
	overflow-y: auto;
	height: 500px;
	width: 1300px;
	white-space: wrap;
}

/*
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: none;


.hidden-blocks {
	display: flex;
	height: 500px;
	scroll-snap-type: y mandatory;
	scroll-snap-align: start;
}
*/

.сontent-yutong {
	overflow: auto;
	overflow-x: hidden;
	overflow-y: hidden;
	padding-bottom: auto;
	width: 1300px;
	height: 1000px;
	/* или column в зависимости от ориентации */
}

.hidden-blocks {
	display: flex;
	flex-direction: row;
	scroll-snap-align: start;
	overflow-x: hidden;
	scroll-snap-type: x mandatory;
	overflow-x: hidden;
	overflow-y: hidden;
	padding-bottom: auto;
	width: 1300px;
	height: 1000px;
}

.service-block {
	width: auto;
	height: auto;
	margin-top: 5px;
	padding: 20px;
	box-shadow: var(--shadow-1);
	border-radius: var(--radius-6);
	padding-bottom: auto;
	height: auto;
}