/* Custom background for the whole webpage */
.custom-bg {
	background-color: #f0f9fd !important;
}
/* Custom button gradient and hover effect for ENGAGE NOW */
.logotext {
    background: linear-gradient(to right, #58c0ea, #42d578, #58c0ea);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.titletext {
    background: linear-gradient(to right, #58c0ea, #42d578);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

@media (min-width: 768px) {
    .logotext {
        font-size: 1.875rem; /* md:text-3xl */
    }
}

.engage-btn {
	background: linear-gradient(to right, #58c0ea, #42d578);
	transition: all 0.3s;
}
.engage-btn:hover {
	background: linear-gradient(to left, #42d578, #58c0ea);
	transform: scale(1.10);
}

.explore-btn {
    background: #5abff2;
    color: #fff;
    font-weight: 600;
    font-size: 1.125rem; /* text-lg */
    padding: 0.5rem 2rem; /* py-2 px-8 */
    border-radius: 1rem; /* rounded-2xl */
    display: flex;
    align-items: center;
    gap: 0.75rem; /* gap-3 */
    transition: all 0.3s;
}
.explore-btn:hover {
    transform: scale(1.05);
}

.start-journey-btn {
    background: #fff;
    border: 2px solid #cbe9f7;
    color: #5abff2;
    font-weight: 600;
    font-size: 1.125rem; /* text-lg */
    padding: 0.5rem 2rem; /* py-2 px-8 */
    border-radius: 1rem; /* rounded-2xl */
    display: flex;
    align-items: center;
    gap: 0.75rem; /* gap-3 */
    transition: all 0.3s;
}
.start-journey-btn:hover {
    background: #5abff2;
    border: none;
    color: #f9fcfe;
    transform: scale(1.05);
}
.start-journey-btn:hover .icon-blue {
        filter: brightness(0) invert(1);
}
.icon-og {
    filter: brightness(1) invert(0);
}
.icon-white {
    filter: brightness(0) invert(1);
}
.icon-blue {
        /* Custom icon color for target icon */
        filter: invert(54%) sepia(80%) saturate(420%) hue-rotate(163deg) brightness(1.05) contrast(1.05);
}
.icon-green {
        /* Custom icon color for target icon */
        filter: invert(66%) sepia(54%) saturate(468%) hue-rotate(86deg) brightness(1.01) contrast(1.01);
}

/* Learn More button styles */
.learn-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #000;
    font-size: 0.875rem; /* text-sm */
    padding: 0.5rem 1.25rem; /* py-2 px-5 */
    border-radius: 0.5rem; /* rounded-lg */
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    transition: background 0.3s, color 0.3s;
}
.learn-more-btn:hover {
    background: rgba(90, 191, 242, 0.15);
    color: #5abff2;
}
.learn-more-btn:hover .icon-og {
        filter: invert(54%) sepia(80%) saturate(420%) hue-rotate(163deg) brightness(1.05) contrast(1.05)
}


.icon-blue-gradient {
    background: linear-gradient(135deg, #328af0 0%, #0bb0d7 100%);
}

.icon-purple-gradient {
    background: linear-gradient(135deg, #b053eb 0%, #e449a3 100%);
}

.icon-green-gradient {
    background: linear-gradient(135deg, #20c362 0%, #11ba7d 100%);
}

.icon-orange-gradient {
    background: linear-gradient(135deg, #f76d1b 0%, #ef483f 100%);
}

.icon-twitter {
    background: linear-gradient(135deg, #5498f7 0%, #2e6ded 100%);
}

.icon-linkedin {
    background: linear-gradient(135deg, #245fe3 0%, #1f44b6 100%);
}

.icon-github {
    background: linear-gradient(135deg, #313b4b 0%, #161d2c 100%);
}

.back-to-top-btn:hover .icon-white {
        filter: invert(54%) sepia(80%) saturate(420%) hue-rotate(163deg) brightness(1.05) contrast(1.05);
}