/* ==================================================
   QUAERETECH ENTERPRISE V3
   FIRST.CSS — CLEAN

   ROOT → RESET → TYPOGRAPHY → SCROLLBAR →
   PRELOADER → NAVBAR → HERO → TRUSTED →
   ABOUT → SERVICES → WHY → CASE STUDIES →
   TECH STACK → PROCESS → STATS →
   TESTIMONIALS → BLOG → CONTACT →
   FOOTER → WHATSAPP → RESPONSIVE
================================================== */

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

:root {
  --primary:       #1b73b7;
  --primary-dark:  #005495;
  --secondary:     #06b6d4;
  --accent:        #f97316;
  --success:       #22c55e;
  --danger:        #ef4444;

  --heading:       #0f172a;
  --text:          #475569;
  --white:         #ffffff;
  --bg:            #f8fafc;
  --bg-secondary:  #ffffff;
  --card-bg:       #ffffff;
  --border:        #e2e8f0;

  --shadow-sm: 0 4px 12px rgba(0, 0, 0, .05);
  --shadow:    0 12px 30px rgba(0, 0, 0, .08);
  --shadow-lg: 0 25px 60px rgba(0, 0, 0, .15);

  --radius:     18px;
  --transition: .35s ease;
}

/* ==========================================
   DARK MODE
========================================== */

body.dark-mode {
  --heading:    #f8fafc;
  --text:       #cbd5e1;
  --bg:         #020617;
  --bg-secondary: #0f172a;
  --card-bg:    #111827;
  --border:     #1e293b;
  --shadow-sm:  0 4px 12px rgba(0, 0, 0, .25);
  --shadow:     0 12px 30px rgba(0, 0, 0, .35);
  --shadow-lg:  0 25px 60px rgba(0, 0, 0, .45);
}
body {
  user-select: none;
}
.text-primary{
  color : #005495!important;
}
.bg-primary{
  background-color : #005495!important;
}
.btn.btn-primary{
  background-color : #005495!important;
}
.btn.btn-outline-primary{
  border: 1px solid #005495;
  color:#005495;
}
.btn.btn-outline-primary:hover{
  background-color: #005495;;
  color: white;
}
/* ==========================================
   RESET
========================================== */
  .bg-qprimary{
      background-color: var(--primary);
    }
    .text-qprimary{
      color: var(--primary);
    }

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  scroll-padding-top: 80px; /* offset for fixed navbar */
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  cursor: auto;
  transition: background .4s ease, color .4s ease;
}

a {
  text-decoration: none;
  transition: .3s;
}

img {
  max-width: 100%;
  display: block;
}

/* ==========================================
   TYPOGRAPHY
========================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  color: var(--heading);
  line-height: 1.2;
  letter-spacing: -0.02em;
  word-break: keep-all;
  hyphens: none;
}

.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  margin-bottom: 10px;
  background: rgba(37, 99, 235, .1);
  color: var(--primary);
  border-radius: 50px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.2rem, 2vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.3;
  margin-bottom: 20px;
  word-break: keep-all;
  hyphens: none;
}

.section-subtitle {
  max-width: 700px;
  margin: auto;
  font-size: 1rem;
  line-height: 1.8;
}

.btn {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ==========================================
   CUSTOM SCROLLBAR
========================================== */

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 50px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary-dark); }

::selection { background: var(--primary); color: #fff; }

/* ==========================================
   PRELOADER
========================================== */

#preloader {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999;
  transition: .6s;
}

.loader-container { text-align: center; }

.loader-logo {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 30px;
  color: var(--heading);
}

.loader-logo span { color: var(--primary); }

.loader-circle {
  position: relative;
  width: 120px;
  height: 120px;
  margin: auto;
}

.loader-track { stroke: #e2e8f0; }

.loader-progress-circle {
  stroke: var(--primary);
  stroke-dasharray: 314;
  stroke-dashoffset: 314;
  transform: rotate(-90deg);
  transform-origin: center;
  stroke-linecap: round;
}

#loaderPercent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--heading);
}

.loader-text {
  margin-top: 20px;
  font-size: .95rem;
  color: var(--text);
  letter-spacing: 1px;
}

/* ==========================================
   SCROLL PROGRESS
========================================== */

#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  width: 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  z-index: 999999;
}

/* ==========================================
   FLOATING BLOBS
========================================== */

.blob {
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .25;
  pointer-events: none;
  z-index: -1;
}

.blob-1 { width: 350px; height: 350px; background: #60a5fa; top: 10%; left: -120px; }
.blob-2 { width: 420px; height: 420px; background: #22d3ee; right: -150px; bottom: 5%; }
.blob-3 { width: 280px; height: 280px; background: #f97316; left: 50%; top: 40%; }

/* ==========================================
   TOP BANNER
========================================== */

.top-banner {
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  color: #fff;
  padding: 12px;
  text-align: center;
  font-size: .85rem;
  font-weight: 600;
}

/* ==========================================
   NAVBAR
========================================== */

.custom-navbar {
  padding: 18px 0;
  background: rgba(255, 255, 255, .75);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, .15);
  transition: .4s;
}

body.dark-mode .custom-navbar {
  background: rgba(15, 23, 42, .75);
}

.custom-navbar.scrolled {
  padding: 12px 0;
  box-shadow: var(--shadow);
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--heading) !important;
}

.navbar-brand span { color: var(--primary); }

.nav-link {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  position: relative;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0px;
  /* height: 2px; */
  background: var(--primary);
  transition: .3s;
  border: 0px solid;
}

.nav-link:hover::after { width: 100%;  height: 2px;  }
.nav-link:hover { color: var(--primary) !important; }

.theme-toggle {
  width: 45px;
  height: 45px;
  border: none;
  border-radius: 12px;
  background: rgba(37, 99, 235, .1);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  transition: .3s;
}

.theme-toggle:hover { transform: translateY(-3px); }

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

.hero-section {
  padding: 30px 0px;
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.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%);
}

