/* ==================================================
   QUAERETECH — SERVICES PAGES SHARED STYLES
   Used by: summer-internship, in-campus-training,
   faculty-development-program, vocational-training,
   full-stack-training

   Builds on top of first.css variables/classes.
================================================== */

/* ==========================================
   SERVICE HERO TWEAKS
========================================== */

.service-hero-section {
  position: relative;
  min-height: 75vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 100px;
  padding-bottom: 40px;
}

.service-hero-section .hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(148, 163, 184, .1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, .1) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(circle, black 40%, transparent 100%);
}

.service-hero-image {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.service-hero-image img {
  width: 100%;
  height: 420px;
  object-fit: cover;
}

.service-hero-image .hero-image-badge {
  position: absolute;
  bottom: 25px;
  left: 25px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  padding: 14px 22px;
  border-radius: 16px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  color: var(--heading);
  box-shadow: var(--shadow);
}
.service-hero-image .hero-image-badge2 {
  position: absolute;
  top: 5px;
  left: 50%;
  width: 50%;
  height: 20%;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  padding: 14px 22px;
  border-radius: 16px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  color: var(--heading);
  box-shadow: var(--shadow);
}

.service-hero-image .hero-image-badge span {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 3px;
}
.service-hero-image .hero-image-badge2 span {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 3px;
}

/* breadcrumb */

.service-breadcrumb {
  font-size: .85rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 18px;
}

.service-breadcrumb a { color: var(--primary); }
.service-breadcrumb i { font-size: .7rem; margin: 0 6px; }

/* ==========================================
   QUICK FACTS STRIP
========================================== */

.quickfacts-section {
  padding: 40px 0;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
}

.quickfact-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 5px;
}

.quickfact-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  background: rgba(37, 99, 235, .1);
  color: var(--primary);
}

.quickfact-item h6 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text);
  margin-bottom: 4px;
}

.quickfact-item p {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  color: var(--heading);
  margin: 0;
  font-size: 1.02rem;
}

/* ==========================================
   PROGRAM HIGHLIGHTS GRID
========================================== */

.highlights-section { padding: 50px 0; background: var(--bg); }

.highlight-card-pro {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 32px 28px;
  height: 100%;
  transition: .4s;
  box-shadow: var(--shadow-sm);
}

.highlight-card-pro:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.highlight-card-pro .hc-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 20px;
  background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(6,182,212,.12));
  color: var(--primary);
}

.highlight-card-pro h5 { margin-bottom: 10px; font-size: 1.1rem; }
.highlight-card-pro p { margin: 0; line-height: 1.75; font-size: .95rem; }

/* ==========================================
   CURRICULUM / MODULES LIST
========================================== */

.curriculum-section { padding: 50px 0; background: var(--bg-secondary); }

.curriculum-list { display: flex; flex-direction: column; gap: 14px; }

.curriculum-row {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px 24px;
  transition: .3s;
}

.curriculum-row:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.curriculum-num {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: .95rem;
}

.curriculum-text h6 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--heading);
}

.curriculum-text p { margin: 0; font-size: .93rem; line-height: 1.7; }

/* ==========================================
   ELIGIBILITY / WHO SHOULD JOIN
========================================== */

.eligibility-section { padding: 50px 0; background: var(--bg); }

.eligibility-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 30px;
  height: 100%;
  text-align: center;
  transition: .4s;
}

.eligibility-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.eligibility-card i {
  font-size: 2rem;
  color: var(--primary);
  margin-bottom: 16px;
  display: block;
}

.eligibility-card h6 {
  font-family: 'Space Grotesk', sans-serif;
  margin-bottom: 8px;
}

.eligibility-card p { margin: 0; font-size: .9rem; }

/* ==========================================
   OUTCOMES STRIP
========================================== */
/* ===========================
   Premium Animated Heading
=========================== */

.outcome-heading{
    position: relative;
    display: inline-block;
    width: 100%;
    text-align:center;
    margin-bottom:55px;
    font-family: 'Poppins', sans-serif;
}

@media (max-width:1200px){
    .outcome-heading span{
        font-size:2.5rem;
    }
}

/* Tablet */
@media (max-width:992px){
    .outcome-heading span{
        font-size:2rem;
        white-space:normal;
    }
}

.outcome-heading span{
    display:inline-block;
    font-family:'Poppins',sans-serif;
    font-size:clamp(1.6rem, 2.8vw, 3rem);   /* Smaller size */
    font-weight:800;
    line-height:1.2;
    letter-spacing:1px;                     /* Reduced spacing */
    text-transform:uppercase;
    white-space:nowrap;                     /* Force one line on desktop */

    background:linear-gradient(
        90deg,
        #ffffff,
        #b8f4ff,
        #00e5ff,
        #ffffff
    );
    background-size:300% auto;

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    animation:gradientMove 6s linear infinite;
}
/* Shine Effect */
.outcome-heading span::before{
    content: "";
    position: absolute;
    top: -20%;
    left: -40%;
    width: 35%;
    height: 160%;
    background: rgba(255,255,255,.45);
    transform: skewX(-25deg);
    filter: blur(10px);
    animation: shine 4s infinite;
}

/* Animated Underline */
.outcome-heading::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: -18px;
    transform: translateX(-50%);
    width: 120px;
    height: 5px;
    border-radius: 50px;
    background: linear-gradient(90deg,#00c6ff,#00ffd5,#0072ff);
    background-size: 300%;
    animation: underlineMove 3s linear infinite;
    box-shadow: 0 0 18px rgba(0,198,255,.7);
}

/* Decorative Dots */
.outcome-heading::before{
    content: "✦";
    position: absolute;
    left: 50%;
    top: -35px;
    transform: translateX(-50%);
    color: #00e5ff;
    font-size: 22px;
    animation: pulseStar 2s infinite;
}

/* Gradient Animation */
@keyframes gradientMove{
    0%{
        background-position: 0%;
    }
    100%{
        background-position: 400%;
    }
}

/* Floating */
@keyframes floatText{
    0%,100%{
        transform: translateY(0px);
    }
    50%{
        transform: translateY(-6px);
    }
}

/* Shine Sweep */
@keyframes shine{
    0%{
        left:-45%;
        opacity:0;
    }
    20%{
        opacity:1;
    }
    60%{
        left:120%;
        opacity:0;
    }
    100%{
        left:120%;
        opacity:0;
    }
}

/* Underline Animation */
@keyframes underlineMove{
    from{
        background-position:0%;
    }
    to{
        background-position:300%;
    }
}

/* Star Pulse */
@keyframes pulseStar{
    0%,100%{
        transform:translateX(-50%) scale(1);
        opacity:.6;
    }
    50%{
        transform:translateX(-50%) scale(1.35);
        opacity:1;
    }
}

@media(max-width:768px){

    .outcome-heading span{
         font-size:1.6rem;
        line-height:1.35;
        letter-spacing:.5px;
        white-space:normal;
    }

    .outcome-heading::after{
        width:80px;
        height:4px;
    }

}

.outcomes-section {
  padding: 60px 0;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
}

.outcome-pill {
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 20px;
  padding: 28px 20px;
  text-align: center;
  height: 100%;
  transition: .3s;
}

.outcome-pill:hover { background: rgba(255,255,255,.18); transform: translateY(-5px); }

