:root{
  --font-family:"Inter",sans-serif;
  --wrapper-width:1240px;
  --wrapper-offset:20px;
  --offset:20px;
  --container-offset:32px;
  --helf-offset:calc(var(--offset) / 2);
  --duble-offset:calc(var(--offset) * 2);

  /* Brand */
  --brand:#6A54CF;
  --brand-hover:#5B45C1;
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html{line-height:1.15;-webkit-text-size-adjust:100%}
details,main{display:block}
h1{font-size:2em;margin:.67em 0}
hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}
a{background-color:transparent}
abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}
b,strong{font-weight:bolder}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-.25em}
sup{top:-.5em}
img{border-style:none}
button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}
button,input{overflow:visible}
button,select{text-transform:none}
[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}
[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}
[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}
fieldset{padding:.35em .75em .625em}
legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}
progress{vertical-align:baseline}
textarea{overflow:auto}
[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
[type=search]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
summary{display:list-item}
[hidden],template{display:none}

*{-webkit-box-sizing:border-box;box-sizing:border-box}
body{margin:0;font-family:var(--font-family)}

h2{
  font-family:var(--font-family);
  font-weight:700;
  font-size:58px;
  line-height:110%;
  text-align:center;
  color:#000;
  margin-bottom:var(--h2-mb,var(--offset))
}
h2 span{color:var(--brand)}

figure{margin:0}

.wrapper{
  max-width:var(--wrapper-width,1200px);
  width:100%;
  padding-left:var(--wrapper-offset);
  padding-right:var(--wrapper-offset);
  margin:0 auto
}

.text{
  font-family:var(--font-family);
  font-weight:500;
  font-size:18px;
  line-height:120%;
  color:#575757;
  margin-bottom:var(--text-mb,var(--offset))
}

.quote{
  font-family:var(--font-family);
  font-weight:500;
  font-size:18px;
  line-height:120%;
  color:rgba(0,0,0,.88);
  border-left:4px solid var(--brand);
  max-width:600px;
  padding-top:12px;
  padding-bottom:12px;
  padding-left:12px;
  margin-bottom:var(--quote-mb,var(--offset))
}

.btn{
  font-family:var(--font-family);
  font-weight:600;
  font-size:24px;
  line-height:120%;
  text-decoration:none;
  color:#fff;
  background-color:var(--btn-bgc,var(--brand));
  border:1px solid var(--brand);
  border-radius:16px;
  display:inline-block;
  padding:18px 24px;
  cursor:pointer;
  -webkit-transition:.5s;
  transition:.5s
}
.btn:hover{
  color:var(--brand);
  background-color:#fff;
  border-color:var(--brand)
}

.scroll-up{
  --arrow-up-size:48px;
  cursor:pointer;
  color:var(--arrow-up-color,#fff);
  background-color:var(--arrow-up-bgc,var(--brand));
  border-radius:var(--arrow-up-bdrs,8px);
  width:var(--arrow-up-size);
  height:var(--arrow-up-size);
  opacity:.5;
  position:fixed;
  bottom:35px;
  right:52px;
  z-index:100
}
.scroll-up::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  -webkit-transform:translate(-50%,-50%);
  -ms-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
  width:0;height:0;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-bottom:12px solid currentColor
}

/* Header nav */
.header-nav ul{
  list-style:none;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;
  gap:var(--offset);
  padding-left:0;margin:0
}
.header-nav ul li a{
  font-family:var(--font-family);
  font-weight:700;
  font-size:18px;
  line-height:110%;
  color:var(--brand);
  text-decoration:none;
  display:inline-block;
  -webkit-transition:color .3s;transition:color .3s
}
.header-nav ul li a:hover{color:var(--brand-hover)}

.header{
  background-color:#f8f8f8;
  padding-top:var(--offset);
  padding-bottom:var(--offset);
  position:sticky;top:0;left:0;z-index:10
}
.header.menu-open .header-nav{display:block}

.header-wrapper{
  max-width:var(--wrapper-width,1200px);
  width:100%;
  padding-left:var(--wrapper-offset);
  padding-right:var(--wrapper-offset);
  margin:0 auto;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  position:relative
}
.header-logo img{max-width:100%;height:auto}
.header-nav{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}

.header-burger{display:none}
.header-burger .burger{
  --burgerColor:#000;
  --burgerHeight:32px;
  --burgerItemHeight:4px;
  --burgerItemWidth:32px;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  height:var(--burgerHeight);padding:5px;position:relative;cursor:pointer
}
.header-burger .burger-item{
  display:block;width:var(--burgerItemWidth);height:var(--burgerItemHeight);
  background-color:var(--burgerColor);-webkit-transition:.2s;transition:.2s
}
.header-burger .burger-item::after,.header-burger .burger-item::before{
  content:"";background-color:var(--burgerColor);display:block;
  width:100%;height:var(--burgerItemHeight);-webkit-transition:.2s;transition:.2s
}
.header-burger .burger-item::before{-webkit-transform:translateY(-10px);-ms-transform:translateY(-10px);transform:translateY(-10px)}
.header-burger .burger-item::after{-webkit-transform:translateY(7px);-ms-transform:translateY(7px);transform:translateY(7px)}
.header-burger .burger.active .burger-item{background:0 0}
.header-burger .burger.active .burger-item::before{-webkit-transform:translateY(0) rotate(45deg);-ms-transform:translateY(0) rotate(45deg);transform:translateY(0) rotate(45deg)}
.header-burger .burger.active .burger-item::after{-webkit-transform:translateY(-4px) rotate(-45deg);-ms-transform:translateY(-4px) rotate(-45deg);transform:translateY(-4px) rotate(-45deg)}

.page-single{border-bottom:1px solid;padding-bottom:40px}
.page-single h1{
  font-family:var(--font-family);
  font-weight:700;font-size:48px;line-height:110%;
  text-align:left;color:#000;margin-bottom:var(--h2-mb,var(--offset))
}
.page-single h2{
  font-family:var(--font-family);
  font-weight:700;font-size:40px;line-height:110%;
  text-align:left;color:#000;margin-bottom:var(--h2-mb,var(--offset))
}
.page-single-content{
  font-family:var(--font-family);
  font-weight:500;font-size:18px;line-height:120%;
  color:#575757;margin-bottom:var(--text-mb,var(--offset))
}

/* Footer */
.footer{padding-top:56px;padding-bottom:25px;background-color:#f8f8f8}
.footer-container{
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center
}
.footer-items{display:-webkit-box;display:-ms-flexbox;display:flex}
.footer-item{margin-right:24px}
.footer-item ul{
  list-style:none;max-width:292px;width:100%;
  padding:0;margin:0;display:-webkit-box;display:-ms-flexbox;display:flex;gap:25px
}
.footer-item ul li{
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center
}
.footer-item ul li img{-ms-flex-negative:0;flex-shrink:0;margin-right:12px}
.footer-item-title{
  font-family:var(--font-family);
  font-weight:700;font-size:18px;line-height:110%;color:#000;margin-bottom:16px
}
.footer-copyright{padding:25px 0 15px;text-align:center}

/* Footer nav links – під той самий бренд-колір */
.footer-nav .nav-item a{
  font-family:var(--font-family);
  font-weight:500;font-size:18px;line-height:120%;
  text-decoration:none;color:var(--brand);
  transition:color .3s
}
.footer-nav .nav-item a:hover{
  text-decoration:underline; color:var(--brand-hover)
}

/* Hovers on big screens */
@media screen and (min-width:993px){
  .scroll-up:hover{opacity:1}
}

/* Tablets */
@media screen and (max-width:992px){
  h2{font-size:40px}
  .btn{font-size:20px}
  .header-nav{
    display:none;background-color:#f8f8f8;padding:var(--offset);
    position:absolute;top:100%;right:0
  }
  .header-burger{display:block}
  .page-single h1{font-size:40px}
  .page-single h2{font-size:32px}
}

/* Mobile */
@media screen and (max-width:768px){
  .wrapper{--wrapper-offset:16px}
  .scroll-up{--arrow-up-size:48px}
  .header-nav ul{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:0}
  .header-nav ul li a{padding:var(--helf-offset) 0}
  .header-wrapper{--wrapper-offset:16px}
  .header-logo{max-width:200px}
}

@media screen and (max-width:576px){
  .wrapper{--wrapper-offset:12px}
  .scroll-up{--arrow-up-size:40px;bottom:40px}
  .header-wrapper{--wrapper-offset:12px}
  .footer-items{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
}

@media screen and (max-width:550px){
  .footer-container{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:20px}
}
