/* === FONTS LOAD === */
	@font-face {
		font-family: 'Montserrat';
		src: url('https://hitech-tools.ru/Fonts/Montserrat-Regular.woff2') format('woff2'),
		url('https://hitech-tools.ru/Fonts/Montserrat-Regular.woff') format('woff');
		font-weight: 400; /* normal */
		font-style: normal;
		font-display: swap;
		}
	@font-face {
		font-family: 'Montserrat';
		src: url('https://hitech-tools.ru/Fonts/Montserrat-Medium.woff2') format('woff2'),
		url('https://hitech-tools.ru/Fonts/Montserrat-Medium.woff') format('woff');
		font-weight: 500; /* semi-bold */
		font-style: normal;
		font-display: swap;
		}
	@font-face {
		font-family: 'Montserrat';
		src: url('https://hitech-tools.ru/Fonts/Montserrat-Bold.woff2') format('woff2'),
		url('https://hitech-tools.ru/Fonts/Montserrat-Bold.woff') format('woff');
		font-weight: 700;
		font-style: normal;
		font-display: swap;
		}		  
		  
* { 
	box-sizing: border-box; margin: 0; padding: 0; 
	}
	
body {
	font-family: 'Montserrat', Arial, sans-serif;
	font-weight: 400;  /* default weight */
	overflow-wrap: anywhere;
	}	
	
.bold {
	font-weight: 700;
	}
	
/* Frontal image style */
.hero {
	width: 100%;
	overflow: hidden;
	}

	.hero img {
	width: 100%;
	object-fit: cover;   /* keeps proportions, fills container */
	object-position: center; /* adjust what part stays visible */
	}
	
.yellow-title {
	font-family: 'Montserrat', Arial, sans-serif;
	font-weight: 700;
	font-size: 1.8rem;           /* smaller font */
	color: #000;                /* black text on yellow */
	background-color: #ffff00;  /* yellow rectangle */
	display: inline-block;       /* shrink to fit text */
	padding: 0.8rem 1.6rem;     /* space inside rectangle */
	text-align: center;
	border-radius: 0px;          /* optional, slightly rounded corners */
	margin-bottom: 1rem; /* adds space after h1 */
    word-wrap: break-word;   /* old syntax, still useful */
	overflow-wrap: break-word; /* modern syntax */ 
    white-space: normal;       /* allow wrapping */
	overflow-wrap: anywhere;   /* modern spec */
	word-break: break-word;    /* fallback */
	word-break: break-all;     /* last resort for stubborn browsers */
	hyphens: auto;             /* nice-to-have */
	}
	
.subtitle {
	font-weight: 700;
	font-size: 1.4rem;           /* smaller font */
	color: #222;
	padding: 0px 5px 0px 5px;
	margin: 0px 0px 0px 20px;
	}
	
.textdiv {
	padding: 0px 15px 10px 15px;
	margin: 10px 5px 10px 5px;
	}

/* Responsive adjustments */
	@media (max-width: 768px) {
		.yellow-title {
			font-size: 2rem;
			padding: 0.6rem 1.2rem;
			}
		}
	@media (max-width: 480px) {
		.yellow-title {
			font-size: 1.6rem;
			padding: 0.4rem 0.8rem;
			}
		}
		
/* Navbar */
nav {
	background: #222;
	color: #fff;
	display: flex;
	align-items: center;          /* vertical center */
	justify-content: space-between;/* logo left, controls right */
	padding: 8px 12px;            /* overall inside spacing */
	position: relative;
	}
	
.logo img {
	max-width: 100%;  /* allow shrinking */
	height: auto;     /* preserve proportions */
	}
	
/* Tablet breakpoint */
	@media (max-width: 768px) {
		.logo img {
			max-width: 120px; /* scale logo down for tablets */
			}
		}
/* Mobile breakpoint */
	@media (max-width: 480px) {
		.logo img {
			max-width: 100px; /* even smaller for phones */
			}
		}

/* Menu (desktop layout) */
ul#menu {
	list-style: none;
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	white-space: nowrap;
	}

ul#menu li {
	margin: 5px 10px; /* 5px top/bottom, 10px left/right */
	}

ul#menu li a {
	display: block;           /* makes the anchor respect padding/margins */
	padding: 6px 8px;
	text-decoration: none;
	color: #ffff00; /* Menu font color */
	border-radius: 0px;
	transition: background .18s, color .18s;
	}

ul#menu li a:hover,
ul#menu li a:focus {
	/* del background: rgba(255,255,255,0.06); */
	background: #ffff00;
	color: #000000;
	outline: none;
	}

/* Hamburger */
.menu-toggle {
	display: none;             /* hidden on desktop */
	flex-direction: column;    /* stack spans vertically */
	justify-content: center;   /* center them vertically */
	align-items: center;       /* align horizontally */
	gap: 5px;                  /* spacing between lines */
	cursor: pointer;
	padding: 6px;
	}

.menu-toggle span {
	width: 24px;
	height: 3px;
	background: #ffff00;  /* bright yellow - hamburger color */
	border-radius: 2px;
	display: block;
	}

