@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* RESET */

html, body, main, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, hr, textarea, select, input[type=text], input[type=radio], input[type=checkbox], input[type=button], input[type=image], input[type=password], input[type=reset], input[type=submit], input[type=email], input[type=color], input[type=date], input[type=datetime],input[type=datetime-local], input[type=month], input[type=number], input[type=range], input[type=search], input[type=tel], input[type=time], input[type=url], inpuyt[type=week] { margin: 0; padding: 0; border: 0; font: inherit; }
main, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, video { display: block; }
ol, ul, li { list-style: none; }
blockquote, q { quotes: none; }
blockquote::before, blockquote::after, q::before, q::after { content: ""; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
textarea { overflow: auto; }
caption, figcaption { display: none; }
em, address { font-style: normal; }
label { cursor: pointer; }
legend { position: absolute; top: 0; left: 0; width: 0; height: 0; overflow: hidden; visibility: hidden; font-size: 0; line-height: 0; } /* for screen reader */
*:focus { outline: 0 none; }
a:link { text-decoration: none; }
a, button, input { font: inherit; background: none; border: 0 none; cursor: pointer; }
a { color: inherit; }

html, body { width: 100%; height: 100%; }

/* LAYOUT */

body { background-color: #ecf4ef; font: 400 18px/1.0 "Poppins", sans-serif; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; }

header { display: flex; justify-content: center; align-items: center; height: 120px; }
header p.logo { width: 122px; height: 24px; background: url("../img/logo.svg") center / contain no-repeat; text-indent: -9999px; }

section.solutions { position: relative; padding-top: 90px; z-index: 0; }
section.solutions::before { position: absolute; top: 0; width: 100%; height: 770px; background: linear-gradient(160deg, #6FE1A5 5%, #1B6BAC 95%); content: ""; z-index: -1; }
section.solutions h1 { max-width: 100%; padding: 0 30px; text-align: center; font-size: 48px; font-weight: 700; line-height: 1.1; color: #fff; text-transform: uppercase; box-sizing: border-box; }
section.solutions ul { display: flex; flex-wrap: wrap; justify-content: center; width: 1416px; max-width: 100%; margin: 48px auto 0; padding: 0 14px 24px; box-sizing: border-box; }
section.solutions ul li { display: flex; justify-content: center; align-items: center; width: calc((100% - 96px) / 3); max-width: 380px; margin: 16px; padding: 260px 20px 20px; background-color: rgba(217, 249, 223, 0.6); background-position: center 30px; background-repeat: no-repeat;  border-radius: 40px; text-align: center; font-size: 22px; font-weight: 600; color: #46664C; box-sizing: border-box; box-shadow: 0 20px 20px rgba(0, 0, 0, 0.06); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); transition: all 0.3s; }
section.solutions ul li:first-child { background-image: url("../img/solutions-01.png"); }
section.solutions ul li:nth-child(2) { background-image: url("../img/solutions-02.png"); }
section.solutions ul li:nth-child(3) { background-image: url("../img/solutions-03.png"); }
section.solutions ul li:nth-child(4) { background-image: url("../img/solutions-04.png"); }
section.solutions ul li:nth-child(5) { background-image: url("../img/solutions-05.png"); }
section.solutions ul li:nth-child(6) { background-image: url("../img/solutions-06.png"); }
section.solutions ul li:hover { transform: scale(1.05); }
section.solutions div.button { display: flex; justify-content: center; align-items: center; height: 90px; margin-top: 10px; padding: 0 30px; box-sizing: border-box;}
section.solutions div.button a { position: relative; width: 460px; max-width: 100%; height: 70px; background:#18942F; border-radius: 16px;  transition: all 0.3s; display: inline-flex; align-items: center; justify-content: center; }
section.solutions div.button a span { display: inline-block; padding-left: 42px; background: url("../img/icon-brief.svg") no-repeat left center / 32px auto; font-size: 25px; font-weight: 500; line-height: 32px; color: #fff; }
section.solutions div.button a:hover { width: 466px; height: 86px; background: linear-gradient(160deg, #01cf61 5%, #01b1c9 95%); box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.1); }

section.clients { position: relative; margin-top: 90px; }
section.clients h1 { text-align: center; font-size: 40px; font-weight: 700; color: #46664C; text-transform: uppercase; }
section.clients ul { display: flex; margin-top: 50px; padding-bottom: 30px; }
section.clients ul li { width: 290px; height: 120px; margin: 10px; padding: 30px 70px; background: #fff; border-radius: 30px; text-align: center; line-height: 60px; box-sizing: border-box; box-shadow: 0 20px 20px rgba(0, 0, 0, 0.06); }
section.clients ul li img { width: 150px; height: 60px; object-fit: contain; }

#location-map { margin-top: 20px; }

footer { display: flex; justify-content: space-between; align-items: center; padding: 40px; background: #44AB57; }
footer div.info { display: flex; }
footer div.info p.logo { width: 102px; height: 20px; background: url("../img/logo_footer.svg") center / contain no-repeat; text-indent: -9999px; }
footer div.info address { margin: -4px 0 0 20px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.7); }
footer p.call { padding: 13px 20px 13px 56px; background: rgba(255, 255, 255, 0.7) url("../img/icon-support.svg") left 20px center no-repeat; border-radius: 16px; font-size: 20px; font-weight: 600; color: #3A924B; }

/* RESPONSIVE */

@media all and (max-width: 1100px) {

header { height: 80px; }
header p.logo { width: 102px; height: 20px; }

section.solutions { padding-top: 60px; }
section.solutions::before { height: 600px; }
section.solutions h1 { font-size: 36px; }
section.solutions ul li { width: calc((100% - 60px) / 3); height: 260px; margin: 10px; padding-top: 200px; background-position: center 20px; background-size: auto 160px; font-size: 20px; }

section.clients { margin-top: 60px; }
section.clients h1 {font-size: 30px; }
section.clients ul { margin-top: 40px; }
section.clients ul li { width: 240px; height: 100px; padding: 25px 70px; line-height: 50px; }
section.clients ul li img { width: 100px; height: 50px; }

#location-map { margin-top: 10px; }

footer { padding: 32px; }
footer div.info { flex-direction: column; }
footer div.info p.logo { width: 92px; height: 18px; }
footer div.info address { margin: 12px 0 0 4px; }

}

@media all and (max-width: 900px) {

	section.solutions::before { height: 540px; }
	section.solutions ul li { height: 220px; padding-top: 160px;  background-size: auto 120px; font-size: 18px; }
	
}

@media all and (max-width: 768px) {

	header { height: 70px; }
	header p.logo { width: 92px; height: 18px; }
	
	section.solutions { padding-top: 40px; }
	section.solutions::before { height: 480px; }
	section.solutions h1 { font-size: 30px; }
	section.solutions ul { padding: 0 14px 14px; }
	section.solutions ul li { width: calc((100% - 40px) / 2); height: 180px; padding-top: 120px;  background-size: auto 80px; font-size: 18px; }
	section.solutions div.button { height: 80px; }
	section.solutions div.button button { width: 360px; height: 60px; }
	section.solutions div.button button span { padding-left: 32px; background-size: 24px auto; font-size: 20px; line-height: 24px; }
	section.solutions div.button button:hover { width: 366px; height: 76px; }
	
	section.clients { margin-top: 50px; }
	section.clients h1 {font-size: 24px; }
	section.clients ul { margin-top: 30px; }
	section.clients ul li { width: 220px; height: 90px; line-height: 40px; }
	section.clients ul li img { width: 80px; height: 40px; }
	
	footer { display: block; padding: 24px; }
	footer div.info p.logo { width: 84px; height: 16px; }
	footer div.info address { margin: 10px 0 0 2px; font-size: 13px; }
	footer p.call { display: inline-block; margin-top: 16px; padding: 10px 16x 10px 42px; background-size: 20px auto; border-radius: 16px; font-size: 16px; }
	
}

@media all and (max-width: 480px) {

	section.solutions h1 { font-size: 26px; }
	section.solutions ul li {font-size: 16px; }
	section.solutions div.button button span { font-size: 18px; }
	
	section.clients h1 {font-size: 22px; }
	section.clients ul li { width: 200px; height: 80px; padding: 20px 60px; }
	
}