:root {
  --primary: #161616;
  --accent: #FDDD24;
  --secondary: #D9D9D9;
  --surface: #F9F9F9;
  --title: #333333;
  --text: #666666;
  --border: #CECECE;
  --body: #FFFFFF;
}

body {
  background: var(--body);
  font-family: 'Roboto', sans-serif;
}

header {
  background: var(--body);
  display: flex;
  flex-direction: column;
  height: 110px;
  align-items: center;
  justify-content: space-around;
}

header .logo {
  height: 100%;
  display: flex;
  align-items: center;
  margin-left: 355px;
}

header .logo .secondary-logo {
  display: none;
}

header .container {
  display: flex;
  height: 100%;
  width: 100%;
}

header .top-bar {
  display: flex;
  background: #FFFFFF;
  width: 100%;
  justify-content: flex-end;
  padding-right: 339px;
}

.top-bar span {
  position: relative;
  top: 4px;
}

.top-bar span p {
  font: 700 18px 'Roboto';
  color: #000000;
  margin-left: 12px;
}

header .top-bar .whatsapp-number {
  display: flex;
}

header .top-bar .phone-number {
  display: flex;
  margin-left: 36px;
}

header nav.menu ul {
  display: flex;
  margin-right: 201px;
}

.container .menu #menu-toggle {
  display: none;
}

nav.menu ul li {
  margin-left: 81px;
  display: flex;
  align-items: center;
}

nav.menu ul li:first-child {
  margin: 0;
}

nav.menu ul li a {
  color: #FFFFFF;
  font: 500 18px 'Roboto';
  text-transform: uppercase;
}

header nav.menu a.button {
  background: var(--accent);
  width: 246px;
  height: 44px;
  border-radius: 8px;
  color: #000000;
  font: 700 18px 'Roboto';
  display: flex;
  justify-content: center;
  align-items: center;
}

main .banner {
  height: 465px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(90deg, rgba(0, 0, 0, -0.74), rgba(149, 149, 149, 0.15) 33.32%), #000;
}

main .banner img {
  width: 82px;
  margin-bottom: 16px;
}

main .banner h1 {
  color: #FFFFFF;
  font: 900 52px 'Roboto';
}

footer .footer-box {
  width: 100%;
  height: 77px;
  background: linear-gradient(135deg, white 65%, var(--primary) 45%);
}

footer .content-footer, footer .footer {
  background: var(--primary);
}

footer .content-footer {
  border-bottom: 1px solid var(--accent);
  padding: 64px 338px 45px 340px;
  display: flex;
  justify-content: center;
}

.content-footer .footer-about-us p {
  width: 390px;
  margin: 33px 0 62px 0;
  font: 400 18px 'Roboto';
  color: rgba(249, 249, 249, 0.4);
  line-height: 140%;
}

.footer-about-us .doc-number p {
  font: 700 18px 'Roboto';
  color: rgba(255, 255, 255, 0.9);
  line-height: 140%;
  margin: 0 0 3px 0;
}

.footer-about-us .doc-number p strong {
  font-weight: 500 !important;
}

footer .content-footer nav {
  display: flex;
  margin-left: 139px;
}

footer .content-footer h5 {
  font: 900 20px 'Roboto';
  color: var(--accent);
  margin-bottom: 36px;
}

footer .content-footer .footer-about {
  margin-right: 100px;
}

footer .content-footer .footer-menu {
  display: flex;
}

footer .content-footer nav li {
  margin-bottom: 22px;
}

footer .content-footer nav li a {
  font: 600 20px 'Roboto';
  color: #FFFFFF; 
}

footer .content-footer address {
  margin-left: 115px;
}

.content-footer address .footer-contacts {
  display: flex; 
  flex-direction: column;
}

.content-footer .footer-contacts .contact {
  width: 287px;
  height: 76px;
  border-radius: 8px;
  background: #222222;
  margin-bottom: 12px;
  display: flex;
  padding: 19px 0 32px 26px;
}

.footer-contacts .contact img {
  margin-right: 28px;
}

.footer-contacts .contact p {
  color: #FFFFFF;
  font: 400 14px 'Roboto';
  line-height: 150%;
}

.footer-contacts .contact p strong {
  font: 700 14px 'Roboto';
}

.content-footer address .social-media {
  margin-top: 42px;
  display: flex;
}

.content-footer .social-media a {
  display: flex;
  margin-right: 52px;
}

.content-footer .social-media a > p {
  margin-left: 7px;
  color: #FFFFFF;
  font: 600 16px 'Roboto';
}

footer .footer {
  padding: 16px 0;
  color: rgba(249, 249, 249, 0.44);
  font: 400 18px 'Roboto';
  text-align: center;
}

@media(max-width: 1700px) {
    header .top-bar {
        padding-right: 101px;
    }
    
    header .logo {
        margin-left: 220px;
    }
    
    header .container nav.menu {
        width: 73% !important;
        mask-image: url('data:image/svg+xml;utf8,\
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1259 77">\
            <path d="M109.361 0.03C75.933 -1.765 44.175 77 0 85H1259V0.03Z" fill="white"/>\
            </svg>'
        ) !important;
    }
    
    header nav.menu ul {
        margin-right: 100px;
        position: relative;
        top: 3px;
    }
    
    nav.menu ul li {
        margin-left: 72px;
    }
    
    footer .content-footer {
        padding-left: 200px;
    }
}

