@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');

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


.text-muted {
    color: #fff !important;
}



/* Main Styles */


body {
    font-family: "Poppins", sans-serif;
    overflow-x: hidden;
}

.header-wrapper{
    min-height: 10vh;
    background: #121212;
    color: white;

}

.xenpop-wrapper {
    /* min-height: 100vh; */
    width: 100%;
    background: #121212;
    color: white;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.container.mb-3 {
    position: relative;
    padding-bottom: 3rem;
    padding-top: 3rem;
    flex: 1 0 auto;
}

/* Logo */


/* // -----------  hero section  ------------------ */

/* App Icons */
.app-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    /* font-weight: bold; */
}

.play-icon {
    background: linear-gradient(to right, #f97316, #ef4444);
    font-size: 1.2rem;
}



/* Stars */
.stars {
    color: gold;
    font-size: 0.7rem;
}

/* Orbit Container */
.orbit-container {
    position: relative;
    width: 100%;
    height: 300px;
    margin: 0 auto;
}

#orbitCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.central-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 10;
}

/* Stats */
.stat-card {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 300;
}

/* Chart Container */
.chart-container {
    background-color: #121031;
    border-radius: 20px;
    padding: 12px;
    margin-top: 10px;
    max-width: 200px;
}

#lineChart {
    width: 100%;
    height: 70px;
}

/* Navigation Indicator */
.nav-indicator {
    position: absolute;
    /* bottom: 30px; */
    left: 50%;
    transform: translateX(-50%);
}

.nav-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
}

/* Bootstrap Overrides */
.btn-primary {
    background-color: #2563eb;
    border-color: #2563eb;
}

.btn-outline-light {
    border-color: rgba(255, 255, 255, 0.2);
}

.btn-outline-secondary {
    color: white;
    border-color: rgba(255, 255, 255, 0.2);
}

.text-primary {
    color: #3b82f6 !important;
}

.text-info {
    color: #60a5fa !important;
}

/* Media Queries */
@media (max-width: 768px) {
    .central-text h2 {
        font-size: 1.5rem;
    }

    .cont-btn{
        display: none;
    }
    
    .orbit-container {
        height: 250px;
    }
    
    .stat-value {
        font-size: 1.2rem;
    }

    .header-span{
        display: none !important;
    }
}

@media (max-width: 576px) {
    .orbit-container {
        height: 200px;
    }

    .cont-btn{
        display: none;
    }

    .nav-circle {
        width: 50px;
        height: 50px;

    }

    .nav-indicator {
        position: absolute;
        /* bottom: 40px;
        left: 50%; */
        transform: translate(-50%,-400%);
    }

    .header-span {
        display: none !important;
    }
}

