* {
    box-sizing: border-box;
    margin: 0;
  /*   padding: 0; */
    font-family: Arial, sans-serif;
  /*   font-size: 62.5%; root font 10px */
  /*  https://www.aleksandrhovhannisyan.com/blog/62-5-percent-font-size-trick/  */
  }
  
  /* to fix
  
  -do a selector audit check and remove unnecessary or unsued selectors and comments that are no longer needed
  -figure out how to add classes in the html (with a name that makes sense) that only get applied to the mobile version but don't affect the other regular selecors in the regular version
  -play around with selectors with high specificity and see if it can be lowered without impacting anything */
  
  /* GENERAL */
  
  ::-webkit-scrollbar {
    display: none;
  }
  
  .center-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0 20px;
  }
  
  .center-3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .f-24 {
    font-size: 24px;
  }
  
  .f-36 {
    font-size: 36px;
    line-height: 36px;
  }
  
  .f-60 {
    font-size: 0px;
  }
  
  .f-64 {
    font-size: 64px;
  }
  
  .f-72 {
    font-size: 72px;
    line-height: 80.64px;
  }
  
  .left-align {
    text-align: left;
  }
  
  .max-width {
    width: 100%;
    max-width: 1280px;
  }
  
  .mb-24 {
    margin-bottom: 24px;
  }
  
  .mb-36 {
    margin-bottom: 36px;
  }
  
  .mb-40 {
    margin-bottom: 40px;
  }
  
  .mb-44 {
    margin-bottom: 44px;
  }
  
  .mb-96 {
    margin-bottom: 96px;
  }
  
  .mb-124 {
    margin-bottom: 124px;
  }
  
  .mb-224 {
    margin-bottom: 224px;
  }
  
  .ml-18 {
    margin-left: 18px;
  }
  
  .ml-24 {
    margin-left: 24px;
  }
  
  .ml-40 {
    margin-left: 40px;
  }
  
  .mr-8 {
    margin-right: 8px;
  }
  
  .mr-24 {
    margin-right: 24px;
  }
  
  .mw-1280 {
    max-width: 1280px;
    margin: 0 auto;
  }
  
  .lh-27 {
    line-height: 27px;
  }
  
  .pb-8 {
    padding-bottom: 8px;
  }
  
  .pb-96 {
    padding-bottom: 96px;
  }
  
  .pl-24 {
    padding-left: 24px;
  }
  
  .pt-96 {
    padding-top: 96px;
  }
  
  .txt-gray {
    color: #ADADAD;
  }
  
  .txt-gray-2 {
    color: #808080;
  }
  
  .txt-fade-black {
    color: #87D322;
  }
  
  .txt-white {
    color: #fff;
  }
  
  /* NAVBAR */
  
  .bg-hero {
    background: url(https://i.ibb.co/VQ5wVk6/Bg-hero.png) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  
  /* it used position absolute as well as the top and left but that didn't help create it for me (took it off the webflow, left some white space due to my-99's margin-top and overlaps the hero section visual link (https://ibb.co/b3rZgkv, https://ibb.co/V3019Ms, https://ibb.co/DC0rtQs, https://ibb.co/TwwP66b) */
  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1280px;
    height: 99px;
    margin: 0 auto;
  }
  
  .nav-btn-wrapper {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 213px;
    font-weight: 400;
    font-size: 18px;
    ;
  }
  
  .nav-btn-1 {
    display: flex;
    align-items: center;
    background: transparent;
    border: 0;
    color: #fff;
    font-weight: 400;
    font-size: 18px;
  }
  
  .nav-btn-2 {
    width: 100%;
    max-width: 129px;
    min-height: 42px;
    border: none;
    border-radius: 40px;
    background-color: #fff;
    gap: 10px;
    font-size: 18px;
    font-weight: 400;
    font-family: 'Arial', sans-serif;
    margin-right: 18px;
  }
  
  .nav-list, .footer-list {
    list-style: none;
  }
  
  .nav-menu {
    display: flex;
    width: 100%;
    max-width: 700px;
    justify-content: space-between;
    font-weight: 400;
    font-size: 18px;
  }
  
  /* SECTIONS */
  
  /* blockquote.twitter-tweet {
      
    } */
  
  h1 {
    font-size: 72px;
    font-weight: 900;
    line-height: 80.64px;
  }
  
  .arrow-img-1 {
    display: none;
  }
  
  .arrow-img-2 {
    display: none;
  }
  
  .arrow-img-3 {
    display: none;
  }
  
  .best-deal-flex-container {
    display: flex;
    justify-content: center;
    padding-bottom: 120px;
  }
  
  .best-deals, .hero, .new-tab, .platform-header, .trending-topics {
    text-align: center;
  }
  
  .btn-start {
    width: 100%;
    max-width: 180px;
    min-height: 57px;
    background-color: #A8FF35;
    border: 0;
    border-radius: 40px;
    font-size: 18px;
    font-weight: 700;
    line-height: 25.2px;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  }
  
  .bg-2 {
    background-color: #A8FF35;
  }
  
  .bg-3 {
    background-color: #FAFAFA;
  /*   alt name socials-container */
  }
  
  .bg-4 {
    background-color: #000;
  }
  
  .box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 266px;
    height: 120px;
    background-color: #F5F5F5;
    border-radius: 8px;
    margin: 16px;
  }
  
  .box img {
    width: 65%;
  }
  
  .box-2 {
    background-color: #fff;
    width: 124px;
    height: 124px;
    border-radius: 8px;
    margin: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .box-bg-green:hover {
    background-color: #A8FF35;
  }
  
  .box-2 img {
    width: 50%;
  }
  
  .em-btn-style {
    /* em for elon musk*/
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border: 0;
    width: 100%;
    max-width: 341.23px;
    height: 82px;
    background-color: #000;
    color: #fff;
    font-size: 23.81px;
  }
  
  .em-btn-style img {
    width: 100%;
    max-width: 31.74px;
    height: 31.74px;
    margin: 12px;
  }
  
  .fader {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 84.65px;
    height: 82px;
  /*   background: linear-gradient(90deg, rgba(3, 3, 3, 0.6) 50%,  rgba(0, 0, 0, 1)); */
  /*   background: linear-gradient(90deg, red 50%, blue); */
    background: linear-gradient(270deg, #030303 53.65%, rgba(3, 3, 3, 0.6) 100%);
  }
  
  .fader img {
    width: 100%;
    max-width: 15.87px;
    height: 15.87px;
  }
  
  .fader-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 72.69px;
    height: 70.42px;
  /*   background: linear-gradient(90deg, rgba(3, 3, 3, 0.6) 50%,  rgba(0, 0, 0, 1)); */
  /*   background: linear-gradient(90deg, red 50%, blue); */
    background: linear-gradient(270deg, #030303 53.65%, rgba(3, 3, 3, 0.6) 100%);
  }
  
  .fader-2 img {
    width: 100%;
    max-width: 13.54px;
    height: 13.53px;
  }
  
  .flex-socials {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .free-trial-btn, .free-trial-btn-2 {
    /* how to center in css if the width were smaller*/
    width: 100%;
    max-width: 296px;
    height: 58px;
    background-color: #A8FF35;
    border: none;
    border-radius: 29px;
    font-size: 18px;
    font-weight: 700;
    line-height: 25.2px;
  }
  
  .free-trial-btn-2 {
    background-color: #000;
    color: #fff;
  }
  
  .hero-description {
    color: #8B8B8B;
    font-size: 18px;
    line-height: 27px;
  }
  
  .hero-content-wrapper {
    /* trying to text-align center didnt work but margin: 0 auto did. Why did I not have to do that for the others section? Also why on Figma is the width 700 but it took 800px for it to show the same presentation */
  /*   border: 3px solid red; */
    width: 100%;
    max-width: 800px;
    min-height: 337px;
    margin: 0 auto;
    padding-top: 99px;
    padding-bottom: 365px;
  }
  
  .hero-content-wrapper, .platform-wrapper, .trending-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .hero-section {
    width: 100%;
    max-width: 1280px;
    min-height: 337px;
    margin: 0 auto;
  /*   border: 3px solid red; */
  }
  
  .join-btn {
    width: 100%;
    max-width: 180px;
    height: 57px;
    border-radius: 40px;
    border: none;
    background-color: #000;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 96px;
  }
  
  .open-new-tab {
  /*   width: 100%;
    max-width: 1440px; */
  /*   min-height: 742px; */
    margin: 0 auto;
  /*   border: 3px solid red; */
  }
  
  .mobile-drop-down {
    display: none;
  }
  
  .mobile-nav-logo {
    display: none;
  }
  
  .new-tab {
    font-size: 72px;
    font-weight: 700px;
    padding-bottom: 48px;
  }
  
  .no-list {
    list-style-image: url(https://i.ibb.co/nw5wY6v/Vector-167-Stroke.png);
  }
  
  .option-container {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .personal-deal-container, .premium-deal-container, .regular-deal-container {
    font-size: 18px;
    margin: 0 16px 20px;
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #fff;
    color: #000;
    border-radius: 16px;
    padding: 32px;
    text-align: left;
  }
  
  .platform-header {
    padding-top: 100px; 
    padding-bottom: 60px;
    font-size: 64px;
  }
  
  .regular-deal-container {
    background-color: #A8FF35;
  }
  
  .scroll {
    display: flex;
    overflow-x: auto;
  }
  
  .socials-container {
    display: flex;
    justify-content: center;
    padding-bottom: 60px;
    width: 100%;
  }
  
  .socials-search {
    margin: 0 auto;
    width: 293.04px;
    height: 70.42px;
    background-color: #181818;
    font-family: Roboto, sans-serif;
    font-size: 20.44px;
    display: flex;
    justify-content: center;
    align-items: center;
  /*   border: 3px solid red; */
    
  /*   look for open tab for inspiration
  
  4 boxes with a black/gray background color
  text in the middle with an icon preceding it
  x image with fader class
  transform property to set it at an angle
  outside shadow property */
  }
  
  .socials-search-1 {
    transform: rotate(-4deg);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 1);
    z-index: 4000;
  }
  
  .socials-search-1 .twitter-hero-icon, .socials-search-2 .pinterest-hero-icon, .socials-search-3 .facebook-hero-icon, .socials-search-4 .basketball-hero-icon {
    width: 100%;
    max-width: 27px;
    height: 27px;
    margin-left: 2px;
    margin-right: 12px;
    
    /* added a class on the img tag instead of doing .socials-search-1 since it was affecting the x (the icon not the twitter app) icon due to the sibling relationship on the DOM (between img tag and the div.fader-2 class) */
  }
  
  .socials-search-2 {
    transform: rotate(2deg);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 1);
    z-index: 3000;
  }
  
  .socials-search-3 {
    transform: rotate(-2deg);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 1);
    z-index: 2000;
  }
  
  .socials-search-4 {
    transform: rotate(4deg);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 1);
    z-index: 1000;
  }
  
  .socials-search-container {
    display: none;
    /* remove socials selectors in the hero section from the regular code and leave them only in the media query */
  }
  
  .startup {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .startup-companies {
  /*   border: 3px solid red; */
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .startup-header {
    margin-bottom: 64px;
    font-size: 64px;
  }
  
  .toggle-btn {
    position: relative;
    width: 100%;
    max-width: 104px;
    height: 52px;
    border: 0;
    border-radius: 99px;
    margin-top: 32px;
    margin-bottom: 32px;
  }
  
  .toggle-cir {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 100%;
    max-width: 36px;
    height: 36px;
    border-radius: 99px;
    background-color: #A8FF35;
  }
  
  .trend-btn {
    width: 100%;
    max-width: 198px;
    height: 57px;
    border-radius: 40px;
    border: 0;
    background-color: #000;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    margin-top: 44px;
    margin-bottom: 44px;
  }
  
  .underline {
    border-bottom: 1px solid #000;
    padding-bottom: 32px;
    margin-bottom: 32px;
  }
  
  .white-bg-em {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 505px;
    height: 202px;
    background-color: #fff;
    border-radius: 16px;
    margin-left: 18px;
    margin-right: 18px; /*replace with flexbox later*/
    margin-bottom: 48px;
  /*   border: 3px solid red; */
  }
  
  .w-mw-668 {
    width: 100%;
    max-width: 668px;
  }
  
  /* FOOTER */
  
  .findtrend-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    height: 100px;
  /*   border: 3px solid red; */
  }
  
  /* Justify content not working (maybe add another parent div?) */
  .footer-list {
    display: flex;
    font-size: 18px;
  }
  
  .f-li {
    display: flex;
    margin-right: 40px;
  }
  
  /* MOBILE */
  
  @media screen and (max-width: 1280px) {
    
    .pl-8 {
      padding-left: 8px;
    }
    
    .startup-header {
      text-align: center;
    }
    
    .white-bg-em {
      margin-left: 18px;
      margin-right: 18px;
    }
  }
  
  @media screen and (max-width: 1176px) {
    .best-deal-flex-container {
      flex-wrap: wrap;
    }
  }
  
  @media screen and (max-width: 891px) {
    .findtrend-footer, .footer-list {
      flex-direction: column;
    }
    
    .f-li {
      margin-bottom: 40px;
    }
    
    .footer-list {
      align-items: center;
    }
    
    .mq-mtmb-80 {
      margin-top: 80px;
      margin-bottom: 80px;
      /* mq is media query and mtmb is margin-top margin-bottom */
    } 
    
    /* at 891 px change the company panels dimensions (140x64) so that between 593 and 375 it doesn't wrap */
  }
  
  @media screen and (min-width: 506px) {
    .white-bg-em {
      margin-left: 18px;
      margin-right: 18px;
    }
  }
  
  @media screen and (max-width: 830px) {
    .best-deal-flex-container {
      flex-wrap: wrap;
    }
    
    .mobile-drop-down {
      display: block;
      margin-right: 18px;
    }
    
    .mobile-nav-logo {
      display: block;
      margin-left: 18px;
    }
    
    .navbar {
      display: none;
    }
    
    .nav-mobile {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 88px;
      margin-bottom: 56px;
    }
    
  /*   .socials-container {
      width: 100%;
    } */
  }
  
  @media screen and (max-width: 375px) {
  
    h1 {
      font-size: 28px;
      margin-left: 8px;
      margin-right: 8px;
      line-height: 40.32px;
    }
    
    .arrow-img-1 {
      display: block;
      width: 100%;
      max-width: 99px;
      height: 67.41px;
      position: relative;
      top: 24px;
      left: 228px;
    }
    
    .arrow-img-2 {
      /* doesn't match with figma but looks good */
      display: block;
      width: 100%;
      max-width: 93.46px;
      height: 64.83px;
      position: relative;
      top: -20px;
      left: 12px;
    }
    
    .arrow-img-3 {
      display: block;
      width: 100%;
      max-width: 63.37px;
      height: 66.27px;
      position: relative;
      left: 240px;
      top: -4px;
    }
    
    .best-deal-flex-container {
      flex-wrap: wrap;
    }
    
    .box {
      width: 100%;
      max-width: 140px;
      height: 64px;
      margin: 8px;
    }
    
    .box-2 {
      width: 64px;
      height: 64px;
    }
    
    .btn-start {
      width: 100%;
      max-width: 139px;
      height: 44px;
      font-size: 14px;
      line-height: 19.6px;
      margin-bottom: 60px;
    }
    
    .em-btn-style {
      width: 100%;
      max-width: 291px;
      height: 69.93px;
      font-size: 20.3px;
    }
    
    .f-24 {
      font-size: 18px;
    }
    
    .f-28 {
      font-size: 28px;
    }
    
    .f-32 {
      font-size: 32px;
    }
    
    .f-64 {
      font-size: 36px;
    } 
    
    .f-72 {
      font-size: 36px;
    }
    
    .fader {
      width: 100%;
      max-width: 72.19px;
      height: 69.93px;
    }
    
    .fader-2 {
      background: linear-gradient(270deg, rgba(24, 24, 24, 1) 53.65%, rgba(24, 24, 24, 0.8) 100%);
    }
    
    .findtrend-footer, .footer-list {
      flex-direction: column;
    }
    
    .findtrend-footer, .hero-section, .max-width, .mw-1280, .navbar {
      max-width: 375px;
    }
    
    .f-li {
      margin-bottom: 40px;
    }
    
    .footer-list {
      align-items: center;
    }
    
    .fw-900 {
      font-weight: 900;
    }
    
    .hero-content-wrapper {
  /*     display: none; */
      padding-bottom: 0;
      padding-top: 0;
    }
    
    .hero-description {
      font-size: 14px;
      line-height: 21px;
      padding: 0 28px;
    }
    
    .join-btn {
      width: 100%;
      max-width: 106px;
      height: 44px;
      font-size: 14px;
    }
    
    .lh-27 {
      font-size: 14px;
      line-height: 21px;
    }
    
    .max-width {
      display: none;
      overflow: hidden;
    }
    
    .mb-44 {
      margin-bottom: 24px;
    }
    
    .mb-124 {
      margin-bottom: 80px;
    }
    
    .mb-224 {
      margin-bottom: 160px;
    }
    
    .mt-32 {
      margin-top: 32px;
    }
    
    .mq-mtmb-80 {
      margin-top: 80px;
      margin-bottom: 80px;
      /* mq is media query and mtmb is margin-top margin-bottom */
    } 
    
  /*   .nav-mobile {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 88px;
      margin-bottom: 56px;
    } */
    
    .new-tab {
      /* figma file says font-size 36px but it doesn't look the same but it does with 32px */
      font-size: 32px;
      padding-bottom: 0;
    }
    
    .pb-8 {
      padding-bottom: 14px;
    }
    
    .personal-deal-container, .premium-deal-container, .regular-deal-container {
      min-height: 660px;
    }
    
    .personal-deal-container, .regular-deal-container {
      margin-bottom: 16px;
    }
    
    .pl-8 {
      padding-left: 8px;
    }
    
    .pl-12 {
      padding-left: 12px;
    }
    
    .pr-12 {
      padding-right: 12px;
    }
    
    .pl-pr {
      padding-left: 20px;
      padding-right: 20px;
    }
    
    .platform-header {
      font-size: 30px;
      font-weight: 900;
      padding-top: 80px;
      padding-bottom: 32px;
    }
    
    .premium-deal-container {
      margin-bottom: 80px;
    }
    
    .socials-search {
      position: relative;
      margin: 0 auto;
      width: 293.04px;
      height: 70.42px;
      background-color: #181818;
      font-family: Roboto, sans-serif;
      font-size: 20.44px;
      display: flex;
      justify-content: center;
      align-items: center;
  /*   border: 3px solid red; */
    
  /*   look for open tab for inspiration
  
  4 boxes with a black/gray background color
  text in the middle with an icon preceding it
  x image with fader class
  transform property to set it at an angle
  outside shadow property */
    }
  
    .socials-search-1 {
      transform: rotate(-4deg);
      box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 1);
      z-index: 4;
    }
  
    .socials-search-1 .twitter-hero-icon, .socials-search-2 .pinterest-hero-icon, .socials-search-3 .facebook-hero-icon, .socials-search-4 .basketball-hero-icon {
      width: 100%;
      max-width: 27px;
      height: 27px;
      margin-left: 2px;
      margin-right: 12px;
    
    /* added a class on the img tag instead of doing .socials-search-1 since it was affecting the x (the icon not the twitter app) icon due to the sibling relationship on the DOM (between img tag and the div.fader-2 class) */
    }
  
    .socials-search-2 {
      transform: rotate(2deg);
      box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 1);
      z-index: 3;
    }
  
    .socials-search-3 {
      transform: rotate(-2deg);
      box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 1);
      z-index: 2;
    }
  
    .socials-search-4 {
      transform: rotate(4deg);
      box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 1);
      z-index: 1;
    }
    
    .socials-search-container {
      display: block;
      padding-bottom: 60px;
    }
    
    .startup-header {
      margin-bottom: 32px;
      font-size: 32px;
      text-align: center;
    }
    
    .toggle-btn {
      margin-bottom: 0;
    }
    
    .trend-btn {
      width: 100%;
      max-width: 152px;
      height: 44px;
      font-size: 14px;
      margin-top: 32px;
      margin-bottom: 80px;
    }
    
    .white-bg-em {
      width: 100%;
      max-width: 339px;
      height: 118px;
      border-radius: 14px;
      margin-bottom: 0;
    }
    
    .w-mw-668 {
      max-width: 375px;
    }
    
    /* blockquote.twitter-tweet {
      
    } */
    
    h2.f-28.fw-900 {
      font-size: 28px;
    }
    
    h2.f-32 {
      font-size: 32px;
    }
    
    h2.f-72.mb-40, h2.f-72.pt-96 {
      line-height: 40.32px;
    }
    
    h2.f-72.txt-fade-black.mb-40 {
      margin-bottom: 20px;
    }
    
    span.f-60 {
      font-size: 60px;
    }
  }
  
  @media screen and (min-width: 375px) {
    .white-bg-em {
      margin-left: 18px;
      margin-right: 18px;
    }
  }
  
  /*   button {
      display: none;
    }
    
    h1 {
      font-size: 36px;
    }
     */
  
  /* for the nav display:none the list items and have a burger icon, remove findtrend text logo with just the green circle*/
  
  /* for elon text export the arrow text as an image and see if there's a better way to do it since you don't have Effra font*/
  
  /*findtrend helps you should adjust to the max-width automatically*/
  
  /* all findtrend section just let it be cut off?*/