.py-3 {
    min-width: 230px;
}

.logoform {
    display: grid;
}

    .logoform input {
        min-width: 50%;
        margin: 0px 5px;
    }

.logodiv {
    display: flex;
    padding: 5px;
}

.btndomainList {
    font-size: medium;
    padding: 8px 15px;
    border-radius: 5px;
}

.domainList {
    font-size: medium;
}

    .domainList tr th {
        font-size: medium;
        padding: 5px 1px;
        align-content: center;
        overflow: hidden;
        text-align: center;
    }

.domaincard-body {
    padding: 20px !important;
    display: flex;
}

    .domaincard-body btn {
        width: 100%;
    }

.progress {
    width: 90%;
    justify-self: anchor-center;
    border-radius: 4px;
}

.domainlists {
    width: 100%;
}


.simple-card {
    background-color: #f0f8ff; /* AliceBlue */
    color: #000;
}

.professional-card {
    background-color: #e6ecf0; /* Light Grey-Blue */
    color: #000;
}

.exclusive-card {
    background-color: #f3e5f5; /* Light Purple */
    color: #000;
}

.complete-card {
    background-color: #e8f5e9; /* Light Green */
    color: #000;
}

.special-card {
    background-color: #e0f7fa; /* Light Cyan */
    color: #000;
}

.golden-card {
    background-color: #fff8e1; /* Light Gold */
    color: #000;
}

.superior-card {
    background-color: #ffebee; /* Light Red */
    color: #000;
}

.basic-card {
    background-color: #f5f5f5; /* Light Grey */
    color: #000;
}

.advanced-card {
    background-color: #e3f2fd; /* Light Blue */
    color: #000;
}

.dedicated-card {
    background-color: #fff3e0; /* Light Orange */
    color: #000;
}

