body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding-top: 96px;
      background-color: #fafafc;
  }




 



  h1 {
  color: #415472;
  font-size:48px;
  max-width: 700px;
  margin: auto;
  margin-bottom: 28px;
  line-height: 48px;
  font-family: 'Platypi', cursive;
  font-weight: 600;
  font-style: normal;
  }

  h2{
      color: #415472;
      font-size:48px; 
      overflow-wrap:break-word;
      max-width: 700px;
      margin: auto;
      margin-bottom: 32px;
      line-height: 32px;
      font-family: 'Platypi', cursive;
      font-weight: 600;
      font-style: normal;
      
  }

  h3{
      color:#5d5db1;
          font-size:20px; 
          font-weight: 700;
        margin: auto;
        margin-top: 8px;
        margin-bottom: 8px;
        font-family: 'Platypi', cursive;
        font-weight: 600;
        font-style: normal;
  }


  h4{
      color: #58585d;
      font-size: 14px;
      font-weight:600;
      margin: auto;
      margin-top: 8px;
      margin-bottom: 8px;
      font-family: 'Platypi', cursive;
      font-weight: 600;
      font-style: normal;
  }




  p {
      font-size: 16px;
      width: 55%;
      margin: auto;
      margin-bottom: 24px;
      line-height: 24px;
      color: #6a6e74;
      font-weight: normal;

  }


  #logo {
      height: 48px; /* Set the height of the logo */
      margin-right: auto; /* Add some spacing between logo and nav */
 
  }


  nav {
      background-color:rgba(232, 237, 251, 0.15); /* Use rgba for background color to apply opacity only to the color */
      backdrop-filter: blur(6px);
      padding: 0px 12px; /* Adjusted padding */
      width: 70vw;
      display: flex;
      align-items: center;
      flex-grow: 1;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      margin: auto;
      margin-top: 16px;
      border-radius: 12px;
      border: solid;
      box-shadow: 2px 2px 2px 2px rgba(49, 106, 197, 0.025);
      border-color: rgba(83, 79, 11, 0.15);
      border-width: .75px 0.5px .75px 0.5px ;
    
  }


  nav li {
      margin: 10px 8px; /* Adjusted margin */
      padding: 6px; /* Adjusted padding */
      font-size: smaller;
      justify-self: flex-end;   
    
  }

  nav ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      width: 40%;
      

  }



  nav a {
      text-decoration: none;
      color: #6a6e74;;
      font-weight: medium ;
      font-size: 14px;
      
  }

  #mainBody, #secondBody{
      text-align:center;
      margin: 0 auto; 
      padding: 8px;
      margin-bottom: 72px;
      margin-top:28px;



  }

  #hero{
      width:80%;
      height:auto;
      margin: 0 auto;
      display: grid;
      place-items: center;
      border-radius: 16px;
      aspect-ratio: auto; 
      border-color: rgb(97, 95, 95,.05);
      border-width: 4px;
      border-style:solid;
      box-shadow: 2px 2px 4px 4px rgb(65, 84, 114,.025);
      margin-bottom: 96px;
      margin-top:-28px;
  }


#featureImage{
  width: 100%;
  height: 450px;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  
}


