@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Poppins:wght@500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&display=swap');

 
 html, body {
    height: 100%;
    width: 100%;
    font-family: 'Lato', sans-serif;
    background-color: #ffffff;
    color: black;
    line-height: 1.5;
    scroll-behavior: smooth;
    position: fixed;
    overflow:hidden;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  :root {
    --primary-blue: #0056D2;
    --navy: #0A1F44;
    --teal: #00B7A8;
    --coral: #FF5A5F;
    --sunset-orange: #FF914D;
    --golden-yellow: #FFD43B;
  
    --light-gray: #F5F5F5;
    --medium-gray: #cecece;
    --charcoal: #333333;
    --dark-gray: #8d8d8d;
  }

  section {
      width:calc(100% - 40px); padding: 0 20px 120px 20px; position:relative; overflow: hidden;
  }

  section.primary-bg {
    background-color: var(--navy);
    color:white;
  }
  
  section.light-bg {
    background-color: var(--light-gray);
    color: var(--charcoal);
  }
  
  /* Wave transitioning from primary to light */
  section.primary-bg.wave-to-light::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 100px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23f5f5f5' d='M0,64L60,69.3C120,75,240,85,360,117.3C480,149,600,203,720,197.3C840,192,960,128,1080,106.7C1200,85,1320,107,1380,117.3L1440,128V320H0Z'/%3E%3C/svg%3E") no-repeat bottom;
    background-size: cover;
  }
  
  /* Wave transitioning from light to primary (#0A1F44) */
  section.light-bg.wave-to-primary::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 100px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%230A1F44' d='M0,64L60,69.3C120,75,240,85,360,117.3C480,149,600,203,720,197.3C840,192,960,128,1080,106.7C1200,85,1320,107,1380,117.3L1440,128V320H0Z'/%3E%3C/svg%3E") no-repeat bottom;
    background-size: cover;
  }


  h1, h2, h3, .headline {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    display:flex; align-items:center;
  }

  a {text-decoration: none; color:black;}
  a:visited {text-decoration: none; color:black;}

  @media (min-width:600px) {

    .box1 {min-height:600px;}
   h1 {width:100%; text-align:center; justify-content: center;}
   h2 {width:100%; text-align:center; justify-content: center;}
   h3 {width:100%; text-align:center; justify-content: center;}

   section {padding:0 20px 220px 20px;}

   section.light-bg.wave-to-primary::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 102%;
    height: 200px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%230A1F44' d='M0,128L60,133.3C120,139,240,149,360,181.3C480,213,600,267,720,261.3C840,256,960,192,1080,170.7C1200,149,1320,171,1380,181.3L1440,192V320H0Z'/%3E%3C/svg%3E") no-repeat bottom;
    background-size: cover;
    pointer-events: none;
    z-index: 0;
  }
  section.primary-bg.wave-to-light::after {
      content: "";
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 102%;
      height: 200px;
      background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23f5f5f5' d='M0,128L60,133.3C120,139,240,149,360,181.3C480,213,600,267,720,261.3C840,256,960,192,1080,170.7C1200,149,1320,171,1380,181.3L1440,192V320H0Z'/%3E%3C/svg%3E") no-repeat bottom;
      background-size: cover;
      pointer-events: none;
      z-index: 0;
    }
  

  }

  .contactForm {
      width:100%;
      display:flex; flex-direction: column; justify-content: center;
  }

  .contactForm > div:not(:last-child) {
      margin-top:10px;
      width:100%;
  }

  .contactForm > div:not(:last-child) > div:first-child {
      font-size:14px; font-weight: 700; color:black; margin-bottom:5px; 
  }

  .sendMessage {
    background-color: #0056D2; width:100%; height:50px; border-radius:2px; margin-top:20px;
      color:white; font-size:18px; display:flex; align-items:center; justify-content:center;
      font-weight: 700; position:relative; opacity:.5;
  }

  .sendMessage > div:nth-child(2) {
      position:relative; z-index:1;
  }

  .input {
      font-size:16px; outline:0; border:0; padding:0; caret-color:black; font-weight: 700;
      width:calc(100% - 10px); background:white; height:50px; padding-left:10px; 
  }

  /* Clients */

  .registerForm {
    width:100%;
    display:flex; flex-direction: column; justify-content: center;
}

  .registerForm > div:not(:last-child) {
    margin-top:10px;
    width:100%;
}

.registerForm > div:not(:last-child) > div:first-child {
    font-size:14px; font-weight: 700; color:black; margin-bottom:5px; 
}

.registerForm > div > div:last-child > div:last-child {
  width:50px; height:100%; display:flex; align-items:center; justify-content:center;
  position:relative;
}