.hero-content { position: relative; z-index: 10; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: rgba(37, 99, 235, .1);
  color: var(--primary);
  border-radius: 50px;
  font-weight: 700;
  margin-bottom: 25px;
}

.hero-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.4rem, 4vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 25px;
  word-break: keep-all;
  hyphens: none;
}

.hero-description {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.1rem;
  line-height: 1.85;
  font-weight: 400;
  max-width: 620px;
  margin-bottom: 35px;
}

.hero-buttons {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  margin-bottom: 50px;
}

.hero-stats {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.stat-card {
  background: var(--card-bg);
  padding: 20px;
  min-width: 140px;
  border-radius: 18px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.stat-card h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 5px;
}

.stat-card p {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
}

/* ==========================================
   HERO RIGHT + DASHBOARD
========================================== */

.hero-right {
  position: relative;
  height: 650px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero-lottie,
.hero-lottie svg{
    width:100%;
    height:100%;
}
.hero-lottie-wrapper{
    min-height:650px;
    position:relative;
}

.hero-lottie {
  position: absolute;
  width: 650px;
  height: 650px;
  opacity: .7;
}

.dashboard-card {
  position: relative;
  width: 100%;
  max-width: 550px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 25px;
  box-shadow: var(--shadow-lg);
  z-index: 5;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.dots { display: flex; gap: 8px; }
.dots span { width: 12px; height: 12px; border-radius: 50%; background: #cbd5e1; }

.metric-box {
  padding: 18px;
  border-radius: 18px;
  background: rgba(37, 99, 235, .06);
  margin-bottom: 15px;
}

.metric-box h4 {
  font-size: 1.8rem;
  color: var(--primary);
  margin-bottom: 5px;
}

.metric-chart {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 180px;
  padding-top: 20px;
}

.bar {
  flex: 1;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, var(--secondary), var(--primary));
}

.h1 { height: 60px; }
.h2 { height: 120px; }
.h3 { height: 90px; }
.h4 { height: 170px; }
.h5 { height: 130px; }
.h6 { height: 200px; }

/* ==========================================
   TRUSTED LOGOS
========================================== */

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

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

.logo-track {
  display: flex;
  align-items: center;
  gap: 80px;
  width: max-content;
  animation: marquee 25s linear infinite;
}

.logo-track img {
  height: 45px;
  /* filter: grayscale(100%); */
  opacity: .7;
  transition: .3s;
}

.logo-track img:hover {
  filter: none;
  opacity: 1;
  transform: scale(1.08);
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

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

.about-section {
  padding: 40px 0;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

.about-section::before {
  content: "";
  position: absolute;
  top: -200px;
  right: -200px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(37, 99, 235, .08), transparent);
  border-radius: 50%;
}

.about-image-wrapper {
  position: relative;
  min-height: 500px;
}

.about-main-image {
  border-radius: 30px;
  box-shadow: var(--shadow-lg);
  width: 100%;
  min-height: 500px;
  object-fit: cover;
  display: block;
  background: linear-gradient(135deg, #dbeafe 0%, #cffafe 100%);
}

.experience-card {
  position: absolute;
  top: -30px;
  left: -40px;
  background: var(--card-bg);
  padding: 25px;
  border-radius: 20px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.project-card {
  position: absolute;
  bottom: 30px;
  right: -40px;
  background: var(--card-bg);
  padding: 25px;
  border-radius: 20px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.experience-card h2,
.project-card h2 {
  font-size: 2rem;
  color: var(--primary);
  font-weight: 800;
  margin-bottom: 5px;
}

.about-highlights {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.highlight-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: .3s;
}

.highlight-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}

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

/* ==========================================
   SERVICES SECTION
========================================== */

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

.service-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 35px;
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: .4s;
  box-shadow: var(--shadow-sm);
}

.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  transform: scaleX(0);
  transform-origin: left;
  transition: .4s;
}

.service-card:hover::before { transform: scaleX(1); }

.service-card:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: var(--shadow-lg);
}

.service-icon {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  border-radius: 24px;
  margin-bottom: 25px;
}

.service-icon.ai       { background: #dbeafe; color: #2563eb; }
.service-icon.cloud    { background: #cffafe; color: #0891b2; }
.service-icon.web      { background: #ede9fe; color: #7c3aed; }
.service-icon.mobile   { background: #dcfce7; color: #16a34a; }
.service-icon.analytics{ background: #fef3c7; color: #d97706; }
.service-icon.erp      { background: #fee2e2; color: #dc2626; }

.service-card h4 { font-size: 1.3rem; margin-bottom: 5px; }
.service-card p  { line-height: 1.6; margin-bottom: 10px; text-align: justify; font-size: 15px; }

/* ==========================================
   WHY CHOOSE US
========================================== */

.why-section { padding: 70px 0; background: var(--bg); }

.why-card {
  background: var(--card-bg);
  padding: 35px;
  border-radius: 28px;
  height: 100%;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: .4s;
  text-align: center;
}

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

.why-icon {
  width: 90px;
  height: 90px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  background: linear-gradient(135deg, rgba(37, 99, 235, .1), rgba(6, 182, 212, .1));
  border-radius: 50%;
}

.why-card h4 { margin-bottom: 15px; }
.why-card p  { line-height: 1.8; }

/* ==========================================
   CASE STUDIES
========================================== */

.case-study-section { padding: 70px 0; background: var(--bg-secondary); }

.case-card {
  background: var(--card-bg);
  padding: 40px;
  border-radius: 28px;
  border: 1px solid var(--border);
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: .4s;
}

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

.case-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(37, 99, 235, .06), transparent);
  opacity: 0;
  transition: .4s;
}

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

.case-category {
  display: inline-block;
  padding: 10px 16px;
  background: rgba(37, 99, 235, .1);
  color: var(--primary);
  font-size: .75rem;
  font-weight: 700;
  border-radius: 50px;
  margin-bottom: 20px;
}

.case-card h4 { font-size: 1.5rem; margin-bottom: 15px; line-height: 1.4; }
.case-card p  { line-height: 1.8; margin-bottom: 25px; }

.case-metric {
  padding: 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ==========================================
   TECHNOLOGY STACK
========================================== */

.tech-section { padding: 70px 0; background: var(--bg); }

.tech-marquee {
  overflow: hidden;
  position: relative;
  margin-top: 60px;
  padding: 15px 0;
}

.tech-track img {
  width: 120px;
  height: 80px;
  object-fit: contain;
  flex-shrink: 0;

  /* filter: grayscale(100%); */
  opacity: .7;
  transition: all .3s ease;
}

.tech-track img:hover {
  filter: none;
  opacity: 1;
  transform: scale(1.15);
}

.tech-marquee { overflow: hidden; position: relative; margin-top: 60px; }

.tech-track {
  display: flex;
  align-items: center;
  gap: 80px;
  width: max-content;
  animation: techScroll 25s linear infinite;
}


@keyframes techScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ==========================================
   PROCESS TIMELINE
========================================== */

.process-section {
  padding: 70px 0;
  background: var(--bg-secondary);
  overflow: hidden;
}

.timeline{
    position:relative;
    max-width:1200px;
    margin:auto;
    padding:60px 0;
}
.timeline-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 60px;
}

.timeline-line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  transform: translateY(-50%);
  z-index: 0;
}

.timeline-item {
  position: relative;
  z-index: 2;
  background: var(--card-bg);
  padding: 35px;
  border-radius: 24px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: .4s;
}

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

.timeline-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(37, 99, 235, .1), rgba(6, 182, 212, .1));
  margin-bottom: 20px;
}

.timeline-item h4 { margin-bottom: 12px; }
.timeline-item p  { line-height: 1.8; }
.experts-section{
    padding:100px 0;
    position:relative;
    overflow:hidden;
}

.experts-section::before{
    content:"";
    position:absolute;
    top:-200px;
    right:-200px;
    width:500px;
    height:500px;
    border-radius:50%;
    background:radial-gradient(
        rgba(37,99,235,.08),
        transparent
    );
}

.expert-card-pro{

    position:relative;

    height:100%;

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

    border-radius:28px;

    padding:35px 25px;

    text-align:center;

    overflow:hidden;

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

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

    transition:.5s;
}

.expert-card-pro:hover{

    transform:
    translateY(-15px);

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

.expert-card-pro::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:4px;

    background:
    linear-gradient(
        90deg,
        #2563eb,
        #06b6d4
    );

    transform:scaleX(0);

    transition:.5s;
}

.expert-card-pro:hover::before{
    transform:scaleX(1);
}
.expert-image{

    position:relative;

    width:130px;
    height:130px;

    margin:0 auto 25px;
}

.expert-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    border-radius:50%;

    border:5px solid white;

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

    transition:.5s;
}

.expert-card-pro:hover .expert-image img{

    transform:scale(1.08);
}
.expert-image::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #06b6d4
    );

    z-index:-1;

    animation:
    pulseRing 3s infinite;
}

@keyframes pulseRing{

    0%{
        transform:scale(1);
        opacity:.8;
    }

    50%{
        transform:scale(1.08);
        opacity:.3;
    }

    100%{
        transform:scale(1);
        opacity:.8;
    }
}
.expert-content h4{

    font-size:1.3rem;
    font-weight:700;

    margin-bottom:10px;
}

.expert-role{

    display:inline-block;

    padding:8px 16px;

    border-radius:50px;

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

    color:#2563eb;

    font-size:.75rem;
    font-weight:700;

    text-transform:uppercase;

    margin-bottom:18px;
}

.expert-content p{

    color:#64748b;

    line-height:1.8;

    min-height:90px;
}
.expert-social{

    margin-top:20px;
}

.expert-social a{

    width:46px;
    height:46px;

    display:inline-flex;

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

    border-radius:50%;

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

    color:#2563eb;

    transition:.4s;
}

.expert-social a:hover{

    background:#2563eb;
    color:white;

    transform:
    translateY(-5px)
    rotate(8deg);
}
@media (max-width: 991px){

    .timeline{
        max-width:100%;
        padding:20px 0 20px 55px;
    }

    .timeline-line{
        left:20px;
        transform:none;
    }

    .timeline-progress{
        left:20px;
        transform:none;
    }

    .timeline-marker{
        left:20px;
        transform:translate(-50%,0);
        width:22px;
        height:22px;
    }

    .timeline-item,
    .timeline-item.left,
    .timeline-item.right{

        width:100%;
        left:0;

        margin-bottom:50px;
        padding:0;

        text-align:left;
    }

    .timeline-content{

       background:#fff;

    border:1px solid #eef2ff;

    box-shadow:
    0 10px 30px rgba(0,0,0,.08);
    }

    .timeline-content:hover{
    transform:none;
}

    .timeline-content h4{
        font-size:24px;
    }

    .timeline-item::before{

        content:"";

        position:absolute;

        left:-45px;
        top:25px;

        width:14px;
        height:14px;

        border-radius:50%;

        background:#4f46e5;

        z-index:5;
    }

    .timeline-image{

        position:relative;

        top:auto;
        left:auto !important;
        right:auto !important;

        transform:none;

        width:100%;
        height:180px;

        margin-top:15px;
    }

    .timeline-image img{

        width:100%;
        height:100%;

        object-fit:cover;
        border-radius:15px;
    }

}


/* ==========================================
   LIVE STATS
========================================== */

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

.stats-card {
  padding: 35px;
  text-align: center;
  border-radius: 24px;
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, .2);
  transition: .4s;
}

