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

body {
    background-color: #0b0b1e;
    background-image: url("assets/overlay-1.svg");
    background-repeat: no-repeat;
    background-position: top right;
    font-size: 16px; /* Base font size */
    margin: 0;
    padding: 0;
    color: #fff;
    font-family: 'Lato', sans-serif; /* Default font */
}

/* Container Wrapper */
.container {
    padding: 0 20px;
}

/* Header Styles */
.header-container {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Align items to the right on desktop */
    gap: 40px;
    padding: 20px 40px; /* Added padding for better spacing */
    position: relative; /* For positioning the hamburger menu */
}

.main-logo {
    width: 66px;
    height: 66px;
    display: flex;
}

.main-logo img {
    border-radius: 50%;
    width: 100%;
    height: auto;
}

.main-title {
    font-size: 64px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.16em;
    text-align: left;
    color: #fff;
    font-family: 'Architects Daughter', cursive;
}

.dxx-title {
    color: #fff;
    margin-left: 15px;
    font-family: 'AR One Sans', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: 0.16em;
}

.dxx-logo img {
    width: 47px;
    height: 47px;
}

.dxx-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.dex img {
    width: 109px;
    height: 35px;
}

/* Hamburger Menu */
.hamburger-menu {
    display: none; /* Hidden on desktop */
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
}

.hamburger-menu span {
    width: 25px;
    height: 3px;
    background-color: #fff;
    border-radius: 2px;
}