.registerForm > div:not(:last-child) > div:last-child {
  width:100%; display:flex; flex-direction: row;
}

.registerForm > div > div:last-child > div:first-child {
  width:calc(100% - 50px); 
}

.registerForm > div > div:last-child > div:last-child {
  width:50px; height:50px; display:flex; align-items:center; justify-content: center;
  background:white; 
}

.registerForm > div > div:last-child > div:last-child > div {
  position:absolute;
}

.fullNameCheck {
  color:green; width:100%; height:100%; visibility: hidden;
  display:flex; align-items: center; justify-content: center;
}
.businessNameCheck {
  color:green; width:100%; height:100%; visibility: hidden;
  display:flex; align-items: center; justify-content: center;
}
.phoneNumberCheck {
  color:green; width:100%; height:100%; visibility: hidden;
  display:flex; align-items: center; justify-content: center;
}
.phoneNumberX {
  color:red; width:100%; height:100%; visibility: hidden;
  display:flex; align-items: center; justify-content: center;
}
.emailCheck {
  color:green; width:100%; height:100%; visibility: hidden;
  display:flex; align-items: center; justify-content: center;
}
.emailX {
  color:red; width:100%; height:100%; visibility: hidden;
  display:flex; align-items: center; justify-content: center;
}

  .dashboard {
      width:100%; height:400px; background:blue; position:relative; z-index:2;
      display:none;
  }

.loginForm {
    width:100%;
    display:flex; flex-direction: column; justify-content: center;
}

.loginForm > div:not(:last-child) {
    margin-top:10px;
    width:100%;
}

.loginForm > div:not(:last-child) > div:first-child {
    font-size:14px; font-weight: 700; color:black; margin-bottom:5px; 
}

.getCode {
  background-color: #0056D2; width:100%; height:50px; border-radius:2px; margin-top:20px;
    color:white; font-size:18px; display:flex; align-items:center; justify-content:center;
    font-weight: 700; position:relative; opacity:.5;
}

.getCode > div:nth-child(2) {
    position:relative; z-index:1;
}

.registerButton {
    background-color: #0056D2; width:100%; height:50px; border-radius:2px; margin-top:20px;
      color:white; font-size:18px; display:flex; align-items:center; justify-content:center;
      font-weight: 700; position:relative; opacity:.5;
  }
  
  .registerButton > div:nth-child(2) {
      position:relative; z-index:1;
  }

.newUser {
    width:100%; height:50px; font-size:16px; color:white; font-weight: 700;
    display:flex; align-items:center; justify-content:center; margin-top:20px;
    background:var(--dark-gray); border-radius: 2px;
}

.existingUser {
    width:100%; height:50px; font-size:16px; color:white; font-weight: 700;
    display:flex; align-items:center; justify-content:center; margin-top:20px;
    background:var(--dark-gray); border-radius: 2px;
}

.registerContainer {
    display:none; flex-direction: column;
}
.loginContainer {
    display:flex; flex-direction: column;
}

  /* --- Primary, Secondary, Accent Styles --- */