@media (max-width: 992px) {
    .xenpop-wrapper {
        justify-content: flex-start;
    }
    .container.mb-3 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

@media (max-width: 768px) {
    .xenpop-wrapper {
        display: block;
        min-height: unset;
    }
    .container.mb-3 {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
}

@media (max-width: 576px) {
    .container.mb-3 {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}


/* // -----------  What-is xenpop section  ------------------ */

/* Main Styles */


/* Text Styles */
.section-title {
    font-size: 2.5rem;
    font-weight: 300;
    margin-bottom: 1.5rem;
}

.section-subtitle {
    font-size: 1.2rem;
    font-weight: 300;
}

.description {
    font-size: 1rem;
    line-height: 1.6;
    opacity: 0.9;
}

.text-primary {
    color: #3b82f6 !important;
}

.tagline {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Tag Pill */
.tag-pill {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 5px 15px;
    font-size: 0.8rem;
    font-weight: 400;
}

/* App Icons */
.app-icons {
    display: flex;
    gap: 10px;
}

.app-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 300;
}

.play-icon {
    background: linear-gradient(to right, #f97316, #ef4444);
    font-size: 1.2rem;
}



/* App Preview */
.app-preview {
    width: 100%;
    max-width: 280px;
    perspective: 1000px;
}

.app-card {
    background:#121031;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transform: rotate3d(1, 1, 0, 10deg);
    transition: transform 0.3s ease;
}

.app-card:hover {
    transform: rotate3d(1, 1, 0, 0deg);
}

.app-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.xen-logo {
    margin-right: 15px;
}

.logo-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: #f59e0b;
    color: white;
    font-weight: 300;
    border-radius: 50%;
}

.app-info {
    flex-grow: 1;
}

.app-name {
    font-weight: 300;
    font-size: 0.9rem;
}

.app-balance {
    font-size: 0.8rem;
    opacity: 0.8;
}

.app-chart {
    height: 120px;
    margin-top: 10px;
}

/* Market Value Section */
.market-chart-container {
    background-color: #121031;
    border-radius: 15px;
    padding: 20px;
    position: relative;
    height: 150px;
}

.market-value {
    position: absolute;
    top: 20px;
    right: 20px;
    font-weight: 300;
}

.value-number {
    font-size: 1.8rem;
}

.value-plus {
    font-size: 1rem;
    color: #3b82f6;
    vertical-align: super;
}

.market-note {
    position: absolute;
    bottom: 10px;
    left: 20px;
    font-size: 0.7rem;
    opacity: 0.7;
}

/* Feature Tags */
.feature-tag {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 5px 15px;
    font-size: 0.8rem;
    display: inline-block;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .app-preview {
        margin: 30px auto;
    }
    
    .market-section, .platform-section {
        text-align: center;
    }
}

@media (max-width: 576px) {
    .section-title {
        font-size: 2rem;
    }
    
    .app-card {
        transform: none;
    }
}


/* // -----------  Why-Xenpop- section  ------------------ */

/* Main Styles */

/* Text Styles */
.section-title {
    font-size: 2.5rem;
    font-weight:300;
    margin-bottom: 1.5rem;
}

h2 {
    font-size: 1.8rem;
    font-weight: 300;
}

h3 {
    font-size: 1.2rem;
    font-weight: 300;
    margin-bottom: 0.5rem;
}

p {
    font-size: 0.95rem;
    line-height: 1.5;
    opacity: 0.9;
    margin-bottom: 0;
}

/* Tag Pill */
.tag-pill {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 5px 15px;
    font-size: 0.8rem;
    font-weight: 400;
}

/* Feature Cards */
.feature-card {
    background: #121031;
    border-radius: 20px;
    padding: 25px;
    height: 100%;
    position: relative;
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.2);
    display: flex;
    flex-direction: column;
    gap: 20px;
    border: none;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.feature-icon {
    min-width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.feature-icon.blue {
    background-color: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.feature-icon.purple {
    background-color: rgba(139, 92, 246, 0.2);
    color: #8b5cf6;
}

.feature-text {
    flex-grow: 1;
  

}

.feature-text p{
    font-size: 0.9rem !important;
    font-weight: 300 !important;
}

.feature-highlight {
    margin-top: 10px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Card Specific Styles */
.mining-card .feature-highlight {
    text-align: center;
}

.platform-card .feature-item h3 {
    color: #3b82f6;
}

/* Glow Effects */
.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20px;
    padding: 2px;
    background: linear-gradient(145deg, rgba(59, 130, 246, 0.5), rgba(59, 130, 246, 0));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .feature-card {
        margin-bottom: 30px;
    }
}

@media (max-width: 576px) {
    .section-title {
        font-size: 2rem;
    }
    
    .feature-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .feature-highlight h2 {
        font-size: 1.5rem;
    }
}


/* // -----------  How it Work - section  ------------------ */


/* Text Styles */
.section-title {
    font-size: 2.5rem;
    font-weight: 300;
    margin-bottom: 1.5rem;
}

.description {
    font-size: 1.1rem;
    line-height: 1.6;
    opacity: 0.9;
    max-width: 90%;
}

.video-title {
    font-size: 1.8rem;
    font-weight: 300;
}

.subtitle {
    font-size: 1rem;
    font-weight: 300;
}

/* Tag Pill */
.tag-pill {
    display: inline-block;
    background-color: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.5);
    border-radius: 20px;
    padding: 5px 15px;
    font-size: 0.8rem;
    font-weight: 400;
    color: #3b82f6;
}

/* Steps Container */
.steps-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 30px;
}

.step-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.step-icon {
    color: #3b82f6;
    font-size: 1.2rem;
}

.step-text {
    font-size: 1.1rem;
}

/* Download Buttons */
.btn-download {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 300;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: #3b82f6;
    border-color: #3b82f6;
}

.btn-primary:hover {
    background-color: #2563eb;
    border-color: #2563eb;
}

.btn-outline-primary {
    color: #3b82f6;
    border-color: #3b82f6;
}

.btn-outline-primary:hover {
    background-color: #3b82f6;
    color: white;
}

/* Video Container */
.video-container {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.video-container img {
    width: 100%;
    display: block;
    transition: transform 0.3s ease;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background-color: rgba(59, 130, 246, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.play-button i {
    color: white;
    font-size: 2rem;
    margin-left: 5px; /* Adjust for play icon centering */
}

.play-button:hover {
    background-color: #2563eb;
    transform: translate(-50%, -50%) scale(1.1);
}

.video-container:hover img {
    transform: scale(1.02);
}

/* Text Primary Color */
.text-primary {
    color: #3b82f6 !important;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .description {
        max-width: 100%;
    }
    
    .video-section {
        margin-top: 20px;
    }
}

@media (max-width: 576px) {
    .section-title {
        font-size: 2rem;
    }
    
    .video-title {
        font-size: 1.5rem;
    }
    
    .step-text {
        font-size: 1rem;
    }
    
    .download-buttons {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    
    .btn-download {
        width: 100%;
    }
}


/* // -----------  Road Map - section  ------------------ */

/* Main Styles */

/* Text Styles */
.section-title {
    font-size: 2.5rem;
    font-weight: 300;
    margin-bottom: 1.5rem;
}

/* Roadmap Cards */
.roadmap-card {
    background: rgba(0, 123, 255, 0.10);
    border-radius: 15px;
    padding: 25px;
    height: 100%;
    position: relative;
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.1);
    transition: all 0.3s ease;
    overflow: hidden;
}

.roadmap-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 15px;
    padding: 2px;
    background: linear-gradient(145deg, rgba(59, 130, 246, 0.3), rgba(59, 130, 246, 0));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.roadmap-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.2);
}

/* Card Icons */
.card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.card-icon.purple {
    background: linear-gradient(145deg, #6366f1, #4f46e5);
    color: white;
}

.card-icon.pink {
    background: linear-gradient(145deg, #ec4899, #db2777);
    color: white;
}

/* Card Content */
.card-title {
    font-size: 1.2rem;
    font-weight: 300;
    margin-bottom: 15px;
    color: white;
}

.card-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
}

/* Animation Classes */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .roadmap-card {
        margin-bottom: 20px;
    }
}

@media (max-width: 576px) {
    .section-title {
        font-size: 2rem;
    }
    
    .card-title {
        font-size: 1.1rem;
    }
    
    .card-text {
        font-size: 0.9rem;
    }
}

/* // -----------  FAQ's - section  ------------------ */
/* Main Styles */

/* Text Styles */
.section-title {
    font-size: 2.5rem;
    font-weight: 300;
    margin-bottom: 1.5rem;
}

.text-primary {
    color: #3b82f6 !important;
}

/* FAQ Styles */
.faq-item {
    margin-bottom: 15px;
    border-radius: 10px;
    overflow: hidden;
    background-color: rgba(15, 23, 42, 0.6);
    transition: all 0.3s ease;
}

.faq-item.active {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
}

.faq-question {
    padding: 18px 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
}

.faq-question span {
    font-weight: 300;
    font-size: 1.05rem;
}

.faq-question i {
    color: #3b82f6;
    transition: transform 0.3s ease;
}

.faq-item.active .faq-question {
    background-color: rgba(15, 23, 42, 0.9);
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 0 20px;
    background-color: rgba(15, 23, 42, 0.4);
    border-top: 1px solid rgba(59, 130, 246, 0.1);
}

.faq-answer p {
    padding: 15px 0;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
}

/* Hover Effects */
.faq-item:hover {
    background-color: rgba(15, 23, 42, 0.8);
}

.faq-question:hover i {
    color: #60a5fa;
}

/* Animation Classes */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .faq-item {
        margin-bottom: 10px;
    }
}

@media (max-width: 576px) {
    .section-title {
        font-size: 2rem;
    }
    
    .faq-question span {
        font-size: 0.95rem;
    }
    
    .faq-answer p {
        font-size: 0.9rem;
    }
}



/* // -----------  CTA - section  ------------------ */
/* CTA Card Styles */
.cta-card {
    position: relative;
    overflow: hidden;
    background: #101c2c;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 24 24' fill='none' opacity='0.25'><g clip-path='url(%23clip0_441_825)'><path d='M20.4851 20.4853C25.1714 15.799 25.1714 8.20101 20.4851 3.51472C15.7988 -1.17157 8.20087 -1.17157 3.51458 3.51472C-1.17171 8.20101 -1.17171 15.799 3.51458 20.4853C8.20087 25.1716 15.7988 25.1716 20.4851 20.4853Z' fill='url(%23paint0_linear_441_825)'/><path d='M19.7958 19.7959C24.1013 15.4903 24.1013 8.50966 19.7958 4.2041C15.4902 -0.101454 8.50953 -0.101454 4.20398 4.2041C-0.101576 8.50966 -0.101576 15.4903 4.20398 19.7959C8.50953 24.1015 15.4902 24.1015 19.7958 19.7959Z' fill='url(%23paint1_linear_441_825)'/><path opacity='0.3' d='M19.4258 19.6598C23.571 15.5146 23.571 8.79396 19.4258 4.64878C15.2807 0.503601 8.56 0.503603 4.41482 4.64878C0.269634 8.79396 0.269634 15.5146 4.41482 19.6598C8.56 23.805 15.2807 23.805 19.4258 19.6598Z' fill='%23FFE482'/><path d='M19.5054 19.5055C23.6506 15.3603 23.6506 8.63967 19.5054 4.49449C15.3603 0.349306 8.63959 0.349306 4.49441 4.49449C0.349225 8.63967 0.349225 15.3603 4.49441 19.5055C8.63959 23.6507 15.3603 23.6507 19.5054 19.5055Z' fill='url(%23paint2_linear_441_825)'/><path opacity='0.4' d='M12.2464 1.6549C18.1035 1.89863 22.6539 6.84476 22.4096 12.7018C22.32 14.8506 21.5931 16.8202 20.4256 18.4448C21.7072 16.7722 22.511 14.7072 22.6054 12.4416C22.8496 6.5845 18.2992 1.6389 12.4422 1.39463C8.73389 1.23996 5.39523 3.01063 3.37976 5.8149C5.41176 3.16316 8.65496 1.50503 12.2464 1.6549Z' fill='url(%23paint3_linear_441_825)'/><path opacity='0.3' d='M17.9228 18.6728C21.3538 15.2418 21.3538 9.67908 17.9228 6.24809C14.4918 2.8171 8.92911 2.8171 5.49812 6.24809C2.06713 9.67908 2.06713 15.2418 5.49812 18.6728C8.92911 22.1038 14.4918 22.1038 17.9228 18.6728Z' fill='%232E0C00'/><path d='M18.2123 18.2124C21.6433 14.7814 21.6433 9.21863 18.2123 5.78764C14.7813 2.35665 9.21854 2.35665 5.78755 5.78764C2.35656 9.21863 2.35656 14.7814 5.78755 18.2124C9.21854 21.6433 14.7813 21.6433 18.2123 18.2124Z' fill='url(%23paint4_linear_441_825)'/><path d='M20.0965 12.3375C19.9104 16.809 16.1344 20.2831 11.6624 20.097C7.1909 19.9109 3.71676 16.1349 3.9029 11.6628C4.08903 7.19138 7.86503 3.71725 12.337 3.90338C16.8085 4.08952 20.2826 7.86605 20.0965 12.3375Z' fill='url(%23paint5_linear_441_825)'/></g><defs><linearGradient id='paint0_linear_441_825' x1='6.09899' y1='24.2773' x2='16.4803' y2='2.67726' gradientUnits='userSpaceOnUse'><stop stop-color='%23FFB859'/><stop offset='0.23' stop-color='%23CC5827'/><stop offset='0.67' stop-color='%23FFDA6B'/><stop offset='1' stop-color='%23FF9421'/></linearGradient><linearGradient id='paint1_linear_441_825' x1='4.18327' y1='21.4917' x2='19.9774' y2='2.31299' gradientUnits='userSpaceOnUse'><stop stop-color='%23FFB859'/><stop offset='0.23' stop-color='%23CC5827'/><stop offset='0.67' stop-color='%23FFDA6B'/><stop offset='1' stop-color='%23FF9421'/></linearGradient><linearGradient id='paint2_linear_441_825' x1='7.41745' y1='21.577' x2='17.2014' y2='1.12846' gradientUnits='userSpaceOnUse'><stop offset='0.26' stop-color='%23B0381C'/><stop offset='1' stop-color='%23FF9421'/></linearGradient><linearGradient id='paint3_linear_441_825' x1='3.37923' y1='9.91516' x2='22.6144' y2='9.91516' gradientUnits='userSpaceOnUse'><stop offset='0.26' stop-color='%23B0381C'/><stop offset='1' stop-color='%23FF9421'/></linearGradient><linearGradient id='paint4_linear_441_825' x1='10.4702' y1='17.6469' x2='14.2654' y2='3.63726' gradientUnits='userSpaceOnUse'><stop stop-color='%23FFB859'/><stop offset='0.23' stop-color='%23CC5827'/><stop offset='0.67' stop-color='%23FFDA6B'/><stop offset='1' stop-color='%23FF9421'/></linearGradient><linearGradient id='paint5_linear_441_825' x1='8.5013' y1='19.3119' x2='15.9712' y2='3.70018' gradientUnits='userSpaceOnUse'><stop stop-color='%23FFB859'/><stop offset='0.23' stop-color='%23CC5827'/><stop offset='0.67' stop-color='%23FFDA6B'/><stop offset='1' stop-color='%23FF9421'/></linearGradient><clipPath id='clip0_441_825'><rect width='24' height='24' fill='white'/></clipPath></defs></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 24 24' fill='none' opacity='0.25'><g clip-path='url(%23clip0_441_825)'><path d='M20.4851 20.4853C25.1714 15.799 25.1714 8.20101 20.4851 3.51472C15.7988 -1.17157 8.20087 -1.17157 3.51458 3.51472C-1.17171 8.20101 -1.17171 15.799 3.51458 20.4853C8.20087 25.1716 15.7988 25.1716 20.4851 20.4853Z' fill='url(%23paint0_linear_441_825)'/><path d='M19.7958 19.7959C24.1013 15.4903 24.1013 8.50966 19.7958 4.2041C15.4902 -0.101454 8.50953 -0.101454 4.20398 4.2041C-0.101576 8.50966 -0.101576 15.4903 4.20398 19.7959C8.50953 24.1015 15.4902 24.1015 19.7958 19.7959Z' fill='url(%23paint1_linear_441_825)'/><path opacity='0.3' d='M19.4258 19.6598C23.571 15.5146 23.571 8.79396 19.4258 4.64878C15.2807 0.503601 8.56 0.503603 4.41482 4.64878C0.269634 8.79396 0.269634 15.5146 4.41482 19.6598C8.56 23.805 15.2807 23.805 19.4258 19.6598Z' fill='%23FFE482'/><path d='M19.5054 19.5055C23.6506 15.3603 23.6506 8.63967 19.5054 4.49449C15.3603 0.349306 8.63959 0.349306 4.49441 4.49449C0.349225 8.63967 0.349225 15.3603 4.49441 19.5055C8.63959 23.6507 15.3603 23.6507 19.5054 19.5055Z' fill='url(%23paint2_linear_441_825)'/><path opacity='0.4' d='M12.2464 1.6549C18.1035 1.89863 22.6539 6.84476 22.4096 12.7018C22.32 14.8506 21.5931 16.8202 20.4256 18.4448C21.7072 16.7722 22.511 14.7072 22.6054 12.4416C22.8496 6.5845 18.2992 1.6389 12.4422 1.39463C8.73389 1.23996 5.39523 3.01063 3.37976 5.8149C5.41176 3.16316 8.65496 1.50503 12.2464 1.6549Z' fill='url(%23paint3_linear_441_825)'/><path opacity='0.3' d='M17.9228 18.6728C21.3538 15.2418 21.3538 9.67908 17.9228 6.24809C14.4918 2.8171 8.92911 2.8171 5.49812 6.24809C2.06713 9.67908 2.06713 15.2418 5.49812 18.6728C8.92911 22.1038 14.4918 22.1038 17.9228 18.6728Z' fill='%232E0C00'/><path d='M18.2123 18.2124C21.6433 14.7814 21.6433 9.21863 18.2123 5.78764C14.7813 2.35665 9.21854 2.35665 5.78755 5.78764C2.35656 9.21863 2.35656 14.7814 5.78755 18.2124C9.21854 21.6433 14.7813 21.6433 18.2123 18.2124Z' fill='url(%23paint4_linear_441_825)'/><path d='M20.0965 12.3375C19.9104 16.809 16.1344 20.2831 11.6624 20.097C7.1909 19.9109 3.71676 16.1349 3.9029 11.6628C4.08903 7.19138 7.86503 3.71725 12.337 3.90338C16.8085 4.08952 20.2826 7.86605 20.0965 12.3375Z' fill='url(%23paint5_linear_441_825)'/></g><defs><linearGradient id='paint0_linear_441_825' x1='6.09899' y1='24.2773' x2='16.4803' y2='2.67726' gradientUnits='userSpaceOnUse'><stop stop-color='%23FFB859'/><stop offset='0.23' stop-color='%23CC5827'/><stop offset='0.67' stop-color='%23FFDA6B'/><stop offset='1' stop-color='%23FF9421'/></linearGradient><linearGradient id='paint1_linear_441_825' x1='4.18327' y1='21.4917' x2='19.9774' y2='2.31299' gradientUnits='userSpaceOnUse'><stop stop-color='%23FFB859'/><stop offset='0.23' stop-color='%23CC5827'/><stop offset='0.67' stop-color='%23FFDA6B'/><stop offset='1' stop-color='%23FF9421'/></linearGradient><linearGradient id='paint2_linear_441_825' x1='7.41745' y1='21.577' x2='17.2014' y2='1.12846' gradientUnits='userSpaceOnUse'><stop offset='0.26' stop-color='%23B0381C'/><stop offset='1' stop-color='%23FF9421'/></linearGradient><linearGradient id='paint3_linear_441_825' x1='3.37923' y1='9.91516' x2='22.6144' y2='9.91516' gradientUnits='userSpaceOnUse'><stop offset='0.26' stop-color='%23B0381C'/><stop offset='1' stop-color='%23FF9421'/></linearGradient><linearGradient id='paint4_linear_441_825' x1='10.4702' y1='17.6469' x2='14.2654' y2='3.63726' gradientUnits='userSpaceOnUse'><stop stop-color='%23FFB859'/><stop offset='0.23' stop-color='%23CC5827'/><stop offset='0.67' stop-color='%23FFDA6B'/><stop offset='1' stop-color='%23FF9421'/></linearGradient><linearGradient id='paint5_linear_441_825' x1='8.5013' y1='19.3119' x2='15.9712' y2='3.70018' gradientUnits='userSpaceOnUse'><stop stop-color='%23FFB859'/><stop offset='0.23' stop-color='%23CC5827'/><stop offset='0.67' stop-color='%23FFDA6B'/><stop offset='1' stop-color='%23FF9421'/></linearGradient><clipPath id='clip0_441_825'><rect width='24' height='24' fill='white'/></clipPath></defs></svg>");
    background-repeat: no-repeat, no-repeat;
    background-size: 180px 180px, 180px 180px;
    background-position: left -50px top -50px, right -50px bottom -50px;
    padding: 20px;
    border-radius: 10px;
}

.cta-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 15px;
    padding: 1px;
    background: linear-gradient(145deg, rgba(59, 130, 246, 0.3), rgba(59, 130, 246, 0));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Text Styles */
.cta-title {
    font-size: 2.2rem;
    font-weight: 300;
    margin-bottom: 1rem;
    color: white;
}

.cta-text {
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0;
    font-weight: 300;
}

/* Form Styles */

.btn-primary {
    background-color: #3b82f6;
    border-color: #3b82f6;
    padding: 12px 20px;
    font-weight: 300;
    border-radius: 0 6px 6px 0;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #2563eb;
    border-color: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Animation Classes */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .cta-card {
        padding: 30px;
    }
    
    .cta-title {
        font-size: 1.8rem;
    }
    
    .cta-text {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .cta-card {
        padding: 25px;
    }
    
    .cta-title {
        font-size: 1.6rem;
    }
    
    .input-group {
        flex-direction: column;
    }
    
    .form-control {
        border-radius: 6px;
        margin-bottom: 10px;
        width: 100% !important;
    }

    .input-group button{
        margin: 0;
    }
    
    .btn-primary {
        border-radius: 6px;
       
    }
}

/* // -----------  Contact us - section  ------------------ */
/* Main Styles */

/* Contact Info Styles */
.contact-title {
    font-size: 2.5rem;
    font-weight: 300;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.contact-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2.5rem;
}

/* Info Items */
.info-items {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 2.5rem;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.info-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(59, 130, 246, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    font-size: 1.2rem;
}

.info-content h3 {
    font-size: 1rem;
    font-weight: 300;
    margin-bottom: 5px;
    color: rgba(255, 255, 255, 0.9);
}

.info-content p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* Social Section */
.social-section h3 {
    font-size: 1rem;
    font-weight: 300;
    margin-bottom: 15px;
    color: rgba(255, 255, 255, 0.9);
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white !important;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.social-icon:hover {
    transform: translateY(-5px);
}

.social-icon.facebook {
    background-color: #1877F2;
}

.social-icon.instagram {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.social-icon.twitter {
    background-color: #1DA1F2;
}

.social-icon.linkedin {
    background-color: #0A66C2;
}

.social-icon.discord {
    background-color: #5865F2;
}

/* Contact Form Card */
.contact-form-card {
    border-radius: 3.75rem 0rem 0rem 3.75rem;
    border: 1px solid var(--Primary-Color, #007BFF);
    opacity: 0.3; 
    box-shadow: 0px 0px 6px 0px rgba(0, 123, 255, 0.07), 0px 0px 10px 0px var(--Primary-Color, #007BFF) inset;
    backdrop-filter: blur(14px);
    background: rgba(0, 123, 255, 0.07);
    padding: 60px;
    margin-right: -120px;
}



/* Form Header */
.form-header {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.form-header h2 {
    font-size: 1.5rem;
    font-weight: 300;
    margin: 0;
}

.text-primary {
    color: #3b82f6 !important;
}

/* Form Controls */
.form-control {
    background-color: transparent;
       border: none;
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
    color: white;
    padding: 12px 15px;
    height: auto;
    border-radius: 8px;
    outline: none;
    font-size: 0.8rem;
    font-weight: 300;
}

.form-control:focus {
    background-color: rgba(15, 23, 42, 0.8);
    border-color: rgba(59, 130, 246, 0.5);
    color: white;
    box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25);
}

.form-control::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.input-group-text {
    background-color: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(59, 130, 246, 0.2);
    color: rgba(255, 255, 255, 0.7);
}

.input-group{
    width: 60% !important;
    margin-top: 40px;
}



textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

/* Send Button */
.btn-primary {
    background-color: transparent;
    border-color: #3b82f6;
    padding: 10px 20px;
    font-weight: 300;
    font-size: 0.8rem;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #2563eb;
    border-color: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.send-btn {
    display: inline-flex;
    align-items: center;
}

/* Animation Classes */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .contact-title {
        font-size: 2rem;
    }
    
    .contact-form-card {
        padding: 60px;
        margin-right: -180px;
    }
}

@media (max-width: 576px) {
    .contact-title {
        font-size: 1.8rem;
    }
    
    .contact-subtitle {
        font-size: 1rem;
    }
    
    .info-icon {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }
    
    .social-icon {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }
    
    .form-header h2 {
        font-size: 1.3rem;
    }

    .input-group{
        width: 100% !important;
        margin-top: 40px;
    }
}

/* // -----------  Footer - section  ------------------ */


/* Footer Styles */
.footer {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 1));
    padding: 50px 0 30px;
    margin-top: auto;
    border-top: 1px solid rgba(59, 130, 246, 0.2);
    max-width: 100%;

}

.footer-title {
    font-size: 1.2rem;
    font-weight: 300;
    color: white;
}

.footer-description {
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}

/* Contact Info */
.contact-info {
    color: rgba(255, 255, 255, 0.7);
}

.contact-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
    font-size: 0.9rem;
}

.contact-item i {
    margin-right: 10px;
    color: #3b82f6;
    font-size: 1rem;
    margin-top: 3px;
}

/* Social Media */
.social-media p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    transition: all 0.3s ease;
}

.social-icon:hover {
    background-color: #3b82f6;
    color: white;
    transform: translateY(-3px);
}

/* Footer Divider */
.footer-divider {
    border-color: rgba(59, 130, 246, 0.2);
    margin: 20px 0;
}

/* Footer Bottom */
.footer-bottom {
    padding-top: 10px;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-link {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: #3b82f6;
}

.copyright {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Animation Classes */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .footer {
        padding: 40px 0 20px;
    }
}

@media (max-width: 768px) {
    .footer-links {
        margin-bottom: 15px;
    }
    
    .copyright {
        text-align: center !important;
    }
}

@media (max-width: 576px) {
    .footer-links {
        gap: 15px;
        justify-content: center;
    }
    
    .footer-link {
        font-size: 0.85rem;
    }
    
    .copyright {
        font-size: 0.85rem;
    }
}

/* White glowing shadow for both cards */
.custom-shadow {
    box-shadow: 0 0 32px 0 rgba(255,255,255,0.18), 0 2px 8px 0 rgba(0,0,0,0.10);
}

/* Coin SVG background for right card */
.coin-bg {
    position: relative;
    overflow: hidden;
    background: #121031;
}
.coin-bg::after {
    content: '';
    position: absolute;
    right: -40px;
    bottom: -40px;
    width: 220px;
    height: 220px;
    background:  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 24 24' fill='none' opacity='0.25'><g clip-path='url(%23clip0_441_825)'><path d='M20.4851 20.4853C25.1714 15.799 25.1714 8.20101 20.4851 3.51472C15.7988 -1.17157 8.20087 -1.17157 3.51458 3.51472C-1.17171 8.20101 -1.17171 15.799 3.51458 20.4853C8.20087 25.1716 15.7988 25.1716 20.4851 20.4853Z' fill='url(%23paint0_linear_441_825)'/><path d='M19.7958 19.7959C24.1013 15.4903 24.1013 8.50966 19.7958 4.2041C15.4902 -0.101454 8.50953 -0.101454 4.20398 4.2041C-0.101576 8.50966 -0.101576 15.4903 4.20398 19.7959C8.50953 24.1015 15.4902 24.1015 19.7958 19.7959Z' fill='url(%23paint1_linear_441_825)'/><path opacity='0.3' d='M19.4258 19.6598C23.571 15.5146 23.571 8.79396 19.4258 4.64878C15.2807 0.503601 8.56 0.503603 4.41482 4.64878C0.269634 8.79396 0.269634 15.5146 4.41482 19.6598C8.56 23.805 15.2807 23.805 19.4258 19.6598Z' fill='%23FFE482'/><path d='M19.5054 19.5055C23.6506 15.3603 23.6506 8.63967 19.5054 4.49449C15.3603 0.349306 8.63959 0.349306 4.49441 4.49449C0.349225 8.63967 0.349225 15.3603 4.49441 19.5055C8.63959 23.6507 15.3603 23.6507 19.5054 19.5055Z' fill='url(%23paint2_linear_441_825)'/><path opacity='0.4' d='M12.2464 1.6549C18.1035 1.89863 22.6539 6.84476 22.4096 12.7018C22.32 14.8506 21.5931 16.8202 20.4256 18.4448C21.7072 16.7722 22.511 14.7072 22.6054 12.4416C22.8496 6.5845 18.2992 1.6389 12.4422 1.39463C8.73389 1.23996 5.39523 3.01063 3.37976 5.8149C5.41176 3.16316 8.65496 1.50503 12.2464 1.6549Z' fill='url(%23paint3_linear_441_825)'/><path opacity='0.3' d='M17.9228 18.6728C21.3538 15.2418 21.3538 9.67908 17.9228 6.24809C14.4918 2.8171 8.92911 2.8171 5.49812 6.24809C2.06713 9.67908 2.06713 15.2418 5.49812 18.6728C8.92911 22.1038 14.4918 22.1038 17.9228 18.6728Z' fill='%232E0C00'/><path d='M18.2123 18.2124C21.6433 14.7814 21.6433 9.21863 18.2123 5.78764C14.7813 2.35665 9.21854 2.35665 5.78755 5.78764C2.35656 9.21863 2.35656 14.7814 5.78755 18.2124C9.21854 21.6433 14.7813 21.6433 18.2123 18.2124Z' fill='url(%23paint4_linear_441_825)'/><path d='M20.0965 12.3375C19.9104 16.809 16.1344 20.2831 11.6624 20.097C7.1909 19.9109 3.71676 16.1349 3.9029 11.6628C4.08903 7.19138 7.86503 3.71725 12.337 3.90338C16.8085 4.08952 20.2826 7.86605 20.0965 12.3375Z' fill='url(%23paint5_linear_441_825)'/></g><defs><linearGradient id='paint0_linear_441_825' x1='6.09899' y1='24.2773' x2='16.4803' y2='2.67726' gradientUnits='userSpaceOnUse'><stop stop-color='%23FFB859'/><stop offset='0.23' stop-color='%23CC5827'/><stop offset='0.67' stop-color='%23FFDA6B'/><stop offset='1' stop-color='%23FF9421'/></linearGradient><linearGradient id='paint1_linear_441_825' x1='4.18327' y1='21.4917' x2='19.9774' y2='2.31299' gradientUnits='userSpaceOnUse'><stop stop-color='%23FFB859'/><stop offset='0.23' stop-color='%23CC5827'/><stop offset='0.67' stop-color='%23FFDA6B'/><stop offset='1' stop-color='%23FF9421'/></linearGradient><linearGradient id='paint2_linear_441_825' x1='7.41745' y1='21.577' x2='17.2014' y2='1.12846' gradientUnits='userSpaceOnUse'><stop offset='0.26' stop-color='%23B0381C'/><stop offset='1' stop-color='%23FF9421'/></linearGradient><linearGradient id='paint3_linear_441_825' x1='3.37923' y1='9.91516' x2='22.6144' y2='9.91516' gradientUnits='userSpaceOnUse'><stop offset='0.26' stop-color='%23B0381C'/><stop offset='1' stop-color='%23FF9421'/></linearGradient><linearGradient id='paint4_linear_441_825' x1='10.4702' y1='17.6469' x2='14.2654' y2='3.63726' gradientUnits='userSpaceOnUse'><stop stop-color='%23FFB859'/><stop offset='0.23' stop-color='%23CC5827'/><stop offset='0.67' stop-color='%23FFDA6B'/><stop offset='1' stop-color='%23FF9421'/></linearGradient><linearGradient id='paint5_linear_441_825' x1='8.5013' y1='19.3119' x2='15.9712' y2='3.70018' gradientUnits='userSpaceOnUse'><stop stop-color='%23FFB859'/><stop offset='0.23' stop-color='%23CC5827'/><stop offset='0.67' stop-color='%23FFDA6B'/><stop offset='1' stop-color='%23FF9421'/></linearGradient><clipPath id='clip0_441_825'><rect width='24' height='24' fill='white'/></clipPath></defs></svg>") no-repeat center/contain;
    opacity: 0.5;
    fill: linear-gradient(180deg, rgba(185, 0, 255, 0.10) 0%, #121031 100%);
    pointer-events: none;
    z-index: 1;
}

/* Feature list for right card */
.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 2;
}
.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 28px;
}
.feature-list li:last-child {
    margin-bottom: 0;
}
.circle-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #3b82f6;
    background: #101c2c;
    margin-top: 6px;
    flex-shrink: 0;
}
.feature-list strong {
    color: #fff;
    font-size: 1.08rem;
    font-weight: 500;
}
.feature-list div {
    color: #b3c2e0;
    font-size: 0.98rem;
    font-weight: 300;
}