;
  .filters{
      display: flex;
    text-wrap:nowrap;
      overflow: scroll;
      height: auto;
      width: auto;
      margin: auto;
    
  }


  button {
      padding: 8px 16px;
      background-color: #586DCB;
      color: #fff;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      margin-left: auto;
      align-content: center;
      text-align: center;


  }

  #actionButton {
      padding: 8px 16px;
      background-color: #586DCB;
      color: #fff;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      margin: auto;
      box-shadow: 2px 2px 12px 12px rgb(65, 84, 114,.025);
      align-items: center;
      display: flex;
    gap:10px;

  }


  #actionButton:hover {
      padding: 8px 16px;
      background-color: #5261e5;
      color: #fff;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      margin-left: auto;
      box-shadow: 2px 2px 12px 12px rgb(65, 84, 114,.005);
  }

  #conversion{
    
    align-items: center;
      display: flex;
      gap: 16px;
  }
  #conversion a {
      margin-right: auto;
      margin-left: auto;
  }
  #hamburger {
      
      display:none;
      border: none;
      font-size: 16px;
      cursor: pointer;
  }


    
  /*filter componenet styling*/

  #filterContainer{
      background-color: white;
      padding: 16px;
      border: solid;
      border-radius: 16px 16px 0px 0px;
      border-color: rgb(65, 84, 114, .25);
      width:40vw;
      align-content: center;  
      justify-self: center; 
      margin-left: auto;
      margin-right: auto;
    padding-bottom: 12px!important;
    margin-top: 36px;
    border-top-width: .75px;
      border-right-width: .75px;
      border-left-width: .75px;
      border-bottom-width: .5px;
      box-shadow: 2px 2px 4px 4px rgb(65, 84, 114,.025);

    

  }

  #filterPicture{
      width: 100%;
      height: 300px;;
      max-height: 400px;
      border-radius: 4px;
      object-fit:cover;
      object-position: center;
      position: relative;
      aspect-ratio: auto; 

  }


  #filterBottom{
      background-color: #FAFBFF;
      padding: 16px;
      padding-top: 12px!important;
      padding-bottom: 2px!important;
  border: solid;
      border-top-width: 0px;
      border-right-width: .75px;
      border-left-width: .75px;
      border-bottom-width: .75px;
      border-radius: 0px 0px 16px 16px;
      border-color: rgb(65, 84, 114, .25);
      width: 40vw;
      height: fit-content;
      margin-left: auto;
      margin-right: auto;
      margin-top: auto;
      margin-bottom: 16px;
      box-shadow: 2px 2px 4px 4px rgb(65, 84, 114,.045);
      border-color: rgb(65, 84, 114, .25);
      
  }

  .reflectionContent1{
      display: flexbox;
      align-items: start;
  justify-items: left;
  position: relative;


  }

  .reflectionContent1 p{
  margin: 0;
  text-align: left;


  }

  .reflectionContent2{
      display: flexbox;
      align-items: start;
  justify-items: left;
  position: relative;


  }

  .reflectionContent2 p{
  margin: 0;
  text-align: left;

  }

  .reflectionContent3{
      display: flexbox;
      align-items: start;
  justify-items: left;
  position: relative;


  }

  .reflectionContent3 p{
  margin: 0;
  text-align: left;

  }

  #filterContext{
    
      align-items: center;
      justify-content: center;
      align-content: center;  
  }

  .filters{
      display: flex;
      overflow: scroll;
      height: auto;
      width: 90%;
      gap: 4px;
  }


  .activeFilter{
      background-color:#edeffa;
      color: #415472;
      border-style: solid;
      border-width: 2px;
      border-color:  #414FC7;
      border-radius: 8px;
      margin-right: auto;
      margin-left: auto;
      
  }
  .inactiveFilter {
      background-color:#fafafa;
      color: #415472;
      border-radius: 8px;
      border-style: solid;
    border-color: rgb(106, 110, 116, .25);
    border-width: .25px;
    margin-right: auto;
  margin-left: auto;

  }

  #badge{
      background-color:#fafafa;
      border-radius: 8px;
      padding: 4px 12px;
      font-size:small;
      font-weight: 500;
      border: 1px solid rgb(106, 110, 116, .15);
      justify-self:start ; 
  width: auto !important;
  margin-bottom: 16px;
    
  }

  #stackContainer{
      text-align:center;
      margin: 0 auto; 
      width:100vw;
      height: auto;
      background-color: #ebeffb;
      padding-top:96px;
  }

  .stack {
      position: sticky;

      width: 100%;
    
      transition: position 0.5s ease;
  
      
      
    }


    

  .stack_card {
      
      border-radius: 16px;
      border: solid;
      border-width: .75px .75px .75px .75px;
      border-color: rgba(229, 235, 244, 0.25);
      align-items: center;
      width: 50vw;
      position: sticky;
      top: 90px;
      box-shadow: 0 -1px 3px rgba(local-shadow-color, .1), 0 -1px 2px rgba(local-shadow-color, .25);
      margin-left: auto;
      margin-right: auto;
      padding: 24px;
      margin-bottom: 96px;
      margin-top: 36px;
      
      height:auto;
    }
    
    .stack_card:nth-child(1) {
      background-color: #FAFBFF;    
      z-index: 1;
      box-shadow: 2px 2px 4px 4px rgb(65, 84, 114,.045);

    }
    
    .stack_card:nth-child(2) {
      background-color: #FAFBFF;    
      z-index: 2;



    }

    .stack_card:nth-child(3) {
      background-color: #FAFBFF;    
      z-index: 3;
      

      
      

    }

    .stack_card:nth-child(4) {
      background-color: #FAFBFF;    
      z-index: 4;
      

      
      

    }

    .stack_card:nth-child(5) {
      background-color: #FAFBFF;    
      z-index: 5;
      margin-bottom: -120px!important;
      

      
      

    }

    #cardContainer {
    
      display: flex;
      flex-wrap:wrap;
      align-self: center;
      align-content: center;
      gap: 24px;
      margin-top: 36px;
      justify-items: center;
    justify-content: center;
  }


    #scrollSection {

      background-color: white;
      width: 70vw;
      height: 200px;
      margin: auto;
      display: flex;
      padding: 28px;
      border-radius: 12px;
      border: solid .75px;
      border-color: rgb(65, 84, 114,.15);
      box-shadow: 2px 2px 4px 4px rgba(49, 106, 197, 0.025);

  overflow:hidden;
  margin-bottom: 96px;
  margin-top:96px;
  

    }

    #scroll-container {
      height: auto;
      overflow:hidden;
      width: auto;
      margin: auto;
      height: auto;

    
    }

    #CTA{
      display: grid;
    justify-content: flex-start;
      align-content: center;
      gap: 16px;
      text-align: left;
      margin-right: auto;
      width: auto;
    }


    #scrolltext {
      height: 100%;
      width: fit-content;
      text-align: center;
      justify-self: center;
    
      /* animation properties */
      transform: translateY(-100%);
      animation: my-animation 16s linear infinite;
    }
    
    /* Define keyframes for animation */
    @keyframes my-animation {
      from {
        transform: translateY(100%);
      }
      to {
        transform: translateY(-100%);
      }
    }

    .paused{
      animation-play-state: paused;
    }



  #footer{
      background-color: #fafafc;
    padding-left: 32px!important;
    padding: 16px;
    padding-bottom: 24px;
    border-color: #070809;
    border: solid;
    border-width: .75px 0px 0px 0px;
    border-color: rgb(65, 84, 114,.15);
    box-shadow: 2px 2px 4px 4px rgba(49, 106, 197, 0.015);



  }
    
  #linkContainer{
    display: flex;
    align-items: center;
  }
    

  .faq-heading {
      font-size: 16px;
      color: #333;
      text-align: left;
      flex: 1;
      margin-bottom: 0px;
      margin-right: 4px;
    }
    
    .faq-text {
      color: #919191;
      width: auto;
      padding: 16px;
      margin-bottom: 30px;
      text-align: left;
      display: none; /* Hide text by default */
    }
    
    .faq {
      width: 50vw;
      margin: auto;

      border-radius: 4px;

      margin-bottom: 30px;


    }
    
    .faq label {
      display: flex;
      align-items: center; /* Center align items vertically */
      justify-content: space-between; /* Space out the heading and arrow */
      cursor: pointer;
      padding:16px;
    }
    
    .faq input[type="checkbox"] {
      display: none;
    }
    
    .faq .faq-arrow {
      width: 8px; /* Adjust size as needed */
      height: 8px;
      transition: transform 0.8s;
      border-top: 2px solid rgba(0, 0, 0, 0.33);
      border-right: 2px solid rgba(0, 0, 0, 0.33);
      transform: rotate(45deg);
    }
    
    .faq input[type="checkbox"]:checked + label > .faq-arrow {
      transform: rotate(135deg);
    }
    
    .faq input[type="checkbox"]:checked + label + .faq-text {
      display: block;
    }
    
    #faqComponent{
      background-color: #ffffff;
      border-radius: 12px;
      height: auto;
      border-color: rgb(65, 84, 114,.75);
      box-shadow: 2px 2px 4px 4px rgba(49, 106, 197, 0.09);
    }














  /*responsive styling*/

  @media (max-width: 768px) and (min-width:275px) {

    menu{
    
      margin: auto;
      display: flex!important;
    }  


   
    
    nav {
          background-color: rgba(250, 241, 222, 0.095);
          backdrop-filter: blur(6px);
          padding: 8px 8px; /* Adjusted padding */
          width: auto;
          display: flex;
          flex-direction: row;
          justify-content: center;
          justify-items: center;
          flex-grow: 1;
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
        row-gap: 8px;
        border-radius: 0px;
        margin-top: 0px;
        border-width: 0px 0px .75px 0px ;
        border-color: rgba(83, 79, 11, 0.15);
      }

    



      nav ul {
          flex-direction: column; /* Change flex-direction to column */
          align-items: center;
      
          display: block;
          flex-direction: column;
      }

    nav li {
          font-size: x-small;
          justify-content: center;
          display: block;
          flex-direction: grid;
          margin-right: auto;
          margin-left: auto;
          background-color: #fafafa;
          border-radius: 4px;
          border-color: #f0f0f0;
          border-width: .5px;
          padding: 4px;
      }


      #logo {
          height: 38px;
          margin: auto; /* Add some spacing between logo and nav */
          float: left;
      }

      #conversion {
  text-align: center;
         
          display: flex;
          font-size: x-small;
          display: none; /* Hide conversion elements by default */
          flex-direction:column;
          justify-self: center;
          gap: 8px ;
          display: block;
      }

      #conversion a {
        margin: auto;
        display: block;
        padding: 4px;
        border-radius: 4px;
        border-color: #f0f0f0;
        border-width: .5px;
      }

      #hamburger {
          display: flex; /* Display the hamburger icon */
          text-align: center;
          align-items: center;
          font-size: 14px;
          width: 33px;
          height: 33px;
          justify-self: center;
          margin-left: auto;
        

          
      }


      #featureImage{
        width: 100%;
        height: 280px;
        object-fit: cover;
        object-position: center;
        border-radius: 8px;
        
      }
    
      .show-menu #nav-links,
      .show-menu #conversion {
          display: flex; /* Shown when the menu is toggled */
      }
      
      .show-menu #hamburger {
          content: '×';}


    



      #mainBody, #secondBody{
          text-align:center; 
          padding: 16px;
          align-self: center;
          margin-bottom: 48px;
          
      
      }

      h1{
          font-size: 28px;
          margin-bottom: 28px;
          line-height: 32px;
      }

  h2{

  font-size:28px;
  color: #415472;
  overflow-wrap:break-word;
  margin: auto;
  margin-bottom: 16px;
  line-height: 28px;
              
          
      }


      

      body {
          font-family: Arial, sans-serif;
          margin: 0;
          padding-top: 64px;
          background-color: #fafafc;
          justify-content: center;
          align-items: center;
      }
    

      p {
          font-size: 16px;
          color: #6a6e74;
          line-height: 20px;
          width: 95%;
          text-align: center;
          margin: auto;
          margin-bottom: 32px;
      


      }

  button {
          padding: 9px 9.55px;
          background-color: #414FC7;
          color: #fff;
          border: none;
          border-radius: 50px;
          
      }
      

      #hero{
          width:100%;
          height:auto;
          margin: 0 auto;
          display: block;
          border-radius: 4px;
          margin-top: 8px;
          margin-bottom: 48px;

      }

      
      #stackContainer{
          text-align:center;
          margin: 0 auto; 
          width:100vw;
          height: auto;
          padding-top:48px;
      }

      .stack_card {
      
          border-radius: 16px;
          border: solid, 1px;
          align-items: center;
          width:80vw;
          position: sticky;
          top: 100px;
          box-shadow: 0 -1px 3px rgba(local-shadow-color, .1), 0 -1px 2px rgba(local-shadow-color, .25);
          margin-left: auto;
          margin-right: auto;
          padding: 16px;
          margin-top:28px ;
          border-color: rgba(147, 159, 179, 0.25);
          margin-bottom:64px;
       
        }




        #scrollSection {

  gap:16px;
          background-color: white;
          width: 80vw;
          padding: 16px;
          margin: auto;
          display: grid;
          border-radius: 12px;
          border: solid .75px;
      align-items: center;
      margin-bottom: 64px;
      border-color: rgb(65, 84, 114,.15);
      height: 320px;
      margin-top:64px;
      margin-bottom: 64px;

      
        }
      
  #CTA{
      display: grid;
      gap: 16px;
    }


    #scrolltext {
      height: 100%;
      width: auto;
      text-align: center;
      justify-self: center;
      justify-content: center;
      margin: auto;
      border: #070809;
    
    }

    #footer{
      background-color: #fafafc;
    padding: 16px!important;
    border-color: #070809;
    border: solid;
    border-width: .75px 0px 0px 0px;
    border-color: rgb(65, 84, 114,.15);
    box-shadow: 2px 2px 4px 4px rgba(49, 106, 197, 0.025);



  }

  #linkContainer{
    display: grid;
  flex-direction: row;
    gap: 8px;
    align-items: center;
  }




  .faq {
      width: 90vw;
      margin: auto;

      border-radius: 4px;

      margin-bottom: 30px;


    }


  }


  @media (max-width: 425px) and (min-width:275px) {

    #actionButton {
      width: 90%;
      text-align: center;
      display: flex;
      justify-content: center;    
      font-size: 16px;
    }
  }