.why-troon {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: #2e2e2e;
  background: #fff;
  overflow-x: hidden;
  padding: 120px 0 40px;
}

@media (max-width: 991px) {
  .why-troon {
    padding: 40px 0;
  }
}

.section-eyebrow {
      font-size: 16px;
      color: #666;
      text-transform: uppercase;
      line-height: 24px;
      margin-bottom: 4px;
    }

.h-40 {
      font-family: 'Roboto Flex', sans-serif;
      font-weight: 700;
      font-size: 40px;
      line-height: 1.2;
      color: #000;
      font-variation-settings: "GRAD" 0, "XOPQ" 96, "XTRA" 468, "YOPQ" 79,
        "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712, "wdth" 112;
    }

@media (max-width: 991px) { .h-40 { font-size: 32px; } }

@media (max-width: 575px) { .h-40 { font-size: 26px; } }

.h-20 {
      font-family: 'Roboto Flex', sans-serif;
      font-weight: 700;
      font-size: 20px;
      line-height: 1.2;
      color: #000;
      font-variation-settings: "GRAD" 0, "XOPQ" 96, "XTRA" 468, "YOPQ" 79,
        "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712, "wdth" 112;
    }

.body-18 { font-size: 18px; line-height: 24px; color: #2e2e2e; }
.why-troon-top{
  padding-bottom:120px;
  @media (max-width: 991px) {
    padding-bottom:60px;
  }
}
.dot-accent-sm.dot {
      display: inline-block;
      width: 12px; height: 12px;
      border-radius: 50%;
      background: #1eb7fb;
      margin-left: 4px;
      vertical-align: super;
      position: relative;
      top: 14px;
    }

.why-card {
      border-radius: 20px;
      padding: 24px 32px;
      min-height: 280px;
    }

.why-card-1 { background: linear-gradient(-33deg, rgba(245,230,173,0.2) 0.38%, rgba(241,60,119,0.2) 88.88%); }

.why-card-2 { background: linear-gradient(-33.16deg, rgba(150,198,234,0.12) 0.37%, rgba(181,151,246,0.12) 88.88%); }

.why-card-3 { background: linear-gradient(-33.16deg, rgba(111,247,232,0.1) 0.37%, rgba(31,126,161,0.1) 88.88%); }