@media(max-width: 1440px) {
  header .top-bar {
    padding-right: 138px;
  }

  .top-bar span {
    top: 5px;
  }
  
  header .container .logo {
    margin-left: 178px;
  }

  header .container .logo .primary-logo {
    max-width: 88%;
  }

  header nav.menu ul {
    margin-right: 0;
  }
  
  nav.menu ul li {
      margin-left: 56px;
  }
  
  nav.menu ul li:last-child {
      margin-right: 24px;
  }

  footer .content-footer {
    padding: 100px;
  }
}

@media(max-width: 1280px) {
  header .top-bar {
    padding-right: 100px;
  }

  .top-bar span {
    top: 1px;
  }

  header .logo .primary-logo {
    display: none;
  }

  header .logo .secondary-logo {
    display: block;
  }

  header .container {
    background: var(--primary);
    display: flex;
    justify-content: space-between;
  }

  header .container .logo {
    margin-left: 100px;
  }

  header .container nav.menu {
    mask-image: unset !important;
    mask-size: unset !important;
    mask-repeat: unset !important;
    background: unset !important;
    padding-right: 100px !important;
  }

  header nav.menu a.button {
    display: none;
  }

  nav.menu ul li {
    margin-left: 64px;
  }

  main .banner {
    height: 350px;
  }

  main .banner img {
    width: 72px;
  }

  main .banner h1 {
    font-size: 42px;
  }

  footer .content-footer {
    padding: 80px 60px;
  }

  footer .content-footer nav li a, footer .content-footer h5 {
    font-size: 16px;
  }

  .content-footer .footer-about-us img {
    width: 200px;
  }

  .content-footer .footer-about-us p {
    width: 318px;
    font-size: 16px;
  }

  footer .content-footer nav {
    margin-left: 56px;
  }

  footer .content-footer .footer-about {
    width: 78px;
    margin-right: 52px;
  }

  footer .content-footer address {
    margin-left: 52px;
  }

  footer .footer p {
    font-size: 16px;
  }
}

@media(max-width: 768px) {
  header .container nav.menu {
    position: relative;
    background #000;
    padding: 16px;
  }
  
  .container .menu .menu-icon {
    width: 32px;
    height: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    z-index: 1001;
    position: relative;
  }
  
  .menu .menu-icon span {
    display: block;
    height: 4px;
    background: #FFFFFF;
    border-radius: 2px;
  }
  
  .container .menu #menu-toggle:checked ~ .menu-list {
    opacity: 1;
    pointer-events: auto;
  }

  header nav.menu ul {
    margin: 0;
  }

  .container .menu .menu-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    padding-top: 100px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  nav.menu ul li:first-child {
    margin-left: 64px;
  }

  header nav.menu a.button {
    display: flex;
    margin-left: 0;
  }

  #menu-toggle:checked + .menu-icon span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
  }

  #menu-toggle:checked + .menu-icon span:nth-child(2) {
    opacity: 0;
  }

  #menu-toggle:checked + .menu-icon span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
  }

  .top-bar span {
    top: 0;
  }

  .top-bar span p {
    font-size: 16px;
  }

  header .top-bar .phone-number {
    width: 188px;
  }

  footer .content-footer {
    flex-direction: row;
  }

  footer .content-footer .footer-menu {
    display: flex;
    flex-direction: column;
    margin-left: 42px;
  }

  footer .content-footer nav {
    margin-left: 0;
  }

  footer .content-footer address {
    margin-top: 56px;
    margin-left: 0;
  }
}

@media(max-width: 430px) {
  header .top-bar {
    padding: 0;
    justify-content: center;
  }
  
  header .top-bar .phone-number {
      margin-left: 16px;
      width: unset;
  }

  .top-bar span {
    align-items: center;
  }

  .top-bar span p {
    font-size: 14px;
    margin-left: 4px;
  }

  header .container .logo {
    margin-left: 40px;
  }

  header .container nav.menu {
    padding-right: 40px !important;
  }
  
  footer .footer-box {
    display: none;
  }
  
  footer .content-footer {
    padding: 0;
    flex-direction: column;
    align-items: center;
  }

  footer .content-footer .footer-about-us img {
    margin-top: 40px;
  }

  .content-footer .footer-about-us > p {
    margin: 32px 0;
  }

  footer .content-footer .footer-menu {
    margin-left: 0;
    margin-top: 56px;
  }

  footer .content-footer h5, footer .content-footer nav li {
    margin-bottom: 20px;
  }

  footer .content-footer address {
    margin-top: 32px;
  }

  .content-footer address .social-media {
    margin-top: 24px;
    justify-content: center;
  }

  .content-footer .social-media a {
    margin-right: 0;
    margin-bottom: 40px;
  }

  .content-footer .social-media a:last-child {
    margin-left: 40px;
  }
  
  footer .footer p {
      font-size: 12px;
  }

  main .banner {
    height: 300px;
  }

  main .banner h1 {
    font-size: 36px;
  }
}


header .container nav.menu {
  display: flex;
  position: relative;
  top: 3px;
  background: black;
  height: 102%;
  justify-content: flex-end;
  align-items: center;
  width: 70%;
  padding-right: 0;
  z-index: 10;
  mask-image: url('data:image/svg+xml;utf8,\
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1259 77">\
    <path d="M109.361 0.03C75.933 -1.765 44.175 77 0 77H1259V0.03Z" fill="white"/>\
    </svg>'
  );
  mask-size: 100% 100%;
  mask-repeat: no-repeat  
}

@media(max-width: 1440px) {
  header .container nav.menu {
    mask-image :
      url('data:image/svg+xml;utf8,\
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1259 77">\
        <path d="M109.361 0.03C75.933 -1.765 44.175 77 0 94H1259V0.03Z" fill="white"/>\
        </svg>'
      ) !important;

    top: 0;
    height: 100%;
  }
}