/* Top sections with gradients */
.simple-top {
    background: linear-gradient(45deg, #a1c4fd, #c2e9fb);
    color: white;
}

.professional-top {
    background: linear-gradient(45deg, #283e51, #485563);
    color: white;
}

.exclusive-top {
    background: linear-gradient(45deg, #8e2de2, #4a00e0);
    color: white;
}

.complete-top {
    background: linear-gradient(45deg, #56ab2f, #a8e063);
    color: white;
}

.special-top {
    background: linear-gradient(45deg, #43cea2, #185a9d);
    color: white;
}

.golden-top {
    background: linear-gradient(45deg, #ffd700, #ffb347);
    color: white;
}

.superior-top {
    background: linear-gradient(45deg, #8e0e00, #1f1c18);
    color: white;
}

.basic-top {
    background: linear-gradient(45deg, #bdc3c7, #2c3e50);
    color: white;
}

.advanced-top {
    background: linear-gradient(45deg, #1e3c72, #2a5298);
    color: white;
}

.dedicated-top {
    background: linear-gradient(45deg, #ff512f, #dd2476);
    color: white;
}

/* Bottom sections */
.simple-bottom {
    position: absolute !important;
    width: 100%;
    left: 0px;
    background: linear-gradient(45deg, #c2e9fb, #75a7f7);
    color: black !important;
    bottom: -11px;
    padding: 10px 10px 15px 10px;
}

.professional-bottom {
    position: absolute !important;
    width: 100%;
    left: 0px;
    background: linear-gradient(45deg, #5c98d8, #283e51);
    color: white !important;
    bottom: -11px;
    padding: 10px 10px 15px 10px;
    font-family: revert !important;
}

.exclusive-bottom {
    position: absolute !important;
    width: 100%;
    left: 0px;
    background: linear-gradient(45deg, #1629bc, #a23cfa);
    color: white !important;
    bottom: -11px;
    padding: 10px 10px 15px 10px;
    font-family: revert !important;
}

.complete-bottom {
    position: absolute !important;
    width: 100%;
    left: 0px;
    background: linear-gradient(45deg, #cce063, #377e17);
    color: black !important;
    bottom: -11px;
    padding: 10px 10px 15px 10px;
    font-family: revert !important;
}

.special-bottom {
    position: absolute !important;
    width: 100%;
    left: 0px;
    background: linear-gradient(45deg, #185a9d, #43cea2);
    color: white !important;
    bottom: -11px;
    padding: 10px 10px 15px 10px;
    font-family: revert !important;
}

.golden-bottom {
    position: absolute !important;
    width: 100%;
    left: 0px;
    background: linear-gradient(45deg, #dd6005, #f3d103);
    color: black !important;
    bottom: -11px;
    padding: 10px 10px 15px 10px;
    font-family: revert !important;
}

.superior-bottom {
    position: absolute !important;
    width: 100%;
    left: 0px;
    background: linear-gradient(45deg, #a10505, #205c88);
    color: white !important;
    bottom: -11px;
    padding: 10px 10px 15px 10px;
    font-family: revert !important;
}

.basic-bottom {
    position: absolute !important;
    width: 100%;
    left: 0px;
    background: linear-gradient(45deg, #2c3e50, #bdc3c7);
    color: white !important;
    bottom: -11px;
    padding: 10px 10px 15px 10px;
    font-family: revert !important;
}

.advanced-bottom {
    position: absolute !important;
    width: 100%;
    left: 0px;
    background: linear-gradient(45deg, #4a73ba, #1e3c72);
    color: white !important;
    bottom: -11px;
    padding: 10px 10px 15px 10px;
    font-family: revert !important;
}

.dedicated-bottom {
    position: absolute !important;
    width: 100%;
    left: 0px;
    background: linear-gradient(45deg, #dd2476, #ff512f);
    color: white !important;
    bottom: -11px;
    padding: 10px 10px 15px 10px;
    font-family: revert !important;
}

.form-top-img {
    position: absolute;
    right: 0px;
    top: 0px;
    min-width: 100%;
    z-index: 0;
    transition: all 0.4s;
    transform: rotate(0deg);
    height: 20%;
    /*opacity: 0.8;*/
}

.form-img {
    position: relative;
    right: 0px;
    top: 0px;
    width: 100% !important;
    z-index: -2;
    margin: auto;
    text-align: center;
    display: flex;
    cursor: pointer;
    top: 15%;
}

.card-btn-demo {
    position: relative;
    bottom: 50px;
    padding: 5px 5px;
    z-index: 2;
    color: white !important;
    background: linear-gradient(45deg, #5a96ff, #a63bff);
    border-radius: 8px;
    font-weight: bolder !important;
    opacity: 0.8;
}

#quickBuyBtn {
    right: 2%;
}

#quickLoginBtn {
    /*right: 5%;*/
}

.card-btn-buy {
    position: relative;
    bottom: 50px;
    padding: 5px 10px;
    z-index: 2;
    color: white !important;
    background: linear-gradient(45deg, #04489a, #3bff52);
    border-radius: 8px;
    font-weight: bolder !important;
    opacity: 0.8;
}

.basket_item_price {
    display: flex;
    min-width: fit-content;
    align-items: anchor-center;
}

.card-h2 {
    color: rgb(36 70 135 / 70%);
    font-size: large;
    overflow: hidden;
    height: 25px;
}

.card-h1 {
    color: rgb(30 44 81 / 50%);
    font-size: x-large;
    overflow: hidden;
    height: 25px;
    position: absolute;
    width: 100%;
    top: -3%;
}

.card-full {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 0px 0px 10px 0px;
    line-height: 1cm;
    align-self: anchor-center;
    background-color: #fff;
    height: 240px;
}

.card-body {
    text-align: center;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0px 0px 38px -17px rgb(0 0 0);
    padding: 5px 0px 0px 0px;
    margin: 5px;
    height: fit-content;
    overflow: hidden;
    display: block;
    z-index: 0;
    position: relative;
    transition: all 0.3s !important;
    text-align: center;
    box-shadow: 0px 0px 38px -17px rgb(0 0 0);
    height: 100%;
    align-content: center;
    min-height: 235px;
}
.card-full2 {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 0px 0px 10px 0px;
    line-height: 1cm;
    align-self: anchor-center;
    background-color: #fff;
    height: 350px;
}

.card-body2 {
    text-align: center;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0px 0px 38px -17px rgb(0 0 0);
    padding: 5px 0px 0px 0px;
    margin: 5px;
    height: fit-content;
    overflow: hidden;
    display: block;
    z-index: 0;
    position: relative;
    transition: all 0.3s !important;
    text-align: center;
    box-shadow: 0px 0px 38px -17px rgb(0 0 0);
    height: 100%;
    align-content: center;
    min-height: 235px;
}
.edit-bottom {
    display: inline-block;
    min-width: 80px !important;
    color: #a7cff5;
    border: solid;
    padding: 5px;
    font-size: medium;
    border-radius: 10px;
    background: rgb(13 88 237 / 20%);
    border-color: rgb(32 62 135 / 30%);
}
.download-bottom {
    display: inline-block;
    min-width: 100px !important;
    color: #a7cff5;
    border: solid;
    padding: 5px;
    font-size: medium;
    border-radius: 10px;
    background: rgb(13 88 237 / 20%);
    border-color: rgb(32 62 135 / 30%);
}
@media (max-width: 600px) {

    .card-full2 {
        height:315px;
    }
        .edit-bottom {
        display: inline-block;
        min-width: 70px !important;
        color: #a7cff5;
        border: solid;
        padding: 5px;
        font-size: smaller;
        border-radius: 10px;
        background: rgb(13 88 237 / 20%);
        border-color: rgb(32 62 135 / 30%);
    }

    .download-bottom {
        display: inline-block;
        min-width: 80px !important;
        color: #a7cff5;
        border: solid;
        padding: 5px;
        font-size: smaller;
        border-radius: 10px;
        background: rgb(13 88 237 / 20%);
        border-color: rgb(32 62 135 / 30%);
    }
    .py-3 {
        min-width: 195px;
    }

    #Logo {
        display: grid;
        text-align: -webkit-center;
    }

    .btndomainList {
        font-size: small;
        padding: 8px 5px;
        border-radius: 5px;
    }

    .domainList {
        font-size: small;
    }

        .domainList tr th {
            font-size: small;
            padding: 5px 1px;
            align-content: center;
            overflow: hidden;
            text-align: center;
        }

    .domaincard-body {
        padding: 20px !important;
        display: grid;
    }

        .domaincard-body btn {
            width: 100%;
        }
}