.step-circle {
    width: 48px;
    height: 48px;
    background: #00aeef;
    color: white;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem auto;
    font-size: 1.2rem;
}
.auto_sug {
    position: absolute;
    z-index: 99;
    margin-top: 0px;
    /* width: 300px; */
    width: 96%;
    height: auto;
    max-height: 300px !important;
    box-shadow: 2px 1px 2px #CCCCCC;
    border: 1px solid #DDDBDB;
    overflow-y: auto;
}
.suggestionlist {
    background-color: #FFF;
    height: auto;
    padding: 6px;
    border-bottom: 1px solid #F2F2F2;
    transition: all 0.5s ease-in-out;
    font-size: 15px;
}
.suggestionlist  b{
    font-weight: 500 !important;
}
.suggestionlist:hover {
    border-radius: 3px;
    background: #E2E2E2;
    cursor: pointer;
}
.showmobile {
    display: none;
}
.letsbody {
    background: linear-gradient(to right, #badff4, #badff4);
    color: #fff;
    margin-top: 40px;
    margin-bottom: 40px;
    border-radius: 10%;
}
.leaderboard-table {
    background-color: #fff;
    color: #000;
    border-radius: 6%;
}
.rank-col {
    background-color: #000;
    color: #fff;
    font-weight: bold;
}
.highlight-1 { background-color: #badff4; color: black; }
.highlight-2 { background-color: #badff4; color: black; }
.highlight-3 { background-color: #badff4; color: black; }
.activity-score {
    background-color: #00bcd4;
    font-weight: bold;
}
.total-score {
    color: red;
    font-weight: bold;
}
.table-bordered>:not(caption)>* {
    border: 1px solid transparent;
}
th {
    text-align: center;
    vertical-align: middle;
}
td {
    text-align: center;
}
.table td, .table th {
    border-bottom: none;
}
.imgcntrl img{
    height: 40px;
    width: 40px;
}
.width90 {
    width: 90px;
}
.mbmobile .ortext{
    position: relative;
    bottom: 135px;
    left: 80px;
}
/*Pricing*/
/** {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  font-family: "Open Sans", sans-serif;
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background-color: #171717;
}*/

.pricing-plans {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background-color: #171717;
  gap: 32px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  padding: 64px;
}

.pricing-card {
  --col: #e4e4e7;
  position: relative;
/*min-width: 300px;*/
  width: 23%;
  padding: 10px;
  padding-bottom: 96px;
  border-radius: 4px;
  border: 1px solid #262626;
  background-color: #26262620;
  box-shadow: 0 0 32px transparent;
  text-align: center;
}

.pricing-card.basic {
  --col: #0891b2;
}

.pricing-card.standard {
  --col: #059669;
}

.pricing-card.premium {
  --col: #c026d3;
}

.pricing-card.ultrapremium {
    --col: #3dce3d;
}

.pricing-card:hover {
  border-color: var(--col);
  background-color: #26262680;
  box-shadow: 0 0 32px #171717;
  transform: translateY(-16px) scale(1.02);
  transition: all 0.5s ease;
}

.pricing-card > *:not(:last-child) {
  margin-bottom: 32px;
}

.pricing-card .heading h4 {
  padding-bottom: 12px;
  color: var(--col);
  font-size: 24px;
  font-weight: normal;
}

.pricing-card .heading p {
  color: #fff;
  font-size: 14px;
  font-weight: lighter;
}

.pricing-card .price {
  position: relative;
  color: var(--col);
  font-size: 60px;
  font-weight: bold;
}

.pricing-card .price sub {
  position: absolute;
  bottom: 14px;
  color: #a3a3a3;
  font-size: 14px;
  font-weight: lighter;
}

.pricing-card .features li {
  padding-bottom: 16px;
  color: #fff;
  font-size: 16px;
  font-weight: lighter;
  text-align: left;
}

.pricing-card .features li i,
.pricing-card .features li strong {
  color: #e4e4e7;
  font-size: 16px;
  text-align: left;
}
.btn-orange-price {
    background: #d57a13;
    padding: 12px 33px;
    font-size: 17px;
    font-weight: 600;
    border-radius: 8px;
    color: white;
    box-shadow: 0px 3px 10px rgba(213, 122, 19, 0.3);
}

.pricing-card .features li strong {
  padding-left: 5px;
}

.pricing-card .cta-btn {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  padding: 12px;
  border-radius: 4px;
  border: 1px solid var(--col);
  background-color: var(--col);
  color: #e4e4e7;
  font-size: 20px;
  font-weight: bold;
}

.pricing-card .cta-btn:active {
  background-color: transparent;
  color: var(--col);
  transition: all 0.3s ease;
}
.bg-added-custom {
    background: linear-gradient(180deg, #e9fff8 0%, #f4fbff 15%, #ecfffe 35%, #fdffff 55%, #fefefe 75%, #d6f0ff 100%);
}
/*1st Section */
.hero-first {
    min-height: 100vh;
    background: linear-gradient(180deg, #e9fff8 0%, #f4fbff 15%, #ecfffe 35%, #fdffff 55%, #fefefe 75%, #d6f0ff 100%);
    font-family: "Inter", sans-serif;
    padding-top: 90px;
    padding-bottom: 60px;
    text-align: center;
    .logo-box img {
        width: 170px;
        height: auto;
        margin-bottom: 20px;
    }
    .title-abdar {
        font-size: 46px;
        font-weight: 800;
        background: linear-gradient(90deg, #e9a622, #d8461d);
        -webkit-background-clip: text;
        color: transparent;
        margin-bottom: 8px;
    }
    .title-main {
        font-size: 58px;
        font-weight: 800;
        color: #111;
        margin-bottom: 18px;
    }
    .subtitle {
        font-size: 19px;
        color: #6f6f6f;
        max-width: 720px;
        margin: 0 auto 10px;
    }
    .bengali-text {
        font-size: 20px;
        color: #8b2500;
        font-weight: 600;
        margin-bottom: 30px;
    }
    .btn-orange {
        background: #d57a13;
        padding: 12px 33px;
        font-size: 17px;
        font-weight: 600;
        border-radius: 8px;
        color: white;
        box-shadow: 0px 3px 10px rgba(213, 122, 19, 0.3);
    }
    .btn-outline-orange {
        border: 2px solid #d57a13;
        padding: 12px 33px;
        font-size: 17px;
        border-radius: 8px;
        font-weight: 600;
        color: #d57a13;
    }
    .btn-orange:hover {
        background: #bd6a0f;
    }
    .btn-outline-orange:hover {
        background: #d57a13;
        color: #fff;
    }
    .stats {
        margin-top: 80px;
    }
    .stats-number {
        font-size: 34px;
        font-weight: 800;
        color: #d57a13;
    }
    .stats-label {
        font-size: 15px;
        color: #666;
    }
    .arrow-down {
        font-size: 28px;
        color: #d57a13;
        margin-top: 20px;
    }
}

/*2nd Section */
.hero-second {
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(180deg, #e9fff8 0%, #f4fbff 15%, #ecfffe 35%, #fdffff 55%, #fefefe 75%, #d6f0ff 100%);
    padding:60px 0;
    h1 span{ 
        color:#d99a2a; 
    }
    .feature-box{
        background:#fff;
        padding:22px;
        border-radius:12px;
        border:2px solid rgba(217,154,42,0.18);
        box-shadow:0 6px 24px rgba(0,0,0,0.05);
        margin-bottom:18px;
    }

    .icon-box{
        width:55px;
        height:55px;
        border-radius:12px;
        background:#fff6e6;
        display:flex;
        justify-content:center;
        align-items:center;
        border:1px solid rgba(217,154,42,0.15);
    }
}

/*3rd Section */
.hero-third {
    font-family: "Inter", sans-serif;
    color: #333;
    .section-title {
        font-size: 3.2rem;
        font-weight: 800;
        letter-spacing: -1px;
    }
    .highlight {
        color: #ff8c00;
    }
    .benefit-card {
        border: 1px solid #ebebeb;
        border-radius: 18px;
        padding: 40px;
        transition: all 0.35s ease;
        background: #ffffff;
        box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    }
    .benefit-card:hover {
        box-shadow: 0 20px 60px rgba(0,0,0,0.12);
        transform: translateY(-10px);
        border-color: #ff8c00;
        background: #fff8ef;
    }
    .benefit-card {
        border: 1px solid #ebebeb;
        border-radius: 18px;
        padding: 40px;
        transition: all 0.35s ease;
        background: #ffffff;
        box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    }
    .benefit-card:hover {
        box-shadow: 0 20px 60px rgba(0,0,0,0.12);
        transform: translateY(-10px);
        border-color: #ff8c00;
        background: #fff8ef;
    }
    .benefit-card h5 {
        font-size: 1.32rem;
        font-weight: 700;
        margin-bottom: 12px;
    }
    .benefit-card p {
        font-size: 1rem;
        line-height: 1.6;
        color: #555;
    }
    .gradient-box {
        background: linear-gradient(90deg, #ffe2bf, #fff0d9, #ffe9c7);
        border-radius: 18px;
        padding: 45px;
        text-align: center;
        border: 1px solid #f0d4ad;
        box-shadow: 0 6px 18px rgba(0,0,0,0.05);
    }
    .footer-highlight {
        color: #ff8c00;
        font-weight: 800;
    }
    .benefit-card:hover h5,
    .benefit-card:hover p {
        color: #333;
    }
}

/*4th Section*/
.hero-fourth {
    .expert-box {
        max-width: 1100px;
        border-radius: 25px;
    }
    /* Left Panel */
    .left-box {
        background: #fff3ca;
        border-top-left-radius: 25px;
        border-bottom-left-radius: 25px;
    }

    /* Profile Icon */
    .profile-icon {
        width: 130px;
        height: 130px;
        background: linear-gradient(140deg, #d85b00, #f5a623);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 55px;
        transition: 0.3s;
    }
    .profile-icon:hover {
        transform: scale(1.08);
    }

    /* List icons */
    .icon-lg {
        font-size: 28px;
        transition: 0.3s;
    }
    .icon-lg:hover {
        transform: scale(1.2);
    }

    /* Quote Box */
    .quote-box {
        background: #fff7e1;
        border-left: 5px solid #ffa726;
        font-style: italic;
        border-radius: 10px;
    }

    /* Bottom Cards */
    .steps-card {
        border-radius: 18px;
        transition: 0.3s;
    }
    .steps-card:hover {
        transform: translateY(-6px);
    }

    /* Step Icons */
    .step-icon {
        font-size: 40px;
        color: #ffa726;
        transition: 0.3s;
    }
    .step-icon:hover {
        transform: scale(1.2);
    }
}

@media screen and (max-width: 600px) and (min-width: 320px) {
    .hidemobile {
        display: none;
    }
    .table td, .table th {
        font-size: 10px;
    }
    .showmobile {
        display: block;
    }
    .widthlong {
        width: 1042px;
    }
    .width90 {
        width: 300px;
    }
    .flexdiv {
        display: flex;
        flex-direction: column-reverse;
        .mbmobile {
            margin-bottom: 50px;
        }
    }
    .mbmobile .ortext{
        bottom: 92px;
        left: 0px;
    }
    .pricing-card {
        min-width: 320px;
    }
}