.outcome-pill i { font-size: 1.7rem; color: #fff; margin-bottom: 12px; display: block; }
.outcome-pill p { margin: 0; color: #fff; font-weight: 600; font-size: .92rem; }

/* ==========================================
   FAQ (reuses .faq-section pattern from about)
========================================== */

.faq-section { padding: 50px 0; background: var(--bg-secondary); }

.faq-item {
  border: 1px solid var(--border);
  border-radius: 16px !important;
  margin-bottom: 14px;
  overflow: hidden;
}

.faq-item .accordion-button {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  color: var(--heading);
  background: var(--card-bg);
  padding: 20px 24px;
}

.faq-item .accordion-button:not(.collapsed) {
  background: rgba(37,99,235,.06);
  color: var(--primary);
  box-shadow: none;
}

.faq-item .accordion-button:focus { box-shadow: none; border-color: var(--border); }

.faq-item .accordion-body {
  background: var(--card-bg);
  color: var(--text);
  line-height: 1.8;
  padding: 0 24px 22px;
}

/* ==========================================
   RELATED PROGRAMS
========================================== */

.related-section { padding: 50px 0; background: var(--bg); }

.related-card {
  display: block;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  transition: .4s;
  height: 100%;
}

.related-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.related-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.related-card-body { padding: 22px; }

.related-card-body span {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--primary);
}

.related-card-body h6 {
  font-family: 'Space Grotesk', sans-serif;
  margin: 8px 0 0;
  color: var(--heading);
}

/* ==========================================
   STICKY APPLY CTA (mobile)
========================================== */

.sticky-apply-cta {
  display: none;
}

@media (max-width: 768px) {
  .sticky-apply-cta {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 998;
    background: var(--card-bg);
    border-top: 1px solid var(--border);
    padding: 14px 20px;
    box-shadow: 0 -10px 30px rgba(0,0,0,.08);
  }
  body { padding-bottom: 72px; }
}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 991px) {
  .service-hero-image img { height: 320px; margin-top: 40px; }
  .quickfact-item { justify-content: flex-start; margin-bottom: 10px; }
}

@media (max-width: 576px) {
  .highlight-card-pro,
  .eligibility-card { padding: 24px 20px; }
  .curriculum-row { flex-direction: column; }
}

/* =========================================================
QUAERE TECHNOLOGIES
ENTERPRISE SERVICES CSS V4.0
For:
Summer Internship
In-Campus Training
Vocational Training
FDP
Full Stack Training

PART 6
========================================================= */

/* =========================================
GLOBAL SECTION SPACING
========================================= */

.domains-section,
.tracks-section,
.roadmap-section,
.project-showcase-section,
.placement-stats-section,
.certificate-section,
.recruiter-skills-section,
.testimonials-section,
.university-partners-section,
.comparison-section,
.registration-section,
.batches-section,
.cta-banner-section{
    padding:50px 0;
    position:relative;
    overflow:hidden;
}

/* =========================================
FLOATING SHAPES
========================================= */

.hero-floating-shape{
    position:absolute;
    border-radius:50%;
    filter:blur(100px);
    opacity:.25;
    pointer-events:none;
}

.shape-1{
    width:350px;
    height:350px;
    background:#2563eb;
    top:-120px;
    right:-100px;
    animation:floatShape 8s ease-in-out infinite;
}

.shape-2{
    width:280px;
    height:280px;
    background:#06b6d4;
    bottom:-100px;
    left:-100px;
    animation:floatShape 10s ease-in-out infinite;
}

@keyframes floatShape{
    0%,100%{
        transform:translateY(0px);
    }
    50%{
        transform:translateY(-30px);
    }
}

/* =========================================
HERO STATS
========================================= */

.hero-stats{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

.hero-stat{
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.6);
    padding:18px 24px;
    border-radius:20px;
    min-width:140px;
    box-shadow:var(--shadow);
}

.hero-stat h4{
    margin:0;
    font-size:1.7rem;
    font-family:'Space Grotesk',sans-serif;
    color:var(--primary);
}

.hero-stat span{
    font-size:.85rem;
    color:var(--text);
}

/* =========================================
DOMAINS
========================================= */

.domain-card{
    height:100%;
    padding:35px 25px;
    text-align:center;
    border-radius:24px;
    background:var(--card-bg);
    border:1px solid var(--border);
    transition:.45s;
    position:relative;
    overflow:hidden;
}

.domain-card::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(
    135deg,
    rgba(37,99,235,.08),
    rgba(6,182,212,.08));
    opacity:0;
    transition:.4s;
}

.domain-card:hover::before{
    opacity:1;
}

.domain-card:hover{
    transform:translateY(-10px);
    box-shadow:var(--shadow-lg);
}

.domain-card i{
    font-size:2.5rem;
    color:var(--primary);
    margin-bottom:18px;
    display:block;
}

.domain-card h5{
    margin:0;
}

/* =========================================
TRACKS
========================================= */

.track-card{
    background:var(--card-bg);
    border:1px solid var(--border);
    border-radius:30px;
    padding:35px;
    height:100%;
    transition:.45s;
    position:relative;
}

.track-card:hover{
    transform:translateY(-10px);
    box-shadow:var(--shadow-lg);
}

.featured-track{
    background:linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));
    color:#fff;
    transform:scale(1.03);
}

.featured-track h3,
.featured-track span,
.featured-track li{
    color:#fff;
}

.track-header{
    margin-bottom:25px;
}

.track-header h3{
    font-size:2rem;
    font-family:'Space Grotesk',sans-serif;
}

.track-card ul{
    list-style:none;
    padding:0;
    margin-bottom:25px;
}

.track-card li{
    padding:12px 0;
    border-bottom:1px solid rgba(0,0,0,.08);
}

/* =========================================
ROADMAP
========================================= */

.roadmap-wrapper{
    display:flex;
    justify-content:space-between;
    gap:20px;
    position:relative;
    flex-wrap:wrap;
}

.roadmap-line{
    position:absolute;
    top:42px;
    left:50px;
    right:50px;
    height:4px;
    background:linear-gradient(
    90deg,
    var(--primary),
    var(--secondary));
}

.roadmap-step{
    flex:1;
    min-width:180px;
    text-align:center;
    position:relative;
    z-index:2;
}

.roadmap-icon{
    width:85px;
    height:85px;
    border-radius:50%;
    background:#fff;
    border:4px solid var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    margin:auto auto 20px;
    font-size:1.8rem;
    color:var(--primary);
    box-shadow:var(--shadow);
}

/* =========================================
PROJECT SHOWCASE
========================================= */

.project-card-pro{
    border-radius:26px;
    overflow:hidden;
    background:var(--card-bg);
    border:1px solid var(--border);
    transition:.45s;
    height:100%;
}

.project-card-pro:hover{
    transform:translateY(-10px);
    box-shadow:var(--shadow-lg);
}

.project-card-pro img{
    width:100%;
    height:220px;
    object-fit:cover;
}

.project-content{
    padding:24px;
}

.project-content span{
    color:var(--primary);
    font-size:.8rem;
    font-weight:700;
    text-transform:uppercase;
}

.project-content h5{
    margin-top:10px;
}

/* =========================================
PLACEMENT STATS
========================================= */

