* {
    margin: 0px;
    padding: 0px;
    list-style: none;
  }
  
  @media (prefers-color-scheme: dark) {
    body {
      background-color: #000;
      color: #fff;
    }
  }
  
  @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
  
  @font-face {
    font-family: AktivGrotesk;
    src: url(fonts/AktivGrotesk-Regular.ttf);
  }
  
  @font-face {
    font-family: GT-Super-Display;
    src: url(fonts/GT-Super-Display-Super-Trial.otf);
  }
  
  @font-face {
    font-family: GT-Super-Display_Regular;
    src: url(fonts/GT-Super-Display-Super-Trial.otf);
  }
  
  body {
    font-family: "Poppins", sans-serif;
    font-size: 16px;
  }
  
  html {
    --color-primary1: #ec9b3b;
    --color-primary2: #bf7d43;
    --color-secondary1: black;
    --color-secondary2: white;
    --color-accent1: black;
    --color-accent2: black;
    --color-white: white;
  }
  
  nav {
  display: flex;
   justify-content: space-between;
   padding: 4rem;
   padding-top: 2rem;
   padding-right: 2rem;
  }
  
  nav ul {
      display:flex;
  
  }
  
  nav ul a {
      text-decoration: none;
      color: black;
      font-weight: bold;
  }
  
  nav ul li {
  padding: 1rem;
  }
  
  
  
  /* Header */
  header {
    display: flex;
    min-height: 80vh;
    padding: 5rem;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    background-color: var(--color-primary1);
  }
  
  .header_text h1 {
    font-size: 3.4rem;
    font-family: GT-Super-Display;
    color: black;
  }
  
  .header_text p {
    font-size: 0.95rem;
    padding: 0.7rem;
    padding-left: 0rem;
    font-family: Montserrat;
  }
  
  header h1 {
    color: var(--color-secondary2);
  }
  
  .Header_p {
    padding: 3rem;
    padding-left: 0rem;
    padding-right: 0rem;
  }
  
  header p {
    color: black;
  }
  
  header button {
    margin-bottom: 5rem;
  }
  
  .header_text {
    width: 35vw;
    min-width: 300px;
  }
  
  .button_container {
    width: 100%;
  }
  
  .button {
    width: 16rem;
    border: 2px solid #293462;
    text-align: center;
  
    /* font-weight: bold; */
  }
  
  .button_container a {
    text-decoration: none;
  }
  
  .button:hover {
    background-color: #293462;
    color: white;
    font-weight: bold;
  }
  
  .header_graphics {
    width: 40vw;
    height: 30vw;
    min-width: 430px;
    min-height: 300px;
    object-fit: cover;
   margin-top: 1rem;
  }
  
  /* product section */
  #product {
    padding: 2rem;
    background-color: var(--color-primary1);
  }
  
  #product h3 {
    font-size: 1.953rem;
    line-height: 2.5rem;
    color: var(--color-secondary1);
    font-family: GT-Super-Display;
  }
  
  #product article {
    display: flex;
    min-height: 50vh;
    padding: 2rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
  }
  
  .product_text {
    width: 40vw;
    min-width: 300px;
    color: var(--color-white);
    
  }
  
  .product_text_UI {
    min
    color: var(--color-white);
  }
  
  .product_text p {
    color: var(--color-accent1);
    font-family: Montserrat;
  }
  
  .product_text a {
    color: var(--color-secondary2);
  }
  
  .product_graphics img {
    width: 45vw;
    height: 22vw;
    min-width: 130px;
    min-height: 300px;
    object-fit: cover;
    /* background-color: var(--color-primary2); */
    /* border-radius: 300px; */
  }

  
  
  #UICard2 {
      width: 100%;  
      height: 100%;
  }
  
  #product_graphicsUICard2 {
     flex-direction: column;
  }
  
  #product_graphicsUICard2 .product_text p {
      padding-top: 1rem;
      text-align:center;
  }
  
  #LayoutMobile {
    /* width: 20vw;
    height: 30vw; */
    min-width: 530px;
    min-height: 200px;
    /* object-fit: cover; */
  }
  
  
  
  
  /* highlight sections */
  .highlight {
    display: flex;
    min-height: 50vh;
    padding: 2rem;
    align-items: center;
    justify-content: space-around;
  }
  
  .highlight div {
    width: 60vw;
    color: var(--color-accent2);
    font-family: GT-Super-Display;
  }
  
  .highlight div h2 {
    font-size: 3.052rem;
    line-height: 4rem;
    color: var(--color-primary1);
  }
  
  
  
  
  
  .highlight div a {
    color: var(--color-primary2);
  }
  
  .dark {
    background-color: var(--color-accent2);
  }
  
  .dark h2 {
    color: var(--color-primary1);
  }
  
  .dark a {
    color: var(--color-primary1);
  }
  
  
  #solution h2{
      color: white;
      align-text: center;
  }
  
  
  /* Footer */
  footer {
    display: flex;
    padding: 5vh 2rem;
    align-items: top;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    background-color: var(--color-black);
    color: var(--color-white);
  }
  
  .logo_footer {
    width: 200px;
  }
  
  footer a {
    color: black;
    text-decoration: none;
  }
  
  footer h2 {
    color: black;
  }
  
  footer h3 {
    color: black;
  }
  
  footer ul {
    margin-top: 0.5rem;
    margin-left: 0rem;
  }
  
  footer ul li {
    margin: 0.4rem;
    margin-left: 0rem;
    list-style-type: none;
  }
  
  .logo_footer {
    width: 150px;
  }
  
  footer section {
    display: flex;
    max-width: 50vw;
    align-items: top;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  
  footer section div {
    margin: 0px 1rem 1rem 0rem;
  }
  
  
  @media screen and (max-width: 795px) {
  
  
      #product article {
          flex-wrap: wrap-reverse;
      }
  
      .team_container_v2 {
          flex-wrap: wrap;
          /* flex-direction: column-reverse; */
      }
  
      #UICard2 {
          /* margin:2rem; */
         min-width: 180px;
      }
  
      #product_graphicsUICard2 {
          flex-direction:row
      }
  
      .highlight div h2{
          font-size: 2.052rem;
          line-height: 3rem;
      }
  }