/* Smooth transition for quick-contact gradient and text */
.quick-contact .group {
  transition: background 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.quick-contact .group>div:first-child {
  transition: background 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.quick-contact .group p.text-lg {
  transition: color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Resume item gradient hover effect with smooth number color transition */
/* Smooth gradient transition for resume-item using a fading pseudo-element */
.resume-item {
  position: relative;
  background: #140C1C;
  overflow: hidden;
  transition: box-shadow 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.resume-item .duration {
  transition: color 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.resume-item::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(105deg, #a64ff7 0%, #41178a 100%);
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.resume-item>* {
  position: relative;
  z-index: 2;
}

.resume-item:hover::after {
  opacity: 1;
}

.resume-item:hover {
  box-shadow: 0 4px 32px 0 rgba(138, 84, 248, 0.10);
}

.resume-item .duration {
  position: relative;
  z-index: 3;
}

.resume-item:hover .duration {
  color: #fff !important;
}

.service .sno {
  transition: color 0.3s;
}

.service.gradient-active .sno {
  color: #fff !important;
}

/* Floating animated gradient bar for services */
.service-gradient-bar {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to right, #a855f7, #41178a 90%);
  box-shadow: 0 4px 32px 0 rgba(138, 84, 248, 0.10);
  transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
}

.service {
  position: relative;
  z-index: 2;
  background: transparent;
}

/* Service gradient effect for smooth transition */
.service {
  transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s;
}

.service.active-gradient {
  background: linear-gradient(to right, #a855f7, #7c3aed 90%);
  box-shadow: 0 4px 32px 0 rgba(138, 84, 248, 0.10);
}

/* Smooth transition for .sno number color on service hover */
.service {
  transition: background 0.3s, box-shadow 0.3s;
}

.service .sno {
  transition: color 0.3s;
}

.service:hover .sno {
  color: #fff;
}

/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  /* Offset for fixed header */
}

body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input,
button,
textarea,
select {
  font: inherit;
}

/* 8. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}


/* button css */
:root {
  --tj-theme-primary: #8750f7;
  --tj-theme-secondary: #2a1454;
  --tj-heading-secondary: #ffffff;
  --tj-fz-btn: 15px;
  --tj-fw-bold: 600;
}

/* Main Button */
.tj-btn-primary {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: var(--tj-fz-btn);
  font-weight: var(--tj-fw-bold);
  color: var(--tj-heading-secondary);
  background-size: 200%;
  background-image: linear-gradient(to right,
      var(--tj-theme-primary) 0%,
      var(--tj-theme-secondary) 51%,
      var(--tj-theme-primary) 100%);
  border: none;
  border-radius: 50px;
  padding: 10px 22px;
  transition: 0.4s ease;
}

/* Hover effect */
.tj-btn-primary:hover {
  background-position: right center;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(138, 84, 248, 0.4);
  cursor: pointer;
}

.tj-icn-primary {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: var(--tj-fz-btn);
  font-weight: var(--tj-fw-bold);
  color: var(--tj-heading-secondary);
  background-size: 200%;
  background-image: linear-gradient(to right,
      var(--tj-theme-primary) 0%,
      var(--tj-theme-secondary) 51%,
      var(--tj-theme-primary) 100%);
  border: none;
  border-radius: 50px;
  padding: 12px 12px;
  transition: 0.4s ease;
}

.tj-icn-primary:hover {
  background-position: right center;
  /* transform: translateY(-2px); */
  box-shadow: 0 10px 25px rgba(138, 84, 248, 0.4);
  cursor: pointer;
}



/*
  10. Create a root stacking context
*/
#root,
#__next {
  isolation: isolate;
}

/* Custom styles */
.number,
.stats h2,
.left h1 {
  font-size: clamp(1rem, -0.4643rem + 7.3214vw, 4.8rem);
  font-weight: bold;
  line-height: 1;
}

.role {
  font-size: 1.755rem;
  font-weight: bolder;
}

.section-content h2,
.left h2 {
  font-size: clamp(1rem, -0.4643rem + 7.3214vw, 2.125rem);
  font-weight: bolder;
  line-height: 2;
}

/* Recent Blogs card image styling */
.recent-blog-image {
  width: 100%;
  height: 12rem;
  object-fit: cover;
  display: block
}

.recent-blog-badge {
  position: absolute;
  z-index: 2
}

.recent-blog-wrapper {
  position: relative
}

/* Blog hero (image covers, content overlaid at bottom-center) */
.blog-hero {
  position: relative;
  overflow: hidden
}

.blog-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.blog-overlay {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 1rem;
  z-index: 5;
  width: calc(100% - 2rem);
  max-width: 90%;
  padding: 0.75rem;
  border-radius: 12px;
  color: #ffffff;
  background-color: #2A1454;
  text-align: left
}

.blog-overlay h3 {
  margin: 0
}

.blog-overlay .text-xs {
  opacity: 0.9
}

/* Fallback for missing images: show gradient background similar to previous design */
.recent-blog-placeholder {
  background: linear-gradient(135deg, #d1c4ff, #bde4ff);
  height: 12rem
}

.section-content h2 {
  font-size: clamp(1rem, -0.4643rem + 7.3214vw, 2.925rem);
}

.cv-section h1 {
  font-size: clamp(1rem, -0.4643rem + 7.3214vw, 2.325rem);
  line-height: 2;
}

.duration,
.title,
.sno,
.logo {
  font-size: clamp(1rem, -0.4643rem + 7.3214vw, 1.55rem);
  font-weight: bold;
}

.button {
  background: linear-gradient(to right, #5B21B6, #A855F7);
  /* from-violet-800 to-purple-500 */
  padding: 0.5rem 1.25rem;
  /* py-2 px-5 */
  border-radius: 1.5rem;
  /* rounded-3xl */
  font-weight: 500;
  /* font-medium */
  transition: all 0.3s ease;
  /* transition */
}

.button:hover {
  background: #7b3ef2;
  /* hover:bg-[#7b3ef2] */
}


/* ---------- New hero styles (modern & efficient) ---------- */
/* Keep styles.css minimal — use Tailwind for layout & styling. */
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* 
.main-container{
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
} */

/* cards animation */

.skills-section .skill-num,
.skills-section .icon {
  filter: grayscale();
}

.skills-section .full-card .card-inner .icon,
.skills-section .full-card .card-inner .skill-num {
  transition: all 0.4s ease-out;
}

.skills-section .full-card .card:hover .icon,
.skills-section .full-card .card:hover .skill-num {
  filter: none;
  transform: scale(1.3);
}

.skills-section .full-card:hover .card-inner .skill-num {
  transform: none;
}

.skills-section .card {
  border: #5B21B6 0px solid;
}

.skills-section .card:hover {
  border: #5B21B6 1px solid;
}