:root {
  --color-octa: #3e268c;
  --color-jump: #d75698;
  --color-accent: #6c63ff;
  --color-dark: #1a1a2e;
  --color-light: #f8f9fa;
}

.ibm-jump {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  color: #d75698;
}


.gradient-text {
  background: linear-gradient(45deg, var(--color-octa), var(--color-jump));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

.gradient-bg {
background: linear-gradient(135deg, var(--color-octa), var(--color-jump));
}

.course-card:hover,
.article-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.nav-link::after {
content: '';
display: block;
width: 0;
height: 2px;
background: var(--color-jump);
transition: width 0.3s;
}

.nav-link:hover::after {
width: 100%;
}

.active-nav::after {
width: 100%;
}

.hero-section {
background: url('https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80') no-repeat center center;
background-size: cover;
position: relative;
}

.hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(30, 38, 142, 0.85);
}

/* Animation */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
animation: fadeIn 0.8s ease-out forwards;
}

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }

/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
}

::-webkit-scrollbar-track {
background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
background: var(--color-octa);
border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
background: var(--color-jump);
}

/* Navigation Specific Styles */
nav {
font-family: inherit;
transition: box-shadow 0.3s;
}

nav .gradient-bg {
background: linear-gradient(135deg, var(--color-octa), var(--color-jump));
}

/* Cart badge animation on hover */
button.relative .fa-shopping-cart + span {
transition: transform 0.17s cubic-bezier(.55,.19,.54,.55);
}

button.relative:hover .fa-shopping-cart + span {
transform: scale(1.07) rotate(-6deg);
}

/* Responsive: ensure nav overlays mobile menu correctly */
#mobile-menu {
transition: max-height 0.27s cubic-bezier(.4,0,.2,1);
overflow: hidden;
}

@media (min-width: 768px) {
#mobile-menu {
display: none !important;
}
}


/* Hero Section overrides */
.hero-section {
position: relative;
background: url('https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=1471&q=80') no-repeat center center;
background-size: cover;
}
.hero-section::before {
content: '';
position: absolute;
inset: 0;
background: rgba(30, 38, 142, 0.85);
z-index: 1;
}
.hero-section .relative.z-10 {
position: relative;
z-index: 2;
}