.placement-stats-section{
    background:
    linear-gradient(
    135deg,
    #005495,
    #1b68e4);
}

.stat-card-pro{
    background:rgba(255,255,255,.2);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.1);
    border-radius:24px;
    padding:35px;
    text-align:center;
    color:#fff;
}
.stat-card-pro>h6{
    color: #fff!important;
}

.counter-number{
    font-size:3rem;
    font-weight:800;
    font-family:'Space Grotesk';
    margin-bottom:10px;
}

/* =========================================
CERTIFICATE
========================================= */

.certificate-preview{
    border-radius:24px;
    overflow:hidden;
    box-shadow:var(--shadow-lg);
}

.certificate-preview img{
    width:100%;
}

.certificate-features{
    margin-top:30px;
}

.cert-item{
    display:flex;
    gap:15px;
    align-items:center;
    margin-bottom:18px;
}

.cert-item i{
    color:var(--primary);
    font-size:1.2rem;
}

/* =========================================
SKILLS
========================================= */

.skill-card{
    text-align:center;
    padding:30px;
    border-radius:24px;
    background:var(--card-bg);
    border:1px solid var(--border);
    transition:.4s;
    height:100%;
}

.skill-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-lg);
}

.skill-icon{
    width:70px;
    height:70px;
    border-radius:20px;
    margin:auto auto 20px;
    background:rgba(37,99,235,.1);
    display:flex;
    align-items:center;
    justify-content:center;
}

.skill-icon i{
    font-size:1.7rem;
    color:var(--primary);
}

.matrix-box{
    padding:35px;
    border-radius:24px;
    border:1px solid var(--border);
    background:var(--card-bg);
}

/* =========================================
TESTIMONIALS
========================================= */

.testimonial-card-pro{
    background:var(--card-bg);
    border-radius:28px;
    padding:35px;
    border:1px solid var(--border);
    height:100%;
}

.rating-stars{
    color:#f59e0b;
    font-size:1.2rem;
    margin-bottom:15px;
}

.student-info{
    display:flex;
    align-items:center;
    gap:15px;
    margin-top:25px;
}

.student-info img{
    width:60px;
    height:60px;
    border-radius:50%;
    object-fit:cover;
}

/* =========================================
UNIVERSITY LOGOS
========================================= */

.logo-marquee{
    overflow:hidden;
    position:relative;
}

.logo-track{
    display:flex;
    gap:50px;
    animation:marqueeMove 25s linear infinite;
}

.partner-logo{
    min-width:180px;
    height:120px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    border-radius:20px;
    border:1px solid var(--border);
}

.partner-logo img{
    max-width:120px;
    width:80px;
    height:80px;
}

@keyframes marqueeMove{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-50%);
    }
}

/* =========================================
COMPARISON TABLE
========================================= */

.comparison-table{
    border-radius:20px;
    overflow:hidden;
}

.comparison-table th{
    background:var(--primary);
    color:#fff;
    padding:18px;
}

.comparison-table td{
    padding:18px;
    vertical-align:middle;
}

/* =========================================
FORM
========================================= */

.registration-form-card{
    padding:40px;
    background:#fff;
    border-radius:30px;
    box-shadow:var(--shadow-lg);
}

.registration-form-card .form-control,
.registration-form-card .form-select{
    height:55px;
    border-radius:14px;
}

.registration-form-card button{
    height:55px;
    border-radius:14px;
}

/* =========================================
BATCHES
========================================= */

.batch-card{
    background:#fff;
    border-radius:28px;
    padding:35px;
    border:1px solid var(--border);
    transition:.4s;
}

.batch-card:hover{
    transform:translateY(-10px);
    box-shadow:var(--shadow-lg);
}

.featured-batch{
    border:2px solid var(--primary);
}

.batch-badge{
    display:inline-block;
    padding:8px 14px;
    border-radius:50px;
    background:rgba(37,99,235,.1);
    color:var(--primary);
    font-size:.8rem;
    font-weight:700;
    margin-bottom:15px;
}

.seat-left{
    color:#ef4444;
    font-weight:700;
}

/* =========================================
CTA
========================================= */

.cta-banner{
    background:
    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));
    border-radius:36px;
    padding:50px;
    color:#fff;
}

.cta-banner h2{
    color:#fff;
    margin-bottom:15px;
}

/* =========================================
FOOTER
========================================= */

.footer-section{
    background:#0f172a;
    color:#cbd5e1;
    padding:50px 0 40px;
}

.footer-section h5{
    color:#fff;
    margin-bottom:25px;
}

.footer-links,
.footer-contact{
    list-style:none;
    padding:0;
}

.footer-links li,
.footer-contact li{
    margin-bottom:12px;
}

.footer-links a{
    color:#cbd5e1;
    text-decoration:none;
}

.footer-links a:hover{
    color:#fff;
}

.footer-social{
    display:flex;
    gap:12px;
    margin-top:25px;
}

.footer-social a{
    width:45px;
    height:45px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.08);
    color:#fff;
}

.footer-bottom{
    margin-top:30px;
}

/* =========================================
RESPONSIVE
========================================= */

@media(max-width:991px){

    .roadmap-line{
        display:none;
    }

    .roadmap-wrapper{
        flex-direction:column;
    }

    .cta-banner{
        padding:40px;
        text-align:center;
    }

    .hero-stats{
        justify-content:center;
    }
}

@media(max-width:768px){

    .hero-stat{
        width:100%;
    }

    .track-card{
        padding:25px;
    }

    .registration-form-card{
        padding:25px;
    }

    .counter-number{
        font-size:2.2rem;
    }

    .cta-banner{
        padding:30px;
    }
}

.mouse-glow{
position:fixed;
width:300px;
height:300px;
background:radial-gradient(
circle,
rgba(37,99,235,.15),
transparent 70%);
pointer-events:none;
z-index:0;
transform:translate(-50%,-50%);
filter:blur(40px);
}

.pulse{
animation:pulseAnimation 1s ease;
}

@keyframes pulseAnimation{

0%{
transform:scale(1);
}

50%{
transform:scale(1.08);
}

100%{
transform:scale(1);
}

}


