@font-face {
	font-family: 'Aileron';
	src: url('/assets/fonts/aileron-black-webfont.woff2') format('woff2'),
	url('/assets/fonts/aileron-black-webfont.woff') format('woff');
	font-weight: 900;
	font-style: normal;
}
@font-face {
	font-family: 'Aileron';
	src: url('/assets/fonts/aileron-bold-webfont.woff2') format('woff2'),
	url('/assets/fonts/aileron-bold-webfont.woff') format('woff');
	font-weight: 700;
	font-style: normal;
}
@font-face {
	font-family: 'Aileron';
	src: url('/assets/fonts/aileron-regular-webfont.woff2') format('woff2'),
	url('/assets/fonts/aileron-regular-webfont.woff') format('woff');
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: 'Aileron';
	src: url('/assets/fonts/aileron-semibolditalic-webfont.woff2') format('woff2'),
	url('/assets/fonts/aileron-semibolditalic-webfont.woff') format('woff');
	font-weight: 600;
	font-style: italic;
}


/* #Site Styles
================================================== */

/* ### general ### */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
body { margin: 0; cursor: default; }
h1, h2, h3, h4, h5, h6, p, figure, address, ul { margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-snap-type: y proximity; }
html, body { font-family: var(--font-sans), sans-serif; font-size: 23px; color: #fff; background: var(--color-background);  }
body { background: var(--color-background); }
input, select, textarea { font-family: var(--font-sans), sans-serif; font-size: 12px; color: #000; cursor: text }
a { cursor: pointer }
img { border: 0; display: block; }
ul, li { list-style: none; }
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}
.button { font-weight: 400; font-size: 23px; color: #fff; padding: 0 61px; display: inline-block; justify-items: center; align-items: center; position: relative; transition: all ease 0.5s; }
.button:hover { color: var(--color-accent); }
.button:before { content: ''; position: absolute; inset-inline-start: -1px; inset-block-start: 1px; inline-size: 42px; block-size: 26px; background: url('/assets/img/button-arrow.png') left top no-repeat; }
.btn-red { margin-block-start: 32px; padding: 18px; color: var(--color-accent); border: var(--color-accent) solid 1px; font-weight: 400; display: flex; text-align: center; justify-content: center; inline-size: 100%; background: none; font-size: 23px; transition: all ease 0.5s; cursor: pointer; }
.btn-red:hover { color: #fff; background: var(--color-accent); }

h1, h2, h3 { color: #fff; }
h1 { font-size: 120px; font-weight: 400; text-transform: uppercase; }
h2 { font-size: 72px; font-weight: 400; }
h3 { font-size: 32px; font-weight: 900; }
h4 { font-size: 32px; font-weight: 900; }
h5 { font-size: 23px; font-weight: 400; }
p { font-size: 23px; color: var(--color-muted); font-weight: 400; line-height: 1.40; }
a { text-decoration: none; transition: all ease 0.5s; }

:root {
    --font-sans: "Aileron", sans-serif;
    --color-background: #131314;
    --color-surface: #17181a;
    --color-accent: #f04e53;
    --color-muted: #5a5e66;
    --content-max: 1560px;
    --page-gutter: 20px;
}

/* ### global classes ### */
.clear { clear: both; visibility: hidden; line-height: 0; block-size: 0; }
.center { margin: 0 auto; position: relative; max-inline-size: var(--content-max); text-align: center }
.centered { padding-inline: max(var(--page-gutter), calc((100% - var(--content-max)) / 2)); }
main > section { scroll-margin-block-start: 98px; scroll-snap-align: start; }

@supports (animation-timeline: view()) and (animation-range: exit -98px exit 0%) {
	@media (prefers-reduced-motion: no-preference) {
		@keyframes subtle-reveal {
			from { opacity: 0; transform: translateY(30px); }
			to { opacity: 1; transform: translateY(0); }
		}
		@keyframes subtle-exit {
			from { opacity: 1; transform: translateY(0); }
			to { opacity: 0; transform: translateY(-12px); }
		}

		main :is(h1, h2, h3, h4, h5, h6, p):not(.block *),
		main img:not(.softBox.person img),
		main .block,
		main .contact-channel,
		main .button,
		main form label,
		main form .input,
		main form button {
			animation-name: subtle-reveal, subtle-exit;
			animation-timing-function: ease-out, ease-out;
			animation-fill-mode: both, forwards;
			animation-timeline: view(), view();
			animation-range: cover 16% cover 42%, exit -98px exit 0%;
		}
		#footerCntr .copyrightBox a {
			animation: subtle-reveal 1s ease-out both;
			animation-timeline: view();
			animation-range: cover 16% cover 42%;
		}

		main .contactBox #contact-form button,
		main .contactBox #contact-form .form-note {
			animation-range: entry 0% entry 100%, exit -98px exit 0%;
		}

		main .contactBox #contact-form:focus-within label,
		main .contactBox #contact-form:focus-within .input,
		main .contactBox #contact-form:focus-within button,
		main .contactBox #contact-form:focus-within .form-note {
			animation-name: none;
		}
	}
}


/* ### wrapper ### */
#wrapper { position: relative; display: block; inline-size: 100%; min-block-size: 100%; }

/* ### main container ### */
#mainCntr { inline-size: 100%; }

/* ### header container ### */
#headerCntr {
	position: fixed; inset-block-start: 0; inset-inline-start: 0;
	transition: right 0.3s;
    inline-size: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding-block-start: 30px;
    padding-block-end: 30px;
    background: var(--color-background);
    z-index: 999;
}
#headerCntr .logo { font-size: 32px; font-weight: 900; color: var(--color-accent); font-style: normal; }
#headerCntr .slogan { color: #fff; font-size: 23px; font-weight: 300; }
#headerCntr .bracket { color: var(--color-muted); }


	/* menu box */
	.menuBox { padding: 132px 0 0 30px; position: fixed; inset-inline-end: 0; inset-block-start: 0; overflow-y: auto; background: var(--color-accent); inline-size: 320px; block-size: 100vh; transform: translateX(100%); transition: transform 0.5s; }
	@supports (block-size: 100dvh) {
		.menuBox { block-size: 100dvh; }
	}
	.menuBox ul li a { display: inline-block; font-size: 48px; color: #fff; font-weight: 400; line-height: 1.68; position: relative; }
	.menuBox ul li a:after { content: ''; position: absolute; inset-inline-start: 5px; inset-block-end: 5px; inline-size: 0; block-size: 3px; background: #fff; transition: inline-size 0.3s; }
	.menuBox ul li a:hover:after { inline-size: 100%; }
	.open-menu .menuBox { transform: translateX(0); }

	/* Icon 1 */
	#nav-icon1 { appearance: none; border: 0; padding: 0; background: transparent; inline-size: 32px; block-size: 40px; position: absolute; inset-inline-end: 30px; inset-block-start: 40px; transform: rotate(0deg); transition: .5s ease-in-out; cursor: pointer; }
	#nav-icon1 span { display: block; position: absolute; block-size: 3px; inline-size: 100%; background: #fff; opacity: 1; inset-inline-start: 0;	transform: rotate(0deg); transition: .25s ease-in-out; }
	#nav-icon1 span:nth-child(1) { inset-block-start: 0; }
	#nav-icon1 span:nth-child(2) { inset-block-start: 10px; }
	#nav-icon1 span:nth-child(3) { inset-block-start: 20px; }

	.open-menu #nav-icon1 span:nth-child(1) { inset-block-start: 10px; transform: rotate(135deg); }
	.open-menu #nav-icon1 span:nth-child(2) { opacity: 0;	inset-inline-start: -60px; }
	.open-menu #nav-icon1 span:nth-child(3) { inset-block-start: 10px; transform: rotate(-135deg); }

/* ### content container ### */
#contentCntr { position: relative; inline-size: 100%; }

	/* ### development box ### */
	.developmentBox { padding-block-start: 104px; inline-size: 100%; }
	.developmentBox h1 { padding: 74px 0 128px 0; line-height: 1.09; }
	.developmentBox .paragraph { max-inline-size: 530px; inline-size: 100%; padding-block-end: 32px; }
	.developmentBox .paragraph p {padding-block-end: 32px; }
	.developmentBox .button { margin-block-start: 12px; }

	/* ### market box ### */
	.makeBox { inline-size: 100%;	padding-block-start: 190px;}
	.makeBox h3 { font-weight: 600; color: #fff; font-style: italic; }
	.makeBox h3 span { font-weight: 900; color: var(--color-accent); font-style: normal; }

	/* ### what box ### */
	.doBox { padding-block-start: 270px; inline-size: 100%; }
	.doBox article { max-inline-size: 540px; inline-size: 100%; }
	.doBox h2 { padding: 0 0 57px 2px; }
	.doBox figure { max-inline-size: 799px; inline-size: 100%; background: var(--color-background); border: var(--color-surface) solid 1px; padding: 44px 34px 40px; margin: -18px -17px 0 0; }
	.doBox figure ul { display: flex;  align-items: center; justify-content: space-between; }
	.doBox.head { padding: 138px 0 0 20px; }
	.doBox.top-sec { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }
	.doBox.top-sec h2 { inline-size: 100%; }
	.doBox.are { padding-inline-start: 20px; padding-block-start: 265px; }

	/*
    #cases:target {
        background: var(--color-accent);
    }*/

	/* ### soft box ### */
	.softBox { margin-block-start: 145px; }
	.softBox ul { margin: 0 0 0 -40px; display: flex;  align-items: flex-start; flex-wrap: wrap; align-content: flex-start }
	.softBox ul li { inline-size: 25%; padding-inline: var(--page-gutter);  position: relative; }
	.softBox ul li .block { position: relative; padding: 42px 0 62px 20px; transition: all ease 0.5s;  min-block-size: 200px; background: var(--color-surface); }
	.softBox ul li .block:hover { background: var(--color-accent); }
	.softBox ul li .block:hover h5, .softBox ul li .block:hover h5 a  { color: #000; }
	.softBox ul li a { display: block; position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 100%; block-size: 100%; z-index: 9; }
	.softBox ul li h4 { color: #fff; line-height: 1; }
	.softBox ul li h5 { color: var(--color-accent); padding-block-start: 6px; transition: all ease 0.5s; }
        .softBox ul li h5 a { color: var(--color-accent); display:inline; position:relative;  }


	.softBox .button { margin: 79px 0 0 0; }
	.softBox.person{ margin-inline-start: 0; margin-block-start: 157px; }
	.softBox.person ul { margin: 0 -20px; }
	.softBox.person ul li { position: relative; margin-block-end: 40px; }
	.softBox.person ul li:hover img { opacity: 1; transition: all ease 0.5s;}
	.softBox.person ul li img { position: absolute; inset-inline-end: 0; inset-block-end: 0; opacity: 0; transition: right 0.3s; }
	.softBox.head { margin-inline-start: 0; padding: 140px 0 0 0; }
	.softBox.head article { max-inline-size: 710px; padding-inline-start: 22px;  }
	.softBox.head article p { padding: 0 110px 0 0; }

	/* ### logo box ### */
	.logoBox { inline-size: 100%; margin: 157px 0 0 0; }
	.logoBox ul { margin: 0 0 0 -20px; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; }
	.logoBox ul li { padding: 0 20px 40px; inline-size: 15.5%; }
	.logoBox ul li a { min-block-size: 200px; display: flex; align-items: center; justify-content: center; background: var(--color-surface); }
	.logoBox ul li:hover a { background: var(--color-accent); }
	.gap { padding-block-start: 134px; padding-inline-start: 20px; }
	.gap article { max-inline-size: 600px; padding: 0; }
	.gap article p { padding: 0 9px 0 0; }

	/* ### counter box ### */
	.counterBox { inline-size: 100%; margin-block-start: 196px; }
	.counterBox ul { display: flex; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; margin: 0 -20px; }
	.counterBox ul li { padding-inline: var(--page-gutter); inline-size: 25%; }
	.counterBox ul li .block { padding-block-start: 58px; min-block-size: 265px; text-align: center; background: var(--color-surface); }
	.counterBox ul li h3 { font-size: 109px; font-weight: 900; line-height: 0.8; }
	.counterBox ul li h3 small { font-size: 0.4em; }
	.counterBox ul li p { color: var(--color-accent); font-weight: 400; padding-block-start: 12px; }

	/* ### contact box ### */
	.contactBox { padding-block-start: 264px; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; position: relative; }
	/*
    .contactBox:before { content: ''; position: absolute; inset-inline-end: 760px; inset-block-start: 426px; inline-size: 373px; block-size: 639px;  background: url('/assets/img/dote-bg.png') right top no-repeat; }
    */
	.contactBox .text { inline-size: 51.3%; padding-inline-end: 20px; z-index: 1; }
	.contactBox .top { max-inline-size: 505px; inline-size: 100%; }
	.contactBox h2 { padding: 0 0 57px 0; inline-size: 100%; }
	.contactBox .address { padding: 147px 0 223px 0; display: flex; justify-content: flex-start; align-items: flex-start; }
	.contactBox .address address { max-inline-size: 400px; inline-size: 100%; font-style: normal; }
	.contactBox .address address span { color: var(--color-muted); font-size: 23px; line-height: 1.40; display: block; font-style: normal; }
	.contactBox .address address a { color: #fff; display: block; font-style: normal; padding: 0 0 6px; }
	.contactBox .address .contact-channel + .contact-channel { margin-block-start: 24px; }
	.contactBox .address .contact-channel__link { display: flex; align-items: center; gap: 10px; inline-size: fit-content; }
	.contactBox .address .contact-channel__link span { color: inherit; }
	.contactBox .address .contact-channel__icon { inline-size: 24px; block-size: 24px; flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
	.contactBox .address .contact-channel__icon--whatsapp { fill: currentColor; stroke: none; }
	.contactBox .address address p { color: #fff; font-style: normal; line-height: 1.40;  }
	.contactBox .office { inline-size: 100%; display: flex; align-items: flex-start; justify-content: flex-start; }
	.contactBox .office #contact-form-panel { inline-size: 100%; }
	.contactBox .office .left { max-inline-size: 378px; inline-size: 100%; }
	.contactBox .office .left h2 { padding: 0 0 57px 0; }
	.contactBox .office form {
		inline-size: 100%; padding: 0; }
	.contactBox .office form label { padding: 0; color: var(--color-muted); display: block; }
	.contactBox .office .form-intro { margin-block-end: 10px; }
	#contact-form .required-mark,
	#contact-form label.required::before { color: var(--color-accent); font-size: .75em; line-height: 0; vertical-align: super; }
	.contactBox .office form .input {
		margin: 10px 0 30px;
		inline-size: 100%;
		padding: 21px;
		background: var(--color-surface);
		border: 1px solid transparent;
		color: #fff;
		font-size: 20px;
		transition: all ease 0.5s;
	}
	.contactBox .office form .input:hover,
	.contactBox .office form .input:focus { border: 1px solid var(--color-accent); }
	.contactBox .office form button:disabled { opacity: .65; cursor: wait; }
	.contactBox .office form .form-note { color: var(--color-muted); margin-block-end: 20px; }
	#contact-form label.required::before { content: "*" / ""; margin-inline-end: .25em; }
	.contactBox .office form label + ul { list-style: none; margin: 6px 0 0; padding: 0; color: var(--color-accent); }
	.contactBox .office form .input[aria-invalid="true"] { border-color: var(--color-accent); }

	.contactBox .images { inline-size: 48.7%; z-index: 1; }
	.contactBox .images img { inline-size: 100%; }

	#contact-form .feedback {
		display: none;
	}

	#contact-form .feedback:target {
		display: block;
		border:1px solid var(--color-accent);
		padding: 14px;
	}
	#contact-feedback:empty { display: none; }
	.feedback-visible {
		padding: 24px;
		border: 1px solid var(--color-accent);
	}
	.contactBox .feedback-visible h2 { padding: 0 0 12px; }
	.contact-message-icon {
		display: block;
		inline-size: 42px;
		block-size: 34px;
		margin-block-end: 14px;
		color: var(--color-accent);
	}
	.contact-message-icon rect,
	.contact-message-icon path {
		fill: none;
		stroke: currentColor;
		stroke-width: 2.5;
		stroke-linejoin: round;
	}
	.contact-message-icon .contact-message-icon__badge {
		fill: var(--color-accent);
		stroke: var(--color-accent);
	}
	.contact-message-icon__mark {
		stroke: #fff !important;
		stroke-linecap: round;
	}
	/* ### footer container ### */
	#footerCntr { overflow: hidden; inline-size: 100%; position: relative }
	#footerCntr .back-to-top { position: absolute; inset-inline-end: 60px; inset-block-end: 65px; }

	/* ### social box ### */
	.socialBox { border: var(--color-surface) solid 1px; padding: 35px 20px; margin: 75px -20px 0; }
	.socialBox ul { inline-size: 100%; display: flex;  align-items: center; justify-content: flex-start; flex-wrap: wrap; }
	.socialBox ul li { margin-inline-end: 30px; }
	.socialBox ul li a img { transition: all ease 0.5s; }
	.socialBox ul li a img:hover { opacity: 0.8; }

	/* ### copyright box ### */
	.copyrightBox { padding: 255px 0 65px 0; position: relative; }
	.copyrightBox a { margin-inline-end: 142px; display: inline-block; color: var(--color-muted); font-weight: 400; }
	.copyrightBox .new-window-icon { inline-size: .75em; block-size: .75em; margin-inline-start: .35em; vertical-align: -.08em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
	.copyrightBox a:hover { color: var(--color-accent); }



/* #Media Queries
================================================== */

@media only screen and (max-width: 1699px) {
	h4 { font-size: 30px; }
	.centered { padding-inline: var(--page-gutter); }
	.softBox.person ul li img { inline-size: 150px; }
	.softBox.person ul li .block { padding-inline-end: 120px; }
	.softBox ul li .block { padding: 30px 20px 40px 20px; min-block-size: 180px; }
	.softBox ul li h5 { font-size: 18px; }
	.softBox ul { margin-inline-start: -20px; margin-inline-end: -20px; }
	.doBox.are,
	.doBox.head,
	.gap { padding-inline-start: 0; }
	.socialBox { margin: 35px 0; }
	#footerCntr .back-to-top { inset-inline-end: 40px; }
}

@media only screen and (max-width: 1439px) {
	h1 { font-size: 100px; }
	h2 { font-size: 60px; }
	h3 { font-size: 27px; }
	h4 { font-size: 26px; }
	h5 { font-size: 22px; }
	p { font-size: 22px; }

	.contactBox .address address span { font-size: 22px; }
	.btn-red { font-size: 22px; }
	.softBox ul li .block { padding: 40px 10px 40px 20px; min-block-size: 180px; }
	.doBox article  { max-inline-size: none; inline-size: 45%; }
	.doBox figure { inline-size: 55%; max-inline-size: none; }
	.softBox.person li { inline-size: 33.333% }
	.softBox ul li { padding: 0 10px; }
	.softBox ul { margin: 0 -10px; }
	.logoBox ul li { inline-size: 16.666%; padding: 0 10px 20px; }
	.logoBox ul { margin-inline-start: -10px; }
	.doBox figure { padding: 30px; margin: -10px 0 0; }
	.logoBox ul li a { min-block-size: 180px; }
	.counterBox ul li { padding: 0 10px; }
	.counterBox ul { margin: 0 -10px; }
	.counterBox ul li h3 { font-size: 80px; }
	.counterBox ul li h3 small { font-size: 40px; }
	.counterBox ul li .block { padding-block-start: 40px; min-block-size: 200px; }
	.contactBox { padding-block-start: 180px; }
	.contactBox .text { inline-size: 55%; max-inline-size: none; padding-inline-end: 20px; }
	.contactBox .images { inline-size: 45%; }
	.contactBox .address { padding: 80px 0 100px 0; }
	.contactBox .office form label { font-size: 22px; }
	.contactBox .office form .input { padding: 14px; margin: 5px 0 20px; }
	.copyBox { padding: 160px 0 40px; }
	.copyBox a { font-size: 22px; margin-inline-end: 40px; }
	.copyrightBox { padding-block-start: 150px; }
	#footerCntr .back-to-top { inset-block-end: 40px; }
}

@media only screen and (max-width: 1199px) {
	h1 { font-size: 80px; }
	h2 { font-size: 52px; }
	h3 { font-size: 24px; }
	h4 { font-size: 22px; }
	h5 { font-size: 18px; }
	p,
	body,
	.contactBox .address address span,
	.button { font-size: 20px; }
	.developmentBox .paragraph p { padding-block-end: 20px; }
	.makeBox { padding-block-start: 80px; }
	.doBox { padding-block-start: 110px; }
	.doBox h2,
	.contactBox .top h2,
	.contactBox h2,
	.contactBox .office .left h2 { padding: 0 0 30px; }
	.doBox figure { padding: 20px; }
	.doBox figure ul li img { max-block-size: 50px; }
	.softBox { margin-block-start: 70px; }
	.softBox ul li .block { min-block-size: 160px; }
	.softBox .button { margin-block-start: 50px; }
	.doBox.are { padding-inline-start: 0; padding-block-start: 110px; }
	.developmentBox h1 { padding: 60px 0 90px; }
	.softBox.person { margin-block-start: 80px; }
	.doBox.head { padding-block-start: 80px; }
	.logoBox { margin-block-start: 80px; }
	.logoBox ul li { inline-size: 25%; }
	.softBox.person ul li .block { padding-inline-end: 160px; padding-block-start: 30px; }
	.counterBox { margin-block-start: 90px; }
	.counterBox ul li h3 { font-size: 66px; }
	.counterBox ul li .block { padding: 45px 0; min-block-size: 10px; }
	.counterBox ul li p { font-size: 17px; }
	.contactBox { padding-block-start: 90px; }
	.contactBox .office .left { max-inline-size: 100%; inline-size: 100%; }
	.contactBox .office { flex-wrap: wrap; }
	.contactBox .office form { max-inline-size: 100%; padding-block-start: 40px; }
	.contactBox .address { padding: 60px 0; }
	.btn-red { margin-block-start: 10px; }
	.copyrightBox { padding: 100px 0 40px; }
	.copyrightBox a { margin-inline-end: 50px; }

}

@media only screen and (max-width: 979px) {
	h1 { font-size: 60px; }
	h2 { font-size: 42px; }
	h3 { font-size: 22px; }
	h4 { font-size: 20px; }
	h5 { font-size: 16px; }
	p,
	body,
	.contactBox .address address span,
	.button { font-size: 18px; }

	.developmentBox h1 { padding: 50px 0; }
	.developmentBox .paragraph p { padding: 0 0 15px; }
	.developmentBox .paragraph { padding-block-end: 25px; }
	.button:before { background-size: 30px; inline-size: 30px; block-size: 22px; }
	.button { padding: 0 40px; }

	.makeBox { padding-block-start: 55px; }
	.doBox { padding-block-start: 65px; }
	.doBox h2,
	.contactBox .top h2,
	.contactBox h2,
	.contactBox .office .left h2 { padding-block-end: 15px; }
	.doBox article { padding-inline-end: 10px; }
	.doBox figure { padding: 15px; margin-block-start: 10px; }
	.doBox figure ul li img { max-block-size: 44px; }
	.softBox { margin-block-start: 40px; }
	.softBox ul li { inline-size: 33.333%; padding-block-end: 20px; }
	.softBox ul { margin-block-end: -10px; }
	.softBox.person ul li { inline-size: 50%; margin-block-end: 0; }
	.doBox.head { padding-block-start: 45px; }
	.logoBox ul li a { min-block-size: 160px; padding: 15px; }
	.logoBox ul li a img { max-inline-size: 100%; max-block-size: 80px; }
	.contactBox .address { padding: 35px 0; flex-wrap: wrap; }
	.contactBox .address address { padding-block-end: 15px; }
	.contactBox .office form label { font-size: 18px; padding: 0 0 5px 5px; }
	.btn-red { font-size: 18px; padding: 15px; }
	.socialBox { padding: 25px 20px; }
	.socialBox ul li a { display: block; }
	.socialBox ul li { margin-inline-end: 20px; }
	.socialBox ul li a img { max-block-size: 24px; }
	.copyrightBox { padding: 70px 0 30px; }
	#footerCntr .back-to-top { inset-inline-end: 30px; inset-block-end: 30px; }
	.counterBox ul li p { font-size: 15px; }
	.counterBox ul li .block { padding: 35px 10px; }
	.counterBox ul li h3 { font-size: 50px; }
	.counterBox { margin-block-start: 60px; }
	.contactBox { padding-block-start: 60px; }
	.contactBox .address address a { padding: 0; }
	.contactBox .address address { line-height: 1.3; }
	.menuBox ul li a { font-size: 38px; }
	#nav-icon1 { inset-inline-end: 40px; }
}

@media only screen and (max-width: 767px) {
	h1 { font-size: 29px; }
	h2 { font-size: 24px; }
	h3 { font-size: 20px; }
	h4 { font-size: 18px; }
	h5 { font-size: 16px; }
	p,
	body,
	.contactBox .address address span,
	.button { font-size: 17px; }
	p { line-height: 1.3; }
	.developmentBox .paragraph { padding-block-end: 10px; }

	.makeBox { padding-block-start: 35px; }
	.doBox { padding-block-start: 45px; }
	.doBox article { inline-size: 100%; }
	.doBox article p br { display: none; }
	.doBox figure { inline-size: 100%; }
	.developmentBox h1 { padding: 30px 0; }
	.softBox ul li { inline-size: 50%; }
	.softBox .button { margin-block-start: 20px; }
	.doBox.are { padding-block-start: 50px; }
	.softBox.person { margin-block-start: 50px; }
	.softBox.person ul li,
	.softBox ul li { inline-size: 100%; }
	.logoBox ul li { inline-size: 50%; }
	.logoBox { margin-block-start: 40px; }
	.counterBox { margin-block-start: 40px; }
	.counterBox ul li { inline-size: 50%; padding-block-end: 20px; }
	.contactBox { padding-block-start: 30px; }
	.contactBox .text { padding: 0 0 30px; inline-size: 100%; }
	.contactBox .images { inline-size: 100%; }
	.contactBox .images img { inline-size: 100%; }
	.socialBox { margin: 30px 0 20px; padding: 15px; }
	.copyrightBox { padding: 30px 30px 22px 0; }
	.copyrightBox a { margin-inline-end: 40px; margin-block-end: 8px; }
	.logoBox ul { margin: 0 -10px; }
	.menuBox { inline-size: 100%; padding-block-start: 100px; padding-inline-start: 30px; }
	#nav-icon1 { inset-inline-end: 20px; }
	.menuBox ul li a { font-size: 28px; }
}
@media only screen and (max-width: 479px) {
	.doBox figure ul li img { max-block-size: 30px; }
	.logoBox ul li,
	.counterBox ul li { inline-size: 100%; }
	#headerCntr .logo { inline-size: 100%; font-size: 30px; }
    #headerCntr .slogan { font-size: 20px; }
}

/* Keep the case and team card rows aligned even when their text wraps. */
.softBox ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	grid-template-rows: auto 1fr;
	grid-auto-rows: minmax(min-content, auto);
	gap: 20px;
	margin: 0;
}
.softBox ul li {
	display: grid;
	grid-row: span 2;
	grid-template-rows: auto 1fr;
	grid-template-rows: subgrid;
	inline-size: auto;
	padding: 0;
	margin: 0;
}
.softBox ul li .block {
	display: grid;
	grid-row: 1 / -1;
	grid-template-rows: auto 1fr;
	grid-template-rows: subgrid;
	min-block-size: 200px;
}
.softBox.person ul { margin: 0; }
.softBox.person ul li { inline-size: auto; margin: 0; }

.counterBox ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: 20px;
	margin: 0;
}
.counterBox ul li {
	display: grid;
	inline-size: auto;
	padding: 0;
}
.counterBox ul li .block {
	block-size: 100%;
}

.doBox figure ul {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	justify-items: center;
	gap: 1rem;
}
.doBox figure ul li {
	display: grid;
	place-items: center;
	min-inline-size: 0;
}
.doBox figure ul li img {
	block-size: clamp(1.875rem, 4vw, 3.125rem);
	inline-size: auto;
	max-inline-size: 100%;
	object-fit: contain;
}

@media (max-width: 640px) {
	.doBox figure ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}