.stats-card:hover {
  transform: translateY(-8px);
  background: rgba(255, 255, 255, .18);
}

.stats-card h2 {
  font-size: 3rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 10px;
}

.stats-card h6 {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

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

.testimonial-section { padding: 70px 0; background: var(--bg); }

.testimonialSwiper { padding-bottom: 60px; }

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

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

.rating { font-size: 1.2rem; color: #fbbf24; margin-bottom: 20px; }

.testimonial-card p { line-height: 1.9; margin-bottom: 25px; }

.client-info { display: flex; align-items: center; gap: 15px; }

.client-info img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--primary);
}

.client-info h5 { margin: 0; font-size: 1rem; }
.client-info span { font-size: .9rem; color: var(--text); }

.swiper-pagination-bullet { width: 12px; height: 12px; background: #cbd5e1; opacity: 1; }
.swiper-pagination-bullet-active { background: var(--primary); }

/* ==========================================
   BLOG SECTION
========================================== */
.text-justify{
   text-align: justify;
}

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

.blog-card {
  background: var(--card-bg);
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: .4s;
  height: 100%;
}

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

.blog-image { height: 220px; overflow: hidden; }

.blog-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .4s;
}

.blog-card:hover .blog-image img { transform: scale(1.08); }

.blog-content { padding: 25px; }
.blog-content h4 { font-size: 1.2rem; line-height: 1.5; margin-bottom: 15px; }
.blog-content p  { line-height: 1.8; margin-bottom: 20px; }