/* About section styles */
section.bg-white img {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
section.bg-white img:hover {
transform: scale(1.03);
box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}

/* Course card effect for Popular Courses Section */
.course-card {
transition: transform 0.3s cubic-bezier(.19,.8,.41,1.01), box-shadow 0.3s cubic-bezier(.19,.8,.41,1.01);
box-shadow: 0 6px 24px rgba(30,38,142,0.06);
border: 1px solid #f2eafd;
}
.course-card:hover {
transform: translateY(-7px) scale(1.015);
box-shadow: 0 16px 38px rgba(62, 38, 140, .10);
border-color: #ebdaf2;
}
.course-card img {
transition: transform 0.4s cubic-bezier(.23,.92,.43,1.18);
}
.course-card:hover img {
transform: scale(1.03) rotate(-1deg);
}
.course-card a {
transition: color 0.2s;
}
.course-card a:hover {
color: #3e268c;
}

/* From earlier */
.course-card {
transition: transform 0.3s cubic-bezier(.19,.8,.41,1.01), box-shadow 0.3s cubic-bezier(.19,.8,.41,1.01);
box-shadow: 0 6px 24px rgba(30,38,142,0.06);
border: 1px solid #f2eafd;
}
.course-card:hover {
transform: translateY(-7px) scale(1.015);
box-shadow: 0 16px 38px rgba(62, 38, 140, .10);
border-color: #ebdaf2;
}
.course-card img {
transition: transform 0.4s cubic-bezier(.23,.92,.43,1.18);
}
.course-card:hover img {
transform: scale(1.03) rotate(-1deg);
}
.course-card a {
transition: color 0.2s;
}
.course-card a:hover {
color: #3e268c;
}
/* Optionally, full stars gold */
.course-card .fa-star,
.course-card .fa-star-half-alt {
color: #fbbf24; /* Tailwind yellow-400 */
}

/* Top Categories Button Styles */
.flex.flex-wrap a {
transition: transform 0.25s, background 0.25s;
box-shadow: 0 2px 16px rgba(62,38,140,0.08);
font-size: 1.06em;
display: inline-flex;
align-items: center;
}
.flex.flex-wrap a:hover {
transform: scale(1.07) translateY(-3px);
box-shadow: 0 6px 24px rgba(62,38,140,0.11);
background: #2d1d6a;
color: #fff !important;
}
.flex.flex-wrap i {
font-size: 1.22em;
}
@media (max-width: 640px) {
.flex.flex-wrap a {
font-size: 1em;
padding: 0.8rem 1.4rem;
}
}

/* Article card hover effect */
.article-card {
transition: transform 0.3s, box-shadow 0.3s;
box-shadow: 0 6px 24px rgba(30,38,142,0.04);
border: 1px solid #f3f3f4;
}
.article-card:hover {
transform: translateY(-6px) scale(1.015);
box-shadow: 0 12px 28px rgba(62,38,140,0.10);
border-color: #ebdaf2;
}

.article-card img {
transition: transform 0.35s cubic-bezier(.19,.8,.41,1.01);
}
.article-card:hover img {
transform: scale(1.06);
}

.article-card span.bg-pink-50 {
background: #fde6ef;
color: #d75698;
}

.article-card a {
transition: color 0.22s;
}
.article-card a:hover {
color: var(--color-octa); /* or #3e268c */
}

/* Top Categories Stylish Buttons */
.flex.flex-wrap a {
  display: inline-flex;
  align-items: center;
  padding: 0.9rem 1.5rem;
  font-size: 1.08em;
  border-radius: 999px;
  font-weight: 500;
  background: #3e268c;
  color: #fff;
  box-shadow: 0 2px 30px rgba(62,38,140,0.10);
  transition: 
    background 0.22s, 
    color 0.17s, 
    transform 0.22s cubic-bezier(.36,.7,.59,.95),
    box-shadow 0.23s;
  text-decoration: none;
}
.flex.flex-wrap a:hover {
  background: #2d1d6a;
  color: #fff !important;
  transform: scale(1.07) translateY(-3px);
  box-shadow: 0 8px 28px rgba(62,38,140,0.15);
}
.flex.flex-wrap i {
  font-size: 1.18em;
}

@media (max-width: 640px) {
  .flex.flex-wrap a {
    font-size: 1em;
    padding: 0.8rem 1.2rem;
  }
}

/* Newsletter form styles & overrides */
.gradient-bg {
background: linear-gradient(135deg, var(--color-octa), var(--color-jump));
}
#newsletter-form input[type="email"] {
border: none;
background: #fff7fb;
color: #3e268c;
}

#newsletter-form input[type="email"]:focus {
background: #fff;
}

/* Responsive tweaks */
@media (max-width: 768px) {
.article-card img {
height: 36vw; /* Responsive images for cards */
min-height: 120px;
max-height: 220px;
}
}

/* Footer styles for dark mode */
footer.bg-gray-900 {
background: #181826;
color: #dfdfdf;
}
footer .text-[#3e268c] { color: #3e268c; }
footer .text-[#d75698] { color: #d75698; }

footer h3 {
letter-spacing: -0.5px;
}

footer a, footer span, footer p {
transition: color 0.2s, background 0.23s, transform 0.18s;
}

footer a {
color: #bfbfc9;
}
footer a:hover, footer .hover\:text-white:hover {
color: #fff !important;
text-decoration: none;
}

footer i {
min-width: 1.5em;
text-align: center;
vertical-align: bottom;
}

footer .border-t {
border-top: 1px solid #282834 !important;
}

@media (max-width: 767px) {
footer .grid {
display: block;
}
footer .grid > div {
margin-bottom: 2.5rem;
}
}

/* Back to Top Button Styles */
#backToTop {
position: fixed;
bottom: 2rem;
right: 2rem;
z-index: 50;
background: #3e268c;
color: #fff;
padding: 0.9rem;
border: none;
outline: none;
border-radius: 2rem;
box-shadow: 0 8px 32px rgba(30, 38, 142, 0.15);
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: opacity 0.33s, visibility 0.33s, background 0.22s, transform 0.21s;
font-size: 1.25rem;
pointer-events: auto;
}

#backToTop.visible,
#backToTop.opacity-100 {
opacity: 1 !important;
visibility: visible !important;
}

#backToTop.invisible,
#backToTop.opacity-0 {
opacity: 0 !important;
visibility: hidden !important;
}

#backToTop:hover {
background: #2d1d6a;
transform: translateY(-5px) scale(1.08);
}

@media (max-width: 600px) {
#backToTop {
bottom: 1.2rem;
right: 1.1rem;
padding: 0.8rem;
font-size: 1.04rem;
}
}

/* for text Styles */
  .ibm-text {
        font-family: 'IBM Plex Sans', sans-serif;
    }