@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Text&family=Open+Sans:wght@300..800&display=swap');

body {
    margin: 0px 0px;
    background-color: white;
    font-family: 'Open Sans', Arial, sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

.main-information-body {
    margin: 20px auto;
    width: 80%;
    max-width: 1000px;
}

.main-body-surround{
  width: 100%;
  padding-top: 1px;
  padding-bottom: 1px;
  background-color: rgb(245, 245, 245);
}

h1{
  font-size: clamp(1.8rem, 10vw, 3.4rem);
  text-align: start;
  font-family: "DM Serif Text", Arial, serif;
  font-display: swap;
}

h4{
font-size: 0.8rem;
}

button p {
  margin-block-start: 0;
  margin-block-end: 0;
  padding-block-start: 1rem;
  padding-block-end: 1rem;
  color: #000;
  text-decoration: none;
}

button:hover p {
  color: #fff;
}

#try-it-now-button p {
  color: white;
}

a, a:link,
a:visited,
a:hover,
a:active,
a:focus {
    /* -webkit-tap-highlight-color: transparent;  */
    color: #000 !important;
    text-decoration: none;
}

.full-width{
  width: 100%;
  background-color: rgb(245, 245, 245);
}

.fixed {
  position: fixed;
  box-shadow: 0px 10px 20px rgba(255, 255, 255, 0.8);
  z-index: 1000;
}

.bullet-point{
  margin-top: -0.5rem;
  text-indent: -1rem;  /* Moves first line left */
  padding-left: 1rem;  /* Pushes entire block right */
}

.bullet-point::before {
  padding-left: 0.5rem;
  content: " - ";  
}


/* Top nav bar buttons */
.top-line-container {
  max-width: 1400px;
    padding-top: 20px;
    padding-bottom: 20px;
    display: flex;
    justify-content:space-between;
    /* background-color: rgb(245, 245, 245); */
}

.top-line-buttons {
  display: flex;
  justify-content: center;
}

.top-line-container button {
    font-size: 1rem;
    width: 100px;
    margin-left: 20px;
    background-color: transparent;
    border: none;
    /* border-width: 2px; */
    /* border-style: solid; */
    border-radius: 8px;
    /* border-color: black; */
}
.top-line-container .demo-button {
  width: auto;
  color: white;
  background-color: rgb(35, 98, 35);
  
  margin-left: 20px;
  border-radius: 8px;
  padding: 2px 20px;
}

.top-line-container .login-button {
  border-width: 2px;
  border-style: solid;  
  border-color: black;
}

.top-line-container button:hover {
    background-color: black;
    color: white;
    cursor: pointer;
}

.top-line-container .selected button:hover {
  color: black;
  cursor: pointer;
}

.top-line-container button:hover p a { 
    color: white;
}

.top-line-container .selected button:hover p a { 
  color: black;
}

  /* selected button doesn't change */
    .selected button {
      border-radius: 0px;
      border-bottom: 2px solid rgb(35, 98, 35);
    }
    .selected button:hover{
      background-color: inherit;
    }

    .selected button:hover a{
      color: black;
    }

/* Request button */

.request-button {
  border: none;
  border-radius: 8px;
  position: relative;
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: bold;
  font-size: 1em;
  cursor: pointer;
  /* background-image: linear-gradient(to right, #02aab0 0%, #00cdac 70%); */
  background-color: rgb(35, 98, 35);
  /* background-image: linear-gradient(to bottom right, rgb(35, 98, 35), #7B9E4C, #4C7B9E); */

}

/* .request-button::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: 8px;
  
  background-image: linear-gradient(to bottom right, rgb(252, 77, 75) 10%, rgb(236, 0, 168) 30%, rgb(140, 0, 255) 40%, rgb(74, 73, 255) 50%, rgb(47, 165, 251) 60%, rgb(51, 214, 199) 80%);
  background-image: linear-gradient(to right, #02aab0 0%, #00cdac 70%);
  z-index: -1;
  
} */

/*
.request-button:hover{
  color: white;
  z-index: 0;
  /* box-shadow: 40px 0 50px rgba(0, 0, 255, 0.25), -40px 0 50px rgba(128, 0, 128, 0.25); */
/*}*/



/* sections */

.heading-subheading {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  text-align: center;
  padding-top: 120px;
  padding-bottom: 40px;
}

.heading-subheading h2 {
  font-size: 1.5rem;
  font-weight: 400;
  text-align: start;
}

.heading-subheading img {
  width: 70%;
}

.space-after-heading-text {
  height: 80px;
}

