:root {
  --text-primary: #032f2d; /* Your primary text color */
  --text-secondary: #a8fffb; /* Your primary text color */

}
    body {font-family: Inter, Arial;}
    .container{max-width: 1200px;}
    h1,h2,h3,h4,h5,h6{font-family: Inter, Arial; font-weight: 700 !important; }
    .navbar-brand {font-family: "Tilt warp"; color: #032f2d !important; font-size:1.8rem}
    section{padding: 7rem 0;overflow: hidden}
    .form-control {
    min-height: 3rem;
    background: #fff !important;
    border-radius: 0;
    border-color: #a2dad7;
}


a {
    color: rgb(47 143 151);
    text-decoration: none;
}
    .btn-primary{
      border: 1px solid var(--text-secondary);
      background: var(--text-secondary);
      color: var(--text-primary);

    }


  .btn-primary:hover {
    background: #6eb6b3;
    border: 1px solid #6eb6b3;
          color: var(--text-primary);

}
    .custom-control-label{font-size:0.8rem;line-height:1.7}
    @media (max-width: 768px){

      .scroller.row{overflow:auto;white-space:nowrap;display:block;margin-bottom:-2rem}.scroller>div{display:inline-block;white-space:initial;width:75%;padding-bottom:2rem}
      section{
        padding-left:1rem;
        padding-right: 1rem;
      }

      .container.three-dots p {
    font-size: 1rem;
}

.container.three-dots h2 {
    font-size: 1.2rem;
}


    }

/* Optional: utility class for text-primary */
.text-primary {
  color: var(--text-primary) !important
}

.text-secondary {
  color: var(--text-secondary) !important
}

.bg-light{
  background: #a8fffb !important;
}

hr {
    margin: 1rem 0;
    color: inherit;
    border: 0;
    border-top: 2px var(--text-secondary) solid;
    opacity: 1;
}