/* Mobile styles */
	@media (max-width: 768px) {
		/* show hamburger */
		.menu-toggle { 
			display: flex; 
			}
		/* hide horizontal menu and switch to vertical overlay */
		ul#menu {
			display: none;
			position: absolute;
			top: 100%;    /* directly under the nav */
			left: 0;
			width: 100%;
			flex-direction: column;
			background: #2b2b2b;
			padding: 6px 0; /* vertical padding for the column */
			box-shadow: 0 6px 18px rgba(0,0,0,0.25);
			z-index: 50;
			}
		ul#menu.show { 
			display: flex; 
			}
		/* reset li margins on mobile (prevents horizontal offset issues) */
		ul#menu li {
			margin: 0;               /* remove the desktop margins */
			width: 100%;
			border-bottom: 1px solid #444; /* separator line */
			}
		ul#menu li:last-child {
			border-bottom: none; /* no line after last item */
			}
		/* use link padding inside the li for spacing on mobile */
		ul#menu li a {
			padding: 12px 16px;
			}
	}
		  
/* Submenu container */
.has-submenu {
	position: relative;
	}

/* Hidden by default */
.submenu {
	display: none;
	position: absolute;
	top: 100%; 
	left: 0;
	background: #2b2b2b;
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: 200px;
	box-shadow: 0 6px 12px rgba(0,0,0,0.2);
	z-index: 100;
	}

/* Submenu links */
.submenu li a {
	display: block;
	padding: 10px 15px;
	color: #ffff00;
	text-decoration: none;
	}

.submenu li a:hover {
	background: #ffff00;
	color: #000;
	}

/* Show submenu on hover (desktop) */
.has-submenu:hover .submenu {
	display: block;
	}

/* Hovering parent menu item itself - remove !important so JS can change it */
ul#menu li.has-submenu:hover > a {
	background: #6D6D6D; /* default parent hover background if not hovered on item but menu only */
	color: #ffff00;       /* optional parent text color if not hovered on item but menu only*/
	transition: background 0.2s, color 0.2s; /* smooth change */
	}

/* Submenu links */
ul#menu li.has-submenu .submenu li a {
	color: #ffff00;       /* default submenu text */
	background: #2b2b2b;  /* default submenu background */
	transition: background 0.2s, color 0.2s;
	}

/* Submenu hover */
	ul#menu li.has-submenu .submenu li a:hover,
	ul#menu li.has-submenu .submenu li a:focus {
	color: #000;         /* submenu text color on hover */
	background: #ffff00; /* submenu background on hover */
	}

/* Mobile behavior */
	@media (max-width: 768px) {
		.submenu {
			position: static;
			box-shadow: none;
			padding-left: 0;
			}

		.submenu li a {
			display: flex;           /* flex container */
			align-items: center;     /* vertical center */
			padding-left: 20px;      /* space from menu edge */
			text-decoration: none;   /* optional */
			color: #ffff00;          /* default text color */
			transition: color 0.3s;  /* smooth color change */
			}

		.submenu li a::before {
			content: "▸";            /* icon */
			color: #ffff00;           /* default icon color */
			font-size: 14px;
			margin-right: 15px;       /* space between icon and text */
			flex-shrink: 0;           /* keep icon from shrinking */
			transition: color 0.3s;   /* smooth color change */
			}

		/* Change icon and text color on hover */
		.submenu li a:hover {
			color: #000000;           /* change text color */
			}

		.submenu li a:hover::before {
			color: #000000;           /* change icon color */
			}
	}

/* Page images style */
.container {
	display: flex;
	flex-wrap: wrap;  /* Allow items to wrap in smaller screens */
	align-items: center;  /* Vertically center items */
	justify-content: flex-start;
	}

.image {
	flex: 1 1 40%;        /* allow growth/shrink, base 40% */
	max-width: 40%;       /* don’t let it exceed 40% */
	height: auto;         /* keep proportions */
	margin-left: 20px;    /* gap between text and image */
	}

.text {
	flex: 1;     /* Text takes remaining space */
	padding-right: 20px;  /* Padding to the right of text */
	margin-bottom: 20px;
	}

	@media screen and (max-width: 1024px) {
		.image {
			flex: 1 1 50%;      /* image takes up to 50% */
			max-width: 50%;
			}
		.text {
			flex: 1 1 50%;
			}
	}
	@media screen and (max-width: 768px) {
		.image {
			flex: 1 1 100%;     /* full width */
			max-width: 100%;
			margin-left: 0;     /* remove side margin on narrow screens */
			margin-bottom: 20px;
			}
		.text {
			flex: 1 1 100%;
			}
	}
/* Contact button style*/
.contact-btn {
	display: inline-block;
    padding: 8px 34px;
    background-color: #7e7e7e;
    color: #ffffff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease;
	}
	
.contact-btn:hover {
    background-color: #222;
    color: #ffff00;
	}
	
a#myLink {
	color: #7e7e7e;       /* Link color */
	text-decoration: none; /* Removes underline */
	font-weight: bold;     /* Makes text bold */
	transition: 0.3s;      /* Smooth hover effect */
	}

/* Hover effect */
a#myLink:hover {
	color: #222;       /* Darker on hover */
	text-decoration: underline; /* Underline on hover */
	}
	
/* Breadcrumb style */
	
.breadcrumb {
	font-family: 'Montserrat', Arial, sans-serif;
	font-size: 0.9rem;
	margin: 0px 0;
	background-color: #ffff00;
	}

.breadcrumb ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	margin: 0;
	}

.breadcrumb li {
	display: flex;
	align-items: center;
	}

.breadcrumb li + li::before {
	content: "›"; /* arrow separator */
	display: inline-block;
	margin: 0 8px;
	color: #6D6D6D;
	font-weight: bold;
	}

.breadcrumb li a {
	color: #6D6D6D; /* link color */
	text-decoration: none;
	transition: color 0.3s;
	}

.breadcrumb li a:hover {
	color: #222;
	text-decoration: underline;
	}

.breadcrumb li[aria-current="page"] {
	color: #000; /* current page color */
	font-weight: 700;
	}