:root {
  --new-bg: #FAFAF2;
  --new-primary: #19328E;
  --dark-primary: #0E1C4E;
  --new-white: #ffffff;
  --gray: #525252;
  --new-dark-blue: #181E2A;
}

@font-face {
    font-family: 'bignoodletitlingregular';
    src: url('../fonts/big_noodle_titling-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

.new-eyebrow * {
  font-family: 'bignoodletitlingregular';
  font-size: 18px;
  line-height: 1;
}

.new-heading h1 {
  font-family: 'bignoodletitlingregular';
  font-size: 60px;
  letter-spacing: -1.2px;
  line-height: 1;
}

.text-xl * {
  font-size: 20px;
  line-height: 1.5;
}

.new-container {
  width: 100%;
  max-width: 1344px;
  padding: 0 2rem;
  margin: 0 auto;
}

.new-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--new-primary) !important;
  padding: 0.5rem 1.25rem;
  border-radius: 70px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--new-white) !important;
}

.new-btn:after {
  content: '';
  width: 1.25rem;
  height: 1.25rem;
  background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='20' height='20' rx='10' fill='white'/%3E%3Cpath d='M11.2151 6.96499L14.2501 9.99999L11.2151 13.035' stroke='%2319328E' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.75 9.99999H14.165' stroke='%2319328E' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") center no-repeat;
  background-size: contain;
  
}

.new-header {
  background: var(--new-bg);
}

.header-mob-btn {
  display: none;
}

[data-burger] {
  display: none;
  width: 2rem;
  flex-direction: column;
  gap: 0.5rem;
}

[data-burger] span {
  height: 2px;
  border-radius: 10px;
  background: var(--new-dark-blue);
}

.new-header .logo img {
  max-width: 144px;
  height: auto;
}

.new-header .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.new-header nav {
  display: flex;
  gap: 1.5rem;
}

.new-header nav a {
  color: #525252;
}

.new-footer {
    background: var(--new-dark-blue);
    color: #D6D6D6;
    padding: 60px 0;
  
  }

  .new-footer-inner {
    display: flex;
    padding-bottom: 40px;
    margin: 0 -1rem;
  }

.footer-col {
  width: 25%;
  padding: 0 1rem;
}

  .footer-brand .footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
  }

  .footer-brand .footer-logo img {
    height: 80px;
    width: auto;
  }

  .footer-brand .footer-logo span {
    font-size: 1.4rem;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
  }

  .footer-brand p {
    color: #D6D6D6;
   
  }

.footer-links {
  width: 20%;
}

  .footer-links h4,
  .footer-contact h4 {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
  }

  .footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .footer-links ul li {
    margin-bottom: 12px;
    border-bottom: none !important;
  }

  .footer-links ul li a {
    color: #D6D6D6;
    text-decoration: none;
    padding: 0 !important;
    line-height: 1.5 !important;
  
    transition: color 0.2s;
  }

  .footer-links ul li a:hover {
    color: #ffffff;
  }

.footer-contact {
  width: 30%;
}

  .footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
  }

  .footer-contact-item .icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    position: relative;
   
  }