/* Top Section */
.top-section {
    padding: 50px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.content {
    font-size: 64px;
    font-weight: 400;
    line-height: 1.25;
    text-align: left;
    color: #fff;
    margin-right: 20px;
    flex: 1 1 60%;
}

.content img {
    width: 140px;
    height: 140px;
    object-fit: contain;
}

.buynow-content {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.buynow-content img {
    width: 140px;
    height: 140px;
    object-fit: contain;
}

.ca-code {
    width: 100%;
    height: auto;
    font-size: 32px;
    font-weight: 400;
    line-height: 1.0;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.inner-text2 {
    color: #00FF09;
}

.grok-text {
    font-size: 64px;
    font-weight: 400;
    line-height: 1.25;
    text-align: left;
    color: #FFEA00E3;
}

.grok-span {
    color: rgba(156, 156, 156, 0.89);
}

/* Banner Section */
.banner-section {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

.banner-section img {
    width: 100%;
    height: auto;
    max-width: 1200px; /* Ensures it doesn't exceed container */
}

.banner-content {
    color: #fff;
    font-size: 32px;
    line-height: 1.5;
    text-align: left;
    padding: 50px 0;
}

/* Reign Section */
.reign-title {
    font-size: 48px;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
    color: #00FF7B;
    margin-bottom: 12px;
}

.reign-blk {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.reign-box {
    width: 100%;
    max-width: 442.67px;
    height: auto;
    padding: 48px 32px;
    border-radius: 80px 80px 0px 0px;
    background: linear-gradient(183deg, #000000 0%, #0D0D23 100%);
}

.reign-header {
    font-size: 40px;
    color: #BEB049;
}

.reign-text {
    color: #fff;
    font-size: 32px;
    margin-top: 50px;
    text-align: center;
}

/* Tokenomics Section */
.tokenomics {
    font-size: 96px;
    background: linear-gradient(90deg, #8800FF 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    margin: 50px 0;
}

.tokenomics-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.tokenomics-section img {
    width: 100%;
    max-width: 900px; /* Ensures the image doesn't stretch too much on desktop */
    height: auto;
}

.tokenomics-text {
    font-size: 40px;
    font-style: italic;
    font-weight: 275;
    color: #fff;
    margin-top: 95px;
    text-align: center;
}

.twst-blck {
    margin-top: 80px;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.twst-blck img {
    width: 570px; /* Original size on desktop */
    height: auto;
    box-shadow: 30px 30px 4px 0px #000000BF;
}

/* Meme Section */
.meme-sec {
    padding-top: 50px;
}

.meme-domain-title {
    font-size: 75px;
    font-weight: 400;
    color: #fff;
    text-align: center;
    margin-bottom: 20px;
}

.meme-ribbon {
    margin-top: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.meme-ribbon span:first-child {
    margin-left: -20px;
}
.meme-ribbon span:last-child {
margin-right: -20px;
}

.meme-tag img,
.meme-kkk img {
    width: 100%;
    max-width: 515px; /* Ensures the images don't stretch too much on desktop */
    height: auto;
    object-fit: contain;
}

.phase-list {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.64;
    color: #fff;
    padding: 40px 0;
}

.phase-list ul {
    list-style-type: disc;
    padding-left: 20px;
}

.waring-text {
    font-size: 48px;
    font-weight: 400;
    line-height: 1.23;
    color: #fff;
    text-align: center;
}

/* Footer Styles */
.footer-container {
    color: #fff;
    background: rgba(27, 27, 44, 0.5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-container .twitter-blk img,
.footer-container .telegram-blk img {
    width: 83px;
    height: 83px;
}

.mid-part img {
    width: 506px;
    height: 359px;
    object-fit: contain;
}

.twitter-blk,
.telegram-blk {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-text {
    font-size: 48px;
    color: #fff;
    margin-right: 10px;
}
.twitter-blk a,
.telegram-blk a{
    text-decoration: none;
    display: flex;
}
.nav-menu {
    display: none;
}

/* Typography */
.post-no {
    font-family: 'Post No Bills Jaffna', sans-serif;
}

.lato {
    font-family: 'Lato', sans-serif;
}

.ponnala {
    font-family: 'Ponnala', cursive;
}

.big-shoulder {
    font-family: 'Big Shoulders Inline Text', cursive;
}

.bakbak {
    font-family: 'Bakbak One', cursive;
}

.architects-daughter { /* Corrected class name */
    font-family: 'Architects Daughter', cursive;
}

.luckiest-guy {
    font-family: 'Luckiest Guy', cursive;
}

.ar-one {
    font-family: 'AR One Sans', sans-serif;
}

/* Responsive Styles */

/* Tablet Styles (min-width: 600px and max-width: 1024px) */
@media (min-width: 600px) and (max-width: 1024px) {
    .header-container {
        justify-content: space-between;
        margin-right: 20px;
        padding: 20px 40px;
    }

    .main-title {
        font-size: 48px;
        line-height: 1.25;
    }

    .content {
        font-size: 48px;
        line-height: 1.5;
        max-width: 370px;
    }

    .ca-code {
        max-width: 100%;
    }

    .reign-box {
        max-width: 100%;
        margin-right: 0;
    }

    .banner-content {
        font-size: 24px;
        padding: 30px 0;
    }

    .meme-tag img {
        max-width: 300px;
    }

    .reign-text {
        font-size: 24px;
    }

    .phase-list {
        font-size: 28px;
    }

    .waring-text {
        font-size: 36px;
    }

    .footer-text {
        font-size: 36px;
    }
}

/* Mobile Styles (max-width: 599px) */
@media (max-width: 599px) {
    /* Header */
    .header-container {
        flex-direction: column;
        align-items: center;
        gap: 15px;
        margin: 0;
        padding: 20px;
    }

    .main-title {
        font-size: 28px;
        line-height: 1.43;
        text-align: center;
    }

    .dxx-title {
        font-size: 16px;
    }

    .dxx-logo img {
        width: 35px;
        height: 35px;
    }

    .dex img {
        width: 80px;
        height: 25px;
    }

    /* Hamburger Menu */
    .hamburger-menu {
        display: flex;
    }

    .nav-menu {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: #0b0b1e;
        padding: 10px 0;
        position: absolute;
        top: 80px; /* Adjust based on header height */
        left: 0;
        right: 0;
        z-index: 1000; /* Ensure it appears above other elements */
    }

    .nav-menu.active {
        display: flex;
    }

    .nav-menu a {
        padding: 10px 20px;
        text-align: center;
    }
    .hamburger {
        display: flex;
        place-content: start;
        width: 100%;
    }

    /* Optional: Animate hamburger to X when active */
    .hamburger-menu.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .hamburger-menu.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger-menu.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    /* Top Section */
    .top-section {
        flex-direction: column;
        padding: 20px 0;
        align-items: center;
        place-content: center;
    }

    .content {
        font-size: 24px;
        line-height: 1.46;
        margin-right: 0;
        text-align: center;
        flex: 1 1 100%;
        max-width: 370px;
    }

    .buynow-content img {
        width: 80px;
        height: 80px;
    }

    .ca-code {
        padding: 10px 0;
        font-size: 20px;
        flex-direction: column;
        height: auto;
        text-align: center;
        max-width: 100%;
    }

    .grok-text {
        font-size: 24px;
        text-align: center;
    }

    /* Banner */
    .banner-section img {
        width: 100%;
        height: auto;
    }

    .banner-content {
        font-size: 18px;
        padding: 15px 0;
        text-align: center;
    }

    /* Reign Section */
    .reign-title {
        font-size: 28px;
        margin-bottom: 15px;
    }

    .reign-blk {
        flex-direction: column;
        align-items: center;
    }

    .reign-box {
        width: 100%;
        max-width: 100%;
        height: 200px;
        padding: 20px;
        border-radius: 40px 40px 0px 0px;
        margin-bottom: 15px;
        text-align: center;
    }

    .reign-header {
        font-size: 20px;
        text-align: center;
    }

    .reign-text {
        font-size: 16px;
        margin-top: 15px;
        text-align: center;
    }

    /* Tokenomics Section */
    .tokenomics {
        font-size: 48px;
    }

    .tokenomics-section {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

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

    .tokenomics-text {
        font-size: 24px;
        margin-top: 50px;
        text-align: center;
    }

    /* Twst Images */
    .twst-blck {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .twst-blck img {
        width: 100%;
        max-width: 300px; /* Ensures images don't exceed screen width */
        height: auto;
        box-shadow: 30px 30px 4px 0px #000000BF;
    }

    /* Meme Section */
    .meme-domain-title {
        font-size: 48px;
    }

    .meme-tag img {
        max-width: 200px;
    }

    .meme-kkk img {
        width: 100%;
        height: auto;
        border-radius: 33px 0px 0px 0px;
    }

    .phase-list {
        font-size: 20px;
        padding: 15px 0;
        text-align: left;
    }

    .phase-list ul {
        padding-left: 20px;
    }

    .waring-text {
        font-size: 20px;
    }

    /* Footer Styles */
    .footer-container {
        flex-direction: column;
        padding: 20px;
        height: auto;
        align-items: center;
        gap: 20px;
    }

    .footer-container .twitter-blk img,
    .footer-container .telegram-blk img {
        width: 50px;
        height: 50px;
    }

    .mid-part img {
        width: 100%;
        height: auto;
        margin: 20px 0;
    }

    .twitter-blk,
    .telegram-blk {
        width: 100%;
        justify-content: center;
        margin: 10px 0;
    }

    .footer-text {
        font-size: 20px;
    }

    /* Ensuring Images are Responsive */
    img {
        max-width: 100%;
        height: auto;
        display: block;
    }
    .dxx-logo.web,
    .dex.web{
        display: none;
    }
}
/* Typography Classes */
.post-no {
    font-family: 'Post No Bills Jaffna', sans-serif;
}

.lato {
    font-family: 'Lato', sans-serif;
}

.ponnala {
    font-family: 'Ponnala', cursive;
}

.big-shoulder {
    font-family: 'Big Shoulders Inline Text', cursive;
}

.bakbak {
    font-family: 'Bakbak One', cursive;
}

.architects-daughter { /* Corrected class name */
    font-family: 'Architects Daughter', cursive;
}

.luckiest-guy {
    font-family: 'Luckiest Guy', cursive;
}

.ar-one {
    font-family: 'AR One Sans', sans-serif;
}

/* Responsive Styles */

/* Tablet Styles (min-width: 600px and max-width: 1024px) */
@media (min-width: 600px) and (max-width: 1024px) {
    /* Header Adjustments */
    .header-container {
        justify-content: space-between;
        margin-right: 20px;
        padding: 20px 40px;
    }

    /* Main Title */
    .main-title {
        font-size: 48px;
        line-height: 1.25;
    }

    /* Content */
    .content {
        font-size: 48px;
        line-height: 1.5;
    }

    /* CA Code */
    .ca-code {
        max-width: 100%;
    }

    /* Reign Box */
    .reign-box {
        max-width: 100%;
        margin-right: 0;
    }

    /* Banner Content */
    .banner-content {
        font-size: 24px;
        padding: 30px 0;
    }

    /* Meme Tag Images */
    .meme-tag img {
        max-width: 300px;
    }

    /* Reign Text */
    .reign-text {
        font-size: 24px;
    }

    /* Phase List */
    .phase-list {
        font-size: 28px;
    }

    /* Warning Text */
    .waring-text {
        font-size: 36px;
    }

    /* Footer Text */
    .footer-text {
        font-size: 36px;
    }
}

/* Mobile Styles (max-width: 599px) */
@media (max-width: 599px) {
    /* Header */
    .header-container {
        flex-direction: column;
        align-items: center;
        gap: 15px;
        margin: 0;
        padding: 20px;
    }

    .main-title {
        font-size: 28px;
        line-height: 1.43;
        text-align: center;
    }

    .dxx-title {
        font-size: 16px;
    }

    .dxx-logo img {
        width: 35px;
        height: 35px;
    }

    .dex img {
        width: 80px;
        height: 25px;
    }

    /* Hamburger Menu */
    .hamburger-menu {
        display: flex;
    }

    .nav-menu {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: #0b0b1e;
        padding: 10px 0;
        position: absolute;
        top: 190px; 
        left: 0;
        right: 0;
        z-index: 1000; 
    }

    .nav-menu.active {
        display: flex;
    }

    .nav-menu a {
        padding: 10px 20px;
        text-align: center;
    }

    /* Animate Hamburger to X when active */
    .hamburger-menu.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .hamburger-menu.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger-menu.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    /* Top Section */
    .top-section {
        flex-direction: column;
        padding: 20px 0;
        align-items: center;
    }

    .content {
        font-size: 24px;
        line-height: 1.46;
        margin-right: 0;
        text-align: center;
        flex: 1 1 100%;
    }

    .buynow-content img {
        width: 80px;
        height: 80px;
    }

    .ca-code {
        padding: 10px 0;
        font-size: 20px;
        flex-direction: column;
        height: auto;
        text-align: center;
        max-width: 100%;
    }
    .inner-text2 {
        max-width: 370px;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .grok-text {
        font-size: 24px;
        text-align: center;
    }

    /* Banner */
    .banner-section img {
        width: 100%;
        height: auto;
    }

    .banner-content {
        font-size: 18px;
        padding: 15px 0;
        text-align: center;
    }

    /* Reign Section */
    .reign-title {
        font-size: 28px;
        margin-bottom: 15px;
    }

    .reign-blk {
        flex-direction: column;
        align-items: center;
    }

    .reign-box {
        width: 100%;
        max-width: 100%;
        height: 200px;
        padding: 20px;
        border-radius: 40px 40px 0px 0px;
        margin-bottom: 15px;
        text-align: center;
    }

    .reign-header {
        font-size: 20px;
        text-align: center;
    }

    .reign-text {
        font-size: 16px;
        margin-top: 15px;
        text-align: center;
    }

    /* Tokenomics Section */
    .tokenomics {
        font-size: 48px;
    }

    .tokenomics-section {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

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

    .tokenomics-text {
        font-size: 24px;
        margin-top: 50px;
        text-align: center;
    }

    /* Twst Images */
    .twst-blck {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .twst-blck img {
        width: 100%;
        max-width: 300px; /* Ensures images don't exceed screen width */
        height: auto;
        box-shadow: 30px 30px 4px 0px #000000BF;
    }

    /* Meme Section */
    .meme-domain-title {
        font-size: 48px;
    }

    .meme-tag img {
        max-width: 200px;
    }

    .meme-kkk img {
        width: 100%;
        height: auto;
        border-radius: 33px 0px 0px 0px;
    }

    .phase-list {
        font-size: 20px;
        padding: 15px 0;
        text-align: left;
    }

    .phase-list ul {
        padding-left: 20px;
    }

    .waring-text {
        font-size: 20px;
    }

    /* Footer Styles */
    .footer-container {
        flex-direction: column;
        padding: 20px;
        height: auto;
        align-items: center;
        gap: 20px;
    }

    .footer-container .twitter-blk img,
    .footer-container .telegram-blk img {
        width: 50px;
        height: 50px;
    }

    .mid-part img {
        width: 100%;
        height: auto;
        margin: 20px 0;
    }

    .twitter-blk,
    .telegram-blk {
        width: 100%;
        justify-content: center;
        margin: 10px 0;
    }

    .footer-text {
        font-size: 20px;
    }

    /* Ensuring Images are Responsive */
    img {
        max-width: 100%;
        height: auto;
        display: block;
    }
}

/* Typography Classes */
.post-no {
    font-family: 'Post No Bills Jaffna', sans-serif;
}

.lato {
    font-family: 'Lato', sans-serif;
}

.ponnala {
    font-family: 'Ponnala', cursive;
}

.big-shoulder {
    font-family: 'Big Shoulders Inline Text', cursive;
}

.bakbak {
    font-family: 'Bakbak One', cursive;
}

.architects-daughter { /* Corrected class name */
    font-family: 'Architects Daughter', cursive;
}

.luckiest-guy {
    font-family: 'Luckiest Guy', cursive;
}

.ar-one {
    font-family: 'AR One Sans', sans-serif;
}

/* Responsive Styles */

/* Tablet Styles (min-width: 600px and max-width: 1024px) */
@media (min-width: 600px) and (max-width: 1024px) {
    /* Header Adjustments */
    .header-container {
        justify-content: space-between;
        margin-right: 20px;
        padding: 20px 40px;
    }

    /* Main Title */
    .main-title {
        font-size: 48px;
        line-height: 1.25;
    }

    /* Content */
    .content {
        font-size: 48px;
        line-height: 1.5;
    }

    /* CA Code */
    .ca-code {
        max-width: 100%;
    }

    /* Reign Box */
    .reign-box {
        max-width: 100%;
        margin-right: 0;
    }

    /* Banner Content */
    .banner-content {
        font-size: 24px;
        padding: 30px 0;
    }

    /* Meme Tag Images */
    .meme-tag img {
        max-width: 300px;
    }

    /* Reign Text */
    .reign-text {
        font-size: 24px;
    }

    /* Phase List */
    .phase-list {
        font-size: 28px;
    }

    /* Warning Text */
    .waring-text {
        font-size: 36px;
    }

    /* Footer Text */
    .footer-text {
        font-size: 36px;
    }
}

/* Mobile Styles (max-width: 599px) */
@media (max-width: 599px) {
    /* Header */
    .header-container {
        flex-direction: column;
        align-items: center;
        gap: 15px;
        margin: 0;
        padding: 20px;
    }

    .main-title {
        font-size: 28px;
        line-height: 1.43;
        text-align: center;
    }

    .dxx-title {
        font-size: 16px;
    }

    .dxx-logo img {
        width: 35px;
        height: 35px;
    }

    .dex img {
        width: 80px;
        height: 25px;
    }

    /* Hamburger Menu */
    .hamburger-menu {
        display: flex;
    }

    .nav-menu {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: #0b0b1e;
        padding: 10px 0;
        position: absolute;
        top: 190px;
        left: 0;
        right: 0;
        z-index: 1000;
    }

    .nav-menu.active {
        display: flex;
    }

    .nav-menu a {
        padding: 10px 20px;
        text-align: center;
    }

    /* Animate Hamburger to X when active */
    .hamburger-menu.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .hamburger-menu.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger-menu.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    /* Top Section */
    .top-section {
        flex-direction: column;
        padding: 20px 0;
        align-items: center;
        place-content: center;
    }

    .content {
        font-size: 24px;
        line-height: 1.46;
        margin-right: 0;
        text-align: center;
        flex: 1 1 100%;
    }

    .buynow-content img {
        width: 80px;
        height: 80px;
    }

    .ca-code {
        padding: 10px 0;
        font-size: 20px;
        flex-direction: column;
        height: auto;
        text-align: center;
        max-width: 100%;
    }

    .grok-text {
        font-size: 24px;
        text-align: center;
    }

    /* Banner */
    .banner-section img {
        width: 100%;
        height: auto;
    }

    .banner-content {
        font-size: 18px;
        padding: 15px 0;
        text-align: center;
    }

    /* Reign Section */
    .reign-title {
        font-size: 28px;
        margin-bottom: 15px;
    }

    .reign-blk {
        flex-direction: column;
        align-items: center;
    }

    .reign-box {
        width: 100%;
        max-width: 100%;
        height: 200px;
        padding: 20px;
        border-radius: 40px 40px 0px 0px;
        margin-bottom: 15px;
    }

    .reign-header {
        font-size: 20px;
        text-align: center;
    }

    .reign-text {
        font-size: 16px;
        margin-top: 15px;
        text-align: center;
    }

    /* Tokenomics Section */
    .tokenomics {
        font-size: 48px;
    }

    .tokenomics-section {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

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

    .tokenomics-text {
        font-size: 24px;
        margin-top: 50px;
        text-align: center;
    }

    /* Twst Images */
    .twst-blck {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .twst-blck img {
        width: 100%;
        max-width: 300px; /* Ensures images don't exceed screen width */
        height: auto;
        box-shadow: 30px 30px 4px 0px #000000BF;
    }

    /* Meme Section */
    .meme-domain-title {
        font-size: 48px;
    }

    .meme-tag img {
        max-width: 200px;
    }

    .meme-kkk img {
        width: 100%;
        height: auto;
        border-radius: 33px 0px 0px 0px;
    }

    .phase-list {
        font-size: 20px;
        padding: 15px 0;
        text-align: left;
    }

    .phase-list ul {
        padding-left: 20px;
    }

    .waring-text {
        font-size: 20px;
    }

    /* Footer Styles */
    .footer-container {
        flex-direction: column;
        padding: 20px;
        height: auto;
        align-items: center;
        gap: 20px;
    }

    .footer-container .twitter-blk img,
    .footer-container .telegram-blk img {
        width: 50px;
        height: 50px;
    }

    .mid-part img {
        width: 100%;
        height: auto;
        margin: 20px 0;
    }

    .twitter-blk,
    .telegram-blk {
        width: 100%;
        justify-content: center;
        margin: 10px 0;
    }

    .footer-text {
        font-size: 20px;
    }

    /* Ensuring Images are Responsive */
    img {
        max-width: 100%;
        height: auto;
        display: block;
    }
}