.custom-header, #site-header {
	height: 88px;
	background-color: #1f4671cc !important;
}

.dao-site-logo-inner {
	height: 88px !important;
}

.oceanwp-social-menu .social-menu-inner {
  height: 88px;
}

#ghost-canvas-wp {
  display: block;
  filter: blur(0.5px);
	height: 100%;
    left: 0;
    opacity: .1;
    position: absolute;
    top: 0;
    width: 100%;
}

body.page-id-1241 {
    background: linear-gradient(90deg, #143252, #2f5885) !important;
}

#primary {
	border: none !important;
	width: 100%;
}

.main-container {
display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 192px); /* Adjust based on your header height */
    width: 100%;
    text-align: center;
    padding: 40px 0;
}

.dao-landing-heading h1 {
    color: #fff;
    font-size: calc(2rem + 2vw); /* Responsive font size */
    margin-bottom: 50px; /* Space between text and images */
    font-weight: 400;
}

.dao-circle {
	animation: glow 8s infinite;
    -webkit-animation: glow 8s infinite;
    background-color: #1d4065;
    border-radius: 100%;
    box-shadow: 0 0 .5vh #fff;
    cursor: default;
    display: grid;
    grid-area: visual;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    height: 30vw;
    margin: 0 auto;
    max-height: 300px;
    max-width: 300px;
    position: relative;
    width: 30vw;
    z-index: 3;
	display: flex;
  	justify-content: center;
  	align-items: center;
}

@keyframes glow {

0% {
    box-shadow: 0 0 .5vh #fff;
}

50% {
    box-shadow: 0 0 3.5vh #fff;
}
100% {
    box-shadow: 0 0 .5vh #fff;
}
}


#dao-landing-1, #dao-landing-2, #dao-landing-3 {
  width: 80%;
  height: 80%;
  filter: brightness(0) invert(1) !important;
  display: flex;
  position: absolute;
}

#dao-landing-3 {
  animation: counterspin 40s linear infinite;
}

#dao-landing-2 {
  animation: clockspin 40s linear infinite;
}

.main-container-buttons, .main-container-stats {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    z-index: 3;
}

.main-container-buttons {
    align-items: center;
    grid-area: btn;
    margin: auto;
    max-width: 500px;
    width: 50vw;
}

.main-container-stats {
    color: #a2b7ce;
    grid-area: text;
}

.main-container-buttons, .main-container-stats {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    z-index: 3;
}

#main #content-wrap {
  padding: 0;
}

.primary-button, .primary-button:hover {
    transition: background-color .4s ease-out, color .4s ease-out;
}

.primary-button:hover {
    background-color: #1d4065;
    color: #f2e370;
}

.primary-button {
    background-color: #f2e370;
    border: 1px solid #f2e370;
    border-radius: 5vh;
    color: #1d4065;
    cursor: pointer;
    font-size: 2rem;
  	font-weight: 500;
    height: 50px;
    max-width: 30vw;
    min-height: 35px;
    width: 250px;
}

.main-container-stats-unit-title {
    font-size: 2.5rem;
    padding-bottom: 10px;
  	font-weight: 400;
}

.main-container-stats-unit-value {
    color: #f2f1fe;
    font-size: 3.5rem;
    font-weight: 700;
}

.hero-container {
position: relative;
    width: 100%;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.floating-icon {
position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.floating-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    /* Use the variable here */
    animation: float-around 6s ease-in-out infinite, glow 8s infinite;
    animation-delay: var(--delay, 0s); 
}

.floating-icon a {
    display: block; 
    position: relative;
    width: 100%;
    height: 100%;
    text-decoration: none !important;
}

.floating-icon img {
	display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* REMOVE border-radius: 50%; */
    border-radius: 0; 
    
    /* This creates the initial soft silhouette glow */
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
    
    animation: float-around 6s ease-in-out infinite;
    animation-delay: var(--delay, 0s);
    margin: 0 auto;
    position: relative;
    transition: filter 0.3s ease, transform 0.3s ease;
}

/* 1. The Image Glow on Hover */
.floating-icon:hover img {
/* drop-shadow is the key. 
       Multiple drop-shadows can be stacked for a more intense "neon" hug 
    */
    filter: brightness(1.1) 
            drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)) 
            drop-shadow(0 0 15px rgba(255, 255, 255, 0.4));
            
    animation-play-state: paused;
}

/* 2. The Text Glow on Hover */
.floating-icon:hover .chain-text {
transform: translateX(-50%) scale(1.1);
    text-shadow: 0 0 10px rgba(62, 168, 56, 0.8), 0 0 20px rgba(62, 168, 56, 0.4);
    transition: all 0.3s ease;
    animation-play-state: paused;
}

/* 3. Ensure smooth transitions when mouse leaves */
.floating-icon img, .chain-text {
    transition: all 0.3s ease;
}

.chain-text {
position: absolute;
    top: 110%; /* Move it below the image */
    left: 50%; /* Center start point */
    text-align: center;
    white-space: nowrap;
    
    /* Use the new centered animation */
    animation: float-around-centered 6s ease-in-out infinite;
    animation-delay: var(--delay, 0s);
    text-decoration: none;
}

.chain-title {
	color: white;
	font-weight: 700;
	font-size: 1em;
}

.chain-apy, .chain-price {
	color: #3EA838;
	font-weight: 700;
	font-size: 1.2em;
	line-height: 1;
}

/* Base floating animation */
@keyframes float-around {
	  0%, 100% { transform: translateY(0) rotate(0deg); }
	  50% { transform: translateY(-15px) rotate(2deg); }
}

@keyframes float-around-centered {
    0%, 100% { 
        transform: translateX(-50%) translateY(0) rotate(0deg); 
    }
    50% { 
        transform: translateX(-50%) translateY(-15px) rotate(2deg); 
    }
}

/* Individual positions - distributed around the circle */
.pos-1 { 
    top: 5%; 
    left: 15%; 
    --delay: 0s; 
    width: 12vw;      /* Scales with screen */
    height: 12vw; 
    max-width: 150px; /* Won't get too huge on 4k monitors */
    max-height: 150px;
    rotate: -15deg;
}

.pos-2 { 
    top: 10%; 
    right: 18%; 
    --delay: -1.5s; 
    width: 8vw; 
    height: 8vw; 
    max-width: 80px; 
    max-height: 80px;
    rotate: 15deg;
}

.pos-3 { 
    bottom: 15%; 
    left: 20%; 
    --delay: -3s; 
    width: 7vw; 
    height: 7vw; 
    max-width: 70px; 
    max-height: 70px;
    rotate: -15deg;
}

.pos-4 { 
    bottom: 10%; 
    right: 15%; 
    --delay: -4.5s; 
    width: 8vw; 
    height: 8vw; 
    max-width: 80px; 
    max-height: 80px;
    rotate: 15deg;
}

/* --- 4. Responsive Text inside Icons --- */
.chain-text {
    /* ... keep existing absolute positioning ... */
    /* Scale the font size slightly so it doesn't stay huge on mobile */
    font-size: clamp(1rem, 1.2vw, 1.5rem); 
}

/* --- 5. Mobile Adjustment --- */
@media (max-width: 768px) {
    /* On mobile, icons can feel too small, so we bump the vw slightly */
    .pos-1 { width: 25vw; height: 25vw; left: 10%; }
    .pos-2 { width: 18vw; height: 18vw; right: 10%; }
    .pos-3 { width: 15vw; height: 15vw; left: 12%; }
    
    .hero-container {
        height: 70vw; /* Give more vertical room on mobile */
    }
}