.footer-contact-item .icon:after {
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.footer-contact-item .icon.location:after {
  background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 10C20 16 12 22 12 22C12 22 4 16 4 10C4 7.87827 4.84285 5.84344 6.34315 4.34315C7.84344 2.84285 9.87827 2 12 2C14.1217 2 16.1566 2.84285 17.6569 4.34315C19.1571 5.84344 20 7.87827 20 10Z' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") center no-repeat;
  background-size: contain;
}

.footer-contact-item .icon.email:after {
  background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 7L13.03 12.7C12.7213 12.8934 12.3643 12.996 12 12.996C11.6357 12.996 11.2787 12.8934 10.97 12.7L2 7M4 4H20C21.1046 4 22 4.89543 22 6V18C22 19.1046 21.1046 20 20 20H4C2.89543 20 2 19.1046 2 18V6C2 4.89543 2.89543 4 4 4Z' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") center no-repeat;
  background-size: contain;
}

.footer-contact-item .icon.phone:after {
  background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.9999 16.9201V19.9201C22.0011 20.1986 21.944 20.4743 21.8324 20.7294C21.7209 20.9846 21.5572 21.2137 21.352 21.402C21.1468 21.5902 20.9045 21.7336 20.6407 21.8228C20.3769 21.912 20.0973 21.9452 19.8199 21.9201C16.7428 21.5857 13.7869 20.5342 11.1899 18.8501C8.77376 17.3148 6.72527 15.2663 5.18993 12.8501C3.49991 10.2413 2.44818 7.27109 2.11993 4.1801C2.09494 3.90356 2.12781 3.62486 2.21643 3.36172C2.30506 3.09859 2.4475 2.85679 2.6347 2.65172C2.82189 2.44665 3.04974 2.28281 3.30372 2.17062C3.55771 2.05843 3.83227 2.00036 4.10993 2.0001H7.10993C7.59524 1.99532 8.06572 2.16718 8.43369 2.48363C8.80166 2.80008 9.04201 3.23954 9.10993 3.7201C9.23656 4.68016 9.47138 5.62282 9.80993 6.5301C9.94448 6.88802 9.9736 7.27701 9.89384 7.65098C9.81408 8.02494 9.6288 8.36821 9.35993 8.6401L8.08993 9.9101C9.51349 12.4136 11.5864 14.4865 14.0899 15.9101L15.3599 14.6401C15.6318 14.3712 15.9751 14.1859 16.3491 14.1062C16.723 14.0264 17.112 14.0556 17.4699 14.1901C18.3772 14.5286 19.3199 14.7635 20.2799 14.8901C20.7657 14.9586 21.2093 15.2033 21.5265 15.5776C21.8436 15.9519 22.0121 16.4297 21.9999 16.9201Z' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") center no-repeat;
  background-size: contain;
}

.footer-contact .footer-contact-item {
  align-items: center;
}

  .footer-contact-item .info {
    color: #D6D6D6;
  }

  .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
   padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .footer-bottom p {
    color: #A0A0AB;
    margin: 0;
  }

  .footer-social {
    display: flex;
    gap: 20px;
  }

  .footer-social a {
    color: #D6D6D6;
    font-size: 1.1rem;
    text-decoration: none;
    transition: color 0.2s;
  }

  .footer-social a:hover {
    color: #ffffff;
  }


/* HOME HERO */

.hero-decor {
  position: absolute;
  right: 33%;
  top: -37px;
  bottom: -37px;
  left: -100vw;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='890' height='380' viewBox='0 0 890 380' fill='none'%3E%3Cpath d='M0 0H890L721.5 380H0V0Z' fill='%230E1C4E'/%3E%3C/svg%3E") right no-repeat;
  z-index: -1;
}

.hero-decor:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100vw;
  background: var(--dark-primary);
}

.new-hero {
  position: relative;
  background-position-x: 25% !important;
  padding: 80px 0 !important;
}

/* between 1025px → 1300px */
@media (min-width: 1025px) {
  background-position-x: calc(25% - (5 * (100vw - 1025px) / 275)) !important;
}

/* between 1300px → 1700px */
@media (min-width: 1300px) {
  background-position-x: calc(20% - (40 * (100vw - 1300px) / 400)) !important;
}

/* cap at 1700px */
@media (min-width: 1700px) {
  background-position-x: -20% !important;
}

.new-hero:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 59%;
  z-index: -1;
  background: #B8BFDC;
  clip-path: polygon(0 0, 100% 0%, 78% 100%, 0% 100%);
}



@media (max-width: 1024px) {
  .new-heading h1 {
    font-size: 50px;
  }
  .text-xl * {
    font-size: 18px;
  }
  .new-container {
  	max-width: 800px;
  	padding: 0 1rem;
  }
  [data-menu] {
    display: none;
  }
  [data-burger] {
    display: inline-flex;
  }
  .header-desktop-btn {
    display: none;
  }
  .header-mob-btn {
    display: inline-flex;
  }
  .new-footer-inner {
    flex-wrap: wrap;
  }
  .footer-col {
    width: 50%;
  }
  .footer-brand {
    width: 100%;
    margin-bottom: 2rem;
  }
  .footer-brand p {
    max-width: 400px
  }
  .hero-decor {
    right: 15%;
    background-size: contain;
  }
  .hero-decor:before {
    width: auto;
  }
}

@media (max-width: 767px) {
  .new-heading h1 {
    font-size: 40px;
    letter-spacing: -0.2px;
  }
  .text-xl * {
    font-size: 16px;
  }
  .new-header .logo img {
    max-width: 90px;
  }
  .new-footer {
    padding: 2rem 0;
  }
  .footer-col {
    width: 100%;
    margin-bottom: 1.5rem;
  }
  .new-footer-inner {
    padding-bottom: 0;
  }
  .footer-bottom {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1rem;
  }
  .hero-decor {
    left: 0;
    right: 0;
    background: none;
  }
  .hero-decor:before {
    left: -50vw;
    right: -50vw;
  }
  .new-hero {
    padding: 37px 0 !important;
    background: none !important;
  }
}