.cta-banner{
    padding:70px;
    border-radius:32px;
    background:
    linear-gradient(
    135deg,
    #0f172a,
    #1e293b,
    #2563eb);
    color:#fff;
    overflow:hidden;
    position:relative;
}

.cta-tag{
    display:inline-block;
    margin-bottom:15px;
    font-size:.85rem;
    letter-spacing:2px;
    font-weight:700;
    opacity:.8;
}

.cta-banner h2{
    font-size:clamp(2rem,4vw,3.5rem);
    font-weight:800;
    line-height:1.1;
    margin-bottom:20px;
}

.cta-banner p{
    max-width:650px;
    opacity:.9;
    font-size:1.05rem;
    line-height:1.8;
}

.cta-highlights{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
    margin-top:25px;
}

.cta-highlights span{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:500;
}

.cta-actions{
    display:flex;
    flex-direction:column;
    gap:15px;
}
/* ==========================================
   IMPACT SECTION
========================================== */

.impact-section{
    position:relative;
    overflow:hidden;
    padding:120px 0;
    background:
    radial-gradient(circle at top left,#0f172a,#020617);
}

/* Floating Orbs */

.impact-bg-orb{
    position:absolute;
    border-radius:50%;
    filter:blur(100px);
    animation:floatOrb 12s infinite ease-in-out;
}

.orb-1{
    width:350px;
    height:350px;
    background:#3b82f6;
    top:-100px;
    left:-100px;
}

.orb-2{
    width:280px;
    height:280px;
    background:#8b5cf6;
    right:-80px;
    top:100px;
}

.orb-3{
    width:250px;
    height:250px;
    background:#06b6d4;
    bottom:-100px;
    left:40%;
}

@keyframes floatOrb{
    50%{
        transform:translateY(-40px);
    }
}

/* Heading */

.impact-tag{
    display:inline-block;
    padding:10px 18px;
    border-radius:100px;
    color:#fff;
    background:rgba(255,255,255,.1);
    backdrop-filter:blur(10px);
}

.impact-title{
    color:#fff;
    font-size:clamp(2.4rem,5vw,4rem);
    font-weight:800;
    margin-top:20px;
}

.impact-title span{
    background:linear-gradient(
    90deg,
    #60a5fa,
    #a855f7,
    #06b6d4);
    -webkit-background-clip:text;
    color:transparent;
}

.impact-subtitle{
    color:#94a3b8;
    max-width:700px;
    margin:auto;
}

/* Cards */

.impact-card{
    position:relative;
    text-align:center;
    padding:40px 25px;
    border-radius:30px;

    background:rgba(255,255,255,.05);
    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.08);

    transition:.5s;
    overflow:hidden;
}

.impact-card::before{
    content:'';
    position:absolute;
    inset:0;
    background:
    linear-gradient(
    135deg,
    rgba(59,130,246,.15),
    rgba(168,85,247,.15));

    opacity:0;
    transition:.5s;
}

.impact-card:hover{
    transform:translateY(-15px);
    border-color:#60a5fa;
}

.impact-card:hover::before{
    opacity:1;
}

.impact-icon{
    width:80px;
    height:80px;
    margin:auto;

    border-radius:20px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:32px;

    color:white;

    background:
    linear-gradient(
    135deg,
    #3b82f6,
    #8b5cf6);

    box-shadow:
    0 15px 35px rgba(59,130,246,.4);
}

/* Counter */

.counter-number{
    font-size:3rem;
    font-weight:800;
    margin-top:25px;

    background:
    linear-gradient(
    90deg,
    #60a5fa,
    #a855f7);

    -webkit-background-clip:text;
    color:transparent;
}



/* Text */

.impact-card h6{
    color:white;
    margin-top:15px;
    font-size:1rem;
    letter-spacing:.5px;
}


.modern-matrix{
    position:relative;
    padding:35px;
    border-radius:28px;

    background:rgba(255,255,255,.75);
    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.3);

    box-shadow:
    0 20px 50px rgba(0,0,0,.08);

    overflow:hidden;

    transition:.4s ease;
}

.modern-matrix:hover{
    transform:translateY(-10px);
}

.modern-matrix::before{
    content:'';

    position:absolute;

    width:250px;
    height:250px;

    background:
    radial-gradient(
    rgba(13,110,253,.15),
    transparent);

    top:-100px;
    right:-100px;
}

.matrix-header{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:25px;
}

.matrix-icon{
    width:60px;
    height:60px;

    border-radius:18px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:24px;
    color:white;

    background:
    linear-gradient(
    135deg,
    #0d6efd,
    #6f42c1);
}

.matrix-header h5{
    margin:0;
    font-weight:700;
}

.skill-tags{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.skill-tags span{

    padding:10px 18px;

    border-radius:100px;

    background:white;

    border:1px solid #e9ecef;

    font-size:.92rem;

    font-weight:600;

    transition:.3s;
}

.skill-tags span:hover{

    background:
    linear-gradient(
    135deg,
    #0d6efd,
    #6f42c1);

    color:white;

    transform:translateY(-3px);
}


.enrollment-section{
    padding:120px 0;
    background:
    linear-gradient(135deg,#f8fbff,#eef5ff);
    position:relative;
    overflow:hidden;
}

.enrollment-section::before{
    content:"";
    position:absolute;
    width:600px;
    height:600px;
    border-radius:50%;
    background:rgba(13,110,253,.08);
    top:-250px;
    right:-200px;
}

.enrollment-content{
    position:relative;
    z-index:2;
}

.enrollment-content .section-title{
    font-size:3rem;
    font-weight:800;
    line-height:1.2;
    margin:20px 0;
}

.enrollment-content .section-title span{
    color:#0d6efd;
}

.enrollment-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
    margin:40px 0;
}

.stat-box{
    background:#fff;
    border-radius:20px;
    padding:20px;
    text-align:center;
    box-shadow:0 15px 40px rgba(0,0,0,.06);
}

.stat-box h3{
    color:#0d6efd;
    font-weight:800;
    margin:0;
}

.feature-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
}

.feature-card{
    background:#fff;
    border-radius:18px;
    padding:18px;
    display:flex;
    align-items:center;
    gap:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.feature-card i{
    color:#0d6efd;
    font-size:22px;
}

.enrollment-form-card{
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.5);
    border-radius:30px;
    padding:40px;
    box-shadow:0 25px 60px rgba(0,0,0,.08);
}

.form-header{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:35px;
}

.badge-icon{
    width:70px;
    height:70px;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#0d6efd,#4e9dff);
    color:#fff;
    font-size:28px;
}

.floating-group{
    position:relative;
    margin-bottom:24px;
}

.floating-group input,
.floating-group textarea,
.floating-group select{
    width:100%;
    border:none;
    background:#fff;
    border-radius:15px;
    padding:18px 16px;
    outline:none;
    box-shadow:0 8px 20px rgba(0,0,0,.05);
}

.floating-group label{
    position:absolute;
    left:16px;
    top:18px;
    color:#777;
    pointer-events:none;
    transition:.3s;
}

.floating-group input:focus + label,
.floating-group input:valid + label,
.floating-group textarea:focus + label,
.floating-group textarea:not(:placeholder-shown)+label{
    top:-10px;
    left:12px;
    background:#fff;
    padding:0 8px;
    font-size:12px;
    color:#0d6efd;
}

.form-footer{
    display:flex;
    justify-content:space-between;
    margin-top:20px;
    color:#666;
    font-size:14px;
}

@media(max-width:768px){

    .enrollment-stats{
        grid-template-columns:1fr;
    }

    .feature-grid{
        grid-template-columns:1fr;
    }

    .enrollment-content .section-title{
        font-size:2rem;
    }

    .enrollment-form-card{
        padding:25px;
    }
}

/*==================================================
QUAERETECH - IN CAMPUS TRAINING
services.css
Part 1
==================================================*/

/*==============================
ROOT
==============================*/

:root{

    --primary:#2563eb;
    --primary-dark:#1d4ed8;
    --secondary:#06b6d4;

    --dark:#0f172a;
    --dark-light:#1e293b;

    --white:#ffffff;
    --light:#f8fafc;
    --border:#e5e7eb;

    --text:#475569;
    --heading:#0f172a;

    --radius:20px;

    --shadow-sm:0 5px 20px rgba(0,0,0,.06);
    --shadow:0 15px 45px rgba(0,0,0,.08);
    --shadow-lg:0 30px 80px rgba(37,99,235,.18);

    --transition:.35s ease;

}

/*==============================
GLOBAL
==============================*/

body{

    font-family:"Plus Jakarta Sans",sans-serif;
    background:#fff;
    color:var(--text);
    overflow-x:hidden;
    line-height:1.8;

}

section{

    padding:110px 0;
    position:relative;

}

img{

    max-width:100%;
    display:block;

}

a{

    text-decoration:none;

}

.container{

    position:relative;
    z-index:2;

}

.section-tag{

    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:8px 18px;

    background:rgba(37,99,235,.08);

    color:var(--primary);

    border-radius:50px;

    font-size:.8rem;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:18px;

}

.section-title{

    font-size:3rem;

    line-height:1.2;

    color:var(--heading);

    font-weight:800;

    margin-bottom:25px;

}

.section-subtitle{

    max-width:700px;

    margin:auto;

    color:#64748b;

}

.section-text{

    color:#64748b;

    margin-bottom:20px;

}

/*==============================
BUTTONS
==============================*/

/*==============================
HERO
==============================*/

.service-hero-section{

    padding-top:180px;
    padding-bottom:130px;

    overflow:hidden;

    background:

    linear-gradient(135deg,#eff6ff,#ffffff 60%,#ecfeff);

}

.hero-grid{

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(rgba(37,99,235,.05) 1px,transparent 1px),

    linear-gradient(90deg,rgba(37,99,235,.05) 1px,transparent 1px);

    background-size:45px 45px;

    opacity:.6;

}

.hero-content{

    position:relative;

    z-index:5;

}

.hero-description{

    font-size:1.1rem;

    color:#475569;

    max-width:580px;

}

.hero-buttons{

    margin-top:45px;

    display:flex;

    flex-wrap:wrap;

    gap:20px;

}

/*==============================
HERO IMAGE
==============================*/

.service-hero-image{

    position:relative;

}

.service-hero-image img{

    border-radius:30px;

    box-shadow:var(--shadow-lg);

}

.hero-image-badge{

    position:absolute;

    bottom:25px;

    left:25px;

    background:#fff;

    border-radius:18px;

    padding:18px 22px;

    box-shadow:var(--shadow);

    font-weight:700;

}
.hero-image-badge2{

    position:absolute;

    bottom:25px;

    left:25px;

    background:#fff;

    border-radius:18px;

    padding:18px 22px;

    box-shadow:var(--shadow);

    font-weight:700;

}

.hero-image-badge span{

    display:block;

    color:var(--primary);

    font-size:1.1rem;

}
.hero-image-badge2 span{

    display:block;

    color:var(--primary);

    font-size:1.1rem;

}

/*==============================
QUICK FACTS
==============================*/

.quickfacts-section{

    padding:70px 0;

    background:#fff;

}

.quickfact-item{

    display:flex;

    align-items:center;

    gap:18px;

    padding:30px;

    border-radius:20px;

    background:#fff;

    box-shadow:var(--shadow-sm);

    transition:.35s;

    height:100%;

}

.quickfact-item:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow);

}

.quickfact-icon{

    width:70px;

    height:70px;

    border-radius:20px;

    background:linear-gradient(135deg,var(--primary),var(--secondary));

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:28px;

}

.quickfact-item h6{

    margin-bottom:4px;

    font-weight:700;

    color:var(--dark);

}

.quickfact-item p{

    margin:0;

    color:#64748b;

}

/*==============================
ABOUT
==============================*/

.about-section{

    background:#f8fafc;

}

.about-image-wrapper{

    position:relative;

}

.about-main-image{

    border-radius:30px;

    box-shadow:var(--shadow-lg);

}

.experience-card,
.project-card{

    position:absolute;

    background:#fff;

    border-radius:20px;

    padding:22px 30px;

    box-shadow:var(--shadow);

    text-align:center;

}

.experience-card{

    top:30px;

    left:-30px;

}

.project-card{

    right:-25px;

    bottom:30px;

}

.experience-card h2,
.project-card h2{

    color:var(--primary);

    font-weight:800;

    margin-bottom:5px;

}

.about-highlights{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    margin-top:35px;

}

.highlight-item{

    display:flex;

    gap:12px;

    align-items:center;

    background:#fff;

    padding:18px;

    border-radius:15px;

    box-shadow:var(--shadow-sm);

}

.highlight-item i{

    color:var(--primary);

    font-size:20px;

}

/*==============================
RESPONSIVE
==============================*/

@media(max-width:992px){
.section-title{

font-size:2.3rem;

}

.about-highlights{

grid-template-columns:1fr;

}

.experience-card,
.project-card{

position:relative;

left:auto;
right:auto;
top:auto;
bottom:auto;

margin-top:20px;

display:inline-block;

}

}

@media(max-width:768px){

section{

padding:80px 0;

}

.hero-buttons{

flex-direction:column;

}

.quickfact-item{

padding:20px;

}

.section-title{

font-size:2rem;

}

}

.highlights-section{

    background:#f8fbff;

}

.highlight-card-pro{

    position:relative;

    overflow:hidden;

    height:100%;

    padding:35px;

    border-radius:28px;

    background:rgba(255,255,255,.72);

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.4);

    transition:.45s;

    box-shadow:0 20px 60px rgba(0,0,0,.06);

}

.highlight-card-pro:hover{

    transform:translateY(-12px);

    box-shadow:0 30px 70px rgba(37,99,235,.18);

}

.card-glow{

    position:absolute;

    width:220px;

    height:220px;

    background:#2563eb;

    border-radius:50%;

    filter:blur(90px);

    opacity:.08;

    right:-120px;

    top:-120px;

    transition:.5s;

}

.highlight-card-pro:hover .card-glow{

    transform:scale(1.6);

    opacity:.16;

}

.hc-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}

.hc-icon{

    width:78px;

    height:78px;

    border-radius:22px;

    background:linear-gradient(135deg,#2563eb,#00c6ff);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:32px;

    box-shadow:0 15px 35px rgba(37,99,235,.25);

}

.hc-badge{

    padding:8px 16px;

    border-radius:50px;

    background:#eef5ff;

    color:#2563eb;

    font-size:13px;

    font-weight:700;

}

.highlight-card-pro h4{

    font-size:24px;

    margin-bottom:15px;

    font-weight:700;

    color:#0f172a;

}

.highlight-card-pro p{

    color:#64748b;

    line-height:1.8;

    margin-bottom:30px;

}

.hc-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.hc-footer span{

    font-weight:600;

    color:#2563eb;

}

.hc-footer span i{

    margin-right:6px;

}

.arrow{

    font-size:30px;

    color:#2563eb;

    transition:.35s;

}

.highlight-card-pro:hover .arrow{

    transform:translateX(8px);

}
/*==========================
PREMIUM FAQ
===========================*/

.faq-section{

    position:relative;

    overflow:hidden;

    background:#f8fbff;

}

.faq-blob{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    opacity:.18;

}

.faq-blob1{

    width:280px;

    height:280px;

    background:#2563eb;

    left:-120px;

    top:80px;

}

.faq-blob2{

    width:300px;

    height:300px;

    background:#00c2ff;

    right:-100px;

    bottom:0;

}

.faq-info{

    display:flex;

    gap:20px;

    margin-top:35px;

}

.faq-stat{

    flex:1;

    background:#fff;

    border-radius:22px;

    padding:25px;

    box-shadow:0 20px 50px rgba(0,0,0,.05);

    text-align:center;

}

.faq-stat h3{

    color:#2563eb;

    font-size:40px;

    margin-bottom:5px;

}

.faq-stat span{

    color:#64748b;

}

.premium-faq .accordion-item{

    border:none;

    margin-bottom:18px;

    border-radius:22px;

    overflow:hidden;

    box-shadow:0 15px 40px rgba(0,0,0,.05);

}

.premium-faq .accordion-button{

    background:#fff;

    padding:28px;

    font-weight:700;

    font-size:18px;

    box-shadow:none;

}

.premium-faq .accordion-button:not(.collapsed){

    background:linear-gradient(135deg,#2563eb,#00b5ff);

    color:#fff;

}

.premium-faq .accordion-button::after{

    width:36px;

    height:36px;

    border-radius:50%;

    background:#edf3ff;

    display:flex;

    align-items:center;

    justify-content:center;

    background-size:18px;

}

.premium-faq .accordion-body{

    padding:25px 30px;

    color:#64748b;

    line-height:1.9;

    background:#fff;

}

@media(max-width:768px){

.faq-info{

flex-direction:column;

}

.premium-faq .accordion-button{

font-size:16px;

padding:22px;

}

}

/*=====================================
WHO WE EMPOWER
======================================*/

.ecosystem-section{
    position:relative;
    padding:120px 0;
    background:linear-gradient(180deg,#f8fbff,#ffffff);
    overflow:hidden;
}

.ecosystem-section::before{
    content:"";
    position:absolute;
    width:650px;
    height:650px;
    background:#2563eb;
    filter:blur(180px);
    opacity:.08;
    left:-200px;
    top:-150px;
}

.ecosystem-wrapper{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    grid-template-rows:repeat(2,220px);

    gap:35px;

    align-items:center;

    margin-top:70px;

}

.eco-card{

    background:rgba(255,255,255,.78);

    backdrop-filter:blur(16px);

    border-radius:28px;

    padding:35px;

    text-align:center;

    box-shadow:0 20px 50px rgba(0,0,0,.05);

    transition:.45s;

    border:1px solid rgba(255,255,255,.6);

    position:relative;

    overflow:hidden;

}

.eco-card::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    background:#2563eb;

    border-radius:50%;

    filter:blur(80px);

    opacity:0;

    right:-120px;

    top:-120px;

    transition:.5s;

}

.eco-card:hover::before{

    opacity:.12;

    transform:scale(1.4);

}

.eco-card:hover{

    transform:translateY(-12px);

    box-shadow:0 30px 70px rgba(37,99,235,.15);

}

.eco-card i{

    font-size:52px;

    color:#2563eb;

    margin-bottom:20px;

}

.eco-card h5{

    font-weight:700;

    margin-bottom:12px;

}

.eco-card p{

    color:#64748b;

    margin:0;

}

/*=====================
CENTER
=====================*/

.eco-center{

    grid-column:2;

    grid-row:1 / span 2;

    display:flex;

    justify-content:center;

    align-items:center;

}

.center-ring{

    width:280px;

    height:280px;

    border-radius:50%;

    background:linear-gradient(135deg,#2563eb,#00c8ff);

    padding:8px;

    animation:ringRotate 10s linear infinite;

}

.center-content{

    width:100%;

    height:100%;

    background:#fff;

    border-radius:50%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    box-shadow:0 20px 60px rgba(37,99,235,.18);

}

.center-content i{

    font-size:54px;

    color:#2563eb;

    margin-bottom:15px;

}

.center-content h4{

    font-weight:700;

    margin-bottom:6px;

}

.center-content span{

    color:#64748b;

}

@keyframes ringRotate{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

/*=====================
BENEFITS
=====================*/

.benefits-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

    margin-top:90px;

}

.benefit-box{

    background:#fff;

    border-radius:20px;

    padding:22px;

    display:flex;

    align-items:center;

    gap:18px;

    box-shadow:0 15px 40px rgba(0,0,0,.05);

    transition:.35s;

    font-weight:600;

}

.benefit-box:hover{

    transform:translateY(-8px);

    background:#2563eb;

    color:#fff;

}

.benefit-box i{

    font-size:30px;

    color:#2563eb;

    transition:.35s;

}

.benefit-box:hover i{

    color:#fff;

}

/*=====================
RESPONSIVE
=====================*/

@media(max-width:992px){

.ecosystem-wrapper{

grid-template-columns:1fr;

grid-template-rows:auto;

}

.eco-center{

grid-column:auto;

grid-row:auto;

margin:20px 0;

}

.benefits-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.center-ring{

width:220px;

height:220px;

}

.benefits-grid{

grid-template-columns:1fr;

}

}

/*=========================================
      Premium Modern Sub Heading
=========================================*/

.modern-subheading{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
    margin:0 auto 45px;
    font-family:'Poppins',sans-serif;
    overflow:hidden;
}

.modern-subheading::before,
.modern-subheading::after{
    content:"";
    width:80px;
    height:2px;
    border-radius:50px;
    background:linear-gradient(90deg,
        transparent,
        #00e5ff,
        #7df9ff,
        transparent);
    animation:lineGlow 3s linear infinite;
}

.modern-subheading span{
    position:relative;
    display:inline-block;

    /* One-third size of H1 */
    font-size:clamp(0.95rem,1.2vw,1.3rem);

    font-weight:700;
    letter-spacing:4px;
    text-transform:uppercase;

    background:linear-gradient(
        90deg,
        #1d076c,
        #1d076cbb,
        #1d076c77,
        #1d076c19
    );
    background-size:300% auto;

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    animation:
        gradientFlow 6s linear infinite,
        floatSub 4s ease-in-out infinite;
}

/* Small glowing dot */
.modern-subheading span::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-10px;
    transform:translateX(-50%);
    width:8px;
    height:8px;
    border-radius:50%;
    background:#1e2dd2;
    box-shadow:
        0 0 8px #00e5ff,
        0 0 18px #00e5ff,
        0 0 30px #00e5ff;
    animation:pulseDot 2s infinite;
}

@keyframes gradientFlow{
    from{
        background-position:0%;
    }
    to{
        background-position:300%;
    }
}

@keyframes lineGlow{
    0%{
        opacity:.4;
        transform:scaleX(.8);
    }
    50%{
        opacity:1;
        transform:scaleX(1);
    }
    100%{
        opacity:.4;
        transform:scaleX(.8);
    }
}

@keyframes pulseDot{
    0%,100%{
        transform:translateX(-50%) scale(1);
    }
    50%{
        transform:translateX(-50%) scale(1.5);
    }
}

@keyframes floatSub{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-3px);
    }
}

/* Responsive */

@media(max-width:768px){

    .modern-subheading{
        gap:10px;
    }

    .modern-subheading::before,
    .modern-subheading::after{
        width:40px;
    }

    .modern-subheading span{
        letter-spacing:2px;
    }

}

.cert-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 12px 35px rgba(0,0,0,.15);

    transition:.4s;

    height:100%;

    border:1px solid #eee;

}

.cert-card:hover{

    transform:translateY(-12px);

    box-shadow:0 25px 60px rgba(0,0,0,.22);

}

.cert-header{

    padding:35px 28px;

    color:#fff;

    min-height:180px;

    display:flex;

    align-items:center;

}

.cert-header h4{

    color:#fff;

    font-size:34px;

    font-weight:800;

    letter-spacing:1px;

    margin-bottom:8px;

    text-transform:uppercase;

}

.cert-logo{

    width:85px;

}

.cert-body{

    padding:30px;

}

.cert-body h3{

    font-size:32px;

    font-weight:600;

    color:#2d2d2d;

    margin-bottom:18px;

}

.duration{

    font-size:26px;

    margin-bottom:25px;

}

.duration span{

    color:#ff6b2d;

    font-weight:700;

}

.review-text{

    color:#888;

    font-size:22px;

    display:block;

    margin-bottom:12px;

}

.rating{

    font-size:26px;

    font-weight:700;

    margin-left:10px;

}

.view-btn{

    color:#ff6b2d;

    font-size:24px;

    font-weight:700;

    text-decoration:none;

}

.view-btn:hover{

    color:#ff6b2d;

}

.cert-card i{

    font-size:22px;

}

.java-bg{

    background:linear-gradient(135deg,#111,#1f2a08);

}

.python-bg{

    background:linear-gradient(135deg,#087f6d,#0c9d83);

}

.mern-bg{

    background:linear-gradient(135deg,#0b8f4f,#18b769);

}

.dotnet-bg{

    background:linear-gradient(135deg,#0997d5,#3bc4ff);

}

.php-bg{

    background:linear-gradient(135deg,#4F5BD5,#6b7cff);

}

.cert-card:hover .cert-logo{

    transform:scale(1.1);

    transition:.4s;

}

.cert-logo{

    transition:.4s;

}

/* =======================================
MODERN TECH STACK
======================================= */

.tech-section{
    position:relative;
    overflow:hidden;
    background:linear-gradient(180deg,#ffffff,#f7fbff);
}

.tech-section::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    background:#0d6efd15;
    border-radius:50%;
    filter:blur(120px);
    top:-180px;
    left:-120px;
}

.tech-section::after{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    background:#ff6b3510;
    border-radius:50%;
    filter:blur(130px);
    right:-180px;
    bottom:-150px;
}

.tech-category{

    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;

}

.tech-category span{

    padding:12px 28px;

    border-radius:50px;

    background:#fff;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

    font-weight:600;

    cursor:pointer;

    transition:.35s;

}

.tech-category span:hover,
.tech-category .active{

    background:linear-gradient(135deg,#ff6b35,#ff944d);

    color:#fff;

    transform:translateY(-4px);

}

.tech-marquee{

    overflow:hidden;

    position:relative;

    padding:15px 0;

}

.tech-track{

    display:flex;

    gap:25px;

    width:max-content;

    animation:techScroll 40s linear infinite;

}

.tech-marquee:hover .tech-track{

    animation-play-state:paused;

}

@keyframes techScroll{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}

.tech-card{

    min-width:180px;

    background:#fff;

    border-radius:22px;

    padding:28px 20px;

    text-align:center;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

    transition:.4s;

    border:1px solid rgba(0,0,0,.05);

    position:relative;

    overflow:hidden;

}

.tech-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(135deg,#ff6b35,#0d6efd);

    opacity:0;

    transition:.4s;

}

.tech-card>*{

    position:relative;

    z-index:2;

}

.tech-card:hover{

    transform:translateY(-15px);

    box-shadow:0 25px 60px rgba(0,0,0,.15);

}

.tech-card:hover::before{

    opacity:1;

}

.tech-card:hover h6,
.tech-card:hover small{

    color:#fff;

}

.tech-icon{

    width:85px;

    height:85px;

    border-radius:20px;

    background:#f8f9ff;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto auto 18px;

    transition:.4s;

}

.tech-icon img{

    width:50px;

    transition:.4s;

}

.tech-card:hover .tech-icon{

    background:#fff;

    transform:rotate(-8deg) scale(1.08);

}

.tech-card:hover img{

    transform:scale(1.15);

}

.tech-card h6{

    font-size:20px;

    font-weight:700;

    margin-bottom:6px;

}

.tech-card small{

    font-size:14px;

    color:#777;

}


/*=====================================
PROGRAM OUTCOMES
=====================================*/



.outcome-shape{

    position:absolute;

    border-radius:50%;

    filter:blur(70px);

    opacity:.18;

}

.shape-1{

    width:220px;

    height:220px;

    background:#0d6efd;

    top:-80px;

    left:-60px;

}

.shape-2{

    width:280px;

    height:280px;

    background:#ff6b35;

    right:-80px;

    bottom:-100px;

}

.shape-3{

    width:170px;

    height:170px;

    background:#00d084;

    top:40%;

    left:50%;

}

.outcome-card{

    background:#fff;

    border-radius:24px;

    padding:35px 28px;

    text-align:center;

    position:relative;

    overflow:hidden;

    height:100%;

    transition:.45s;

    border:1px solid rgba(13,110,253,.08);

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.outcome-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(135deg,#0d6efd,#ff6b35);

    opacity:0;

    transition:.45s;

}

.outcome-card>*{

    position:relative;

    z-index:2;

}

.outcome-card:hover{

    transform:translateY(-14px);

    box-shadow:0 28px 65px rgba(0,0,0,.16);

}

.outcome-card:hover::before{

    opacity:1;

}

.outcome-card:hover h5,

.outcome-card:hover p,

.outcome-card:hover i{

    color:#fff;

}

.outcome-icon{

    width:95px;

    height:95px;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

    linear-gradient(135deg,#0d6efd,#4aa3ff);

    box-shadow:0 12px 30px rgba(13,110,253,.35);

    margin-bottom:25px;

    transition:.4s;

}

.outcome-card:hover .outcome-icon{

    background:#fff;

    transform:rotateY(180deg) scale(1.08);

}

.outcome-icon i{

    font-size:42px;

    color:#fff;

    transition:.4s;

}

.outcome-card:hover .outcome-icon i{

    color:#ff6b35;

}

.outcome-card h5{

    font-weight:700;

    margin-bottom:16px;

    font-size:22px;

    line-height:1.35;

    transition:.35s;

}

.outcome-card p{

    color:#666;

    font-size:15px;

    line-height:1.7;

    margin-bottom:0;

    transition:.35s;

}

.glow-line{

    width:70px;

    height:5px;

    margin:28px auto 0;

    border-radius:50px;

    background:

    linear-gradient(90deg,#0d6efd,#ff6b35);

    transition:.35s;

}

.outcome-card:hover .glow-line{

    width:130px;

    background:#fff;

}

@media(max-width:768px){

.outcome-card{

padding:28px 20px;

}

.outcome-icon{

width:80px;

height:80px;

}

.outcome-icon i{

font-size:34px;

}

.outcome-card h5{

font-size:19px;

}

}

  body {
    margin: 0;
    min-height: 100vh;
    background: #ECEEF3;
    font-family: 'Karla', -apple-system, sans-serif;
  }
  .preview-stage {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 20px;
  }
  .card-slot { width: 100%; max-width: 400px; }

  /* =====================================================================
     QUAERE — "Full Stack Development in Java" certification card
     ---------------------------------------------------------------------
     The palette and the one signature touch are grounded in Java's own
     coffee-cup mark: a warm roast/ember gradient in the header, with a
     quiet curl of "steam" rising behind the logo badge (pure CSS, no
     markup changes required). Everything else — chips, stars, button —
     stays plain and disciplined, so that touch stays the memorable part.

     Drop this whole block into your stylesheet as-is. Your HTML/classes
     don't need to change at all — see the one note near .cert-logo.
     ===================================================================== */

  .cert-card {
    --cc-roast:       #2B211D;
    --cc-roast-soft:  #6E5D54;
    --cc-ember:       #AC4222;
    --cc-ember-deep:  #7A2E1C;
    --cc-amber:       #E8A33D;
    --cc-foam:        #FFFDF9;
    --cc-line:        rgba(43, 33, 29, .10);
    --cc-star-muted:  #DED4CB;
    --cc-radius-lg:   22px;
    --cc-radius-full: 999px;
    --cc-ease: cubic-bezier(.22, 1, .36, 1);
    --cc-dur: .5s;
    --cc-shadow-rest:  0 1px 2px rgba(43,33,29,.05),
                       0 10px 24px -8px rgba(43,33,29,.12),
                       0 28px 56px -24px rgba(43,33,29,.16);
    --cc-shadow-hover: 0 2px 4px rgba(43,33,29,.07),
                       0 18px 36px -10px rgba(172,66,34,.30),
                       0 46px 70px -26px rgba(122,46,28,.40);

    font-family: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--cc-foam);
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius-lg);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: var(--cc-shadow-rest);
    transition: transform var(--cc-dur) var(--cc-ease), box-shadow var(--cc-dur) var(--cc-ease);
  }

  .cert-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--cc-shadow-hover);
  }

  /* ---------------------------- header ---------------------------- */
  .cert-header {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 32px 24px 28px;
  }

  .java-bg {
    background: radial-gradient(130% 130% at 14% 12%, var(--cc-amber) 0%, var(--cc-ember) 48%, var(--cc-ember-deep) 100%);
  }

  .cert-header .row { position: relative; z-index: 2; }

  .cert-header h4 {
    margin: 0;
    color: var(--cc-foam);
    text-transform: uppercase;
    letter-spacing: .5px;
    text-shadow: 0 1px 3px rgba(0,0,0,.22);
  }
  .cert-header h4:nth-of-type(1),
  .cert-header h4:nth-of-type(2) {
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.3;
  }
  .cert-header h4:nth-of-type(3) {
    font-size: .68rem;
    font-weight: 600;
    opacity: .82;
    margin-top: 8px;
    letter-spacing: 1.2px;
  }

  /* Logo badge — sized/centered to work whether this is your real <img>
     or an icon font, like the stand-in used below. */
  .cert-logo {
    position: relative;
    z-index: 2;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cc-foam);
    color: var(--cc-ember);
    border-radius: 50%;
    font-size: 1.5rem;
    object-fit: contain;
    padding: 8px;
    box-shadow: 0 8px 18px rgba(43,33,29,.28);
  }

  /* Signature touch: a soft curl of steam behind the badge, echoing
     Java's coffee-cup mark. Built as pseudo-elements on the header/column
     rather than the logo itself, since ::before/::after don't reliably
     render on <img> — this way it works no matter which one you use. */
  .cert-header::before {
    content: "";
    position: absolute;
    top: 26px;
    left: 46px;
    width: 4px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(to top, transparent, rgba(255,253,249,.6) 55%, transparent);
    filter: blur(1.5px);
    rotate: -7deg;
    z-index: 1;
    animation: cc-steam 5s ease-in infinite;
  }
  .cert-header .col-3 { position: relative; }
  .cert-header .col-3::before,
  .cert-header .col-3::after {
    content: "";
    position: absolute;
    width: 4px;
    border-radius: 50%;
    background: linear-gradient(to top, transparent, rgba(255,253,249,.6) 55%, transparent);
    filter: blur(1.5px);
    z-index: 1;
    animation: cc-steam 5s ease-in infinite;
  }
  .cert-header .col-3::before { top: 4px; left: 42%; height: 20px; rotate: 5deg;  animation-delay: 1.2s; }
  .cert-header .col-3::after  { top: 8px; left: 62%; height: 16px; rotate: -4deg; animation-delay: 2.4s; }

  @keyframes cc-steam {
    0%   { opacity: 0;  translate: 0 0;      scale: 1;   }
    20%  { opacity: .7; }
    60%  { opacity: .3; translate: 0 -20px; scale: 1.3; }
    100% { opacity: 0;  translate: 0 -32px; scale: 1.5; }
  }

  /* ---------------------------- body ---------------------------- */
  .cert-body {
    padding: 24px 24px 22px;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .cert-body h3 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 700;
    font-size: 1.22rem;
    line-height: 1.3;
    color: var(--cc-roast);
    margin: 0 0 16px;
  }

  .cert-body .duration {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin: 0 0 20px;
    padding: 7px 14px;
    border-radius: var(--cc-radius-full);
    background: rgba(172, 66, 34, .08);
    color: var(--cc-roast-soft);
    font-size: .76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
  }
  .cert-body .duration span {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    color: var(--cc-ember);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
  }

  .cert-body .review-text {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--cc-roast-soft);
    margin-bottom: 8px;
  }

  .cert-body .fa-star.text-warning   { color: var(--cc-amber); font-size: .85rem; }
  .cert-body .fa-star.text-secondary { color: var(--cc-star-muted); font-size: .85rem; }

  .cert-body .rating {
    margin-left: 6px;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-weight: 600;
    font-size: .82rem;
    color: var(--cc-roast);
  }

  .cert-body > .d-flex {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--cc-line);
  }

  .cert-body .view-btn {
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    border-radius: var(--cc-radius-full);
    border: 1.5px solid var(--cc-ember);
    color: var(--cc-ember);
    font-weight: 700;
    font-size: .82rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--cc-dur) var(--cc-ease),
                color var(--cc-dur) var(--cc-ease),
                box-shadow var(--cc-dur) var(--cc-ease),
                letter-spacing var(--cc-dur) var(--cc-ease);
  }
  .cert-body .view-btn:hover {
    background: linear-gradient(135deg, var(--cc-amber), var(--cc-ember));
    color: var(--cc-foam);
    letter-spacing: .3px;
    box-shadow: 0 10px 20px -6px rgba(172,66,34,.5);
  }
  .cert-body .view-btn:focus-visible {
    outline: 2px solid var(--cc-ember);
    outline-offset: 3px;
  }

  /* ---------------------------- responsive ---------------------------- */
  @media (max-width: 420px) {
    .cert-header  { padding: 26px 20px 22px; }
    .cert-body    { padding: 20px 20px 18px; }
    .cert-body h3 { font-size: 1.12rem; }
  }

  /* ---------------------------- reduced motion ---------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .cert-header::before,
    .cert-header .col-3::before,
    .cert-header .col-3::after { animation: none; opacity: 0; }
    .cert-card, .cert-body .view-btn { transition: none; }
    .cert-card:hover { transform: none; }
  }