/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
}

.container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
}

h1, h2, h3 {
    color: #1e3a5f;
    margin-bottom: 20px;
}

h2 {
    font-size: 2rem;
    margin: 30px 0;
}

p {
    margin-bottom: 15px;
}

img {
    max-width: 100%;
    height: auto;
}

.bold {
    font-weight: bold;
}

/* Header */
header {
    background-color: white;
    padding: 5px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    height: 70px;
}

.rating {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.stars {
    color: #f8a100;
    font-size: 1rem;
    letter-spacing: 2px;
}
.rating p {margin-bottom: 0;}
.contact-info {
    text-align: right; position:relative; padding-left: 38px; line-height: 18px; padding-right: 10px;
}

.contact-info p {
    margin: 0;
    font-size: 0.9rem;
}
.phone-icon {width: 32px; height: 32px; border-radius: 50%; border: solid 2px #f8a100; position: absolute; left: -0; top:0; text-align: center; padding-top: 5px;}
.phone-icon svg {width: 16px; fill: rgb(45, 121, 197);}
.phone-number {
    display: inline-block;
    color: #f8a100;
    text-decoration: none;
    font-weight: bold;
    margin-top: 0px;
}

/* Progress Bar */
.progress-container {display: flex; justify-content: space-between; align-items: center; width: 100%; background-color: rgb(235, 241, 250); border: none;}
.item-progress {display: flex; line-height: 34px; font-weight: 500; padding: 2px 12px; border-right: solid 1px rgb(233, 137, 47);}
.item-progress:last-child {border:none;}
.item-progress.active {color: #fff; position:relative}
.item-progress span {position: relative; z-index: 2;}
.progress-container .progress-bar-container {display: flex; width: 100%; height: 38px; align-items: center; flex: 1 1 0%; position: relative; font-size: 13px;}
.step-detail {background: #000; color: #fff; font-size: 13px; padding: 0 12px; line-height: 38px;}

.progress-topbar {z-index:0; width:0; background:rgb(233, 137, 47); position: absolute; left: 0; top: 0; height: 100%; transition: ease all 0.5s;}
.step1 .progress-topbar {width:20%}
.active.complete .progress-topbar {width:100%}
.active.half .progress-topbar {width:50%}

.progress-mobile {width:10%; background:rgb(233, 137, 47); position: absolute;  left: 0; top: 0; height: 100%; display: none;}
.back-button {
    display: flex;
    align-items: center;
    background-color:#09477e;
    color: #fff;
    border: none;
    padding: 2px 12px;
    border-radius: 0px;
    cursor: pointer;
    font-size: 0.9rem; line-height: 34px;
}

.arrow {
    margin-right: 5px;
}

.progress-steps {
    display: flex;
    flex: 1;
    justify-content: center;
    gap: 20px;
}


/* Main Content */
main {
    padding: 0;
}

.main-container {
    display: flex;
    gap: 0px; height: calc(100vh - 87px);
}

.main-content {background-color: white; padding: 0px; width: calc(100vw - 320px);}
.main-content .inner-cont {padding: 24px; display: flex; flex-direction: column; min-height: calc(100vh - 150px);}
.home-cont {max-width: 1000px; width:100%; margin:25px auto; flex: 1 1 auto; flex-direction: column; justify-content: center; align-items: center;}
.main-content h2 {
    text-align: center;
    margin-bottom: 40px;
}

/* Benefits Section */
.benefits {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 40px; max-width: 500px; margin: 0 auto;
}

.benefit {
    display: flex;
    align-items: center;
    gap: 10px;
}

.benefit-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid #f8a100;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.benefit-icon img {
    width: 30px;
    height: 30px;
}

.benefit-text p {
    font-size: 16px; font-weight: 500;
    margin: 0;
}

/* Continue Button */
.continue-button {display: block; width: 280px; background-color: #f16e16; color: white;
    border: none;
    padding: 14px 15px;
    border-radius: 5px;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    margin: 30px auto;
    transition: background-color 0.3s;
}

.continue-button:hover {
    background-color: #f8a100;
}
.button-logos {display:flex; justify-content:space-between;align-items: center; flex-wrap: wrap;gap: 20px;}
.button-logos .continue-button {display: inline-block;}
/* Insurance Logos */
.insurance-logos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 40px;
}

.insurance-logos img {
    height: 35px;
    opacity: 0.95; color: transparent;
    transition: opacity 0.3s;
}

.insurance-logos img:hover {
    opacity: 1;
}
.navigation-bar {width:100%;}
.top-navigation-bar {background: #073b91; width: 100%; padding: 15px 24px; vertical-align: top;}
.top-navigation-bar .top-nav-text, .top-navigation-bar img {display: inline-block; vertical-align: top;}
.top-navigation-bar .top-nav-text {line-height: 24px;}
.top-navigation-bar .top-nav-text h5 {color:#e9892f; font-size: 20px; margin-bottom: 0;}
.top-navigation-bar .top-nav-text p {font-size: 18px; font-weight: bold; color: #fff; margin-bottom: 0;}
.bottom-navigation-bar {border-top: 1px solid #b9c6db; padding:12px 0;background: linear-gradient(0deg, rgba(213, 221, 233, 0.2) 0%, rgba(213, 221, 233, 0.2) 100%), #fff;}
.bottom-navigation-bar .steps-cont {display: flex; justify-content: space-between; align-items: start; max-width: 483px; width: 100%; margin: 0 auto;}
.bottom-navigation-bar .steps-cont .step {width:100px; text-align: center;}
.bottom-navigation-bar .steps-cont .step h6 {position:relative; font-size: 14px; color: #111; width: 96px; border-top: solid 2px #f7d3b2; padding: 3px 0 0; margin: 0 auto;}
.bottom-navigation-bar .steps-cont .step h6.active:before {position: absolute; content: ''; height: 2px; left: 0; top: -2px; background: #e9892f; width: 5%;}
.bottom-navigation-bar .steps-cont .step p {font-size: 12px; color: #000; padding: 2px 0; margin: 0;}


.lds-roller {
    /* change color here */
    color: #e01010
  }
  .lds-roller,
  .lds-roller div,
  .lds-roller div:after {
    box-sizing: border-box;
  }
  .lds-roller {
    display: block; margin: 0 auto;
    position: relative;
    width: 80px;
    height: 80px;
  }
  .lds-roller div {
    animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    transform-origin: 40px 40px;
  }
  .lds-roller div:after {
    content: " ";
    display: block;
    position: absolute;
    width: 7.2px;
    height: 7.2px;
    border-radius: 50%;
    background: currentColor;
    margin: -3.6px 0 0 -3.6px;
  }
  .lds-roller div:nth-child(1) {
    animation-delay: -0.036s;
  }
  .lds-roller div:nth-child(1):after {
    top: 62.62742px;
    left: 62.62742px;
  }
  .lds-roller div:nth-child(2) {
    animation-delay: -0.072s;
  }
  .lds-roller div:nth-child(2):after {
    top: 67.71281px;
    left: 56px;
  }
  .lds-roller div:nth-child(3) {
    animation-delay: -0.108s;
  }
  .lds-roller div:nth-child(3):after {
    top: 70.90963px;
    left: 48.28221px;
  }
  .lds-roller div:nth-child(4) {
    animation-delay: -0.144s;
  }
  .lds-roller div:nth-child(4):after {
    top: 72px;
    left: 40px;
  }
  .lds-roller div:nth-child(5) {
    animation-delay: -0.18s;
  }
  .lds-roller div:nth-child(5):after {
    top: 70.90963px;
    left: 31.71779px;
  }
  .lds-roller div:nth-child(6) {
    animation-delay: -0.216s;
  }
  .lds-roller div:nth-child(6):after {
    top: 67.71281px;
    left: 24px;
  }
  .lds-roller div:nth-child(7) {
    animation-delay: -0.252s;
  }
  .lds-roller div:nth-child(7):after {
    top: 62.62742px;
    left: 17.37258px;
  }
  .lds-roller div:nth-child(8) {
    animation-delay: -0.288s;
  }
  .lds-roller div:nth-child(8):after {
    top: 56px;
    left: 12.28719px;
  }
  @keyframes lds-roller {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  .plans {margin: 20px auto 60px;padding: 0px 5px; position: relative;z-index:4; max-width:900px; }
  .terms {margin: 20px auto 60px;padding: 0px 5px; position: relative;z-index:4; max-width:700px; }
  .plan {background:rgb(240, 250, 255);  position:relative; margin:35px 0 50px;display:flex;border-radius:8px;}
  
  .feature-title {background:#9fc2ee; padding:6px 12px; color:#0c2f59; font-size:15px; border-top-left-radius: 8px; width:100%; display:none}
  .plan .plan-title {background: rgb(224, 239, 245); color:#111; width:41%; border-top-left-radius: 8px; border-bottom-left-radius: 8px;  position:relative;}
  .plan .plan-title .plan-excerpt {font-size:13px; padding:30px 20px 0px; display: none;}
  .plan .plan-title .plan-name {font-family: 'Mulish', sans-serif; font-weight:500; font-size:24px; padding:25px 20px 5px 20px;}
  .plan .plan-description {padding:20px 25px 15px; width:59%;border-top-right-radius: 8px; border-bottom-right-radius: 8px;}
  .plan .plan-description h3 {padding:0 10px; margin-bottom: 8px;}
  .plan .graybox {background:#fff; padding:10px 10px; text-align:center; height: 100%; align-items: center; justify-content: center; flex-direction: column; display: flex;}
  .plan .graybox p {font-size:14px; color:#333; margin:0;line-height:16px;}
  .plan .graybox .price {font-size:26px; color:#0d4cab; font-family: 'Mulish', sans-serif; font-weight:500;line-height:32px;}
  .plan .graybox .discount {font-size:12px; text-decoration:line-through; color:#ef233c; line-height:10px;}
  .plan .feature {margin:0 0 5px; padding:0 10px; display:flex; justify-content: space-between;}
  .plan .feature h3 {font-size:13px; display:flex; margin:0; font-weight:400;}
  .plan .feature svg {fill:green; display:flex; width:10px; height:10px;}
  .plan .plan-footer {padding:0px; position:absolute; bottom:0; left:0; width:100%;}
  .plan .seal-bronze, .plan .seal-silver, .plan .seal-gold, .plan .seal-platinum, .plan .seal-catastrophic {padding:9px 13px; display:flex; align-items:center; border-bottom-left-radius: 8px; vertical-align:middle; background: #abbaab;}
  .plan .seal-bronze img, .plan .seal-silver img, .plan .seal-gold img, .plan .seal-platinum img, .plan .seal-catastrophic img {width:18px; height:auto; display:inline-block; margin-right:0px;vertical-align:middle;}
  .plan .seal-bronze .text-seal, .plan .seal-silver .text-seal, .plan .seal-gold .text-seal, .plan .seal-platinum .text-seal, .plan .seal-catastrophic .text-seal {vertical-align:middle;}
  .plan .seal-bronze .rating, .plan .seal-silver .rating, .plan .seal-gold .rating, .plan .seal-platinum .rating, .plan .seal-catastrophic .rating  {display:flex; align-items:center; margin-left:6px;}
  
  .plan .seal-bronze { background: -webkit-linear-gradient(to bottom, #FFE7D1, #DBAF84); background: linear-gradient(to bottom, #FFE7D1, #DBAF84);color:#111}
  .plan .seal-silver {background: -webkit-linear-gradient(to bottom, #F0F2F7, #BBC1C4); background: linear-gradient(to bottom, #F0F2F7, #BBC1C4);color:#111}
  .plan .seal-gold {background: -webkit-linear-gradient(to bottom, #FFF6D4, #EBBF67); background: linear-gradient(to bottom, #FFF6D4, #EBBF67); color:#111}
  .plan .seal-platinum {background: -webkit-linear-gradient(to bottom, #F5F5F5, #D1D1D1); background: linear-gradient(to bottom, #F5F5F5, #D1D1D1); color:#111;}
  .plan .seal-catastrophic {background: -webkit-linear-gradient(to bottom, #FD1D1D, #833AB4); background: linear-gradient(to bottom, #FD1D1D, #833AB4); color: #fff;}
 .plan .plan-footer svg {color:rgba(123,123,123,.3)!important;}
  .plan .seal-silver svg.on {color:#ffaf03!important;}
  .plan .seal-bronze svg.on {color:#ffaf03!important;}
  .plan .seal-gold svg.on {color:#e6f1f5!important;}
  .plan .seal-platinum svg.on {color:#ffaf03!important;}
  .plan .seal-catastrophic svg.on {color:#ffaf03!important;}
  
  .plan .btn-order, .btn-styl.terms-btn {margin-top:10px; max-width: 280px; margin: 10px auto 0; font-size:18px; padding:7px 15px; background-color: #f16e16; color: white; font-weight: bold; border:none; width:100%;}
  .btn-styl.terms-btn {border-radius: 5px;}
  .plan.plan-b .feature-title {position:absolute; border-top-right-radius: 8px; width:auto; top:-35px;}
  .plan.plan-b .plan-title {border-top-left-radius: 0; width:50%; padding-bottom:30px;}
  .plan.plan-b .plan-description {width:50%; text-align: center;}
  .plan.plan-b .plan-description .row {text-align: left;}
  .plan-b .price-wrap {padding:10px 20px;}
  .plan.plan-b .plan-excerpt {padding-top:10px;}
  .plan.plan-b .plan-name {line-height:26px;}

  .thanks {padding-top: 50px;}
  .thanks .btn.continue-button {width: auto;}
  .signature-pad {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    font-size: 10px;
    width: 100%;
    height: 300px;
    max-width: 700px;
    max-height: 460px;
    border: 1px solid #e8e8e8;
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.08) inset;
    border-radius: 4px;
    padding: 16px;
    }
    .signature-pad--body {
        position: relative;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        border: 1px solid #f4f4f4;
        }
        .signature-pad--body canvas {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            border-radius: 4px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
            }
    .signature-pad::before, .signature-pad::after {
        position: absolute;
        z-index: -1;
        content: "";
        width: 40%;
        height: 10px;
        bottom: 10px;
        background: transparent;
        box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4);
        }
        .signature-pad::before {
            left: 20px;
            -webkit-transform: skew(-3deg) rotate(-3deg);
            transform: skew(-3deg) rotate(-3deg);
            }
            .signature-pad::after {
                right: 20px;
                -webkit-transform: skew(3deg) rotate(3deg);
                transform: skew(3deg) rotate(3deg);
                }
/* Sidebar */
.sidebar {
    width:320px;
    background-color: #09477e;
    color: white;
    overflow-y: auto;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.sidebar h2 {
    color: white;
    font-size: 26px; line-height: 32px;
    margin: 0;
}

.sidebar p {
    color: rgba(255, 255, 255, 0.9);
}

.sidebar h3 {
    color: white;
    margin: 0px; font-size: 17px; line-height: 22px;
}

.sidebar-section {padding: 24px; position:relative;background: radial-gradient(75.94% 100% at 50% 0px, rgba(40, 51, 64, 0.125) 0px, rgba(40, 51, 64, 0) 100%);}
.arrow-down {content: " "; position: absolute; left: 50%; top: 0; width: 0; height: 0; border: 11px solid rgba(136,183,213,0); border-top: 11px solid #09477e; margin-left: -11px;}
.requeriments-section {display: flex; justify-content: space-between;}

/* Eligibility Progress */
.eligibility-progress {
    margin: 10px 0; display: flex; gap: 10px;
}

.sidebar .progress-bar-container {
    height: 8px;
    background-color: rgba(255, 255, 255, 0.3);
    margin: 10px 0;
    position: relative; flex: 1 1 0%;
}

.progress-bar-fill {
    height: 100%;
    background-color: #f8a100;
    border-radius: 5px;
}

.progress-percentage {
    font-size: 0.9rem;
}

/* Requirements List */
.requirements-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 10px 0;
}

.requirement {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 1px;
    opacity: 0.5;
}

.requirement.active {
    opacity: 1;
}

.requirement-icon {
    width: 1.25rem;
}

/* Person Illustration */
.person-illustration {
    text-align: center;
    margin: 0px 0;
}

.person-illustration img {
    max-height: 200px;
}

/* ACA Logo */
.aca-logo {
    margin: 5px 0;
}

.aca-logo img {
    max-height: 80px;
}

/* Agent Info */
.agent-info {
    margin-top: 30px;
}

.checklist {
    margin-top: 10px;
}

.checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 1px;
}

.check-icon {
    color: #fff;
    font-weight: bold;
    font-size: 1.2rem;
}

.gross-msg {text-align: center; color: #777;}
.gross-msg span, h2 span {color: rgb(233, 137, 47);}

.back-btn {font-size: 14px; color: #888; margin-right: 5px; border-radius: 3px; padding: 8px 26px; font-family: 'Mulish', sans-serif; font-weight: 600; text-decoration: none; background: #E5E5E5; height: 43px; display: inline-block; vertical-align: top; line-height: 27px; transform-origin: bottom;animation-duration: 2s; animation-iteration-count:infinite; box-shadow: none;border:none;}
.btn-styl:hover {box-shadow: 0 0 12px rgba(0,0,0,.4);}
.back-btn:hover {box-shadow: 0 0 12px rgba(0,0,0,.2); color: #444;}
.off-quest {transform:scale(0); opacity: 0; display: none}

.option {margin: 0 0 12px; color: #fff;  display: inline-block; height: 50px;  background: rgb(220, 130, 46); width: 100%; border-radius: 8px;
    text-align: center; line-height: 45px; transition: ease 0.5s all; cursor: pointer; font-size: 18px; font-weight: bold;}

.option:hover {box-shadow: 0 0 22px rgba(0, 0, 0, .1); background: rgb(220, 130, 46);}

.option.active {box-shadow: 0 0 16px rgba(0, 0, 0, .12); color: #fff; background:rgb(171, 99, 31);}

.option.check {width:48%; max-width: 158px; height: 48px; text-align: left; border: solid 1px rgb(44, 120, 195); margin: 0; border-radius: 6px; padding: 12px 12px 12px 44px; position:relative; background:#fff; font-size: 16px; color: #000; line-height: 24px;}
.option.check:before {content: ''; display: block; width:20px; border-radius: 50%; height: 20px; left:12px; top: 12px; position: absolute; border: solid 1px rgb(44, 120, 195); }
.option.check.active:before {background: rgb(44, 120, 195);}
.option.check:hover {background: #fff;}
.option.check.first {border-top-right-radius: 0; border-bottom-right-radius: 0;}
.option.check.second {border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -5px;}
.option.check.big {max-width: 258px;height: 170px; vertical-align:top;}
label {margin-bottom: 0; font-weight: bold;}
.copy-tcpa {font-size:11px; color:#666; line-height:12px; padding:5px 0;}
      .copy-tcpa a {color:#666;}
      .small {font-size: 13px; margin-bottom: 0;}
.check-2 input {-webkit-box-align: center; -ms-flex-align: center; -ms-flex-negative: 0; align-items: center; -webkit-appearance: none; appearance: none; background-color: #fff;  border: 2px solid #262626;  border-radius: 0;  cursor: pointer; display: inline-block; flex-shrink: 0; height: 32px; width:32px; justify-items: center; margin: 0; place-content: center; position: relative; line-height: 34px;}
.check-2 input[type=radio] {border-color:#262626;accent-color:#35CB74;display: inline-grid; border-radius: 100%}
.check-2 input[type=checkbox] {border-color:#262626;accent-color:#35CB74;display: inline-grid; border-radius: 4px; width:24px; height:24px;}
.check-2 input[type=radio]:checked:before {border-radius: 100%; box-shadow: inset 0 0 4em 1em #046791; content:''; height: 22px; opacity:1; width:22px;}
.check-2 input[type=checkbox]:checked:before {border-radius:2px; box-shadow: inset 0 0 4em 1em #046791; content:''; height: 14px; opacity:1; width:14px;}
.check-2 label {vertical-align: top; display: inline-block; line-height: 18px; padding-bottom: 12px; width: 90%}
label small {font-size: 13px; font-weight: normal}
.check-2 label.form-check-label {font-size: 12px; line-height: 14px; width:89%}
.form-check label {font-size: 12px; }
.iti {width:100%;}
.form-icome img {width: 350px;}
.form-group {padding-bottom:10px;}
.form-group label {font-size: 15px; color: #262626; font-weight:bold;display:block; padding: 5px 0;}
.label-checkgroup {display:block;}
.plans-check {max-width:410px; margin:0 auto;}
.plans-check .check-2 input {width:20px; height:20px; vertical-align:middle;}
.plans-check .check-2 input[type=radio]:checked:before {width:10px; height:10px; box-shadow: inset 0 0 4em 1em #46900a;}
.plans-check .check-2 label {font-weight:normal; line-height:12px; padding-bottom:10px;}
.check-2 input[type=checkbox]  {width:20px; height:20px; vertical-align:middle;}
.check-2 input[type=checkbox]:checked:before {width:10px; height:10px; box-shadow: inset 0 0 4em 1em #46900a;}

.form {max-width: 1000px;margin: 10px auto 40px; position: relative; z-index:4;border:none;}
.stp-qust {max-width: 450px; margin: 0 auto;}
.stp-qust.expanded {max-width: 700px; }
.stp-qust.expanded h2 {text-align: left;}
.step-4a .stp-qust {max-width: 325px;}
.form h1 {margin-bottom:25px;}
.tool-message {width:100%; margin:25px auto 10px; padding:6px 18px; background:#eee; border-radius:6px; color:#666; font-size:13px; border:solid 1px #ddd; opacity:0.7;}
.tool-message h4 {padding:0; margin:0 0 0px; color:#666; font-size:14px;}
.form-wrap {max-width:750px; margin:0 auto;}
.form-wrap h2 {font-size:21px; line-height:40px; margin-bottom:15px;}
.progress-quest {background:#ebf6e2; justify-content: flex-start; align-items: center; position: absolute; padding: 0; display: flex; height: 12px;width: 100%; top: 0px; left:0; margin: 0 auto; }
.progress-value {box-shadow: 0 10px 40px -10px #0f385a;  border-radius: 0;  background: #46900a;  height: 12px;  position:absolute; transition: all 1s ease; width:0;}
.progress-value.progress-10 { width:10%;}
.progress-value.progress-20 { width:20%;}
.progress-value.progress-30 { width:30%;}
.progress-value.progress-40 { width:40%;}
.progress-value.progress-50 { width:50%}
.progress-value.progress-60 { width:60%}
.progress-value.progress-70 { width:70%}
.progress-value.progress-80 { width:80%}
.progress-value.progress-90 { width:90%}

.form-control {border:1px solid rgb(231, 229, 228);font-size: 14px; padding: 10px; border-radius: 6px; width: 100%; border: 1px solid #ced4da; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
.rounded-lg {border-radius:8px;} 
.h-20.overflow-y-auto {max-height:75px; overflow-y:auto;}
.check-container {
  display: inline-block!important;
  position: relative;
  padding: 0 30px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.check-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.check-container:hover input ~ .checkmark {
  background: #ccc;
}

/* When the radio button is checked, add a blue background */
.check-container input:checked ~ .checkmark {
  background: linear-gradient(-132deg,#d5a1fe,#7b8bf2);;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.check-container:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.check-container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.check-container .checkmark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}   
input.form-control {height: 40px;}        
.is-invalid {color: red; font-size: 14px; font-weight: bold;}
.form-control.is-invalid, .was-validated .form-control:invalid { border-color: #dc3545; padding-right: calc(1.5em + .75rem); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1…circle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat; background-position: right calc(.375em + .1875rem) center; background-size: calc(.75em + .375rem) calc(.75em + .375rem);  }
select.form-control {height:45px; background-image: linear-gradient(45deg, transparent 50%, gray 50%),
linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc); background-position: calc(100% - 18px) calc(1em + 6px), calc(100% - 13px) calc(1em + 6px), calc(100% - 3em) 1em; background-size: 5px 5px, 5px 5px, 1px 1.5em; background-repeat: no-repeat;}
.range-slider {
    -webkit-appearance: none;
    appearance: none; 
    width: 100%;
    cursor: pointer;
    outline: none;
    border-radius: 15px;
    height: 6px;
    background: #ccc;
  }
        .range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none; 
    height: 15px;
    width: 15px;
    background-color: rgb(171, 99, 31);
    border-radius: 50%;
    border: none;
    transition: .2s ease-in-out;
  }
  
  .range-slider::-moz-range-thumb {
    height: 15px;
    width: 15px;
    background-color: rgb(171, 99, 31);
    border-radius: 50%;
    border: none;
    transition: .2s ease-in-out;
  }
  
  .range-slider::-webkit-slider-thumb:hover {
    box-shadow: 0 0 0 10px rgba(144, 115, 10, .1)
  }
  .range-slider:active::-webkit-slider-thumb {
    box-shadow: 0 0 0 13px rgba(144, 115, 10, .2)
  }
  .range-slider:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 13px rgba(144, 115, 10, .2)
  }
  
  .range-slider::-moz-range-thumb:hover {
    box-shadow: 0 0 0 10px rgba(144, 115, 10, .1)
  }
  .range-slider:active::-moz-range-thumb {
    box-shadow: 0 0 0 13px rgba(144, 115, 10, .2)
  }
  .range-slider:focus::-moz-range-thumb {
    box-shadow: 0 0 0 13px rgba(144, 115, 10, 0.2)    
  }
  .range {position:relative; max-width: 400px; margin: 0 auto;}
  .range .value-range {font-size: 18px; width: auto;text-align: center; display:inline-block; margin:15px auto 5px; padding:8px 15px; background:#fff; border-radius:9px; border:solid 3px #f6f0e2;}
  .range .value-range .value2 {font-weight:bold;font-size: 20px;}
  .range .min-value, .range .max-value {font-size:12px;color:#999;position:absolute;bottom:-25px;}
  .range .min-value {left:0;}
  .range .max-value {right:0;}

.premium-box {color:#000;}
.metal-badge {font-size:13px!important; padding:8px!important;margin-left:5px!important; margin-bottom:4px;}
.metal-badge:first-child {margin-left:0!important;}
/* Responsive Design */
@media (max-width: 992px) {
    .main-container {
        flex-direction: column;
    }
    .main-content .inner-cont {min-height: calc(100vh - 250px);}
    .main-content, .sidebar {width:100%;}
    .sidebar {position: fixed; bottom: 0; left: 0;z-index:9999;}
    .sidebar-section {padding: 5px;}
    .mobile-off {display: none;}
    
    .progress-steps {
        display: none;
    }
    
    .progress-bar {
        justify-content: space-between;
    }
}

@media (max-width: 768px) {
    .progress-mobile {display: block;}
    .item-progress {display: none;}
    .header-container .rating{display: none; }
    .plan {flex-direction:column;}
    .plan.plan-b .plan-title, .plan.plan-b .plan-description {width:100%; border-radius:0;}
    .plan .seal-bronze, .plan .seal-silver, .plan .seal-gold, .plan .seal-platinum, .plan .seal-catastrophic {border-radius:0;}
    .plan .graybox .price {font-size:22px; line-height:24px;}
    .plan-header h1 {font-size:28px; line-height:28px;}
    .plan-header h3 {font-size:20px; line-height:24px;}
    .benefit-name {font-size:14px; line-height:18px;word-wrap: anywhere;}
}














/* Add this to your styles.css file */

.plan-type-badge {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20px;
  padding: 6px 16px;
  margin: 8px 0;
  margin-left: 18px;
  display: inline-block;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
  transition: all 0.3s ease;
}

.plan-type-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.plan-type-badge .type-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 6px;
}

.plan-type-badge .type-value {
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  text-transform: capitalize;
}

/* Alternative style - if you prefer a more subtle approach */
.plan-type-badge.subtle {
  background: #f8f9ff;
  border: 1px solid #e1e5f0;
  color: #5a67d8;
}

.plan-type-badge.subtle .type-label {
  color: #718096;
}

.plan-type-badge.subtle .type-value {
  color: #5a67d8;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .plan-type-badge {
    font-size: 12px;
    padding: 4px 12px;
  }
  .home-cont {margin:0 auto;}
  .main-content h2 {margin:0 auto 20px;}
  .plan-type-badge .type-label {
    font-size: 10px;
  }
  
  .plan-type-badge .type-value {
    font-size: 12px;
  }
}