/* Skeleton Loader */

.skeleton-card { padding: 20px; }

.skeleton-image {
  height: 220px;
  border-radius: 18px;
  background: linear-gradient(90deg, #e2e8f0, #f8fafc, #e2e8f0);
  background-size: 200%;
  animation: skeleton 1.4s infinite;
}

.skeleton-line {
  height: 16px;
  margin-top: 20px;
  border-radius: 20px;
  background: linear-gradient(90deg, #e2e8f0, #f8fafc, #e2e8f0);
  background-size: 200%;
  animation: skeleton 1.4s infinite;
}

.skeleton-line.short { width: 60%; }

@keyframes skeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ==========================================
   CONTACT
========================================== */

.contact-section { padding: 70px 0; background: var(--bg); }

.contact-details {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact-item {
  /* display: flex; */
  align-items: center;
  gap: 15px;
  padding: 18px;
  background: var(--card-bg);
  border-radius: 16px;
  border: 1px solid var(--border);
}

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

.contact-form {
  background: var(--card-bg);
  padding: 40px;
  border-radius: 28px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.form-control {
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--heading);
}

.form-control:focus {
  border-color: var(--primary);
  box-shadow: none;
}

textarea.form-control { resize: none; }
.contact-form button { padding: 16px 30px; font-weight: 700; border-radius: 14px; }

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

.footer {
  background: #000000;
  padding-top: 100px;
  color: #cbd5e1;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

body.dark-mode .footer { background: #000000; }

.footer-brand { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
.footer-brand h3 { color: #fff; margin: 0; }

.footer h5 {
  color: #fff;
  margin-bottom: 20px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
}

.footer ul { list-style: none; padding: 0; }
.footer ul li { margin-bottom: 12px; }
.footer ul li a { color: #cbd5e1; }
.footer ul li a:hover { color: #fff; padding-left: 6px; }

.social-links { display: flex; gap: 12px; margin-top: 20px; }

.social-links a {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  transition: .3s;
}

.social-links a:hover {
  background: var(--primary);
  transform: translateY(-5px);
}

.newsletter-form .form-control {
  background: rgba(255, 255, 255, .08);
  border: none;
  color: #fff;
}

.footer hr { margin: 50px 0 25px; border-color: rgba(255, 255, 255, .08); }
.footer-bottom { padding-bottom: 30px; font-size: .95rem; }

#newsletter::placeholder{
color: white;
font-size: 14px;
}

/* ==========================================
   WHATSAPP FLOAT
========================================== */

.whatsapp-float {
  position: fixed;
  right: -3vw;
  top: 40vh;
  width: 65px;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  font-size: 1.8rem;
  z-index: 999;
  box-shadow: 0 15px 35px rgba(37, 211, 102, .4);
  animation: pulse2 6s ease-in-out infinite alternate;
}
.arrow-float {
  position: fixed;
  left: 3vw;
  bottom: 1vw;
  width: 65px;
  height: 65px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #083bbd;
  color: #fff;
  font-size: 1.8rem;
  z-index: 999;
  box-shadow: 0 15px 35px rgba(12, 62, 179, 0.4);
  animation: pulse 2s  infinite;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(13, 43, 194, 0.6); background: #083bbd5e;}
  70%  { box-shadow: 0 0 0 25px rgba(37, 211, 102, 0);background: #083bbd; }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); background: #083bbd5e;}
}
@keyframes pulse2 {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .6); right: -3vw; }
  70%  { box-shadow: 0 0 0 25px rgba(37, 211, 102, 0); right:0;}
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); right: -1.5vw;}
}

/* ==========================================
   DARK MODE CARD OVERRIDES
========================================== */

body.dark-mode .blog-card,
body.dark-mode .testimonial-card,
body.dark-mode .timeline-item,
body.dark-mode .contact-form,
body.dark-mode .contact-item { background: var(--card-bg); }

/* ==========================================
   GSAP UTILITY CLASSES
========================================== */

.reveal-up    { opacity: 0; transform: translateY(80px); }
.reveal-left  { opacity: 0; transform: translateX(-80px); }
.reveal-right { opacity: 0; transform: translateX(80px); }
.scale-in     { opacity: 0; transform: scale(.85); }

.char {
  display: inline-block;
  will-change: transform, opacity;
}

.word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  white-space: nowrap;
}

/* ==========================================
   FLOAT ANIMATION
========================================== */

.float { animation: floatY 5s ease-in-out infinite; }

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

/* ==========================================
   GLASSMORPHISM
========================================== */

.glass-card {
  background: rgba(255, 255, 255, .65);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, .35);
  padding: 20px;
  height: 100%;
  border-radius: 25px;
  box-shadow: 10px 10px 38px rgb(186, 180, 180);
}

body.dark-mode .glass-card { background: rgba(17, 24, 39, .65); }

/* ==========================================
   GLOW HOVER
========================================== */

.glow-hover { position: relative; overflow: hidden; }

.glow-hover::after {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(37, 99, 235, .15), transparent);
  top: -50px;
  left: -50px;
  opacity: 0;
  transition: .4s;
}

.glow-hover:hover::after { opacity: 1; }

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

@media (max-width: 1200px) {
  .timeline-wrapper { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
  .timeline-wrapper { grid-template-columns: 1fr; }
  .timeline-line { display: none; }
  .hero-right { margin-top: 60px; }
  .about-highlights { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .stats-card h2 { font-size: 2.4rem; }
  .contact-form { padding: 25px; }
  .footer { text-align: center; }
  .social-links { justify-content: center; }
  .footer-bottom { text-align: center !important; }
}

@media (max-width: 576px) {
  .hero-buttons { flex-direction: column; }
  .hero-buttons .btn { width: 100%; }
  .stat-card { width: 100%; }
  .whatsapp-float { width: 55px; height: 55px; font-size: 1.4rem; right: 15px; bottom: 15px; }
}
.process-section{
    padding:50px 0;
    background:#fff;
}

.timeline{
    position:relative;
    max-width:1000px;
    margin:auto;
    padding:50px 0;
}

.timeline-line{

    position:absolute;
    left:50%;
    top:0;

    width:2px;
    height:100%;

    background:#dcdcdc;

    transform:translateX(-50%);
}

.timeline-progress{

    position:absolute;
    left:50%;
    top:0;

    width:3px;
    height:0;

    background:#2e0c7c;

    transform:translateX(-50%);
}

.timeline-marker{
    position:absolute;
    left:50%;
    top:0;
    width:30px;
    height:30px;
    border-radius:50%;
    transform:translateX(-50%);
    background:linear-gradient(
        135deg,
        #5822c5,
        #5516a3
    );
    border:4px solid #fff;
    z-index:20;
    box-shadow:
      0 0 0 10px rgba(34,197,94,.12),
      0 10px 30px rgba(34,197,94,.35);
}
.future-roadmap-section{
    padding:10px 0;
    position:relative;
    overflow:hidden;
}

.learning-model-section{
    padding:30px 0;
    position:relative;
    overflow:hidden;
}

.mentorship-section{
    padding:100px 0;
    position:relative;
    overflow:hidden;
}

.mentorship-timeline{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    position:relative;
}

.mentorship-timeline::before{
    content:"";
    position:absolute;
    top:55px;
    left:12%;
    width:76%;
    height:3px;

    background:linear-gradient(
        90deg,
        #2563eb,
        #06b6d4
    );

    z-index:0;
}

.mentor-card-pro{
    position:relative;
    z-index:2;

    background:#fff;
    border-radius:24px;

    padding:35px 25px;
    text-align:center;

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

    transition:.4s;
}

.mentor-card-pro:hover{
    transform:translateY(-12px);
    box-shadow:
    0 25px 60px rgba(0,0,0,.15);
}

.mentor-step{
    position:absolute;
    top:15px;
    right:20px;

    font-size:13px;
    font-weight:700;
    color:#2563eb;
}

.mentor-icon{
    width:90px;
    height:90px;

    margin:0 auto 20px;

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

    border-radius:50%;

    background:linear-gradient(
        135deg,
        rgba(37,99,235,.12),
        rgba(6,182,212,.12)
    );

    color:#2563eb;
    font-size:34px;
}

.mentor-card-pro h4{
    margin-bottom:15px;
    font-weight:700;
}

.mentor-card-pro p{
    color:#64748b;
    line-height:1.8;
}

/* Zig-Zag Layout */

.mentor-card-pro:nth-child(even){
    margin-top:60px;
}

/* Responsive */

@media(max-width:991px){

    .mentorship-timeline{
        grid-template-columns:repeat(2,1fr);
    }

    .mentorship-timeline::before{
        display:none;
    }

    .mentor-card-pro:nth-child(even){
        margin-top:0;
    }
}

@media(max-width:576px){

    .mentorship-timeline{
        grid-template-columns:1fr;
    }
}
.learning-process{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:30px;
    position:relative;
}

.learning-process::before{
    content:"";
    position:absolute;
    top:65px;
    left:10%;
    width:80%;
    height:3px;

    background:linear-gradient(
        90deg,
        #2563eb,
        #06b6d4
    );

    z-index:0;
}

.process-card{
    position:relative;
    z-index:2;

    background:#fff;
    padding:35px 25px;
    text-align:center;

    border-radius:24px;

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

    transition:.4s;
}

.process-card:hover{
    transform:translateY(-10px);
    box-shadow:
    0 25px 60px rgba(0,0,0,.15);
}

.process-number{
    position:absolute;
    top:15px;
    right:18px;

    font-size:14px;
    font-weight:700;
    color:#2563eb;
}

.process-icon{
    width:80px;
    height:80px;

    margin:0 auto 20px;

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

    border-radius:50%;

    background:linear-gradient(
        135deg,
        rgba(37,99,235,.12),
        rgba(6,182,212,.12)
    );

    color:#2563eb;
    font-size:30px;
}

.process-card h4{
    margin-bottom:15px;
    font-weight:700;
}

.process-card p{
    color:#64748b;
    line-height:1.8;
}

/* Tablet */

@media(max-width:991px){

    .learning-process{
        grid-template-columns:repeat(2,1fr);
    }

    .learning-process::before{
        display:none;
    }
}


/* Mobile */

@media(max-width:576px){

    .learning-process{
        grid-template-columns:1fr;
    }
}
.process-card:nth-child(even){
    margin-top:60px;
}

.future-roadmap-section::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    background:radial-gradient(
        rgba(37,99,235,.08),
        transparent
    );
    top:-150px;
    right:-150px;
    border-radius:50%;
}

.future-card{
    height:100%;
    padding:40px 30px;
    background:rgba(255,255,255,.75);
    backdrop-filter:blur(20px);

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

    text-align:center;

    transition:.4s;
    position:relative;
    overflow:hidden;

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

.future-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;

    background:linear-gradient(
        90deg,
        #2563eb,
        #06b6d4
    );

    transform:scaleX(0);
    transition:.4s;
}

.future-card:hover::before{
    transform:scaleX(1);
}

.future-card:hover{
    transform:translateY(-12px);
    box-shadow:
    0 25px 60px rgba(0,0,0,.15);
}

.future-icon{
    width:90px;
    height:90px;

    margin:0 auto 25px;

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

    border-radius:50%;

    background:linear-gradient(
        135deg,
        rgba(37,99,235,.15),
        rgba(6,182,212,.15)
    );

    font-size:34px;
    color:#2563eb;
}

.future-card h4{
    margin-bottom:15px;
    font-weight:700;
}

.future-card p{
    color:#64748b;
    line-height:1.8;
}
.timeline-item{

    position:relative;

    width:50%;

    /* padding:80px 60px; */
}

.timeline-item.left{

    left:0;
    text-align:right;
}

.timeline-item.right{

    left:50%;
    text-align:left;
}

.timeline-content{

    background:#fff;

    padding:25px;

    border-radius:15px;

    position:relative;
    z-index:2;

    box-shadow:
    0 10px 30px rgba(0,0,0,.06);

    transition:.4s;
}

.timeline-content h4{

    color:#220c7c;
    font-size:32px;
    margin-bottom:10px;
}
.timeline-item{
    position:relative;
}

.timeline-image{
    position:absolute;
    top:50%;
      width:180px;
    height:120px;
    transform:translateY(-50%);
    z-index:1;
}

.timeline-image img{
    width:100%;
    height:100%;
    object-fit:contain;
    border-radius:20px;

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

    transition:.5s;
}

.timeline-item.left .timeline-image{
    left:105%;
}

.timeline-item.right .timeline-image{
    right:105%;
}
.timeline-visual{
   backdrop-filter:blur(20px);
   background:rgba(255,255,255,.7);
   padding:30px;
   border-radius:25px;
   width:220px;
   box-shadow:0 20px 60px rgba(0,0,0,.1);
}
.timeline-content p{

    color:#666666;
    margin:0;
}

.timeline-item.active .timeline-content{

    transform:translateY(-10px);

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

.strategic-pillars-section{
    position:relative;
}

.section-subtitle{
    max-width:700px;
    margin:15px auto 0;
    color:#6b7280;
}

.pillar-card{
    position:relative;
    background:#fff;
    border-radius:24px;
    padding:40px 30px;
    text-align:center;
    overflow:hidden;
    height:100%;
    transition:.4s ease;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.pillar-card:hover{
    transform:translateY(-10px);
}

.pillar-number{
    position:absolute;
    top:10px;
    right:20px;
    font-size:80px;
    font-weight:800;
    color:rgba(37,99,235,.06);
    line-height:1;
}

.pillar-icon{
    width:70px;
    height:70px;
    margin:0 auto 20px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(37,99,235,.08);
    color:#2563eb;
    font-size:28px;
}

.pillar-card h5{
    font-weight:700;
    margin-bottom:15px;
}

.pillar-card p{
    color:#6b7280;
    margin:0;
    line-height:1.8;
}

.tech-item{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 20px;
}

.tech-name{
    position:absolute;
    top:50%;
    left:50%;

    transform:
        translate(-50%, -50%)
        scale(.7);

    padding:10px 18px;

    border-radius:50px;

    background:linear-gradient(
        135deg,
        #2563eb,
        #06b6d4
    );

    color:#fff;
    font-size:13px;
    font-weight:700;
    letter-spacing:.5px;

    white-space:nowrap;

    opacity:0;
    visibility:hidden;

    transition:.35s ease;

    z-index:20;

    box-shadow:
        0 10px 30px rgba(37,99,235,.35);
}

.tech-item::before{
    content:"";
    position:absolute;
    inset:-10px;

    border-radius:20px;

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

    opacity:0;

    transition:.35s ease;
}

.tech-item:hover::before{
    opacity:1;
}

.tech-item:hover .tech-name{
    opacity:1;
    visibility:visible;

    transform:
        translate(-50%, -50%)
        scale(1);
}

.tech-item:hover img{
    transform:scale(1.15);
    opacity:1;
}

.tech-track:hover{
    animation-play-state:paused;
}
.tech-item{
    min-width:120px;
    height:90px;
}


/* ==========================================
PREMIUM TESTIMONIALS V2
========================================== */

.testimonial-section{
padding:100px 0;
position:relative;
overflow:hidden;
}

.testimonial-section::before{
content:"";
position:absolute;
top:-200px;
right:-200px;
width:500px;
height:500px;
border-radius:50%;


background:
radial-gradient(
    rgba(37,99,235,.08),
    transparent
);


}

.testimonialSwiper{
padding:40px 0 80px;
}

.testimonial-card{


position:relative;

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

backdrop-filter:
blur(20px);

border-radius:30px;

padding:40px 35px;

overflow:hidden;

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

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

transition:.5s ease;

height:100%;


}

.testimonial-card::before{


content:"❝";

position:absolute;

top:15px;
right:25px;

font-size:120px;
line-height:1;

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

font-family:serif;


}

.testimonial-card::after{


content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:4px;

background:
linear-gradient(
    90deg,
    #2563eb,
    #06b6d4
);

transform:scaleX(0);

transition:.5s;


}

.testimonial-card:hover::after{
transform:scaleX(1);
}

.testimonial-card:hover{


transform:
translateY(-15px);

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


}

.rating{


font-size:22px;
color:#fbbf24;

margin-bottom:20px;


}

.testimonial-card p{


font-size:16px;
line-height:1.9;

color:#64748b;

margin-bottom:25px;


}

.client-info{


display:flex;
align-items:center;
gap:15px;


}

.client-info img{


width:75px;
height:75px;

border-radius:50%;

object-fit:cover;

border:4px solid white;

box-shadow:
0 10px 25px rgba(0,0,0,.12);

transition:.4s;


}

.testimonial-card:hover .client-info img{
transform:scale(1.08);
}

.client-info h5{
margin:0;
font-weight:700;
}

.client-info span{
color:#64748b;
font-size:14px;
}

.swiper-slide-active .testimonial-card{


transform:translateY(-12px);

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


}

.swiper-pagination-bullet{
width:12px;
height:12px;
}

.swiper-pagination-bullet-active{
background:#2563eb;
transform:scale(1.3);
}


/* =========================================
INSTITUTION TESTIMONIALS PREMIUM
========================================= */

.institution-testimonials{


padding:100px 0;
position:relative;
overflow:hidden;


}

.institution-testimonials::before{


content:"";

position:absolute;

top:-200px;
left:-200px;

width:500px;
height:500px;

border-radius:50%;

background:
radial-gradient(
    rgba(37,99,235,.08),
    transparent
);


}

.institutionSwiper{


padding:40px 0 80px;


}

.institution-card{


position:relative;

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

backdrop-filter:blur(25px);

border-radius:30px;

padding:40px;

overflow:hidden;

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

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

transition:.5s ease;

min-height:420px;


}

.quote-bg{


position:absolute;

top:20px;
right:25px;

font-size:90px;

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


}

.institution-top{


display:flex;
align-items:center;
gap:18px;

margin-bottom:25px;


}

.institution-top img{


width:85px;
height:85px;

border-radius:50%;

object-fit:cover;

border:4px solid #fff;

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

transition:.4s;


}

.institution-card:hover img{


transform:scale(1.08);


}

.institution-top h4{


margin:0;
font-weight:700;


}

.institution-top span{


color:#64748b;
font-size:14px;


}

.stars{


color:#fbbf24;

font-size:22px;

margin-bottom:20px;


}

.institution-card p{


color:#64748b;

line-height:1.9;

margin-bottom:30px;


}

.institution-badge{


display:inline-block;

padding:10px 18px;

border-radius:50px;

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

color:#2563eb;

font-size:12px;
font-weight:700;


}

.swiper-slide{


transition:.5s ease;


}

.swiper-slide-active{


transform:scale(1.08);


}

.swiper-slide-prev,
.swiper-slide-next{


transform:scale(.88);
opacity:.65;


}

.swiper-slide-active .institution-card{


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


}

.institution-card:hover{


transform:
translateY(-15px);


}

.institutionSwiper .swiper-pagination-bullet{


width:12px;
height:12px;


}

.institutionSwiper .swiper-pagination-bullet-active{


background:#2563eb;
transform:scale(1.4);


}


.institution-card{
    min-height:420px;
    display:flex;
    flex-direction:column;
    font-size: 14px;
    height: 450px;
    
}

.institution-card p{
    min-height:100px;
    line-height:1.5;
    text-align: justify;
}

.institution-badge{
    margin-top:auto;
    text-align: center;
}


.event-gallery-section{
    padding:100px 0;
    overflow:hidden;
}

.embla{
    overflow:hidden;
}

.embla__container{
    display:flex;
}

.embla__slide{
    flex:0 0 50%;
    padding:15px;
}

.event-card{

    background:#fff;

    border-radius:30px;

    overflow:visible;

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

    transition:.4s ease;
}

.event-card:hover{
    transform:translateY(-10px);
}

.event-image{
    position:relative;
    height:330px;
    overflow:hidden;
    border-radius:30px 30px 0 0;
}

.event-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.6s;
}

.event-card:hover img{
    transform:scale(1.08);
}

.event-image::after{

    content:"";

    position:absolute;
    inset:0;

    background:
    linear-gradient(
    to top,
    rgba(0,0,0,.75),
    rgba(0,0,0,.15),
    transparent);
}

.event-overlay{

    position:absolute;

    left:35px;
    top:35px;

    z-index:2;

    color:#fff;
}

.event-category{

    font-size:13px;
    font-weight:700;
    letter-spacing:1px;

    color:#60a5fa;
}

.event-overlay h3{

    margin-top:12px;

    font-size:2rem;
    font-weight:800;

    line-height:1.2;
}

.event-overlay h3 span{

    display:block;

    color:#60a5fa;

    font-family:cursive;
    font-weight:400;
}

.event-date{

    position:absolute;

    top:20px;
    right:-20px;

    width:95px;
    height:140px;

    background:
    linear-gradient(
    180deg,
    #2563eb,
    #1d4ed8);

    color:#fff;

    border-radius:22px;

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

    z-index:3;

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

.event-date strong{
    font-size:42px;
    line-height:1;
}

.event-date span{
    font-size:16px;
    font-weight:700;
}

.event-date small{
    font-size:13px;
}

.event-footer{

    padding:25px;

    display:flex;
    align-items:center;
    gap:20px;
}

.event-icon{

    min-width:70px;
    width:70px;
    height:70px;

    border-radius:50%;

    background:#eef4ff;

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

    color:#2563eb;

    font-size:26px;
}

.event-footer p{

    flex:1;

    margin:0;

    color:#64748b;

    line-height:1.8;
}

.event-by{

    border-left:1px solid #e5e7eb;

    padding-left:20px;
}

.event-by span{
    display:block;
    color:#64748b;
}

.event-by strong{
    color:#2563eb;
}

@media(max-width:991px){

    .embla__slide{
        flex:0 0 100%;
    }

    .event-image{
        height:320px;
    }

    .event-overlay h3{
        font-size:1.5rem;
    }
}


.blogSwiper{
    padding:15px 5px 60px;
}

.blog-card{
    height:100%;
    display:flex;
    flex-direction:column;
    border-radius:18px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.3s;
}

.blog-card:hover{
    transform:translateY(-8px);
}

.blog-image{
    height:220px;
    overflow:hidden;
}

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

.blog-content{
    padding:22px;
    display:flex;
    flex-direction:column;
    flex:1;
}

.blog-title{
    height:60px;
    overflow:hidden;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;

    font-weight:700;
}

.blog-text{

    height:72px;
    overflow:hidden;

    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;

    margin:15px 0;
    color:#666;
}

.blog-btn{

    margin-top:auto;

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

    text-decoration:none;
    font-weight:600;
}