@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

body {
    margin: 0;
    padding: 0;
    background-color: #FFF;
    width: 100%;
    max-width: 100%;
    height: auto;
    position: relative;
    overflow-x: hidden;
}

.main-container {
    width: 100%;
    max-width: 2030px;
    margin: 0 auto;
    position: relative;
    overflow-x: visible; /* Change to visible to allow full-width sections */
}

.background-image {
    position: fixed;
    max-width: 100%;
    top: 50%;          /* Center it vertically */
    left: 50%;         /* Center it horizontally */
    width: 100%;       /* Make it responsive */
    height: auto;      /* Maintain aspect ratio */
    transform: translate(-50%, -50%); /* Center it */
    z-index: -1;        /* Send it behind other content */
}

body::before,
body::after {
    content: '';
    position: fixed;
    width: 40vw;
    height: 40vw;
    max-width: 604.8px;
    max-height: 604.8px;
    border-radius: 50%;
    background: linear-gradient(100deg, rgba(251, 208, 124, 0.30) 0%, rgba(250, 147, 114, 0.30) 100%);
    filter: blur(180px);
    z-index: -1;
}

body::before {
    left: -20vw; /* Show part of the circle on the left */
    top: 50%;
    transform: translateY(-50%);
}

body::after {
    right: -20vw; /* Show part of the circle on the right */
    top: 50%;
    transform: translateY(-50%);
}

.navbar {
    position: fixed;
    top: 20px; /* Position the navbar 20px from the top */
    left: 50%; /* Align it to the center horizontally */
    transform: translateX(-50%); /* Center it perfectly using transform */
    width: 90%;
    max-width: 2000px; /* Max width so the navbar doesn't get too wide */
    height: 80px;
    border-radius: 20px;
    background: rgba(251, 208, 124, 0.20);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: space-between; /* Space between logo and nav links */
    padding: 10px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    opacity: 80%;
    z-index: 3;
}


.chronicles-logo-nav {
    width: 260px;
    height: auto; /* Change to auto to maintain aspect ratio */
}

.nav__menu {
    display: flex;
    gap: 20px; /* Add some space between the links */
}

.nav-section {
    color: rgba(0, 0, 0, 0.70);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 25px;
    font-weight: 700;
    text-decoration: none;
    margin-right: 28px;
    transition: color 0.3s ease, font-size 0.3s ease; 
}

.active-nav {
    color: #FFF; /* Active text color */
    font-size: 20px; /* Active font size */
    background: rgba(0, 0, 0, 0.70);
    border-radius: 10px;
    padding: 5px 10px;
}

.home-content {
    display: flex; /* Enable flexbox for the home content */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    flex-direction: column; /* Stack children vertically */
    padding: 20px; /* Optional padding */
}

.call-to-action {
    display: flex;           /* Enable flexbox */
    flex-direction: column;  /* Stack children vertically */
    justify-content: center; /* Center vertically */
    align-items: center;     /* Center horizontally */
    text-align: center;      /* Center text for both title and description */
    padding: 20px;          /* Optional: Add some padding */
    margin-bottom: 162px;
    margin-top: 200px;
}

.cta-title {
    width: 838px;
    color: rgba(0, 0, 0, 0.70);
    text-align: center;
    font-family: 'Roboto Mono', monospace;
    font-size: 60px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.cta-desc {
    max-width: 688px; /* Change width to max-width */
    width: 100%; /* Add this to make it responsive */
    color: rgba(0, 0, 0, 0.70);
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 35px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.cta-title, .cta-desc {
    max-width: 838px; /* Change width to max-width */
    width: 100%; /* Add this to make it responsive */
}

.cta-button {
    width: 312px;
    height: 75px;
    margin-top: 59px;
    flex-shrink: 0;
    border-radius: 40px;
    border: 6px solid rgba(255, 255, 255, 0.50);
    background: linear-gradient(100deg, #FBD07C 0%, #F98661 100%);
    box-shadow: 0px 439px 123px 0px rgba(0, 0, 0, 0.00), 
                0px 281px 112px 0px rgba(0, 0, 0, 0.01), 
                0px 158px 95px 0px rgba(0, 0, 0, 0.05), 
                0px 70px 70px 0px rgba(0, 0, 0, 0.09), 
                0px 18px 39px 0px rgba(0, 0, 0, 0.10);
    color: rgba(0, 0, 0, 0.70);
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    backdrop-filter: blur(10px);
    cursor: pointer;   
    transition: background-color 0.3s;
}

.cta-button:hover {
    background-color: #e0e0e0; /* Change background on hover */
}

.home-image {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    overflow: hidden; /* Add this to prevent image overflow */
}

.home-image img {
    width: 100%;
    height: auto;
    display: block; /* Add this to remove any extra space below the image */
}

.partner-image {
    display: flex;
    justify-content: center;
    gap: 10%; /* Use percentage for gap */
    margin-top: 166px;
    margin-bottom: 80px;
}

.partner-image img {
    max-width: 100%; /* Limit the size of each partner image */
    height: auto;
}

.about-section {
    width: 100vw; 
    max-width: none; 
    height: 735px;
    flex-shrink: 0;
    background: linear-gradient(104deg, rgba(251, 208, 124, 0.30) 0.51%, rgba(250, 147, 114, 0.30) 99.49%);
    box-sizing: border-box;
    margin-left: calc(-50vw + 50%); 
}

.about-chronicles {
    color: #FFF;
    text-align: center;
    font-family: 'Roboto Mono', monospace;
    font-size: 60px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.chronicles-about-section {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 60px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    background: linear-gradient(90deg, #FFC450 0%, #E59D10 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.about-section {
    width: 100vw;
    max-width: none;
    height: 735px;
    background: linear-gradient(104deg, rgba(251, 208, 124, 0.30) 0.51%, rgba(250, 147, 114, 0.30) 99.49%);
    box-sizing: border-box;
    margin-left: calc(-50vw + 50%);
    position: relative;
    display: flex;
    align-items: center;
}

.about-chronicles {
    color: #FFF;
    font-family: 'Roboto Mono', monospace;
    font-size: 60px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    position: absolute;
    left: 15%; /* Position at 1/4 of the section width */
    transform: translateX(-50%); /* Center the text block */
    text-align: left;
    margin: 0;
}

.chronicles-about-section {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 60px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    background: linear-gradient(90deg, #FFC450 0%, #E59D10 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
}

.about-container {
    width: 992px;
    height: 600px;
    flex-shrink: 0;
    border-radius: 20px;
    border: 10px solid var(--Gradient-Primary, #FBD07C);
    background: #FFF;
}

.text-about-bold {
    font-weight: bold;
}

.about-text-container {
    width: 688px;
    color: rgba(0, 0, 0, 0.70);
    font-family: Inter;
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.about-button {
    width: 219px;
    height: 63px;
    flex-shrink: 0;
    border-radius: 20px;
    background: var(--Gradient-Primary, linear-gradient(100deg, #FBD07C 0%, #FA9372 100%));
    color: #FFF;
    font-family: 'Roboto Mono', monospace;
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}