.primaryButton {
    background-color: var(--navy);
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    text-decoration: none;
    margin-top:15px;
  }
  
  .primaryButton:hover {
    background-color: var(--navy);
    transform: scale(1.05);
  }
  
  .secondaryButton {
    background-color: var(--sky-blue);
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    text-decoration: none;
  }
  
  .secondaryButton:hover {
    background-color: var(--primary-blue);
    transform: scale(1.05);
  }
  
  .accent {
    background-color: var(--coral);
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    text-decoration: none;
  }
  
  .accent:hover {
    background-color: var(--sunset-orange);
    transform: scale(1.05);
  }

  video {

    object-fit: cover;
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:0;
    display:flex; align-items:center; justify-content:center;

}

  .logo-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 1.1rem;
    line-height: 1.2;
    color: #0A1F44; /* Dark Navy */
    text-align:left;
  }
  
  .logo-text .primary {
    display: block;
  }
  
  .logo-text .secondary {
    display: block;
    color: #005BAC; /* Royal Blue */
    letter-spacing: 1px;
    font-weight: 700;
  }

  .logo-text .primaryWhite {
      display:block; color:white;
  }
  

  .header {
      width:calc(100% - 40px); padding:0 20px; height:85px;
      display:flex; flex-direction:row; align-items:center; justify-content:space-between;
  }

  .hamburger {
      display:none;
  }

  .navBar {
    display:flex; flex-direction:row; align-items:center; justify-content:flex-end; width:100%; height:100%;
  }

  .navBar > div {
      padding:5px 8px; margin-left:10px; 
      font-size:18px; font-weight: 700; color:black; 
  }

  .main {
      height:calc(100% - 85px); overflow-y:scroll; overflow-x:hidden;
  }

  .box1Cover {
      position:absolute; z-index:1; width:100%; height:100%; background:rgb(0,0,0,.6);
      top:0; left:0;
  }

  .box1 {
      width:100%; padding:60px 0; position:relative; background:white;
      display:flex; flex-direction:column; justify-content:center; align-items: center;
  }
  .box1 > h1 {
      text-align:center; position:relative; z-index:2; color:white; font-size:36px;
  }
  .box1 > h2 {
      text-align:center; position:relative; z-index:2; color:white;
  }

  .goldilocks.box {
    --shadow-color: hsl(0deg 0% 0% / 0.5);
  }
  .box {
    filter: drop-shadow(
      1px 2px 8px var(--shadow-color)
    );
  }

  .learnMore {
      margin:20px 0;
      position:relative; z-index:2;
      font-weight:900; border-radius:2px;
      background-color: #0056D2;
      color: white;
      font-weight: 700;
      text-transform: uppercase;
      padding: 0.75rem 1.5rem;
      border: none;
      border-radius: 8px;
      display: inline-block;
      cursor: pointer;
      transition: background-color 0.3s, transform 0.2s;
      text-decoration: none;
  }

  .getStarted {
    margin:20px 0;
    position:relative; z-index:2;
    font-weight:900; border-radius:2px;
    background-color: #0056D2;
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    text-decoration: none;
  }
  .clientPortalButton {
    margin:20px 0;
    position:relative; z-index:2;
    font-weight:900; border-radius:2px;
    background-color: #0056D2;
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    text-decoration: none;
  }

  #how-it-works {
    width:100%; padding:40px 0; display:flex; flex-direction:column; justify-content:center; align-items: center;
  }


  #pricing {
    width:100%; padding:40px 0; display:flex; flex-direction:column; justify-content:center; align-items: center;
  }
  #design-services {
    width:100%; padding:40px 0; display:flex; flex-direction:column; justify-content:center; align-items: center;
  }
  #coverage-map {
    width:100%; padding:40px 0; display:flex; flex-direction:column; justify-content:center; align-items: center;
  }
  #success-stories {
    width:100%; padding:40px 0; display:flex; flex-direction:column; justify-content:center; align-items: center;
  }
  #resources {
    width:100%; padding:40px 0; display:flex; flex-direction:column; justify-content:center; align-items: center;
  }
  #faq {
    width:100%; padding:40px 0; display:flex; flex-direction:column; justify-content:center; align-items: center;
  }
  #about-us {
    width:100%; padding:40px 0; display:flex; flex-direction:column; justify-content:center; align-items: center;
  }
  #contact {
    width:100%; padding:40px 0; display:flex; flex-direction:column; justify-content:center; align-items: center;
  }
  #client-portal {
    width:100%; padding:40px 0; display:flex; flex-direction:column; justify-content:center; align-items: center;
  }

  .how-it-works-action {
      width:100%; min-height:300px; height:auto; margin-top:20px;
      position:relative; display:flex; flex-direction: row;
  }
  .move-left {
      width:75px;  display:flex; align-items:center; justify-content:flex-start;
      color:white;
  }
  .move-right {
      width:75px;  display:flex; align-items:center; justify-content:flex-end;
      color:white;
  }
  .holder {
      width:calc(100% - 150px); min-height:350px;  overflow-x:hidden; 
      position:relative; border:2px solid white; border-radius:10px;
  }

  .mover {
      width:100%; height:100%; transition: all .2s;
      position:absolute; left:0; top:0; display:-webkit-box; 
  }

  .mover > div {
      width:calc(100% - 20px); padding:0 10px; height:100%;
      display:flex; flex-direction: column; align-items:center; justify-content:space-between; text-align:center;
  }

  .loud {
      width:100%; display:flex; align-items:center; justify-content:flex-start;
  }

  .Testimonials {
    display:flex; flex-direction: row; min-height:300px; width:100%;
    margin-top:30px;
  }

  .Testimonials > div:first-child {
      width:55px; min-height:300px; height:auto; display:flex; align-items:center; justify-content:flex-start; color:white;
  }
  .Testimonials > div:last-child {
      width:55px; min-height:300px; height:auto; display:flex; align-items:center; justify-content:flex-end; color:white;
  }

  .Testimonials > div:nth-child(2) {

    border:2px solid #0f2f66; border-radius:10px;
    width:100%; position:relative; overflow-x:hidden;
    background:#0f2f66;

  }

  .TestimonialMover {
    width:100%; height:100%; transition: all .2s;
    position:relative; left:0; top:0; display:-webkit-box;
  }

  .TestimonialMover > div {
      width:calc(100% - 20px); padding:0 10px;
  }

  .stars {
      width:100%; display:flex; align-items:center; justify-content: space-evenly;
  }

  .TestimonialMover > div > div:last-child {
      width:100%; height:50px; font-size: 22px; font-weight: 900; text-align:center;
      display:flex; align-items:center; justify-content:center;
  }

  .faqMenu {width:100%;}
  .faq-item {border-bottom:1px solid #0f2f66; }
  .question {width:100%; height:50px; display:flex; align-items:center; justify-content: space-between;
padding:10px 0; margin:10px 0;}
  .question > div:first-child {font-size:18px; font-weight: 900;}
  .question > div:last-child {width:50px; height:100%; display:flex; align-items:center; justify-content: center; transition: all .2s;}
  .answer {
      width:100%; padding-bottom:20px; font-size:18px; color:white; 
      transition: all .2s; display:none; margin-bottom:10px;
  }

  .affordable {
      width:100%; display:flex; flex-direction: row; align-items:center; justify-content: flex-start;
      height:75px; font-size:26px; color:black; font-weight: 900;
  }
  .affordable > div:first-child {margin-right:6px; display:flex; align-items:center; justify-content: center;}

  #map {

    width:100%;
    height:300px;
    position:relative;
    z-index:0;
    opacity:1;
    transition: all .25s;
    border-radius:10px;

}


  footer {
    background-color: var(--navy);
    color: white;
    padding: 2rem;
    font-family: 'Montserrat', sans-serif;
  }
  
  .footer-branding {
    margin-bottom: 2rem; 
    display:flex; flex-direction: column; align-items:center; justify-content:center;
  }
  
  .footer-branding p {
    max-width: 500px;
    margin: 0.5rem auto 0;
    padding-top:10px;
    font-size: 0.9rem; text-align:center;
  }
  
  .footer-links {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
  }
  
  .footer-links h4 {
    margin-bottom: 0.5rem;
  }
  
  .footer-links ul {
    list-style: none;
    padding: 0;
  }
  
  .footer-links li {
    margin: 0.5rem 0;
  }
  
  .footer-links a {
    color: var(--sky-blue);
    text-decoration: none;
    transition: color 0.3s;
  }
  
  .footer-links a:hover {
    color: var(--primary-blue);
  }
  
  .footer-bottom {
    text-align: center;
    font-size: 0.85rem;
    border-top: 1px solid #005BAC;
    padding-top: 1rem;
    color: #005BAC;
  }

  .hamburgerMenu {
    width:calc(100% - 40px); padding:0 20px; height:100%; background:white; 
    position:absolute; left:100%; top:85px; z-index:3; transform:translateY(0); transition: all .2s; 
}
.hamburgerMenu > div:first-child > div {
    width:100%; height:60px; text-align:left; 
    display:flex; align-items:center; justify-content:flex-start;
    font-size:18px; border-bottom:1px solid var(--medium-gray); font-weight: 700;
}

