/* Wolfram Standalone Applications

   developer:   tajudeen
   requires:    framework.css.en
   ========================================================================== */

/* ==========================================================================
   Common Style
   ========================================================================== */

html {
    font-family: 'Source Sans Pro', Arial, sans-serif;
}

.page-width {
   width: 74.375rem;
   max-width: 100%;
   padding: 0 30px 0 30px;
   margin: 0 auto;
}

main a {
   color: #dd1100;
}

main a:hover {
   color: #F77700;
}

/* ==========================================================================
   Hero
   ========================================================================== */

main #hero #intro {
    display: flex;
    gap: 1.875rem;
    padding-top: 4.375rem;
    padding-bottom: 3.875rem;
    color: #fff;
    justify-content: space-between;
    align-items: flex-end;
}

main #hero {
    background-color: #404040;
}

main #hero h1 {
   font-size: 3.25rem;
   line-height: 1.1;
   color: #fff;
   margin-bottom: 20px;
   font-weight: 400;
}

main #hero h5 {
    margin-bottom: 0px;
    font-size: 2.2rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
}

main #hero #intro .text p span {
   font-weight: 600;
}

main #hero #intro .text p {
   margin-bottom: 1.875rem;
   font-weight: 300;
}

main #hero #intro .text {
   font-size: 1.375rem;
   line-height: 1.6;
   width: 744px;
   max-width: 100%;
}

main #hero #intro .image {
   width: 357px;
   max-width: 100%;
   padding-top: 12px;
}

main #hero #intro .text button {
   font-weight: normal;
   line-height: 1;
   background: #dd1100;
   border-radius: 0.25rem;
   border: 1px solid #b00f00;
   color: #fff;
   cursor: pointer;
   font-size: 1rem;
   padding: 0.5rem 1.3rem;
}

main #hero #intro .text button:active {
   background: #b00f00;
}

main #hero #intro .text button:hover {
   background: #fe0000;
}

span.tint {
   color: #ffdc85;
}

span.tint:hover {
   color: #F77700;
}


/* ==========================================================================
   Case Studies
   ========================================================================== */

main .two_columns {
   display: flex;
   gap: 1.9375rem;
}

main #case_studies .two_columns img {
   margin-bottom: 1.25rem;
}

main .two_columns > div {
   flex: 1 1;
}

main #case_studies {
    padding-top: 3.75rem;
    padding-bottom: 3.75rem;
}

main #case_studies h2 {
   font-size: 2.25rem;
   color: #dd1100;
   margin-bottom: 1.25rem;
}

main #case_studies h4 {
   font-size: 1.375rem;
   color: #242424;
   margin-bottom: 10px;
}

main #case_studies p {
   margin-bottom: 1rem;
   color: #585858;
   line-height: 1.5;
}

main #case_studies .two_columns p {
   font-size: 1.125rem;
}

main #case_studies p:last-of-type {
   margin-bottom: 0rem;
}

main #case_studies .page-width > p {
   margin-bottom: 2.5rem;
   font-size: 1.375rem;
   font-weight: 300;
}

/* ==========================================================================
   Key Points
   ========================================================================== */

main #key_points {
    padding-top: 3.75rem;
    padding-bottom: 3.75rem;
    background-color: #535353;
    color: #fff;
}

main #key_points h3 {
   font-size: 2.25rem;
   color: #fff;
   margin-bottom: 1.875rem;
   line-height: 1.1;
}

main #key_points .two_columns > div > p span:first-of-type {
   font-weight: 600;
   font-size: 1.25rem;
   line-height: 1.4;
   margin-bottom: 0.5rem;
}

main #key_points .two_columns > div > p span:last-of-type {
   font-size: 1.125rem;
   line-height: 1.5;
   margin-bottom: 1.875rem;
   font-weight: 300;
}

main #key_points .two_columns > div > p > span {
    display: block;
}

main #key_points .two_columns > div > p:last-of-type span:last-of-type {
   margin-bottom: 0rem;
}
/* ==========================================================================
   Join Us
   ========================================================================== */

main #join_us {
   background-color: #f86300;
   line-height: 1;
   font-size: 1.125rem;
   color: #fff;
   position: fixed;
   bottom: 0;
   width: 100%;
   z-index: 999999999;
}

main #join_us .wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
   padding-top: 1rem;
   padding-bottom: 1rem; 
}

main #join_us .wrapper:hover {
   color: #FFDD6F;
}


.wrapper > span:last-of-type {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 1rem;
}

.wrapper > span:last-of-type img {
   margin-right: 10px;
}

.wrapper > span:last-of-type img {
   transition: opacity 0.3s ease;
   content: url('/standalone-applications/img/Sticky-Icon.svg');
}

.wrapper:hover  > span:last-of-type img{
   content: url('/standalone-applications/img/Sticky-Icon-Hover.svg');
}

/* ==========================================================================
   responsive breakpoint styles
   ========================================================================== */

/* styles for medium screens (1200px)
   ========================================================================== */

@media all and (max-width: 1200px) {
   /* ====================================   Hero*/
   main #hero h1 {
      font-size: 2.7rem;
   }
}

/* styles for medium screens (900px)
   ========================================================================== */

@media all and (max-width: 900px) {
   /* ====================================   Common */
   main #join_us .wrapper, main .two_columns {
      flex-direction: column;
   }
   /* ====================================   Hero*/
   main #hero #intro {
      align-items: center;
      flex-direction: column;
      justify-content: center;
      text-align: center;
   }
   main #hero #intro .text, main #hero #intro .image {
      width: 100%;
   }
   main #hero #intro .image {
      width: fit-content;
      margin: 0 auto 20px auto;
   }
   /* ====================================   Join Us*/
   main #join_us .wrapper {
      gap: 10px;
   }
   .wrapper > span:last-of-type {
      justify-content: center;
      margin-left: 0;
   }
   .wrapper > span:first-of-type {
      text-align: center;
   }
}

/* styles for medium screens (600px)
   ========================================================================== */

@media all and (max-width: 600px) {
   /* ====================================   Common */
   .page-width {
      padding: 0 15px 0 15px;
   }
   main #hero #intro .image img {
      max-width: 65%;
   }
   main #key_points .two_columns > div > p span:last-of-type {
      margin-bottom: 1.5rem;
   }
}

/* styles for medium screens (320px)
   ========================================================================== */

@media all and (max-width: 320px) {}