/* feature section */
.feature-item {
  margin: 80px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.feature-text, .feature-image {
  width: 45%;
  margin-left: 2.5%;
  margin-right: 2.5%;
}
.feature-text .pre-title{
  color: white;
  background-color: rgb(46, 125,50);
  padding: 0.5em 2em;
  border: none;
  border-radius: 1000px;
  position: relative;
  
  width: max-content;
  display: flex;
  align-items: center;
  font-family:'Open Sans', Arial, sans-serif;
  font-weight: bold;
  font-size: 1em;
}

.about-me-section {
  display: flex;
  padding-top: 60px;
  padding-bottom: 60px;
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.about-me-text {
  padding-left: 2.5%;
  padding-right: 2.5%;
  width: 100%;
}

.about-me-image {
  padding: 2.5%;
}

.feature-image {
  
}
.feature-text .pre-title{
  
}

.feature-text {
  padding-bottom: 40px;
  
}

.feature-text p {
  
}

.feature-image img {
  width: 100%;
}

/* font styles */

.title {
  font-size: 2em;
  font-family: "DM Serif Text", Arial, serif;
  font-weight: 900;
  font-style: normal;
}

.login-trial-buttons {
  display: flex;
  justify-content: flex-end;
}

.heading {
    margin-top: 40px;
    margin-bottom: 20px;
    font-size: 1.2em;
    font-family: "DM Serif Text", Arial, serif;
    font-style: normal;
    font-weight: 700;
}

.semibold {
    font-weight: 500;
}

/* bullets */
.bullet {
    display: flex;
    margin-left: 10px;
}

.feature-link{
  font-weight: 500;
}

.feature-link::after {
  content: " →"; /* Unicode arrow */
}


.title-video-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: flex-end;
  
}
.title-container{
  padding: 0px 5%;
  padding-top: 20px;
  width: 45%;
  display: flex;
  flex-direction: column;
  align-content: start;
}
.video-container{
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

video {
  width: 100%;
  max-width: 1200px;
  height: auto;
}
/* .bullet .semibold::before{
        content: "  -  "; 
        color: black;   
        margin-right: 5px;
}

.bullet .bulletpoint::before{
    content: "  -  "; 
    color: black;    
    margin-right: 5px; 
}

/* GRID */

.grid {
    margin-left: auto;
    margin-right: auto;
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    padding-left: 24px;
    padding-right: 24px;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.footer-grid-container {
    max-width: 1000px;
}

.grid-item {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 0;
    overflow: hidden;
    min-height: 200px;
    color: black;
    border-radius: 25px;
}
.logo-company-name-footer {
    display: flex;
  }

.footer-grid-item {
    min-height: 0;
  }

  .large-span-6, .footer-large-span-6 {
    grid-column: span 6;
  }
  
  .large-span-4, .footer-large-span-4 {
    grid-column: span 4;
  }
  
  .footer-large-span-5{
    grid-column: span 5;
  }

  .footer-main-text-block {
    margin: 0px;
  }

  .large-span-2 {
    grid-column: span 2;
  }

  .large-span-3 {
    grid-column: span 3;
  }

  .large-span-12 {
    grid-column: span 12;
  }

  .grid-span-middle{
    grid-column: span 4;
  }
  .grid-span-edge {
    grid-column: span 4;
  }

  
  .dm-serif-text-regular{
    font-family: "DM Serif Text", Arial, serif;
    font-weight: 600;
    font-style: normal;
  }

  .footer-button-like-paragraph {
    width: 100%;
    background-color: transparent;
    border: none; 
    font: inherit;
    font-size: 0.8em;
    cursor: pointer;
    outline: none;
    text-align: left; /* Align text to left to resemble a paragraph */
    padding-inline: 0px;
    padding-block-start: 0.5rem;
    padding-block-end: 0.5rem;
  }

  .footer-button-like-paragraph:hover {
    text-decoration: underline;
  }

  .rics-image {
    width: 170px;
    margin-left: -15px;
  }

  footer {
    padding-top: 24px;
    
    
  }

  footer p {
    font-size: 0.8em;
    margin-block-start: 0;
    margin-block-end: 0;
    padding-block-start: 0.5rem;
    padding-block-end: 0.5rem;
  }

  .footer-grid-container{
    
    
  }

  @media (max-width: 1020px){
    .grid-span-middle{
      grid-column: span 12;
      grid-row: 2;
    }
    .grid-span-edge {
      grid-column: span 6;
      grid-row: 1;
    }

    .heading-subheading{
      padding-top: 160px;
    }
  }

  @media (max-width: 768px) {
    .grid {
      grid-column-gap: 12px;
      grid-row-gap: 12px;
      padding-left: 12px;
      padding-right: 12px;
    }
    .top-line-container{
      flex-direction: column;
      margin: 0px 0px 0px;
    }
    .top-line-container .title {
      margin-bottom: 10px;
    }
    .top-line-container button {
      font-size: 0.8rem;
    }

   
    
    h1 {
      margin: 0px; 
    }

    .title-container .para-size-mobile{
      font-size: 1rem;
      padding-bottom: 40px;
    }

    .title-container {
      width: 100%;
      box-sizing: border-box;
    }
    .login-button {
      display: none;
    }
    .title-video-container{
      flex-direction: column;
    }
    .main-information-body{
      width: 100%;
    }
    .feature-item {
      flex-direction: column;
    }
    .feature-text, .feature-image {
      width: 80%;
    }
    .feature-text {
      order: -1;
    }

    .about-me-section {
      flex-direction: column;
      width: 80%;
      margin-left: auto;
      margin-right: auto;
    }

    .about-me-text{
      padding: 0px;
    }

    .about-me-image {
      display: flex;
  justify-content: center;
      width: 100%;
      
    }
    .about-me-image img {
      width: 70%;
      /* height: 100%; */
      object-fit: contain;
    }

    .small-span-12 {
      grid-column: span 12;
    }

    .rics-image{
      margin-bottom: 40px;
    }

  


  }