Design a Feature Selection Pane Problem 14-15

HTML-CSS
1 
In Responsive Web Design: Design a Feature Selection Page problem 14. When the checkbox is checked, the background color of the checkbox should change to a color of your choosing. and 15. When the checkbox is checked, the border color of the checkbox should change to a color of your choosing. i couldn't pass. Eventough i think it's right. Visually in Preview, it's right. I try with different mean of naming color(HEX,codename,rgb,etc) still didn't pass.

Here my source code: 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initiation scale=1.0">
    <title>Selection Feature Page</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <h1>Feature Selection</h1>
    <div class="feature-card-container">
        <label class="feature-card">
            <input type="checkbox"/>
            <h2>Cloud Storage</h2>
            <p>100 Gigabyte Secure Storage</p>
        </label>
        <label class="feature-card">
            <input type="checkbox"/>
            <h2>Dedicated Support</h2>
            <p>24/7 Customer Help</p>
        </label>
        <label class="feature-card">
            <input type="checkbox"/>
            <h2>Advanced Analytics</h2>
            <p>Insights & Reports</p>
        </label>
        <label class="feature-card">
            <input type="checkbox"/>
            <h2>Custom User Themes</h2>
            <p>Personalized Dashboard Design</p>
        </label>
        <label class="feature-card">
            <input type="checkbox"/>
            <h2>Multi User-Collab</h2>
            <p>Team Acces and Sharing</p>
        </label>
        <label class="feature-card">
            <input type="checkbox"/>
            <h2>API Access</h2>
            <p>Integrate with Your Custom Built Tools</p>
        </label>
    </div>
</body>

</html>
body{
  height:100vh;
  text-align:center;
  background-color:#f0f0f0;
}
.feature-card-container{
  padding: 5px;
  margin: auto;
}
.feature-card{
  display:inline-block;
  vertical-align: top;
  width: 40vw;
  height: 100%;
  padding: 8px;
  font-size: 0.8em;
  border: 1.5px solid #888;
  border-radius: 10px;
  margin: 10px; 
}

.feature-card:hover{
  cursor:pointer;
  border-color: hsla(130,90%,30%,0.9);
  color: hsla(130,90%,30%,0.9);
  box-shadow: 0 2px 6px hsla(130,90%,30%,0.9);
}

input[type="checkbox"]{
  display:block;
  margin-left: auto;
  appearance: none;
  width: 20px;
  height: 20px;
  border: 1px solid #888;
  border-radius: 3px;
  transition: all 0.3s;
}

input[type="checkbox"]:checked::after{
  content: "✓";
  display: block;
  font-weight: bold;
  line-height: 20px;
  color: white;
}

input[type="checkbox"]:checked {
  background-color: #4caf50; 
  border-color: #2e7d32;      
}
2

hello @shabriakmal welcome to the forum!

In the future, if you need help regarding one of the challenges, please try to use the Help Button (image) located at the bottom of the page in that challenge.

After clicking it, you will find a "Create a help post on the forum” button that will create a new Topic and attach all of your code and a link to the challenge automatically for you. You can still edit the post to explain your issue in your own words, so we can help you better.

3

Try removing this transition.