/* Global style - affects content outside of components and in components that do not use a shadow DOM (including slotted content in components) */

/* @import url("https://use.typekit.net/fgt5ulm.css"); */

/* html {
  scroll-snap-type: y mandatory;
} */


body {
  color: #333; 
  display: flex;
  flex-direction: column;
  margin: 0 auto;

  /* scroll-snap-type: y mandatory; */
}

:root {

  /* */
  /* scroll-snap-type: y mandatory; */
  scroll-padding: 50px 0 0 0;
  min-width: 300px;
 }

main {
  /* flex: 1 0 auto; 
  margin: 2em; */

  /* content sections should not become too wide */
  /* max-width: 800px; 
  margin:auto;
  padding: 2rem; */
}

/* section { */
  /* height: 100vh; */
  /* background-color: aliceblue; */
/* } */

h1 {
  font-size: 1.8rem;
  font-family: camingodos-web, sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* p { */
  /* margin-bottom: 1rem; */
/* } */




/* Hide top-level components until they have mounted
   this prevents flash of unstyled content */
page-component:not(:defined) {
  display: block;
  /* height: 100vh; */
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  }

customers-component:not(:defined) {
  /* display: block; */
  /* height: 100vh; */
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  }

   /* Scrollbar */
   *::-webkit-scrollbar {
    width: 8px;
  }
  
  *::-webkit-scrollbar-track {
    display:none;
  }

  *::-webkit-scrollbar-thumb {
    background: lightgray;
    border-radius: 4px;
  }

.quote {
  font-style: italic;
}

header-component:not(:defined) {
  display: none;
}

header-component:defined {
  display: block;
}

/* Style the slotted content of components */

slide-component h1 {
  color: white;
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 0.5rem;
  /* Make sure text wraps in Safari */
  white-space: normal;
}
slide-component p {
  color: white;
  font-size: 16px;
  /* Make sure text wraps in Safari */
  white-space: normal;
}

/* Ordered list custom numbering */

ol {
  --size: 32px;
  /* Gap between number and text */
  --gap: 15px;
  counter-reset: list-number;
  margin-left: var(--size);

  

}
ol li {
  list-style-type: none;
  
  margin: 0;
  /* list-style-position: outside; */
  
  /* display: inline-block; */
  
  /* line-height: 0.2rem; */
  /* line-height: var(--size); */

  position: relative;

  /* border: 1px solid red; */

  

  /* Keep fixed vertical separation of text, even if text is wrapping
  Margins will collapse */
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;

  /* Ensure that bullets do not touch if no line is wrapping */
  min-height: 1.8rem;
  /* min-height: calc(var(--size) + var(--gap)); */
}


ol li:before {
  counter-increment: list-number;
  content: counter(list-number);


  /* Simulate hanging indent by moving first line left by width+gap */
  position: absolute;

  /* Top position of bullet adjusted to align with row */
  top: -4px;

  margin-left: calc(-1 * var(--size) - var(--gap));
  /* margin-right: 10px; */
  margin-bottom: var(--gap);
  width:var(--size);
  height:var(--size);
  display:inline-flex;
  align-items:center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
  /* background-color:#d7385e; */
  background-color: #34B233;
  border-radius:50%;
  color:#fff;
}

.steps {
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
}