
.options {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.options .circle {
    min-width: 25%
}

@media (min-width:1024px) {
    .start {
        max-width: 680px;
        margin:0 auto;
    }
    .start img {
    float:right
    }
    .start h1 {
         display: inline-block;
        width:360px;
        margin-top: 60px;
    }    
    .start p {
    width:360px;
        max-width: none;
        display: inline-block;
    }    
    .start button 
}

@media (max-width: 768px) {    
    .options .circle {
        width: 160px;
        margin-top: 20px;
    }
    .options .circle .circle-box {
        width:156px;
        height: 156px;
    }
       .circle span {
        font-size: 14px;
        margin-bottom: 20px;
           
    } 
    .progress-wrap {
        flex-direction: inherit;
        align-items: center;
    }
}

/* --------------------------- */

.container {
    max-width: 900px;
}
.product-right h2 {
    font-size:40px;
    font-weight: normal;
    color:#000;
    margin:0;
}
.product-right .muted {
    font-size:21px; color:#000;
}
.plan-left {
    gap:10px;
}
.plan-price {margin-right: 5px;}
.plan-item {
    border:1px solid #000;
    border-radius: 6px;
    padding: 10px 10px;
    font-size:12px;
    
}
.plan-radio::after {
    inset: 2px; }
.plan-name,.plan-sub {
    color: #000;
    font-size: 12px;
    line-height: 1.2;
    font-weight: inherit;
    display: inline;
}
.plan-list {
    gap:10px;
}
.plan-radio {
    border:1px solid #000;
    width:14px;
    height:14px;
}
.plan-note {
    font-size:12px; color:#000;
}
#btnAddToCart {
    margin:20px 0;
}
.add-cart {
    padding:10px;
    font-weight: 600;
}
.add-cart:hover {
    background: #003a2b;
    color:#fff;
}
.formula-title {
    font-size:15px; color:#000;
}
.accordion {border:none;margin-top: 20px;}
.acc-item { border: 1px solid #f2f2f2;border-width:1px 0 0;}
.acc-item:first-child {
    border-top: 1px solid #f2f2f2;
}
.acc-item:last-child {
    border-bottom: 1px solid #f2f2f2;
}
.acc-item span {
    font-size:19px; font-weight: normal;
}
.acc-item summary {
    padding: 20px 10px;
}
details[open] summary  {
    background: #f3fbfa;
}
.acc-content {
    font-size: 13px; color:#000;
    padding: 10px;
}
.acc-content p {
    margin-top:0;
    line-height: 1.3;
}

.p-logo {
    display: inline-block;
    width: 100px;
    height: 41px;
    background: url(https://ownvitamin.com/cdn/shop/files/logo-b.svg?v=1766143450&width=180);
    margin-bottom: 10px;
}

.acc-content img {
    width: 100%;
}

/* --------------------------- */

.start h1 {
    font-weight: 600;
}
h2[id='question'] {
    font-weight: 600;
}
.sub {
    color: #065741;
    font-size: 20px;
    line-height: 1.3;
}
.circle span {
    color: #000;
    font-size: 16px;
}
.back {
    background:#44B3A7 ;
}
.back:hover, .next:hover,#startBtn:hover {
    background: #065741;
    color: #C8F44A!important;
}
@media (min-width:1024px) {
    .start {
        max-width: 800px;
        margin: 0 auto;}    
    .start img {
        max-width: none;
        height:450px;
    }
    .start h1 {
        margin-top: 150px;
        margin-bottom: 20px;
    }
}

/* ----------------- */

.percent { 
    color:#065741;
    font-weight: 700;
}
.list-item .label {
    color: #000;
}
@media (min-width:768px) {
  .options[data-count-value="4"] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
   }
    .options[data-count-value="4"]  .circle:nth-child(odd) {
        padding-left: 50%;
    }
    .options[data-count-value="4"]  .circle:nth-child(even) {
        padding-right: 50%;
    }    
    .options[data-count-value="4"]  .circle {
        width: inherit;
    }

    .options[data-count-value="5"]  .circle {
        width: inherit;
    }    
    
    .options[data-count-value="6"]  .circle {
        width: inherit;
    }
          
    }
}
.start button,.nav button {
    font-weight: 600;
}
@media (max-width:768px) {
    .nav {
        display: flex;
        flex-direction: row;
        
    }
    .nav button {
        width:140px;
    }
    
}
@media (max-width:767px) {
    .form .field {
        margin-bottom: 32px;
    }
    .form .row {
        gap:0;
    }
    h2 { 
        width: 80%;
        margin: 0 10% 20px;
    }
    .nav {
        display: flex;
        flex-direction: row;
        
    }
    .nav button {
        width:45%;
    }
    .circle-box img {
      width: 130px;
      height: 130px;
      object-fit: contain;
    }
    .options {
        gap: 0;
        margin-bottom: 10px;
    }
    .options .circle .circle-box {
        height: 130px;
        width: 130px;
    }
    .options .circle {
        margin-top: 10px;
    }
}