/* Base & Variables */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 62.5%; }
:root {
  --light-clr: #fff;
  --dark-clr: #23272A;
  --brand-clr: #7289DA;
  --off-white-clr: #f6f6f6;
  --off-white-clr-two: #e7eaea;
  --general-font-size: 2rem;
  --primary-title-font-size: 4.8rem;
  --secondary-title-font-size: 4rem;
  --num-of-grid-columns: 4;
  --section-spacing: 5.6rem 2.4rem;
  --container-width: 126rem;
}
body { font-size: var(--general-font-size); font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; color: var(--dark-clr); }
a { text-decoration: none; display: inline-block; }
img { max-width: 100%; display: block; }

/* Header / Hero */
.hero { background: url("./assets/images/hero-bg.jpg") center/cover no-repeat; }
.main-header { height: 8rem; padding: 0 2.4rem; }
.container { max-width: var(--container-width); margin: 0 auto; }
.main-nav { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.logo { width: 12.4rem; }
.nav-list { display: none; list-style: none; }
.nav-items-right { display: flex; align-items: center; gap: 1.2rem; }
.btn:hover { box-shadow: 0 .8rem 1.5rem rgba(0,0,0,.2); }
.btn-small { font-size: 1.4rem; padding: .7rem 1.6rem; }
.btn-light { background-color: var(--light-clr); color: var(--dark-clr); border-radius: 4rem; }
.btn-light:hover { color: var(--brand-clr); }
.btn-login { line-height: 1.8rem; margin-top: 2rem; }
.mobile-toggle { display: flex; font-size: 3.6rem; color: var(--light-clr); cursor: pointer; }
.btn-close { display: none; }

.row { display: grid; grid-template-columns: repeat(var(--num-of-grid-columns), 1fr); gap: 1rem 2rem; padding: var(--section-spacing); }
.hero-content-wrap { grid-column: span var(--num-of-grid-columns); color: var(--light-clr); text-align: left; }
.title { font-weight: 800; }
.primary-title { font-size: var(--primary-title-font-size); line-height: 120%; }
.hero-description { line-height: 3.2rem; margin-top: 2.4rem; max-width: 68ch; }
.hero-btn-group .btn-light { margin: 2.4rem 2.4rem 0 0; display: inline-flex; align-items: center; }
.hero-btn-group .btn-light i { margin-right: .8rem; }
.btn-large { padding: 1.6rem 3.2rem; border-radius: 2.8rem; }
.btn-dark { background-color: var(--dark-clr); color: var(--light-clr); margin-top: 2.4rem; transition: background-color .3s; }
.btn-dark:hover { background-color: #36393f; }

/* Sections */
.grid-image { margin-top: 2.4rem; grid-column: span 4; }
.text-group { margin-top: 2rem; grid-column: span 4; line-height: 3.2rem; }
.secondary-title { font-size: var(--secondary-title-font-size); margin-bottom: 2rem; }
.voice-channel { background-color: var(--off-white-clr-two); }
.wave { color: var(--off-white-clr-two); display: block; }
.wave-path { animation: wave-animation 3s linear infinite alternate; }

@keyframes wave-animation {
  0% { d:path("M826.337463,25.5396311 C670.970254,58.655965 603.696181,68.7870267 447.802481,35.1443383 C293.342778,1.81111414 137.33377,1.81111414 0,1.81111414 L0,150 L1920,150 L1920,1.81111414 C1739.53523,-16.6853983 1679.86404,73.1607868 1389.7826,37.4859505 C1099.70117,1.81111414 981.704672,-7.57670281 826.337463,25.5396311 Z"); }
  50% { d:path("M655.558582,28.4898877 C500.191373,61.6062216 422.833785,83.5422763 266.940085,49.8995879 C112.480383,16.5663637 84.0992497,8.02840272 0,44.7243294 L0,150.727527 L1920,150.727527 L1920,49.8995879 C1580.91676,-34.8808285 1438.10804,73.6768193 1148.0266,38.0019829 C857.945166,2.32714659 810.925791,-4.62644617 655.558582,28.4898877 Z"); }
  100% { d:path("M842.322034,38.0019829 C686.954825,71.1183168 623.386282,53.08497 467.492582,19.4422816 C313.032879,-13.8909426 84.0992497,8.02840272 0,44.7243294 L0,150.727527 L1920,150.727527 L1920,76.8685643 C1512.23604,-35.3595639 1568.70222,67.4289432 1278.62078,31.7541069 C988.539347,-3.92072949 997.689243,4.88564905 842.322034,38.0019829 Z"); }
}

.wave-inverted { transform: matrix(1, 0, 0, -1, 0, 0); }

.video-call { background-color: var(--off-white-clr-two); }
.video-call .row { padding-bottom: 8rem; }
.video-call .text-group { grid-column: span var(--num-of-grid-columns); margin-top: 0; }
.video-call .text-group p { margin-top: 2.4rem; }
.video-call .grid-image { width: 100%; grid-column: span var(--num-of-grid-columns); margin-top: 2.4rem; }

/* Download */
.download { background-color: var(--off-white-clr); position: relative; }
.download .remove-grid { display: block; padding-top: 0; text-align: center; }
.sparkles { display: inline-block; }
.download h2 { font-size: 3.2rem; font-weight: 700; }
.btn-brand { background-color: #4169e1; color: var(--light-clr); transition: background-color .3s; border-radius: 2.8rem; }
.download img { margin-right: 1rem; }
.download .btn-brand { margin-top: 4rem; }
.btn-brand:hover { background-color: var(--brand-clr); }

/* Footer */
.main-footer { background-color: var(--dark-clr); color: var(--light-clr); padding: 8rem 2.4rem 6.4rem; }
.info-box { grid-column: span 4; margin-bottom: 5.6rem; }
.footer-title { color: var(--brand-clr); }
.info-box .footer-title { font-size: 3.2rem; font-weight: 700; }
.languages { margin: 2.4rem 0; display: flex; align-items: center; }
.languages img { width: 2.4rem; }
.languages span { margin: 0 0.8rem; }
.sm-link { font-size: 2.3rem; color: inherit; margin-right: 2rem; }
.spacer { display: none; }
.footer-links-group { margin-bottom: 4rem; font-size: 1.6rem; grid-column: span 2; }
.footer-links-group .footer-title { font-size: inherit; padding-top: .8rem; font-weight: 600; }
.footer-link { display: block; margin-top: 1.2rem; color: inherit; }
.divider { grid-column: 1/-1; height: 1px; background-color: var(--brand-clr); margin-bottom: 3.2rem; }
.main-footer .remove-grid { display: flex; align-items: center; justify-content: space-between; }
.main-footer .btn-brand { line-height: 1.8rem; }
#footer-login { background-color: #4169e1; }

/* Responsive */
@media screen and (min-width: 768px) {
  :root {
    --primary-title-font-size: 5.6rem;
    --secondary-title-font-size: 4.8rem;
    --num-of-grid-columns: 8;
    --section-spacing: 8rem 4rem;
  }
  .hero { min-height: 62.6rem; }
  .hero-content-wrap { grid-column: span 5; }
  .hero-description { margin: 4rem 0 .8rem; }
  .grid-image { margin: auto 0; }
  .text-group { margin-top: 0; display: flex; flex-direction: column; justify-content: center; }
  .order-1 { order: 1; }
  .order-2 { order: 2; }
  .video-call { text-align: center; }
  .spacer { display: block; grid-row: span 2; }
  .info-box { grid-column: span 3; grid-row: span 2; }
}

@media screen and (min-width: 1024px) {
  :root {
    --num-of-grid-columns: 12;
    --section-spacing: 12rem 4rem;
  }
  .nav-list { display: flex; }
  .nav-link { font-size: 1.6rem; color: var(--light-clr); padding: 1rem; margin: 0 1rem; font-weight: 700; }
  .nav-link:hover { text-decoration: underline; text-underline-offset: 7px; }
  .hero-content-wrap { grid-column: 3 / span 8; text-align: center; }
  .mobile-toggle { display: none; }
  .grid-image { grid-column: span 7; margin: 0; }
  .text-group { grid-column: 7.5 / -1; }
  .order-1 { grid-column: 1 / span 4; margin-left: 80px; width: 100%; }
  .order-2 { grid-column: 6 / -1; }
  .video-call .text-group { grid-column: 2 / span 10; }
}