.letstalk {
    width:100%; height:50px;
    display:flex; flex-direction: row; align-items:center; justify-content:center;
    margin-top:8px;
    font-weight:900; border-radius:2px;
    background-color: #0056D2;
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    text-decoration: none;
}
.letstalk > div:first-child {
    width:40px; height:100%; display:flex; align-items:center; justify-content:center;
}
.letstalk > div:last-child {font-size:18px; font-weight:700;}


.spinner {
    width:15px;
    height:15px;
    border:3px solid transparent;
    border-top:3px solid #f7f7f7;
    border-radius:100%;
    animation: spin .5s infinite;
    opacity:1;
    position:absolute;
    z-index:0;
    visibility:hidden;
}

@keyframes spin {
    from {
        transform:rotate(0);
    }
    to {
        transform:rotate(359deg);
    }
}

  @media (max-width:855px) {

    .hamburger {
        width:75px; height:100%;
        display:flex; position:relative; display:flex; align-items:center; justify-content:center;}
    .hamburgerOpen {display:flex; position:absolute; left:0; top:0; width:100%; height:100%; align-items:center; justify-content:flex-end;}
    .hamburgerClose { display:none; position:absolute; left:0; top:0; width:100%; height:100%; align-items:center; justify-content:flex-end;}
    .navBar {display:none;}
    .navBar > div {
        font-size:18px; font-weight: 700; color:black;
    }

  }