diff --git a/static/src/assets/css/payment/style.css b/static/src/assets/css/payment/style.css
index e20914f..43ef5f8 100644
--- a/static/src/assets/css/payment/style.css
+++ b/static/src/assets/css/payment/style.css
@@ -1,808 +1,821 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap') @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap') * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: "Poppins", sans-serif;
+}
+
+:root {
+    --black: #000000;
+    --light-black: #050505;
+    --main-yellow: rgba(209, 170, 88, 1);
+    --light-yellow: rgba(229, 25, 94, 0.2);
+    --white: #ffffff;
+    --light-white: #f8f8f8;
+    --white-other: rgba(207, 207, 207, 1);
+    --white-mix: #cecece;
+    --border: #ff72a285;
+}
+
+body {
+    font-family: "Poppins", sans-serif;
+}
+
+.ptb {
+    padding: 40px 0;
+}
+
+.sec-heading {
+    font-size: 38px;
+    font-weight: 600;
+    text-align: center;
+    /* padding-top: 40px; */
+    color: var(--main-yellow);
+}
+
+.sec-subheading {
+    font-size: 18px;
+    font-weight: 400;
+    text-align: center;
+    color: var(--white);
+}
 
 
-    @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap') @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap') * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-        font-family: "Poppins", sans-serif;
+.big-heading {
+    font-size: 52px;
+    font-weight: 700;
+    color: var(--white);
+    letter-spacing: 1.8px;
+}
+
+
+.para {
+    font-size: 18px;
+    font-weight: 400;
+    color: rgba(255, 255, 255, 1);
+}
+
+.sec-mini-heading {
+    font-size: 24px;
+    font-weight: 600;
+}
+
+
+.para-dark {
+    font-size: 24px;
+    /* font-weight: 600; */
+}
+
+.para-mid {
+    font-size: 18px;
+    color: rgba(255, 255, 255, 0.69);
+}
+
+li {
+    list-style: none;
+}
+
+.pt {
+    padding: 40px 0;
+}
+
+
+/* header  */
+
+header {
+    border-bottom: 1px solid var(--main-yellow);
+    position: absolute;
+    background-color: transparent;
+    top: 0;
+    left: 0;
+    width: 100%;
+    padding: 22px 0;
+    display: flex;
+    align-items: center;
+    z-index: 9999;
+}
+
+header .header-main-inner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+header nav ul {
+    display: flex;
+    gap: 80px;
+    align-items: center;
+    margin: 0;
+}
+
+
+.header-main-inner .logo {
+    width: 212px;
+    height: 52px;
+}
+
+.header-main-inner .logo img {
+    width: 100%;
+}
+
+
+header nav ul .menu-btn img {
+    width: 24px;
+    height: 24px;
+}
+
+header nav ul li a {
+    color: var(--white);
+    font-size: 18px;
+    /* font-weight: 600; */
+    position: relative;
+    text-decoration: none;
+}
+
+.sticky {
+    background-color: var(--black);
+    position: fixed;
+    animation: slideDown 0.8s ease-out;
+    -webkit-animation: slideDown 0.8s ease-out;
+}
+
+@keyframes slideDown {
+    0% {
+        transform: translateY(-100%);
     }
 
-    :root {
-        --black: #000000;
-        --light-black: #050505;
-        --main-yellow: rgba(209, 170, 88, 1);
-        --light-yellow: rgba(229, 25, 94, 0.2);
-        --white: #ffffff;
-        --light-white: #f8f8f8;
-        --white-other: rgba(207, 207, 207, 1);
-        --white-mix: #cecece;
-        --border: #ff72a285;
+    100% {
+        transform: translateY(0);
     }
+}
 
-    body {
-        font-family: "Poppins", sans-serif;
+header a.active {
+    color: var(--main-yellow);
+}
+
+header nav ul li a::after {
+    content: "";
+    position: absolute;
+    left: 50%;
+    width: 0%;
+    bottom: -10px;
+    border-bottom: 2px solid var(--main-yellow);
+    transition: all 0.3s;
+    transform: translateX(-50%);
+}
+
+header nav ul li a:hover {
+    color: var(--main-yellow);
+}
+
+header nav ul li a:hover:after {
+    width: 100%;
+}
+
+.hamburger {
+    display: none;
+}
+
+.hamburger {
+    position: relative;
+    width: 25px;
+    height: 25px;
+    display: none;
+    cursor: pointer;
+}
+
+.hamburger img {
+    width: 25px;
+    height: 25px;
+}
+
+
+.overlay {
+    display: none;
+}
+
+.cross-btn {
+    padding: 2px 20px;
+    text-align: right;
+    display: none;
+    font-size: 40px;
+    cursor: pointer;
+    color: var(--main-yellow);
+}
+
+.cross-btn i {
+    font-size: 20px;
+    font-weight: 500;
+}
+
+/* about-head */
+.head-sec header,
+.terms-sec header {
+    /* position: inherit; */
+    background-color: var(--black);
+}
+
+
+
+
+/* baner */
+.baner-section {
+    background-image: linear-gradient(rgba(4, 9, 10, 0.7), rgba(4, 9, 10, 0.7)),
+        url("https://goodtimes.betadelivery.com/static/images/baner.jpg");
+    background-position: center;
+    background-size: cover;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+}
+
+.baner-section .row {
+    align-items: center;
+    padding-top: 100px;
+}
+
+.baner-section .store-app {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    margin: 30px 0;
+}
+
+.baner-img {
+    text-align: center;
+    padding-top: 20px;
+}
+
+.baner-section .baner-img img {
+    width: 75%;
+}
+
+.baner-content .big-heading span {
+    color: var(--main-yellow);
+}
+
+.baner-content .grey-para {
+    margin-top: 24px;
+    font-size: 20px;
+    color: var(--white-other);
+}
+
+
+.baner-btn {
+    margin-top: 24px;
+}
+
+
+/* plan  */
+
+.modal-body .your-plan {
+    margin-top: 15px;
+}
+
+.modal-body .your-plans-main {
+    padding: 0px 10px 30px;
+}
+
+.modal-body .your-plans-main .head {
+    font-size: 25px;
+    color: black;
+    font-weight: 500;
+}
+
+.modal-body .your-plans-main .monthly-div-main {
+    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+    padding: 15px 20px;
+    border-radius: 8px;
+}
+
+.modal-body .your-plans-main .monthly-div-main .monthly-div {
+    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+    padding: 6px 10px;
+    border-radius: 8px;
+    border: 1px solid rgb(215 169 72 / 28%);
+}
+
+.modal-body .your-plans-main .your-heading {
+    color: var(--main-yellow);
+    font-size: 24px;
+    font-weight: 500;
+}
+
+.modal-body .your-plans-main .your-subheading {
+    font-size: 24px;
+    font-weight: 500;
+    color: black;
+}
+
+.modal-body .your-plans-main .your-subheading span {
+    font-size: 18px;
+    font-weight: 400;
+}
+
+.modal-body .your-plans-btn {
+    text-align: center;
+    margin-top: 20px;
+}
+
+.modal-body .your-plans-btn .common-btn {
+    width: 100%;
+}
+
+/* plan end  */
+
+.common-btn {
+    background: linear-gradient(90.02deg, #CDA34C 0.02%, #F1D6A0 52%, #D1A956 98.68%);
+    font-weight: 500;
+    border: none;
+    font-size: 18px;
+    font-weight: 600;
+    padding: 10px 40px;
+    border-radius: 5px;
+}
+
+
+/* key-feature */
+.key-features {
+    background-color: #10100e;
+    color: white;
+}
+
+.key-features .row {
+    align-items: center;
+    padding-bottom: 40px;
+}
+
+.key-features .key-main-img img {
+    width: 75%;
+}
+
+.key-features .key-right-first,
+.key-right-second {
+    display: flex;
+    align-items: start;
+    gap: 20px;
+}
+
+.key-right-second {
+    margin-top: 60px;
+}
+
+/* easy-steps */
+.easy-steps {
+    background-color: var(--black);
+}
+
+.easy-steps .para-dark {
+    margin-top: 50px;
+    color: var(--white);
+}
+
+.easy-steps .para {
+    color: rgba(192, 192, 192, 1);
+    text-align: center;
+}
+
+.easy-steps-main {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 25px;
+    margin-top: 100px;
+    padding-bottom: 40px;
+}
+
+.easy-steps-first {
+    background-color: rgba(255, 255, 255, 0.05);
+    border: 1px solid var(--main-yellow);
+    border-top-left-radius: 14px;
+    border-top-right-radius: 14px;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    position: relative;
+    height: 400px;
+    padding: 0px 20px;
+}
+
+.easy-steps-first-img-num {
+    width: 75px;
+    height: 75px;
+    position: absolute;
+    top: -50px;
+}
+
+img.easy-steps-first-img-bot {
+    position: absolute;
+    bottom: -1px;
+}
+
+/* Adventure
+ */
+
+
+.Adventure {
+    background-color: #10100e;
+    color: white;
+}
+
+.Adventure .row {
+    align-items: center;
+    padding-top: 40px;
+}
+
+.Adventure-rti {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    margin-bottom: 40px;
+}
+
+.Adventure-right img {
+    width: 75%;
+}
+
+.Adventure-left .store-app {
+    display: flex;
+    gap: 15px;
+}
+
+.Adventure-btn {
+    margin-top: 40px;
+}
+
+
+/* faq */
+.faq {
+    background-color: black;
+}
+
+.main-faq {
+    padding: 40px 0 80px;
+}
+
+div#accordionExample {
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+}
+
+.faq .accordion-item {
+    border: 1px solid var(--main-yellow);
+    background-color: transparent;
+    color: #fff;
+    border-radius: 5px;
+}
+
+.faq button.accordion-button:focus {
+    box-shadow: inherit;
+}
+
+.faq button.accordion-button {
+    background-color: transparent;
+    color: var(--white);
+}
+
+.accordion-button:not(.collapsed) {
+    color: var(--main-yellow) !important;
+    font-family: "Nunito Sans", sans-serif;
+    font-weight: 600;
+}
+
+.accordion-item:first-of-type .accordion-button {
+    box-shadow: none;
+}
+
+.accordion-button::after {
+    background-image: url(images/ab.png);
+}
+
+.accordion-button:not(.collapsed)::after {
+    background-image: url(images/at.png);
+    transform: none;
+}
+
+
+
+/* footer  */
+.footer {
+    background-color: rgba(16, 16, 14, 1);
+}
+
+.footer .footer-main-img {
+    width: 212px;
+    height: 52px;
+    padding: 40px 0;
+}
+
+.footer .footer-main-img img {
+    width: 100%;
+}
+
+.footer .footer-main-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    color: var(--white);
+    padding: 3rem 0 2rem;
+}
+
+.footer .footer-main-grid .para-dark {
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.footer .footer-main-grid .para {
+    font-size: 16px;
+}
+
+
+.footer .store-app {
+    display: flex;
+    gap: 15px;
+    margin: 0;
+    flex-direction: column;
+}
+
+.footer-btn .common-btn {
+    margin-bottom: 16px;
+}
+
+.footer-main-grid-fourth {
+    margin-top: -20px;
+}
+
+.copy-right {
+    color: var(--main-yellow);
+    text-decoration: none;
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-bottom: 20px;
+}
+
+.store-app img {
+    width: 165px;
+}
+
+
+/* About us  */
+
+.about-us {
+    background-image: url(images/About\ Us\ Banner.png);
+    background-position: top;
+    background-size: cover;
+    background-repeat: no-repeat;
+    height: 500px;
+    display: flex;
+    align-items: center;
+    margin-top: 90px;
+}
+
+.about-us .row {
+    align-items: center;
+}
+
+
+.about,
+.terms {
+    background-color: var(--black);
+    color: var(--white);
+    padding: 40px 0 70px;
+}
+
+
+.terms-main {
+    background-image: url(images/terms.png);
+    background-position: top;
+    background-size: cover;
+    background-repeat: no-repeat;
+    height: 500px;
+    display: flex;
+    align-items: center;
+    margin-top: 90px;
+}
+
+.card_design {
+    background: #000;
+    padding: 40px 0;
+}
+
+.gold-text {
+    color: rgb(209 170 88);
+    margin: 0;
+    padding: 12px;
+}
+
+.bg_color {
+    background-color: #e5e2e2;
+    border: none;
+    color: #000;
+    font-weight: 600;
+    border-radius: 5px;
+}
+
+.feat-card {
+    border: 1px solid #d1aa588c;
+    padding: 35px;
+    border-radius: 6px;
+    background-color: #00000080;
+    text-align: center;
+}
+
+/* mediascreen */
+@media (max-width: 1199px) {
+    .big-heading br {
+        display: none;
     }
+}
 
-    .ptb {
-        padding: 40px 0;
-    }
-
-    .sec-heading {
-        font-size: 38px;
-        font-weight: 600;
-        text-align: center;
-        /* padding-top: 40px; */
-        color: var(--main-yellow);
-    }
-
-    .sec-subheading {
-        font-size: 18px;
-        font-weight: 400;
-        text-align: center;
-        color: var(--white);
+@media (max-width: 1024px) {
+    .big-heading {
+        font-size: 42px;
     }
+}
 
+@media (max-width: 991px) {
+    /* .big-heading br {
+        display: none;
+    } */
 
     .big-heading {
-        font-size: 52px;
-        font-weight: 700;
-        color: var(--white);
-        letter-spacing: 1.8px;
+        font-size: 35px;
     }
 
-
-    .para {
-        font-size: 18px;
-        font-weight: 400;
-        color: rgba(255, 255, 255, 1);
+    .store-app img {
+        width: 142px;
     }
 
     .sec-mini-heading {
-        font-size: 24px;
-        font-weight: 600;
-    }
-
-
-    .para-dark {
-        font-size: 24px;
-        /* font-weight: 600; */
-    }
-
-    .para-mid {
         font-size: 18px;
-        color: rgba(255, 255, 255, 0.69);
     }
 
-    li {
-        list-style: none;
+    .para {
+        font-size: 14px;
     }
 
-    .pt {
-        padding: 40px 0;
+    .easy-steps-main {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 70px 20px;
+        margin-top: 70px;
     }
 
-
-    /* header  */
-
-    header {
-        border-bottom: 1px solid var(--main-yellow);
-        position: absolute;
-        background-color: transparent;
-        top: 0;
-        left: 0;
-        width: 100%;
-        padding: 22px 0;
-        display: flex;
-        align-items: center;
-        z-index: 9999;
+    .footer .footer-main-grid {
+        grid-template-columns: repeat(2, 1fr);
     }
 
-    header .header-main-inner {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
+    .footer-main-grid-fourth {
+        margin-top: 0px;
     }
 
-    header nav ul {
-        display: flex;
-        gap: 80px;
-        align-items: center;
-        margin: 0;
+}
+
+
+
+@media (max-width: 767px) {
+    .ptb {
+        padding: 20px 0 40px 0;
     }
 
-
-    .header-main-inner .logo {
-        width: 212px;
-        height: 52px;
-    }
-
-    .header-main-inner .logo img {
-        width: 100%;
-    }
-
-
-    header nav ul .menu-btn img {
-        width: 24px;
-        height: 24px;
-    }
-
-    header nav ul li a {
-        color: var(--white);
-        font-size: 18px;
-        /* font-weight: 600; */
-        position: relative;
-        text-decoration: none;
-    }
-
-    .sticky {
-        background-color: var(--black);
-        position: fixed;
-        animation: slideDown 0.8s ease-out;
-        -webkit-animation: slideDown 0.8s ease-out;
-    }
-
-    @keyframes slideDown {
-        0% {
-            transform: translateY(-100%);
-        }
-
-        100% {
-            transform: translateY(0);
-        }
-    }
-
-    header a.active {
-        color: var(--main-yellow);
-    }
-
-    header nav ul li a::after {
-        content: "";
-        position: absolute;
-        left: 50%;
-        width: 0%;
-        bottom: -10px;
-        border-bottom: 2px solid var(--main-yellow);
-        transition: all 0.3s;
-        transform: translateX(-50%);
-    }
-
-    header nav ul li a:hover {
-        color: var(--main-yellow);
-    }
-
-    header nav ul li a:hover:after {
-        width: 100%;
-    }
-
-    .hamburger {
-        display: none;
-    }
-
-    .hamburger {
-        position: relative;
-        width: 25px;
-        height: 25px;
-        display: none;
-        cursor: pointer;
-    }
-
-    .hamburger img {
-        width: 25px;
-        height: 25px;
-    }
-
-
     .overlay {
-        display: none;
+        position: fixed;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: -100%;
+        background-color: #60606054;
+
     }
 
     .cross-btn {
-        padding: 2px 20px;
-        text-align: right;
-        display: none;
-        font-size: 40px;
-        cursor: pointer;
-        color: var(--main-yellow);
+        display: block;
     }
 
-    .cross-btn i {
-        font-size: 20px;
-        font-weight: 500;
+    .hamburger,
+    .overlay {
+        display: block;
     }
 
-    /* about-head */
-    .head-sec header,
-    .terms-sec header {
-        /* position: inherit; */
-        background-color: var(--black);
+    .navs {
+        position: fixed;
+        top: 0;
+        left: -100%;
+        width: 300px;
+        height: 100%;
+        background: rgb(0 0 0);
+        transition: all .3s;
+        z-index: 1;
+    }
+
+    .navs ul {
+        flex-direction: column;
+        padding: 00px 20px;
+        align-items: start;
+        gap: 14px;
+    }
+
+    .navs ul li a {
+        color: whitesmoke;
+    }
+
+    .common-btn {
+        width: 175px;
+        height: 40px;
     }
 
 
-
-
-    /* baner */
     .baner-section {
-        background-image: linear-gradient(rgba(4, 9, 10, 0.7), rgba(4, 9, 10, 0.7)),
-        url("https://goodtimes.betadelivery.com/static/images/baner.jpg");
-        background-position: center;
-        background-size: cover;
-        height: 100vh;
-        display: flex;
-        align-items: center;
+        height: inherit;
+        padding: 40px 0;
     }
 
     .baner-section .row {
-        align-items: center;
-        padding-top: 100px;
-    }
-
-    .baner-section .store-app {
-        display: flex;
-        align-items: center;
-        gap: 15px;
-        margin: 30px 0;
-    }
-
-    .baner-img {
-        text-align: center;
-        padding-top: 20px;
-    }
-
-    .baner-section .baner-img img {
-        width: 75%;
-    }
-
-    .baner-content .big-heading span {
-        color: var(--main-yellow);
-    }
-
-    .baner-content .grey-para {
-        margin-top: 24px;
-        font-size: 20px;
-        color: var(--white-other);
+        flex-direction: column-reverse;
     }
 
+    /* .baner-section .store-app {
+            justify-content: center;
+        } */
 
     .baner-btn {
-        margin-top: 24px;
-    }
-
-
-    /* plan  */
-
-    .modal-body .your-plan {
-        margin-top: 15px;
-    }
-
-    .modal-body .your-plans-main {
-        padding: 0px 10px 30px;
-    }
-
-    .modal-body .your-plans-main .head {
-        font-size: 25px;
-        color: black;
-        font-weight: 500;
-    }
-
-    .modal-body .your-plans-main .monthly-div-main {
-        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
-        padding: 15px 20px;
-        border-radius: 8px;
-    }
-
-    .modal-body .your-plans-main .monthly-div-main .monthly-div {
-        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
-        padding: 6px 10px;
-        border-radius: 8px;
-        border: 1px solid rgb(215 169 72 / 28%);
-    }
-
-    .modal-body .your-plans-main .your-heading {
-        color: var(--main-yellow);
-        font-size: 24px;
-        font-weight: 500;
-    }
-
-    .modal-body .your-plans-main .your-subheading {
-        font-size: 24px;
-        font-weight: 500;
-        color: black;
-    }
-
-    .modal-body .your-plans-main .your-subheading span {
-        font-size: 18px;
-        font-weight: 400;
-    }
-
-    .modal-body .your-plans-btn {
-        text-align: center;
-        margin-top: 20px;
-    }
-
-    .modal-body .your-plans-btn .common-btn {
-        width: 100%;
-    }
-
-    /* plan end  */
-
-    .common-btn {
-        background: linear-gradient(90.02deg, #CDA34C 0.02%, #F1D6A0 52%, #D1A956 98.68%);
-        width: 252px;
-        /* height: 50px; */
-        font-weight: 500;
-        border: none;
-        font-size: 18px;
-        font-weight: 600;
-        padding: 12px 0;
-    }
-
-
-    /* key-feature */
-    .key-features {
-        background-color: #10100e;
-        color: white;
-    }
-
-    .key-features .row {
-        align-items: center;
-        padding-bottom: 40px;
-    }
-
-    .key-features .key-main-img img {
-        width: 75%;
-    }
-
-    .key-features .key-right-first,
-    .key-right-second {
-        display: flex;
-        align-items: start;
-        gap: 20px;
-    }
-
-    .key-right-second {
-        margin-top: 60px;
-    }
-
-    /* easy-steps */
-    .easy-steps {
-        background-color: var(--black);
-    }
-
-    .easy-steps .para-dark {
-        margin-top: 50px;
-        color: var(--white);
-    }
-
-    .easy-steps .para {
-        color: rgba(192, 192, 192, 1);
         text-align: center;
     }
 
     .easy-steps-main {
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
-        gap: 25px;
-        margin-top: 100px;
-        padding-bottom: 40px;
-    }
-
-    .easy-steps-first {
-        background-color: rgba(255, 255, 255, 0.05);
-        border: 1px solid var(--main-yellow);
-        border-top-left-radius: 14px;
-        border-top-right-radius: 14px;
-        display: flex;
-        align-items: center;
-        flex-direction: column;
-        position: relative;
-        height: 400px;
-        padding: 0px 20px;
-    }
-
-    .easy-steps-first-img-num {
-        width: 75px;
-        height: 75px;
-        position: absolute;
-        top: -50px;
-    }
-
-    img.easy-steps-first-img-bot {
-        position: absolute;
-        bottom: -1px;
-    }
-
-    /* Adventure
- */
-
-
-    .Adventure {
-        background-color: #10100e;
-        color: white;
-    }
-
-    .Adventure .row {
-        align-items: center;
-        padding-top: 40px;
-    }
-
-    .Adventure-rti {
-        display: flex;
-        align-items: center;
-        gap: 20px;
-        margin-bottom: 40px;
-    }
-
-    .Adventure-right img {
-        width: 75%;
-    }
-
-    .Adventure-left .store-app {
-        display: flex;
-        gap: 15px;
-    }
-
-    .Adventure-btn {
-        margin-top: 40px;
-    }
-
-
-    /* faq */
-    .faq {
-        background-color: black;
-    }
-
-    .main-faq {
-        padding: 40px 0 80px;
-    }
-
-    div#accordionExample {
-        display: flex;
-        flex-direction: column;
-        gap: 30px;
-    }
-
-    .faq .accordion-item {
-        border: 1px solid var(--main-yellow);
-        background-color: transparent;
-        color: #fff;
-        border-radius: 5px;
-    }
-
-    .faq button.accordion-button:focus {
-        box-shadow: inherit;
-    }
-
-    .faq button.accordion-button {
-        background-color: transparent;
-        color: var(--white);
-    }
-
-    .accordion-button:not(.collapsed) {
-        color: var(--main-yellow) !important;
-        font-family: "Nunito Sans", sans-serif;
-        font-weight: 600;
-    }
-
-    .accordion-item:first-of-type .accordion-button {
-        box-shadow: none;
-    }
-
-    .accordion-button::after {
-        background-image: url(images/ab.png);
-    }
-
-    .accordion-button:not(.collapsed)::after {
-        background-image: url(images/at.png);
-        transform: none;
-    }
-
-
-
-    /* footer  */
-    .footer {
-        background-color: rgba(16, 16, 14, 1);
-    }
-
-    .footer .footer-main-img {
-        width: 212px;
-        height: 52px;
-        padding: 40px 0;
-    }
-
-    .footer .footer-main-img img {
-        width: 100%;
+        grid-template-columns: repeat(1, 1fr);
     }
 
     .footer .footer-main-grid {
-        display: grid;
-        grid-template-columns: repeat(4, 1fr);
-        color: var(--white);
-        padding: 3rem 0 2rem;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 20px;
     }
 
-    .footer .footer-main-grid .para-dark {
-        font-size: 18px;
-        font-weight: 600;
+    .easy-steps-first {
+        height: 400px;
     }
 
-    .footer .footer-main-grid .para {
+    .key-features .key-main-img img {
+        width: 50%;
+        margin-bottom: 20px;
+    }
+
+    .Adventure-rti {
+        margin-bottom: 20px;
+    }
+
+    .Adventure .row {
+        flex-direction: column-reverse;
+        gap: 40px;
+        padding: 0;
+    }
+
+    .Adventure {
+        padding: 30px 0;
+    }
+
+    .Adventure-btn {
+        margin-top: 30px;
+    }
+
+    .Adventure-right img {
+        width: 50%;
+    }
+
+    .sec-heading {
+        font-size: 30px;
+        padding-top: 0;
+    }
+
+    .about .para-mid,
+    .terms .para-mid {
         font-size: 16px;
     }
 
-
-    .footer .store-app {
-        display: flex;
-        gap: 15px;
-        margin: 0;
-        flex-direction: column;
+    .faq {
+        padding: 30px 0;
     }
 
-    .footer-btn .common-btn {
-        margin-bottom: 16px;
+    .main-faq {
+        padding: 20px 0 30px;
     }
 
-    .footer-main-grid-fourth {
-        margin-top: -20px;
-    }
-
-    .copy-right {
-        color: var(--main-yellow);
-        text-decoration: none;
-        font-size: 16px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding-bottom: 20px;
-    }
-
-    .store-app img {
-        width: 165px;
-    }
-
-
-    /* About us  */
-
-    .about-us {
-        background-image: url(images/About\ Us\ Banner.png);
-        background-position: top;
-        background-size: cover;
-        background-repeat: no-repeat;
-        height: 500px;
-        display: flex;
-        align-items: center;
-        margin-top: 90px;
-    }
-
-    .about-us .row {
-        align-items: center;
-    }
-
-
-    .about,
-    .terms {
-        background-color: var(--black);
-        color: var(--white);
-        padding: 40px 0 70px;
-    }
-
-
-    .terms-main {
-        background-image: url(images/terms.png);
-        background-position: top;
-        background-size: cover;
-        background-repeat: no-repeat;
-        height: 500px;
-        display: flex;
-        align-items: center;
-        margin-top: 90px;
-    }
-
-    .gold-text {
-        color: rgb(209 170 88);
-    }
-    .feat-card {
-        border: 1px solid #d1aa588c;
-        padding: 18px;
-        width: 300px;
-        border-radius: 6px;
-        background-color: #00000080;
-    }
-
-    /* mediascreen */
-    @media (max-width: 1199px) {
-        .big-heading br {
-            display: none;
-        }
-    }
-
-    @media (max-width: 1024px) {
-        .big-heading {
-            font-size: 42px;
-        }
-    }
-
-    @media (max-width: 991px) {
-        /* .big-heading br {
+    br {
         display: none;
-    } */
-
-        .big-heading {
-            font-size: 35px;
-        }
-
-        .store-app img {
-            width: 142px;
-        }
-
-        .sec-mini-heading {
-            font-size: 18px;
-        }
-
-        .para {
-            font-size: 14px;
-        }
-
-        .easy-steps-main {
-            grid-template-columns: repeat(2, 1fr);
-            gap: 70px 20px;
-            margin-top: 70px;
-        }
-
-        .footer .footer-main-grid {
-            grid-template-columns: repeat(2, 1fr);
-        }
-
-        .footer-main-grid-fourth {
-            margin-top: 0px;
-        }
-
     }
+}
 
-
-
-    @media (max-width: 767px) {
-        .ptb {
-            padding: 20px 0 40px 0;
-        }
-
-        .overlay {
-            position: fixed;
-            width: 100%;
-            height: 100%;
-            top: 0;
-            left: -100%;
-            background-color: #60606054;
-
-        }
-
-        .cross-btn {
-            display: block;
-        }
-
-        .hamburger,
-        .overlay {
-            display: block;
-        }
-
-        .navs {
-            position: fixed;
-            top: 0;
-            left: -100%;
-            width: 300px;
-            height: 100%;
-            background: rgb(0 0 0);
-            transition: all .3s;
-            z-index: 1;
-        }
-
-        .navs ul {
-            flex-direction: column;
-            padding: 00px 20px;
-            align-items: start;
-            gap: 14px;
-        }
-
-        .navs ul li a {
-            color: whitesmoke;
-        }
-
-        .common-btn {
-            width: 175px;
-            height: 40px;
-        }
-
-
-        .baner-section {
-            height: inherit;
-            padding: 40px 0;
-        }
-
-        .baner-section .row {
-            flex-direction: column-reverse;
-        }
-
-        /* .baner-section .store-app {
-            justify-content: center;
-        } */
-
-        .baner-btn {
-            text-align: center;
-        }
-
-        .easy-steps-main {
-            grid-template-columns: repeat(1, 1fr);
-        }
-
-        .footer .footer-main-grid {
-            grid-template-columns: repeat(2, 1fr);
-            gap: 20px;
-        }
-
-        .easy-steps-first {
-            height: 400px;
-        }
-
-        .key-features .key-main-img img {
-            width: 50%;
-            margin-bottom: 20px;
-        }
-
-        .Adventure-rti {
-            margin-bottom: 20px;
-        }
-
-        .Adventure .row {
-            flex-direction: column-reverse;
-            gap: 40px;
-            padding: 0;
-        }
-
-        .Adventure {
-            padding: 30px 0;
-        }
-
-        .Adventure-btn {
-            margin-top: 30px;
-        }
-
-        .Adventure-right img {
-            width: 50%;
-        }
-
-        .sec-heading {
-            font-size: 30px;
-            padding-top: 0;
-        }
-
-        .about .para-mid,
-        .terms .para-mid {
-            font-size: 16px;
-        }
-
-        .faq {
-            padding: 30px 0;
-        }
-
-        .main-faq {
-            padding: 20px 0 30px;
-        }
-
-        br {
-            display: none;
-        }
-    }
-
-    @media (max-width: 444px) {
-        /* .easy-steps-main {
+@media (max-width: 444px) {
+    /* .easy-steps-main {
         grid-template-columns: repeat(1, 1fr);
     } */
 
-        .footer .footer-main-grid {
-            grid-template-columns: repeat(1, 1fr);
-            gap: 0px;
-        }
+    .footer .footer-main-grid {
+        grid-template-columns: repeat(1, 1fr);
+        gap: 0px;
+    }
 
-        .footer .store-app {
-            margin-bottom: 16px;
-        }
-    }
\ No newline at end of file
+    .footer .store-app {
+        margin-bottom: 16px;
+    }
+}
\ No newline at end of file
diff --git a/templates/stripe_html/index.html b/templates/stripe_html/index.html
index eced950..671b7de 100644
--- a/templates/stripe_html/index.html
+++ b/templates/stripe_html/index.html
@@ -52,7 +52,13 @@
     <!-- baner  -->
 
     <section class="baner-section">
-
+        <div class="row message">
+            {% for message in messages %}
+                <div class="alert {{ message.tags }} alert-dismissible messgae-alert mt-3" role="alert">
+                    {{ message }} 
+                </div>
+            {% endfor %}
+        </div>
         <div class="container">
             <div class="row">
                 <div class="col-md-6">
@@ -91,7 +97,7 @@
 
     </section>
 
-    <section class="section card_design">
+    <section class="card_design">
         <div class="container">
             <div class="row">
                 {% for subscription in subscriptions %}
@@ -99,13 +105,13 @@
                     <div class="feat-card">
                         <div class="card text-center mb-2">
                             <!-- Dark card with gold border -->
-                            <h5 class="gold-text mb-0 p-1" style="background-color: #f1d59f6e;">{{ subscription.title }}
+                            <h5 class="gold-text bg_color">{{ subscription.title }}
                             </h5>
                             {% if subscription.image %}
                             <img src="{{ subscription.image.url }}" alt="{{ subscription.title }}" class="card-img-top">
                             {% endif %}
                         </div>
-                        <div class="card-body mb-2 text-center"> <!-- Golden text for the body -->
+                        <div class="card-body"> <!-- Golden text for the body -->
                             {% if subscription.short_description %}
                             <p class="gold-text">{{ subscription.short_description }}</p>
                             {% endif %}
@@ -114,16 +120,16 @@
                             {% endif %}
                             <h5 class="card-title gold-text">Subscription Amount</h5>
                             {% if subscription.high_amount and subscription.high_amount > subscription.amount %}
-                            <p class="gold-text mb-0"><s>£ {{ subscription.high_amount }}</s> £ {{ subscription.amount
+                            <p class="gold-text"><s>£ {{ subscription.high_amount }}</s> £ {{ subscription.amount
                                 }}
                             </p>
                             {% else %}
-                            <p class="gold-text mb-0">£ {{ subscription.amount }}</p>
+                            <p class="gold-text">£ {{ subscription.amount }}</p>
                             {% endif %}
                             {% if subscription.plan.days %}
-                            <p class="gold-text mb-0">Days of Subscription: {{ subscription.plan.days }}</p>
+                            <p class="gold-text">Days of Subscription: {{ subscription.plan.days }}</p>
                             {% else %}
-                            <p class="gold-text mb-0">Days of Subscription: Not available</p>
+                            <p class="gold-text">Days of Subscription: Not available</p>
                             {% endif %}
 
                         </div>
@@ -133,10 +139,12 @@
                                 now</button>
                         </div>
                     </div>
-                    <hr>
-                    {% empty %}
-                    <p>No subscriptions available.</p>
+                    
+                    
                 </div>
+                <hr>
+                {% empty %}
+                <p>No subscriptions available.</p>
                 {% endfor %}
 
             </div>