:root {
  /* COLORS */
  --primary: #4F46E5;
  --primary-hover: #4338CA;

  --accent: #F97316;

  --bg-main: #0F172A;
  --bg-section: #020617;
  --bg-card: #1E293B;

  --text-main: #F8FAFC;
  --text-muted: #94A3B8;

  --border: #334155;

  /* SPACING SYSTEM */
  --space-xs: 6px;
  --space-sm: 10px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;

  /* RADIUS */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* SHADOW */
  --shadow-soft: 0 10px 30px rgba(0,0,0,0.2);
  --shadow-hover: 0 20px 50px rgba(0,0,0,0.35);
}

body {
  font-family: "Inter", sans-serif;
  background: var(--bg-main);
  color: var(--text-main);
  line-height: 1.6;
}

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

html, body {
  width: 100%;
  height: 100%;
}

.container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}


/* ================= NAVBAR (FINAL CLEAN VERSION) ================= */

.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;

  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);

  padding: 18px 0;
  transition: all 0.3s ease;
}

.navbar.scrolled {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

/* LAYOUT */
.nav-container{
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:32px;
  list-style:none;

  margin-left:auto;
  margin-right:auto;
}

/* LOGO */
.logo {
  justify-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;

  font-family: "Poppins", sans-serif;
  font-weight: 600;
  color: #0f172a;
}

.logo img {
  width: 28px;
}

/* NAV LINKS */
.nav-links {
  display: flex;
  gap: 48px;
  list-style: none;
  justify-content: center;
}

.nav-links a {
  position: relative;
  color: #475569;
  text-decoration: none;
  font-size: 15px;
  transition: 0.2s ease;
  white-space: nowrap;
}

.nav-links a:hover {
  color: #0f172a;
}

/* underline animation */
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0%;
  height: 2px;
  background: var(--accent);
  transition: width 0.25s ease;
}

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

/* BUTTONS */
.nav-btn {
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Profile */
.nav-btn-secondary {
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(0,0,0,0.08);
  color: #0f172a;
}

.nav-btn-secondary:hover {
  background: rgba(15, 23, 42, 0.08);
}

/* Logout */
.nav-btn-primary {
  background: linear-gradient(135deg, #ff7a18, #ff9a3c);
  color: white;
  border: none;
}

.nav-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(249, 115, 22, 0.3);
}

/* AUTH SECTION */
#nav-auth {
  justify-self: end;
  display: flex;
  gap: 10px;
  align-items: center;
}

#nav-auth a,
#nav-auth button{
  white-space: nowrap;
}

/* MENU ICON */
.menu-toggle {
  display: none;
  font-size: 22px;
  cursor: pointer;
  color: #0f172a;
}


/* ================= MOBILE ================= */

@media (max-width: 768px) {

  .logo{
    width: 16px;
    margin-right: 2px;
  }

  .logo span{
    display: none;
  }

  .nav-container{
    display:flex;
    justify-content:space-between;
    align-items:center;
  }

  .menu-toggle {
    display: block;
    font-size: 24px;
  }

  .nav-links {
    position: absolute;
    top: 80px;
    left: 0;
    width: 100%;

    background: white;
    border-top: 1px solid #eee;

    display: none;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 25px 0;

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

  .nav-links.active {
    display: flex;
  }
}

@media (max-width:768px){

  .nav-links{
    transform: translateX(-100%);
    transition: 0.3s ease;
  }

  .nav-links.active{
    transform: translateX(0);
  }

}

/* HERO */

.hero {
  background: radial-gradient(
      circle at top,
      rgba(79, 70, 229, 0.15),
      transparent 40%
    ),
    linear-gradient(180deg, #0F172A, #020617);

  padding: 100px 0 80px;
  text-align: center;
  position: relative;
}

.hero-badge {
  display: inline-block;
  background: rgba(249, 115, 22, 0.15);
  color: var(--accent);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  margin-bottom: var(--space-md);
}

.hero h1 {
  font-size: 44px;
  font-weight: 600;
  line-height: 1.3;
  max-width: 700px;
  margin: 0 auto var(--space-md);
}

.highlight {
  color: var(--accent);
}

.hero p {
  font-size: 16px;
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto var(--space-xl);
}

.hero h1 {
	font-size: 40px;
}

@media (max-width: 768px) {
	.hero h1 {
		font-size: 28px;
	}

	.hero-sub {
		font-size: 14px;
	}
}

/* SEARCH CARD */

.search-card {
  background: rgba(255, 255, 255, 0.95);
  padding: 28px;
  border-radius: var(--radius-lg);

  box-shadow: 0 25px 60px rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.2);

  max-width: 700px;
  margin: 0 auto;
  backdrop-filter: blur(10px);
   overflow: visible !important;
}

/* INPUT BASE */
.search-card input,
.search-card select {
  width: 100%;
  padding: 12px 14px;

  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;

  font-size: 14px;
  color: #0f172a;

  transition: all 0.2s ease;
}

/* PLACEHOLDER */
.search-card input::placeholder {
  color: #94a3b8;
}

/* HOVER */
.search-card input:hover,
.search-card select:hover {
  border-color: #cbd5f5;
}

/* FOCUS (important) */
.search-card input:focus,
.search-card select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
  background: white;
}

.search-card input,
.search-card select {
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.search-grid {
  gap: 12px;
}

.search-card button {
  width: 100%;

  padding: 14px;
  margin-top: 10px;

  font-size: 16px;
  font-weight: 600;

  border-radius: 12px;
  border: none;

  background: linear-gradient(135deg, #ff7a18, #ff9a3c);
  color: white;

  cursor: pointer;
  transition: all 0.25s ease;
}

.search-card {
  animation: fadeUp 0.6s ease;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.search-card button:active {
  transform: scale(0.98);
}

.search-card button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(249,115,22,0.35);
}

/* ================= TABLET ================= */
@media (max-width: 900px) {

  .search-card {
    padding: 22px;
  }

  .search-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

}


/* ================= MOBILE ================= */
@media (max-width: 600px) {

  .search-card {
    padding: 18px;
  }

  .search-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

}

@media (max-width: 600px) {
  .search-card button {
    padding: 15px;
    font-size: 16px;
  }
}

.input-wrapper{
  position: relative;
}

.suggestions-box {
  position: absolute;
  background: #1f2937;
  border-radius: 6px;
  width: 100%;
  max-height: 150px;
  overflow-y: auto;
  z-index: 1000;
}

.suggestion-item {
  padding: 8px;
  cursor: pointer;
}

.suggestion-item:hover {
  background: #374151;
}

.banner {
  background: #22c55e;
  padding: 40px 0;
}

.banner-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 30px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.banner-image img {
  width: 280px;
  max-width: 100%;
}

.banner-content h2 {
  color: white;
  font-weight: 600;
  margin-bottom: 12px;
  font-size: 30px;
}

.banner-content a {
  display: inline-block;
  background: white;
  color: #22c55e;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 500;
  text-decoration: none;
  transition: 0.2s;
}

.banner-content a:hover {
  background: #16a34a;
  color: white;
}

@keyframes floatCombo {
  0% {
    transform: translate(0px, 0px);
  }
  50% {
    transform: translate(10px, -6px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

.banner-image img {
  animation: floatCombo 5s ease-in-out infinite;
  will-change: transform;
}

.banner-image img:hover {
  animation-play-state: paused;
}

@media (max-width: 768px) {
  .banner-container {
    flex-direction: column;
    text-align: center;
  }

  .banner-image img {
    width: 200px;
  }
}

.trust-line {
	font-size: 14px;
	margin-top: 10px;
	color: #64748b;
}

/* AI SECTION */

.ai-match {
  background: linear-gradient(
    135deg,
    #f97316,
    #ea580c
  );

  opacity: 0.95; /* subtle difference from active sections */
  padding: 100px 20px 80px;
}

.ai-inner{
    max-width:1200px;
    margin:0 auto;
    padding:0 40px;
}

.ai-badge {
  background: rgba(255,255,255,0.9);
  color: #ea580c;

  padding: 6px 14px;
  border-radius: 999px;

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

  letter-spacing: 0.5px;
}

.ai-match h2 {
	font-size: 36px;
	font-family: "Poppins";
	margin-bottom: 10px;
}

.ai-features {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 15px;
  margin-top: 40px;
  padding-bottom: 20px;
}

/* Tablet */
@media (max-width: 900px) {
	.ai-features {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Mobile */
@media (max-width: 600px) {
	.ai-features {
		grid-template-columns: 1fr;
	}
}

.ai-card {
  background: rgba(255,255,255,0.95);
  color: #1f2937;

  border-radius: 16px;
  padding: 22px;

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


/* Explore section */

/* Section spacing */
.explore {
  padding: 100px 0;
  margin: auto;
  background: radial-gradient(circle at top, #0a2540, #020617);
}

.explore .container {
  max-width: 1100px;
  margin: 0 auto;   /* centers horizontally */
  text-align: center;
}

/* Title */
.explore-title {
	color: white;
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 20px;
}

.explore-title span {
  color: #ff7a18; /* your orange theme */
}

.explore-sub {
  color: #dadada;
  margin-bottom: 20px;
}

/* Outer card (THIS is key) */
.instagram-card {
  background: rgba(255, 255, 255, 0.95);
  padding: 26px;
  border-radius: 18px;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255,255,255,0.05);
  backdrop-filter: blur(10px);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.instagram-card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}

.instagram-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 20px;
  background: linear-gradient(120deg, #ff7a18, transparent, #ff7a18);
  opacity: 0.12;
  z-index: -1;
  animation: glowMove 6s linear infinite;
}

@keyframes glowMove {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Wrapper */
.instagram-wrapper {
  border-radius: 10px;
  overflow: hidden;
}

/* Remove ugly bottom branding spacing */
.instagram-card iframe {
  border-radius: 10px;
}

.reveal-section {
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-section.active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* HOW IT WORKS */

.how {
  text-align: center;
  padding: 90px 20px;
}

.how h2 {
  font-size: 28px;
  margin-bottom: 8px;
}

.how p {
  color: #94a3b8;
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 50px;
}

.step {
  background: rgba(255,255,255,0.95);
  padding: 26px 20px;
  border-radius: 16px;

  text-align: center;

  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.step h4 {
  font-size: 16px;
  margin-bottom: 6px;
  color: #0f172a;
}

.step p {
  font-size: 14px;
  color: #64748b;
  line-height: 1.4;
}

.step:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}

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

@media (max-width: 600px) {
  .steps {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 901px) {
  .step {
    position: relative;
  }

  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -12px;
    width: 24px;
    height: 2px;
    background: rgba(255,255,255,0.2);
  }
}


.num {
  width: 40px;
  height: 40px;

  border-radius: 50%;
  background: linear-gradient(135deg, #ff7a18, #ff9a3c);

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

  color: white;
  font-weight: 600;

  margin: 0 auto 12px;
}



/* TRUST */
.trust {
	position: relative;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;

  text-align: center;
  padding: 60px 30px;

  max-width: 900px;
  margin: 80px auto;

  box-shadow: 0 20px 60px rgba(0,0,0,0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.trust h2 {
  font-size: 22px;
  color: #0f172a;
  margin-bottom: 10px;
}

.trust p {
  font-size: 14px;
  color: #64748b;
  max-width: 600px;
  margin: 0 auto;
}

.trust::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  box-shadow: 0 0 80px rgba(34,197,94,0.08);
  pointer-events: none;
}

.verify-btn {
  margin-top: 20px;

  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;

  font-size: 14px;
  padding: 12px 22px;

  border-radius: 10px;
  border: none;

  cursor: pointer;
  transition: all 0.25s ease;
}

.verify-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(34,197,94,0.3);
}

/* ================= WHY SECTION ================= */

.why {
  background: linear-gradient(135deg, #f97316, #ea580c);
  padding: 100px 20px;
  text-align: center;
}

.why h2 {
  font-size: 30px;
  margin-bottom: 10px;
  color: white;
}

/* GRID */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 50px;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .why-grid {
    grid-template-columns: 1fr;
  }
}

/* CARD (targeting your existing divs) */
.why-grid > div {
  background: rgba(255,255,255,0.95);
  padding: 24px;
  border-radius: 16px;

  text-align: center;

  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* HOVER */
.why-grid > div:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}

/* TEXT */
.why-grid h4 {
  font-size: 16px;
  color: #0f172a;
  margin-bottom: 6px;
}

.why-grid p {
  font-size: 14px;
  color: #64748b;
}

/* ICON PLACEHOLDER (optional but powerful) */
.why-grid > div::before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto 12px;

  border-radius: 10px;
  background: rgba(249,115,22,0.15);
}

/* founders */
.founders {
  background: linear-gradient(135deg, #0f172a, #020617);
  color: white;
  padding: 80px 20px;
  text-align: center;
}

.heading h1 {
  font-size: 28px;
  margin-bottom: 8px;
}

.heading h4 {
  font-weight: 400;
  color: #94a3b8;
  margin-bottom: 20px;
}

.btn-founder a {
  display: inline-block;

  padding: 12px 22px;
  border-radius: 10px;

  background: linear-gradient(135deg, #ff7a18, #ff9a3c);
  color: white;

  text-decoration: none;
  font-weight: 500;

  transition: all 0.25s ease;
}

.btn-founder a:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(249,115,22,0.35);
}

.founders::before {
  content: "";
  position: absolute;
  top: -100px;
  left: -100px;
  width: 250px;
  height: 250px;
  background: rgba(255,255,255,0.05);
  border-radius: 50%;
  filter: blur(80px);
}

.founders {
  position: relative;
  overflow: hidden;
}

/* SUBJECTS */

/* SECTION */
.subjects {
  text-align: center;
  padding: 70px 20px;
}

.subjects h2 {
  font-size: 22px;
  margin-bottom: 20px;
}

/* GRID */
.subject-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

/* CHIPS (targeting your divs directly) */
.subject-grid div {
  padding: 10px 18px;
  border-radius: 999px;

  background: rgba(255,255,255,0.08);
  color: #e2e8f0;

  font-size: 14px;
  font-weight: 500;

  border: 1px solid rgba(255,255,255,0.1);

  cursor: pointer;
  transition: all 0.25s ease;
}

/* HOVER */
.subject-grid div:hover {
  background: rgba(255,255,255,0.15);
  color: white;
  border-color: rgba(255,255,255,0.3);

  transform: translateY(-2px);
}

/* ACTIVE (optional - add class later if needed) */
.subject-grid div.active {
  background: linear-gradient(135deg, #ff7a18, #ff9a3c);
  color: white;
  border: none;
}

/* REMOVE BLUE TEXT SELECTION ISSUE */
.subject-grid div::selection {
  background: transparent;
}

/* CTA */

.tutor-cta {
  background: linear-gradient(135deg, #0f172a, #020617);
  padding: 100px 20px;
  text-align: center;
}

.tutor-cta-inner {
  max-width: 700px;
  margin: 0 auto;

  background: rgba(255,255,255,0.04);
  padding: 50px 30px;

  border-radius: 20px;

  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.08);
}

.tutor-cta h2 {
  font-size: 28px;
  margin-bottom: 10px;
}

.tutor-cta p {
  color: #94a3b8;
  font-size: 15px;
  margin-bottom: 25px;
}

.tutor-cta .cta-btn {
  padding: 14px 26px;
  font-size: 15px;
  border-radius: 12px;
}

.tutor-cta .cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(249,115,22,0.35);
}

/* FOOTER */
.footer {
	background: #0b2a5b;
	color: rgba(255, 255, 255, 0.7);
	padding: 50px 20px 20px;
}

.footer-container {
	display: flex;
	justify-content: space-between;
	/*important */
	flex-wrap: wrap;
	gap: 30px;
	max-width: 1200px;
	margin: 0 auto;
}

.footer-column {
	flex: 1;
	min-width: 180px;
}

.footer-column h3 {
	color: white;
	margin-bottom: 10px;
}

.footer-column a {
	display: block;
	margin: 6px 0;
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	transition: 0.2s;
}

.footer-column a:hover {
	color: #f97316;
}

.copyright {
	text-align: center;
	margin-top: 30px;
	font-size: 14px;
	width: 100%;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-top: 15px;
}

/*responsive*/

/* Responsive Tutor Cards */

/* MOBILE */
@media (max-width: 600px) {
	.tutor-grid {
		grid-template-columns: 1fr;
	}
}

/* TABLET */
@media (max-width: 900px) {
	.tutor-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* find tutors page */
.find-header {
	background: #0b1f4d;
	color: white;
	text-align: center;
	padding: 70px 20px;
}

.find-header h1 {
	font-family: "Poppins";
	font-size: 40px;
	margin-bottom: 10px;
}

.find-header p {
	opacity: 0.9;
}


/* CARD WRAPPER */

#tutor-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.tutor-card {
	background: #fff;
	border-radius: 16px;
	padding: 16px;
	margin: 15px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
	transition: 0.3s ease;
	width: 260px;
}

.tutor-card:hover {
	transform: translateY(-5px);
}

/* INNER LAYOUT */
.tutor-card-inner {
	display: flex;
	gap: 12px;
}

/* IMAGE */
.tutor-img {
	width: 60px;
	height: 60px;
	border-radius: 50%;
}

/* INFO */
.tutor-info h3 {
	margin: 0;
	font-size: 18px;
}

.subject {
	font-size: 14px;
	color: #666;
	margin: 4px 0;
}

/* META */
.meta {
	font-size: 12px;
	color: #888;
	display: flex;
	gap: 8px;
}

/* BOTTOM */
.bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 10px;
}

.price {
	font-weight: bold;
	color: #ff6b00;
}

/* BUTTON */
.view-btn {
	background: #ff6b00;
	color: white;
	border: none;
	padding: 6px 12px;
	border-radius: 8px;
	cursor: pointer;
}

.view-btn:hover {
	background: #e85d00;
}

/*filter*/
.filters {
	background: white;
	padding: 30px 0;
	border-bottom: 1px solid #eee;
}

.filter-container {
	width: 90%;
	max-width: 1100px;
	margin: auto;

	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 15px;
}

.filter-container input,
.filter-container select {
	padding: 12px;
	border-radius: 8px;
	border: 1px solid #ddd;
	font-size: 14px;
}

.filter-container button {
	background: #f97316;
	color: white;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	font-weight: 600;
}

.tutor-results {
	padding: 80px 20px;
}

.tutor-results h2 {
	text-align: center;
	margin-bottom: 40px;
	font-family: "Poppins";
	font-size: 32px;
}

.tutor-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	max-width: 1100px;
	margin: auto;
}

.tutor-card {
	background: white;
	padding: 25px;
	border-radius: 16px;
	text-align: center;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.tutor-card img {
	width: 90px;
	height: 90px;
	border-radius: 50%;
	margin-bottom: 15px;
}

.tutor-card h3 {
	color: #0b1f4d;
	margin-bottom: 5px;
}

.tutor-card p {
	font-size: 14px;
	color: #64748b;
}

.tutor-card button {
	margin-top: 15px;
	background: #f97316;
	color: white;
	border: none;
	padding: 10px 18px;
	border-radius: 8px;
	cursor: pointer;
}

.load-more {
	text-align: center;
	margin-bottom: 80px;
}

.load-more button {
	padding: 12px 25px;
}

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

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

@media (max-width: 600px) {
	.tutor-grid {
		grid-template-columns: 1fr;
	}

	.filter-container {
		grid-template-columns: 1fr;
	}
}

/* ================= FIND TUTORS PAGE ================= */


/* HEADER */

.find-header{
  background:
    linear-gradient(rgba(2,6,23,0.75), rgba(2,6,23,0.88)),
    linear-gradient(135deg,#0b1f4d,#020617);

  color:white;

  text-align:center;

  padding:110px 20px 90px;
}

.find-header h1{
  font-size:54px;

  font-family:"Poppins", sans-serif;

  margin-bottom:18px;

  line-height:1.2;
}

.find-header p{
  color:#cbd5e1;

  font-size:16px;

  line-height:1.8;
}


/* RESULTS SECTION */

.tutor-results{
  background:#020b24;

  padding:90px 20px 120px;

  min-height:100vh;
}

.tutor-results .container{
  max-width:1280px;

  margin:auto;
}

.tutor-results h2{
  text-align:center;

  color:white;

  font-size:42px;

  margin-bottom:60px;

  font-family:"Poppins", sans-serif;
}


/* GRID */

.tutor-grid{
  display:grid;

  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

  gap:32px;

  align-items:stretch;
}


/* CARD */

.tutor-card{
  background:white;

  border-radius:24px;

  padding:32px 28px;

  box-shadow:0 18px 45px rgba(0,0,0,0.15);

  transition:0.35s ease;

  display:flex;

  flex-direction:column;

  justify-content:space-between;

  min-height:100%;
}

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

  box-shadow:0 25px 60px rgba(0,0,0,0.25);
}


/* TITLE */

.tutor-card h3{
  font-size:28px;

  color:#0f172a;

  margin-bottom:18px;

  text-transform:capitalize;

  font-family:"Poppins", sans-serif;
}


/* INFO */

.tutor-card p{
  color:#475569;

  line-height:1.8;

  margin-bottom:8px;

  font-size:15px;

  word-break:break-word;
}


/* DESCRIPTION */

.tutor-card .description{
  margin-top:14px;

  color:#64748b;

  line-height:1.9;
}


/* BUTTON AREA */

.tutor-actions{
  display:flex;

  gap:14px;

  margin-top:24px;
}


/* BUTTONS */

.tutor-actions button,
.tutor-actions a{

  flex:1;

  text-align:center;

  padding:13px 16px;

  border-radius:12px;

  text-decoration:none;

  font-weight:600;

  border:none;

  cursor:pointer;

  transition:0.25s ease;
}


/* PROFILE BUTTON */

.view-profile-btn{
  background:#f1f5f9;

  color:#0f172a;
}


/* REQUEST BUTTON */

.request-btn{
  background:linear-gradient(135deg,#ff7a18,#ff9a3c);

  color:white;
}


/* HOVER */

.view-profile-btn:hover,
.request-btn:hover{
  transform:translateY(-2px);
}


/* EMPTY STATE */

.no-results{
  color:#cbd5e1;

  text-align:center;

  font-size:18px;
}


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


/* TABLET */

@media (max-width:900px){

  .find-header h1{
    font-size:42px;
  }

  .tutor-results h2{
    font-size:34px;
  }

}


/* MOBILE */

@media (max-width:600px){

  .find-header{
    padding:85px 18px 70px;
  }

  .find-header h1{
    font-size:34px;
  }

  .find-header p{
    font-size:14px;
  }

  .tutor-results{
    padding:70px 18px 90px;
  }

  .tutor-results h2{
    font-size:28px;

    margin-bottom:40px;
  }

  .tutor-grid{
    grid-template-columns:1fr;

    gap:24px;
  }

  .tutor-card{
    padding:24px 20px;
  }

  .tutor-card h3{
    font-size:24px;
  }

  .tutor-card p{
    font-size:14px;
  }

  .tutor-actions{
    flex-direction:column;
  }

}

/* .tutor-profile page*/

/* PROFILE HEADER */

.tutor-profile {
	padding: 80px 20px;
	background: #f8fafc;
}

.tutor-hero .cta-btn {
	margin-top: 15px;
}

.profile-container {
	display: flex;
	align-items: center;
	gap: 40px;
	max-width: 1000px;
	margin: auto;
}

.profile-img {
	width: 160px;
	height: 160px;
	border-radius: 50%;
	object-fit: cover;
}

.profile-info h1 {
	font-family: "Poppins";
	margin-bottom: 10px;
}

.rating {
	color: #f97316;
	font-weight: 600;
}

.price {
	font-size: 20px;
	font-weight: 600;
	margin: 10px 0;
}

#book-btn {
	background: #f97316;
	color: white;
	border: none;
	padding: 10px 18px;
	border-radius: 8px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
}

#book-btn:hover {
	opacity: 0.9;
	background-color: white;
	border: 0.5px solid #f97316;
	color: #f97316;
}

/* ABOUT */

.about-tutor {
	padding: 60px 20px;
	max-width: 900px;
	margin: auto;
}

.about-tutor h2 {
	margin-bottom: 15px;
}

/* SUBJECTS */

.subjects-taught {
	padding: 60px 20px;
	background: white;
}

.subject-list {
	display: flex;
	gap: 15px;
	flex-wrap: wrap;
	margin-top: 20px;
}

.subject-list span {
	background: #eef2ff;
	padding: 8px 15px;
	border-radius: 20px;
}

.subject-pill {
	display: inline-block;
	background: #e2e8f0;
	padding: 8px 14px;
	border-radius: 20px;
	margin-right: 10px;
	margin-top: 10px;
	font-size: 14px;
	border: 0.02px solid #0b2a5b;
}

/* REVIEWS */

.review-card {
	background: #f1f5f9;
	padding: 20px;
	border-radius: 12px;
	margin-top: 15px;
	margin-bottom: 15px;
}

.review-card:hover {
	border: 0.5px solid #f97316;
	box-shadow: 3px 3px 5px #0b2a5b3a;
}

.stars i {
	color: #fbbf24;
	margin-right: 3px;
}

/* become tutor */
/* ================= TUTOR HERO ================= */

.tutor-hero{
    background:#0b1f4d;
    color:white;
    text-align:center;

    padding:100px 20px 80px;
}

.tutor-hero h1{
    font-family:"Poppins";
    font-size:42px;
    margin-bottom:14px;
}

.tutor-hero p{
    max-width:650px;
    margin:0 auto 28px;

    line-height:1.7;
    opacity:0.9;
}


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

.tutor-form{
    padding:90px 20px;
    background:#081633;
}

.tutor-form h2{
    text-align:center;
    color:white;

    margin-bottom:60px;

    font-size:34px;
    font-family:"Poppins";
}

.tutor-form form{
    max-width:760px;
    margin:0 auto;
}


/* FORM GROUP */

.form-group{
    margin-bottom:55px;
}

.form-group h3{
    color:white;

    margin-bottom:24px;

    font-size:28px;
    font-family:"Poppins";
}


/* GRID */

.form-grid input:first-child,
.form-grid textarea,
.form-grid span{
    grid-column: 1 / -1;
}

.form-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:18px;
}


/* INPUTS */

.tutor-form input,
.tutor-form select,
.tutor-form textarea{

    width:100%;

    padding:15px 16px;

    border-radius:12px;
    border:1px solid rgba(255,255,255,0.08);

    background:white;

    font-size:15px;

    outline:none;
    transition:0.25s ease;
}

.tutor-form input:focus,
.tutor-form select:focus,
.tutor-form textarea:focus{
    border-color:#f97316;
    box-shadow:0 0 0 4px rgba(249,115,22,0.12);
}


/* TEXTAREA */

.tutor-form textarea{
    min-height:140px;
    resize:vertical;
    margin-top:10px;
}

.form-grid span{
    color: rgba(255,255,255,0.8);
    font-size: 14px;
    margin-top: -6px;
}


/* BUTTON */

.tutor-form button{
    width:100%;
    margin-top:10px;
}


/* BENEFITS */

.tutor-benefits{
    padding:90px 20px;
    text-align:center;
}

.benefits-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:24px;

    max-width:1100px;
    margin:50px auto 0;
}

.benefit-card{
    background:white;

    padding:28px;

    border-radius:18px;

    box-shadow:0 10px 25px rgba(0,0,0,0.05);
}


/* ================= MOBILE ================= */

@media (max-width:768px){

    .tutor-hero h1{
        font-size:34px;
    }

    .tutor-form h2{
        font-size:28px;
    }

    .form-group h3{
        font-size:24px;
    }

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

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

/* =========================
TUTOR PROFILE PAGE FIXES
========================= */

/* FORM CONTAINER SPACING */

.tutor-form form {
	padding: 40px 35px;
}

/* SECTION STRUCTURE (GRID SYSTEM) */

.form-group {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-bottom: 30px;
}

/* HEADINGS */

.tutor-form h2 {
	margin-bottom: 30px;
}

.form-group h3 {
	grid-column: 1 / -1;
	margin-bottom: 5px;
	font-weight: 600;
}

/* DESKTOP LAYOUT (2-COLUMN CLEAN GRID) */

@media (min-width: 768px) {
	.form-group {
		grid-template-columns: 1fr 1fr;
	}
}

/* FULL WIDTH FIELDS (IMPORTANT STRUCTURE) */

#name,
#subject {
	grid-column: 1 / -1;
}

.form-group textarea {
	grid-column: 1 / -1;
	margin-top: 5px;
}

/* INPUT SPACING CONSISTENCY */

.form-group input,
.form-group select,
.form-group textarea {
	margin: 0;
}

/* PLACEHOLDER POLISH */

input::placeholder,
textarea::placeholder {
	color: #999;
	font-size: 13px;
}

/* BUTTON SPACING */

#tutorForm .cta-btn {
	width: 100%;
	margin-top: 20px;
	padding: 14px;
}

/* SUBTLE ANIMATION */

.tutor-form form {
	animation: fadeUp 0.5s ease;
}

@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(15px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* BUTTON CLICK FEEDBACK */

.cta-btn:active {
	transform: scale(0.97);
}

/*login page*/
.login-section {
	height: 80vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #f8fafc;
}

.login-card {
	background: white;
	padding: 40px;
	border-radius: 16px;
	width: 350px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	text-align: center;
}

.login-card h2 {
  color: #081633;
	margin-bottom: 20px;
	font-family: "Poppins";
}

.login-card form {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.login-card input {
	padding: 12px;
	border-radius: 8px;
	border: 1px solid #ddd;
}

.forgot-password {
	margin: 5px;

	a {
		text-decoration: none;
		color: #f97316;
	}

}

.signup-link {
  color: #081633;
	margin-top: 15px;
	font-size: 14px;
}

.signup-link a {
	color: #22c55e;
}

 /* ================= LOGIN PAGE ================= */


/* BODY */

body{
  background:
    radial-gradient(circle at top left,
    rgba(249,115,22,0.12),
    transparent 28%),

    radial-gradient(circle at bottom right,
    rgba(59,130,246,0.12),
    transparent 28%),

    linear-gradient(135deg,#020617,#0f172a);

  min-height:100vh;

  font-family:"Inter", sans-serif;

  overflow-x:hidden;
}


/* LOGIN SECTION */

.login-section{
  min-height:90vh;

  display:flex;

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

  padding:120px 20px 60px;

  position:relative;
}


/* LOGIN CARD */

.login-card{

  width:100%;
  max-width:460px;

  background:rgba(255,255,255,0.05);

  border:1px solid rgba(255,255,255,0.08);

  backdrop-filter:blur(18px);

  border-radius:30px;

  padding:42px 36px;

  box-shadow:
    0 25px 60px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.04);

  position:relative;

  overflow:hidden;
}


/* SUBTLE GLOW */

.login-card::before{

  content:"";

  position:absolute;

  width:220px;
  height:220px;

  background:rgba(249,115,22,0.12);

  border-radius:50%;

  top:-120px;
  right:-120px;

  filter:blur(50px);
}


/* HEADING */

.login-card h2{

  font-size:42px;

  font-family:"Poppins", sans-serif;

  font-weight:700;

  line-height:1.2;

  color:white;

  margin-bottom:10px;

  position:relative;

  z-index:2;
}


/* SUBTEXT */

.login-card::after{

  content:"Continue your learning journey with REOYH";

  display:block;

  color:#94a3b8;

  font-size:15px;

  line-height:1.7;

  margin-bottom:34px;

  position:relative;

  z-index:2;
}


/* FORM */

#login-form{

  display:flex;

  flex-direction:column;

  gap:20px;

  position:relative;

  z-index:2;
}


/* INPUTS */

#login-form input{

  width:100%;

  background:rgba(255,255,255,0.04);

  border:1px solid rgba(255,255,255,0.08);

  color:white;

  padding:16px 18px;

  border-radius:16px;

  font-size:15px;

  outline:none;

  transition:0.25s ease;
}


/* PLACEHOLDER */

#login-form input::placeholder{
  color:#94a3b8;
}


/* FOCUS */

#login-form input:focus{

  border-color:#ff8c3a;

  background:rgba(255,255,255,0.06);

  box-shadow:0 0 0 4px rgba(255,140,58,0.12);
}


/* PASSWORD FIELD */

.password-field{
  position:relative;
}

.password-field input{
  padding-right:55px;
}


/* TOGGLE */

.togglePassword{

  position:absolute;

  right:18px;
  top:50%;

  transform:translateY(-50%);

  cursor:pointer;

  color:#94a3b8;

  font-size:18px;

  transition:0.25s ease;
}

.togglePassword:hover{
  color:white;
}


/* BUTTON */

.login-card .cta-btn{

  width:100%;

  border:none;

  background:
    linear-gradient(135deg,#ff7a18,#ff9a3c);

  color:white;

  padding:16px;

  border-radius:16px;

  font-size:16px;

  font-weight:600;

  cursor:pointer;

  transition:0.3s ease;

  box-shadow:0 14px 35px rgba(255,140,58,0.28);
}


/* BUTTON HOVER */

.login-card .cta-btn:hover{

  transform:translateY(-3px);

  box-shadow:0 20px 45px rgba(255,140,58,0.4);
}


/* MESSAGE */

#loginMsg{

  text-align:center;

  color:#fca5a5;

  font-size:14px;

  line-height:1.6;
}


/* LINKS */

.forgot-password,
.signup-link{

  margin-top:22px;

  text-align:center;

  color:#94a3b8;

  font-size:14px;

  line-height:1.7;

  position:relative;

  z-index:2;
}


/* ANCHOR */

.forgot-password a,
.signup-link a{

  color:#ff9a3c;

  text-decoration:none;

  font-weight:600;

  transition:0.25s ease;
}

.forgot-password a:hover,
.signup-link a:hover{
  color:white;
}

/* MOBILE */

@media (max-width:600px){

  .login-section{
    padding:100px 18px 40px;
  }

  .login-card{
    padding:34px 24px;
  }

  .login-card h2{
    font-size:34px;
  }

  .login-card::after{
    font-size:14px;
  }

  #login-form input{
    padding:15px 16px;
    font-size:14px;
  }

  .login-card .cta-btn{
    padding:15px;
    font-size:15px;
  }

}

/* ================= LOGIN FIX PATCH ================= */


/* FIX CARD */

.login-card{

  background:rgba(15,23,42,0.82) !important;

  backdrop-filter:blur(18px);

  border:1px solid rgba(255,255,255,0.08);

  color:white;
}


/* FIX HEADING */

.login-card h2{
  color:white !important;
}


/* REMOVE BROKEN AFTER TEXT */

.login-card::after{
  display:none !important;
}


/* ADD REAL SUBTEXT */

.login-subtitle{

  color:#94a3b8;

  text-align:center;

  margin-top:-4px;

  margin-bottom:30px;

  line-height:1.7;

  font-size:15px;
}


/* INPUT FIX */

.login-card input{

  background:rgba(255,255,255,0.06) !important;

  color:white !important;

  border:1px solid rgba(255,255,255,0.08) !important;
}


/* PLACEHOLDER */

.login-card input::placeholder{
  color:#94a3b8 !important;
}


/* PASSWORD ICON */

.togglePassword{
  color:#cbd5e1 !important;
}


/* LINKS */

.forgot-password,
.signup-link{
  color:#94a3b8 !important;
}


/* BODY */

body{

  background:
    radial-gradient(circle at top left,
    rgba(249,115,22,0.12),
    transparent 28%),

    radial-gradient(circle at bottom right,
    rgba(59,130,246,0.12),
    transparent 28%),

    linear-gradient(135deg,#020617,#0f172a) !important;

  min-height:100vh;
}

/* .signup page */
.signup-section {
	height: 85vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #f8fafc;
}

.signup-card {
	background: white;
	padding: 40px;
	border-radius: 16px;
	width: 380px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	text-align: center;
}

.signup-card h2 {
  color: #081633;
	margin-bottom: 20px;
	font-family: "Poppins";
}

.signup-card form {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.signup-card input,
.signup-card select {
	padding: 12px;
	border-radius: 8px;
	border: 1px solid #ddd;
}

.Emsg {
	padding: 2.5px;
	margin-top: 8px;
	font-weight: 600;
	background-color: rgb(255, 194, 194);
	border-radius: 8px;
	border: 0.25px solid red;
}

.Smsg {
	padding: 2.5px;
	margin-top: 8px;
	font-weight: 600;
	background-color: #92f3b6;
	border-radius: 8px;
	border: 0.25px solid green;
}

.login-link {
  color: #081633;
	margin-top: 15px;
	font-size: 14px;
}

.login-link a {
	color: #22c55e;
}

.password-field {
	position: relative;
	width: 100%;
}

.password-field input {
	width: 100%;
	padding-right: 40px;
	/* space for icon */
}

.password-field .togglePassword {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
}

/* contact page */
.contact-hero {
	background: #0b1f4d;
	color: white;
	text-align: center;
	padding: 70px 20px;
}

.contact-section {
	padding: 80px 20px;
}

.contact-container {
	max-width: 1000px;
	margin: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
}

.contact-info h3 {
	margin-bottom: 15px;
}

.contact-form form {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.contact-form input,
.contact-form textarea {
	padding: 12px;
	border-radius: 8px;
	border: 1px solid #ddd;
}

.contact-form textarea {
	min-height: 120px;
}

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


/* HERO */

.contact-hero{
  background:
    linear-gradient(rgba(2,6,23,0.78), rgba(2,6,23,0.88)),
    linear-gradient(135deg,#0b1f4d,#020617);

  color:white;
  text-align:center;

  padding:100px 20px 85px;
}

.contact-hero h1{
  font-size:48px;

  font-family:"Poppins", sans-serif;

  margin-bottom:16px;
}

.contact-hero p{
  max-width:650px;

  margin:auto;

  color:#cbd5e1;

  line-height:1.8;
}


/* MAIN SECTION */

.contact-section{
  padding:90px 20px;

  background:#f8fafc;
}


/* GRID */

.contact-container{
  max-width:1150px;

  margin:auto;

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:40px;

  align-items:start;
}


/* CONTACT INFO */

.contact-info{
  background:white;

  padding:35px;

  border-radius:20px;

  box-shadow:0 12px 35px rgba(0,0,0,0.06);
}

.contact-info h3{
  font-size:28px;

  color:#0f172a;

  margin-bottom:18px;

  font-family:"Poppins", sans-serif;
}

.contact-info p{
  color:#64748b;

  line-height:1.8;

  margin-bottom:18px;
}


/* CONTACT FORM */

.contact-form{
  background:white;

  padding:35px;

  border-radius:20px;

  box-shadow:0 12px 35px rgba(0,0,0,0.06);
}


/* FORM */

.contact-form form{
  display:flex;
  flex-direction:column;

  gap:18px;
}


/* INPUTS */

.contact-form input,
.contact-form textarea{

  width:100%;

  padding:14px 16px;

  border-radius:12px;

  border:1px solid #dbe2ea;

  background:#f8fafc;

  font-size:15px;

  outline:none;

  transition:0.25s ease;
}


/* FOCUS */

.contact-form input:focus,
.contact-form textarea:focus{

  border-color:#f97316;

  background:white;

  box-shadow:0 0 0 4px rgba(249,115,22,0.12);
}


/* TEXTAREA */

.contact-form textarea{
  min-height:140px;

  resize:vertical;
}


/* BUTTON */

.contact-form button{

  background:linear-gradient(135deg,#ff7a18,#ff9a3c);

  color:white;

  border:none;

  padding:14px 20px;

  border-radius:12px;

  font-size:15px;
  font-weight:600;

  cursor:pointer;

  transition:0.3s ease;
}

.contact-form button:hover{
  transform:translateY(-2px);

  box-shadow:0 14px 35px rgba(249,115,22,0.3);
}


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


/* TABLET */

@media (max-width:900px){

  .contact-container{
    grid-template-columns:1fr;
  }

}


/* MOBILE */

@media (max-width:600px){

  .contact-hero{
    padding:80px 18px 70px;
  }

  .contact-hero h1{
    font-size:34px;
  }

  .contact-hero p{
    font-size:14px;
  }

  .contact-section{
    padding:70px 18px;
  }

  .contact-info,
  .contact-form{
    padding:24px;
  }

  .contact-info h3{
    font-size:24px;
  }

  .contact-form input,
  .contact-form textarea{
    padding:13px 14px;
    font-size:14px;
  }

  .contact-form button{
    width:100%;
  }

}

/* about page */
.about-hero {
	background: #0b1f4d;
	color: white;
	text-align: center;
	padding: 80px 20px;
}

.mission {
	background-color: #f97316;
	color: white;
	padding: 70px 20px;
	text-align: center;
	max-width: 100%;
}

.blog-section {
	padding: 80px 20px;
	text-align: center;
}

.blog-section h2 {
	font-family: "Poppins";
	margin-bottom: 40px;
}

.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	max-width: 1200px;
	margin: auto;
}

.blog-card {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	cursor: pointer;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

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

.blog-overlay {
	position: absolute;
	bottom: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
	color: white;
	padding: 20px;
	width: 100%;
}

.blog-overlay h3 {
	font-size: 20px;
	margin-bottom: 8px;
}

.blog-overlay p {
	font-size: 14px;
	margin-bottom: 10px;
}

.blog-overlay a {
	color: #f97316;
	font-weight: 600;
	text-decoration: none;
}

.blog-card:hover {
	transform: translateY(-6px);
	transition: 0.3s;
}

.blog-page {
	background-image: url(https://i.pinimg.com/control1/1200x/58/22/1c/58221c4ed8b3d893942ed046b87d0358.jpg);
	background-size: cover;
	background-repeat: repeat-y;
}

/* BLOG HERO */

.blog-page .blog-hero {
	position: relative;
	width: 100%;
	height: 350px;
	overflow: hidden;
}

.blog-page .blog-hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(70%);
}

.blog-page .hero-text {
	position: absolute;
	bottom: 40px;
	left: 50%;
	transform: translateX(-50%);
	color: white;
	text-shadow: 3px 2px 3px black;
	text-align: center;
}

.blog-page .hero-text h1 {
	font-size: 42px;
	font-family: "Poppins";
	margin-bottom: 10px;
}

/* BLOG CONTAINER */

.blog-page .blog-container {
	background: #f8fafc;
	padding: 60px 20px;
	display: flex;
	justify-content: center;
}

/* BLOG CARD */

.blog-page .blog-card {
	background: white;
	max-width: 800px;
	padding: 40px;
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	line-height: 1.7;
}

.blog-page .blog-card h2 {
	font-size: 28px;
	margin-bottom: 20px;
	font-family: "Poppins";
	color: #0b1f4d;
}

.blog-page .blog-card h3 {
	margin-top: 30px;
	color: #f97316;
}

.blog-page .blog-card p {
	margin-top: 12px;
	color: #374151;
}

/* FOUNDERS SECTION */

.founders-section {
	padding: 80px 20px;
	background: #f8fafc;
	text-align: center;
}

.section-title {
	font-family: "Poppins";
	font-size: 36px;
	margin-bottom: 10px;
}

.founders-intro {
	max-width: 800px;
	margin: 0 auto 50px;
	color: #64748b;
	line-height: 1.6;
}

/* GRID */

.founders-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	max-width: 1100px;
	margin: auto;
}

/* CARD */

.founder-card {
	background: white;
	padding: 30px;
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	text-align: left;
	transition: 0.3s;
}

.founder-card:hover {
	transform: translateY(-6px);
}

/* QUOTE ICON */

.quote-icon {
	font-size: 28px;
	color: #f97316;
	margin-bottom: 10px;
}

/* TEXT */

.founder-quote {
	font-style: italic;
	color: #374151;
	margin-bottom: 20px;
	line-height: 1.6;
}

.founder-card h3 {
	color: #0b1f4d;
	margin-bottom: 4px;
}

.founder-role {
	font-size: 14px;
	color: #f97316;
	display: block;
	margin-bottom: 15px;
}

/* RESPONSIBILITIES */

.founder-responsibilities {
	padding-left: 18px;
	color: #475569;
}

.founder-responsibilities li {
	margin-bottom: 6px;
}

/* RESPONSIVE */

@media (max-width: 900px) {
	.founders-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 600px) {
	.founders-grid {
		grid-template-columns: 1fr;
	}
}

.faq-section {
	padding: 80px 20px;
	text-align: center;
}

.faq {
	max-width: 800px;
	margin: auto;
	text-align: left;
}

.faq h4 {
	margin-top: 20px;
	color: #94A3B8;
}

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

/* HERO SECTION */

.about-hero{
  background:
    linear-gradient(rgba(2,6,23,0.78), rgba(2,6,23,0.88)),
    linear-gradient(135deg,#0b1f4d,#020617);

  color:white;
  text-align:center;

  padding:110px 20px 90px;

  position:relative;
  overflow:hidden;
}

.about-hero .container{
  max-width:800px;
  margin:auto;
}

.about-hero h1{
  font-size:52px;
  font-family:"Poppins", sans-serif;
  font-weight:700;

  margin-bottom:18px;

  line-height:1.2;
}

.about-hero p{
  font-size:16px;
  line-height:1.8;

  color:#cbd5e1;
}


/* MISSION SECTION */

.mission{
  background:linear-gradient(135deg,#f97316,#ea580c);

  color:white;
  text-align:center;

  padding:85px 20px;
}

.mission .container{
  max-width:800px;
  margin:auto;
}

.mission h2{
  font-size:38px;
  margin-bottom:18px;

  font-family:"Poppins", sans-serif;
}

.mission p{
  line-height:1.9;
  font-size:16px;

  color:rgba(255,255,255,0.92);
}


/* BLOG SECTION */

.blog-section{
  padding:100px 20px;

  background:#f8fafc;

  text-align:center;
}

.blog-section h2{
  font-size:38px;

  margin-bottom:55px;

  font-family:"Poppins", sans-serif;

  color:#0f172a;
}


/* BLOG GRID */

.blog-grid{
  display:grid;

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

  gap:30px;

  max-width:1200px;
  margin:auto;
}


/* BLOG CARD */

.blog-card{
  position:relative;

  overflow:hidden;

  border-radius:18px;

  background:white;

  cursor:pointer;

  transition:0.35s ease;

  box-shadow:0 12px 35px rgba(0,0,0,0.08);
}

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

  box-shadow:0 18px 45px rgba(0,0,0,0.16);
}


/* IMAGE */

.blog-card img{
  width:100%;
  height:320px;

  object-fit:cover;

  display:block;

  transition:0.4s ease;
}

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


/* OVERLAY */

.blog-overlay{
  position:absolute;

  left:0;
  bottom:0;

  width:100%;

  padding:24px;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,0.85),
      rgba(0,0,0,0.08)
    );

  text-align:left;
}


/* TEXT */

.blog-overlay h3{
  color:white;

  font-size:20px;
  line-height:1.4;

  margin-bottom:10px;
}

.blog-overlay a{
  color:#ff9a3c;

  text-decoration:none;

  font-weight:600;

  transition:0.25s ease;
}

.blog-overlay a:hover{
  color:white;
}


/* FAQ SECTION */

.faq-section{
  padding:100px 20px;

  background:white;
}

.faq-section h2{
  text-align:center;

  font-size:38px;

  margin-bottom:60px;

  font-family:"Poppins", sans-serif;

  color:#0f172a;
}


/* FAQ CONTAINER */

.faq{
  max-width:850px;
  margin:auto;
}


/* FAQ ITEM */

.faq-item{
  background:#f8fafc;

  border:1px solid #e2e8f0;

  border-radius:18px;

  padding:24px;

  margin-bottom:18px;

  transition:0.3s ease;
}

.faq-item:hover{
  transform:translateY(-3px);

  box-shadow:0 12px 30px rgba(0,0,0,0.06);
}


/* FAQ TEXT */

.faq-item h4{
  font-size:18px;

  margin-bottom:10px;

  color:#0f172a;
}

.faq-item p{
  color:#64748b;

  line-height:1.8;

  font-size:15px;
}


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


/* TABLET */

@media (max-width:900px){

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

  .about-hero h1{
    font-size:42px;
  }

  .mission h2,
  .blog-section h2,
  .faq-section h2{
    font-size:32px;
  }

}


/* MOBILE */

@media (max-width:600px){

  .about-hero{
    padding:85px 18px 75px;
  }

  .about-hero h1{
    font-size:34px;
  }

  .about-hero p{
    font-size:14px;
  }

  .mission{
    padding:65px 18px;
  }

  .mission h2,
  .blog-section h2,
  .faq-section h2{
    font-size:28px;
  }

  .mission p{
    font-size:14px;
  }

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

  .blog-card img{
    height:260px;
  }

  .blog-overlay{
    padding:18px;
  }

  .blog-overlay h3{
    font-size:18px;
  }

  .faq-item{
    padding:18px;
  }

  .faq-item h4{
    font-size:16px;
  }

  .faq-item p{
    font-size:14px;
  }

}


/* Tutor Info */

.tutor-info {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 20px;
}

.tutor-info img {
	width: 60px;
	height: 60px;
	border-radius: 50%;
}

/* Form */

.booking-form {
	display: flex;
	flex-direction: column;
	text-align: left;
	gap: 10px;
}

.booking-form input,
.booking-form select {
	padding: 12px;
	border-radius: 8px;
	border: 1px solid #ddd;
}

.booking-form button {
	margin-top: 10px;
	background: #f97316;
	color: white;
	border: none;
	padding: 12px;
	border-radius: 8px;
	cursor: pointer;
	font-weight: 600;
}

.booking-form button:hover {
	opacity: 0.9;
}

/* student DASHB0ARD */
.dashboard {
  padding: 30px;
  background: linear-gradient(135deg, #0f172a, #020617);
  min-height: 100vh;
  color: #e2e8f0;
}

.dashboard-header h2 {
  font-size: 22px;
  color: white;
}

.subtext {
	color: #94a3b8;
	font-size: 14px;
	margin-top: 5px;
}

.actions {
	display: flex;
	gap: 10px;
}

.dashboard-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.card {
  background: rgba(30, 41, 59, 0.8);
  backdrop-filter: blur(10px);

  padding: 20px;
  border-radius: 16px;

  border: 1px solid rgba(255,255,255,0.08);

  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  transition: 0.25s ease;
}

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

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

.card-header h3 {
	margin-bottom: 10px;
}

.muted {
	color: #999;
}

/* Buttons */
.cta-btn {
	background: #ff7a18;
	color: white;
	padding: 10px 18px;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 500;
}

.logout-btn {
	background: #ff4d4d;
	color: white;
	padding: 10px 18px;
	border: none;
	border-radius: 8px;
	cursor: pointer;
}

.session-card {
  background: #020617;
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 12px;

  border: 1px solid rgba(255,255,255,0.06);
}

.session-top h4 {
  font-size: 15px;
  color: white;
}

.session-meta {
	display: flex;
	gap: 15px;
	font-size: 14px;
	color: #666;
	margin-top: 6px;
}

.status.confirmed {
	background: #e6f7ee;
	color: #1a7f4b;
	padding: 4px 10px;
	border-radius: 20px;
	font-size: 12px;
}

.session-actions {
	margin-top: 10px;
}

.cancel-btn {
	background: #ff4d4d;
	color: white;
	border: none;
	padding: 6px 12px;
	border-radius: 6px;
	cursor: pointer;
}

/* PAYMENT BUTTON */

.pay-btn{
  margin-top: 12px;

  background: linear-gradient(135deg, #16a34a, #1a7f4b);

  color: white;

  border: none;

  padding: 12px 20px;

  border-radius: 12px;

  font-size: 14px;

  font-weight: 600;

  cursor: pointer;

  transition: all 0.25s ease;

  box-shadow: 0 10px 25px rgba(166, 255, 24, 0.25);
}

.pay-btn:hover{
  transform: translateY(-2px);

  box-shadow: 0 14px 30px rgba(255, 122, 24, 0.35);
}

.pay-btn:active{
  transform: scale(0.98);
}


.empty-state {
  text-align: center;
  padding: 30px;
  color: #94a3b8;
}

.empty-state h4 {
  color: white;
  margin-bottom: 5px;
	font-size: 18px;
}

.empty-icon {
	font-size: 40px;
	margin-bottom: 10px;
}

.empty-state p {
	color: #666;
	font-size: 14px;
	margin-bottom: 15px;
}

.cta-btn {
	display: inline-block;
	background: #ff7a00;
	color: white;
	padding: 10px 16px;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 500;
}


.llama-img {
	width: 80px;
	margin-bottom: 10px;
	animation: float 2s ease-in-out infinite;
}

.llama-mini {
	width: 50px;
	vertical-align: middle;
	margin-right: 6px;
	animation: float 2s ease-in-out infinite;
}

@keyframes float {
	0% {
		transform: translateY(0px);
	}

	50% {
		transform: translateY(-6px);
	}

	100% {
		transform: translateY(0px);
	}
}


/* profile card fix */
/* PROFILE CARD */

.profile-box h4 {
  color: white;
}

.profile-info {
  color: #cbd5f5;
}

.llama-tip {
  background: rgba(249,115,22,0.1);
  border: 1px solid rgba(249,115,22,0.2);
  color: #f97316;
}

/* Llama image */
.profile-llama {
	width: 70px;
	margin-bottom: 10px;
	animation: float 2.5s ease-in-out infinite;
}

/* Floating animation */
@keyframes float {
	0% {
		transform: translateX(0px);
	}

	50% {
		transform: translateX(-6px);
	}

	100% {
		transform: translateX(0px);
	}
}

/* Name */
.profile-box h4 {
	margin: 5px 0;
	font-size: 18px;
}

/* Role text */
.profile-box .muted {
	color: #777;
	font-size: 14px;
}

/* Info section */
.profile-info {
	margin-top: 12px;
	font-size: 14px;
	line-height: 1.5;
}

/* Tip box */
.llama-tip {
	margin-top: 14px;
	font-size: 13px;
	background: #fff3e6;
	padding: 10px;
	border-radius: 10px;
	color: #ff7a00;
	border: 1px solid #ffe0c2;
}

/* Card improvement (optional but recommended) */
.card {
	background: #fff;
	border-radius: 14px;
	padding: 16px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}


.status {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}

.status.pending {
  background: rgba(234,179,8,0.2);
  color: #facc15;
}

.status.accepted {
  background: rgba(34,197,94,0.2);
  color: #22c55e;
}

.status.rejected {
  background: rgba(239,68,68,0.2);
  color: #ef4444;
}


/* NEXT SESSION */
.next-session {
	margin-top: 15px;
	padding: 12px;
	border-radius: 12px;
	background: #eef6ff;
	border: 1px solid #d6eaff;
}

/* LEARNING BOX */
.learning-box {
	margin-top: 12px;
	background: #fff8f0;
	padding: 12px;
	border-radius: 12px;
	border: 1px solid #ffe0c2;
}

.learning-stats {
	display: flex;
	justify-content: space-around;
	margin: 10px 0;
}

.learning-stats h3 {
	margin: 0;
	color: #ff7a00;
}

.learning-stats p {
	font-size: 12px;
	color: #666;
}

.learning-msg {
	font-size: 13px;
	text-align: center;
	color: #555;
}

.listing-form {
  margin-top: 30px;
  background: rgba(30,41,59,0.8);
  padding: 20px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
}

.listing-form input,
.listing-form textarea,
.listing-form select {
  background: #020617;
  border: 1px solid rgba(255,255,255,0.08);
  color: white;
}

.listing-form button {
  background: linear-gradient(135deg, #ff7a18, #ff9a3c);
  color: white;
}

.listing-filters {
	display: flex;
	gap: 15px;
	margin: 20px 0;
	flex-wrap: wrap;
}

.listing-filters select {
	padding: 10px 12px;
	border-radius: 8px;
	border: 1px solid #ddd;
	font-size: 14px;
	font-family: 'Poppins', sans-serif;
	background-color: #fff;
	cursor: pointer;
	min-width: 160px;
	transition: all 0.2s ease;
}

.listing-filters select:hover {
	border-color: #ff7a00;
}

.listing-filters select:focus {
	outline: none;
	border-color: #ff7a00;
	box-shadow: 0 0 0 2px rgba(255, 122, 0, 0.2);
}

/* ================= DASHBOARD TEXT IMPROVEMENTS ================= */


/* HEADER */

.dashboard-header h2{
  font-size:42px;

  font-family:"Poppins", sans-serif;

  font-weight:700;

  line-height:1.2;

  letter-spacing:-0.5px;

  color:white;

  margin-bottom:12px;
}


/* SUBTEXT */

.subtext{
  color:#94a3b8;

  font-size:16px;

  line-height:1.7;

  font-weight:400;
}


/* GRID SPACING */

.dashboard-grid{
  gap:28px;
}


/* CARDS */

.card{
  padding:30px;

  border-radius:24px;
}


/* CARD HEADINGS */

.card h3{
  font-size:28px;

  font-family:"Poppins", sans-serif;

  font-weight:600;

  color:white;

  margin-bottom:24px;

  letter-spacing:-0.3px;
}


/* PROFILE TEXT */

#profileName{
  font-size:32px;

  font-family:"Poppins", sans-serif;

  font-weight:700;

  color:white;

  line-height:1.2;

  margin-bottom:10px;
}


/* PROFILE EMAIL */

#profileEmail{
  color:#e2e8f0;

  font-size:17px;

  line-height:1.7;

  word-break:break-word;
}


/* GENERAL PARAGRAPHS */

.card p{
  color:#cbd5e1;

  line-height:1.8;

  font-size:15px;
}


/* MUTED TEXT */

.muted{
  color:#94a3b8;

  font-size:15px;

  line-height:1.7;
}


/* BUTTONS */

.actions .cta-btn,
.actions .logout-btn{

  font-size:15px;

  font-weight:600;

  letter-spacing:0.2px;
}


/* LLAMA TIP */

.llama-tip{
  font-size:15px;

  line-height:1.7;

  color:#ff9a3c;

  font-weight:500;
}


/* FORM TITLE */

.dashboard h2{
  color:white;

  font-size:34px;

  font-family:"Poppins", sans-serif;

  margin-bottom:28px;
}


/* FORM INPUTS */

.listing-form input,
.listing-form select,
.listing-form textarea{

  font-size:15px;

  color:white;
}


/* MOBILE */

@media (max-width:600px){

  .dashboard-header h2{
    font-size:32px;
  }

  .subtext{
    font-size:14px;
  }

  .card h3{
    font-size:24px;
  }

  #profileName{
    font-size:28px;
  }

  #profileEmail{
    font-size:15px;
  }

  .dashboard h2{
    font-size:28px;
  }

}

/* ================= TUTOR LISTING FORM FIX ================= */


/* SECTION TITLE */

.dashboard h2{
  font-size:48px;

  font-family:"Poppins", sans-serif;

  font-weight:700;

  color:white;

  margin-bottom:34px;

  line-height:1.2;
}


/* FORM CONTAINER */

.listing-form{

  background:rgba(255,255,255,0.06);

  border:1px solid rgba(255,255,255,0.08);

  border-radius:28px;

  padding:34px;

  backdrop-filter:blur(12px);

  box-shadow:0 18px 45px rgba(0,0,0,0.18);

  display:flex;

  flex-direction:column;

  gap:24px;
}


/* ROW */

.form-row{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:20px;
}

/* ================= PROFILE TEXT FIX ================= */

.card p{
  display:flex;

  align-items:center;

  gap:8px;

  margin-bottom:14px;

  font-size:18px;

  color:#cbd5e1;

  line-height:1.6;
}


/* LABELS */

.card p b{
  color:#94a3b8;

  font-weight:600;

  font-size:16px;

  min-width:70px;
}


/* VALUES */

#profileName,
#profileEmail{

  color:white;

  font-weight:600;

  font-size:18px;

  word-break:break-word;
}


/* ROLE */

.card p:last-child{
  margin-bottom:0;
}


/* FILTERS */

.listing-filters{
  display:grid;

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

  gap:20px;
}


/* INPUTS */

.listing-form input,
.listing-form select,
.listing-form textarea{

  width:100%;

  background:#020617;

  border:1px solid rgba(255,255,255,0.08);

  color:white;

  padding:16px 18px;

  border-radius:16px;

  font-size:15px;

  font-family:"Inter", sans-serif;

  outline:none;

  transition:0.25s ease;
}


/* PLACEHOLDER */

.listing-form input::placeholder,
.listing-form textarea::placeholder{
  color:#94a3b8;
}


/* FOCUS */

.listing-form input:focus,
.listing-form select:focus,
.listing-form textarea:focus{

  border-color:#ff8c3a;

  box-shadow:0 0 0 4px rgba(255,140,58,0.12);
}


/* TEXTAREA */

.listing-form textarea{
  min-height:140px;

  resize:vertical;
}


/* BUTTON */

.listing-form button{

  width:fit-content;

  background:linear-gradient(135deg,#ff7a18,#ff9a3c);

  color:white;

  border:none;

  padding:14px 26px;

  border-radius:14px;

  font-size:15px;

  font-weight:600;

  cursor:pointer;

  transition:0.25s ease;
}


/* BUTTON HOVER */

.listing-form button:hover{
  transform:translateY(-2px);

  box-shadow:0 12px 30px rgba(255,140,58,0.3);
}


/* MOBILE */

@media (max-width:768px){

  .dashboard h2{
    font-size:38px;
  }

  .form-row{
    grid-template-columns:1fr;
  }

  .listing-filters{
    grid-template-columns:1fr;
  }

}


@media (max-width:600px){

  .dashboard h2{
    font-size:32px;

    margin-bottom:24px;
  }

  .listing-form{
    padding:24px;
  }

  .listing-form input,
  .listing-form select,
  .listing-form textarea{

    padding:14px 16px;

    font-size:14px;
  }

  .listing-form button{
    width:100%;
  }

}


/* PRofile */
/* PROFILE SECTION */
.container {
	max-width: 1100px;
	margin: 0 40px;
	padding: 0 20px;
}

h2 {
	margin-bottom: 10px;
}

.tutor-listings h2 {
	margin-bottom: 20px;
}

.tutor-profile {
	margin-top: 40px;
}


.profile-container {
	margin-top: 20px;
}

.profile-header {
	display: flex;
	align-items: center;
	gap: 30px;
}

.profile-img {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	object-fit: cover;
}

.profile-info h1 {
	margin: 0;
	font-size: 28px;
}

.profile-info p {
	margin: 5px 0;
	color: #555;
}

#edit-profile-btn {
	margin-top: 10px;
	padding: 8px 14px;
	background: orange;
	border: none;
	border-radius: 6px;
	cursor: pointer;
}

.about-tutor {
	margin-top: 10px;
}

.about-tutor p {
	color: #444;
	max-width: 600px;
	margin-bottom: 10px;
}

.tutor-listings {
	margin-top: 50px;
}

.listing-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 20px;
	margin-top: 20px;
	margin-bottom: 40px;
}

.listing-card {
	padding: 18px;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
	transition: 0.25s ease;
}

.listing-card:hover {
	transform: translateY(-4px);
}

.listing-card h4 {
	margin-bottom: 8px;
}

.listing-card p {
	margin: 4px 0;
	color: #555;
}

.listing-card button {
	margin-top: 12px;
	padding: 8px 12px;
	background: orange;
	border: none;
	border-radius: 6px;
	cursor: pointer;
}

.about-container,
.listings-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.about-tutor {
	text-align: left;
}

.edit-form {
  margin-top: 25px;
  padding: 20px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  max-width: 420px;
}

.edit-form h3 {
  margin-bottom: 10px;
}

.edit-form input,
.edit-form textarea {
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-family: inherit;
}

.edit-form textarea {
  min-height: 80px;
  resize: vertical;
}

.edit-actions {
  margin-top: 15px;
  display: flex;
  gap: 10px;
}

.edit-actions button {
  flex: 1;
}

.hidden {
  display: none;
}              

/* Request Buttons Container */
.req-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

/* Base button style */
.req-actions button {
  padding: 8px 14px;
  border: none;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  transition: 0.2s ease;
}

/* Accept Button */
.accept-btn {
  background-color: #22c55e; /* green */
  color: white;
}

.accept-btn:hover {
  background-color: #16a34a;
  transform: translateY(-1px);
}

/* Reject Button */
.reject-btn {
  background-color: #ef4444; /* red */
  color: white;
}

.reject-btn:hover {
  background-color: #dc2626;
  transform: translateY(-1px);
}


/* ================= TUTOR PROFILE PAGE ================= */


/* MAIN PROFILE SECTION */

.tutor-profile{
  padding:100px 20px 70px;

  background:
    linear-gradient(135deg,#0f172a,#020617);

  color:white;
}


/* CONTAINER */

.profile-container{
  max-width:1100px;

  margin:auto;
}


/* PROFILE CARD */

.profile-header{
  display:flex;

  align-items:center;

  gap:40px;

  background:rgba(255,255,255,0.04);

  border:1px solid rgba(255,255,255,0.08);

  backdrop-filter:blur(12px);

  padding:40px;

  border-radius:24px;

  box-shadow:0 20px 60px rgba(0,0,0,0.35);
}


/* IMAGE */

.profile-img{
  width:150px;
  height:150px;

  border-radius:50%;

  object-fit:cover;

  border:4px solid rgba(255,255,255,0.08);

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


/* INFO */

.profile-info{
  flex:1;
}

.profile-info h1{
  font-size:42px;

  font-family:"Poppins", sans-serif;

  margin-bottom:10px;

  color:white;
}

.profile-info p{
  color:#cbd5e1;

  margin-bottom:10px;

  font-size:15px;
}


/* EDIT BUTTON */

#edit-profile-btn{
  margin-top:12px;

  background:linear-gradient(135deg,#ff7a18,#ff9a3c);

  color:white;

  border:none;

  padding:12px 20px;

  border-radius:12px;

  font-size:14px;
  font-weight:600;

  cursor:pointer;

  transition:0.3s ease;
}

#edit-profile-btn:hover{
  transform:translateY(-2px);

  box-shadow:0 12px 30px rgba(249,115,22,0.3);
}


/* EDIT FORM */

#edit-form{
  max-width:700px;

  margin:30px auto 0;

  background:white;

  padding:30px;

  border-radius:20px;

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

#edit-form input,
#edit-form textarea{

  width:100%;

  padding:14px 16px;

  border-radius:12px;

  border:1px solid #dbe2ea;

  margin-bottom:18px;

  font-size:15px;

  outline:none;

  transition:0.25s ease;
}

#edit-form input:focus,
#edit-form textarea:focus{

  border-color:#f97316;

  box-shadow:0 0 0 4px rgba(249,115,22,0.12);
}

#edit-form textarea{
  min-height:140px;

  resize:vertical;
}


/* SAVE BUTTON */

#save-profile{
  background:linear-gradient(135deg,#ff7a18,#ff9a3c);

  color:white;

  border:none;

  padding:14px 20px;

  border-radius:12px;

  font-size:15px;
  font-weight:600;

  cursor:pointer;

  transition:0.3s ease;
}

#save-profile:hover{
  transform:translateY(-2px);

  box-shadow:0 12px 30px rgba(249,115,22,0.25);
}


/* ABOUT SECTION */

.about-tutor{
  padding:80px 20px;

  background:#f8fafc;
}

.about-container{
  max-width:1000px;

  margin:auto;
}

.about-tutor h2{
  font-size:34px;

  margin-bottom:20px;

  color:#0f172a;

  font-family:"Poppins", sans-serif;
}

.about-tutor p{
  color:#64748b;

  line-height:1.9;

  font-size:16px;
}


/* LISTINGS */

.tutor-listings{
  padding:90px 20px;

  background:white;
}

.listings-container{
  max-width:1200px;

  margin:auto;
}

.tutor-listings h2{
  text-align:center;

  font-size:38px;

  margin-bottom:50px;

  color:#0f172a;

  font-family:"Poppins", sans-serif;
}


/* GRID */

.listing-grid{
  display:grid;

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

  gap:30px;
}


/* CARD */

.listing-card{
  background:white;

  padding:28px;

  border-radius:20px;

  border:1px solid #e2e8f0;

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

  transition:0.3s ease;
}

.listing-card:hover{
  transform:translateY(-6px);

  box-shadow:0 18px 45px rgba(0,0,0,0.12);
}

.listing-card h4{
  font-size:22px;

  margin-bottom:12px;

  color:#0f172a;
}

.listing-card p{
  color:#64748b;

  margin-bottom:10px;
}


/* BUTTONS */

.listing-card button{
  margin-top:12px;

  width:100%;

  border:none;

  padding:12px;

  border-radius:12px;

  font-weight:600;

  cursor:pointer;

  transition:0.25s ease;
}


/* REQUEST */

.request-btn{
  background:linear-gradient(135deg,#16a34a,#22c55e);

  color:white;
}

.request-btn:hover{
  transform:translateY(-2px);
}


/* DELETE */

.delete-btn{
  background:#ef4444;

  color:white;
}

.delete-btn:hover{
  background:#dc2626;
}


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


/* TABLET */

@media (max-width:900px){

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

  .profile-header{
    flex-direction:column;

    text-align:center;
  }

}


/* MOBILE */

@media (max-width:600px){

  .tutor-profile{
    padding:80px 18px 60px;
  }

  .profile-header{
    padding:28px 22px;
  }

  .profile-img{
    width:120px;
    height:120px;
  }

  .profile-info h1{
    font-size:32px;
  }

  .about-tutor h2,
  .tutor-listings h2{
    font-size:28px;
  }

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

  #edit-form{
    margin:25px 18px 0;
    padding:24px;
  }

}

/* ================= POLICY PAGE ================= */
/* MAIN SECTION */
.policy-page {
  padding: 80px 20px;
}

.policy-container {
  max-width: 800px;
  margin: 0 auto;
}

/* TITLE */
.policy-container h1 {
  font-size: 32px;
  margin-bottom: 20px;
  color: white;
}

/* NAVIGATION */
.policy-nav {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.policy-nav a {
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: #cbd5f5;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.2s ease;
}

.policy-nav a:hover {
  background: rgba(255,255,255,0.15);
  color: white;
}

/* SECTIONS */
.policy-section {
  margin-bottom: 60px;
}

.policy-section h2 {
  font-size: 22px;
  margin-bottom: 8px;
  color: white;
}

/* DATE */
.policy-date {
  font-size: 13px;
  color: #94a3b8;
  margin-bottom: 15px;
}

/* TEXT */
.policy-container p {
  font-size: 15px;
  line-height: 1.7;
  color: #cbd5f5;
  margin-bottom: 15px;
}

/* SUBHEADINGS */
.policy-container h4 {
  font-size: 16px;
  margin-top: 20px;
  margin-bottom: 8px;
  color: #e2e8f0;
}

/* LISTS */
.policy-container ul {
  padding-left: 18px;
  margin-bottom: 15px;
}

.policy-container li {
  margin-bottom: 6px;
  color: #cbd5f5;
}

/* LINKS */
.policy-container a {
  color: #ff9a3c;
  text-decoration: none;
}

.policy-container a:hover {
  text-decoration: underline;
}

/* ================= MOBILE ================= */

@media (max-width: 600px) {

  .policy-container h1 {
    font-size: 26px;
  }

  .policy-section h2 {
    font-size: 20px;
  }

  .policy-container p {
    font-size: 14px;
  }

}

/* ================= DASHBOARD FINAL UI ================= */

/* Base */
.dashboard {
  padding: 30px;
  background: linear-gradient(135deg, #0f172a, #020617);
  min-height: 100vh;
  color: #e2e8f0;
}

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

.dashboard-header h2 {
  font-size: 22px;
  color: #f8fafc;
}

.subtext {
  color: #94a3b8;
  font-size: 14px;
}

/* Actions */
.actions {
  display: flex;
  gap: 12px;
}

.cta-btn {
  background: linear-gradient(135deg, #ff7a18, #ff9a3c);
  color: white;
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 14px;
}

.logout-btn {
  background: #ef4444;
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 10px;
  cursor: pointer;
}

/* Grid */
.dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

@media (max-width: 900px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

/* Cards */
.card {
  background: #1e293b;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

.card h3 {
  color: #f8fafc;
  margin-bottom: 12px;
}

/* Sessions */
.session-card {
  background: #020617;
  padding: 14px;
  border-radius: 12px;
  margin-bottom: 12px;
  border: 1px solid rgba(255,255,255,0.05);
}

.session-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.session-top h4 {
  font-size: 15px;
  color: #f8fafc;
}

.session-meta {
  font-size: 13px;
  color: #94a3b8;
  margin-top: 6px;
}

/* Status */
.status {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}

.status.accepted {
  background: rgba(34,197,94,0.2);
  color: #22c55e;
}

.status.rejected {
  background: rgba(239,68,68,0.2);
  color: #ef4444;
}

.status.pending {
  background: rgba(234,179,8,0.2);
  color: #facc15;
}

/* Profile */
.profile-box {
  text-align: center;
}

.profile-box h4 {
  color: #f8fafc;
}

.profile-info {
  margin-top: 10px;
  font-size: 14px;
  color: #cbd5f5;
}

.profile-llama {
  width: 70px;
  margin-bottom: 10px;
}

/* Tip */
.llama-tip {
  margin-top: 14px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(249,115,22,0.1);
  border: 1px solid rgba(249,115,22,0.2);
  color: #f97316;
  font-size: 13px;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 30px;
  color: #94a3b8;
}

.empty-state h4 {
  color: #f8fafc;
}

/* Tutor form */
.listing-form {
  margin-top: 30px;
  background: #1e293b;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.06);
}

.listing-form input,
.listing-form textarea,
.listing-form select {
  background: #020617;
  border: 1px solid rgba(255,255,255,0.08);
  color: #e2e8f0;
}

.listing-form button {
  background: linear-gradient(135deg, #ff7a18, #ff9a3c);
  color: white;
  border: none;
  padding: 10px;
  border-radius: 8px;
}

/* ===== FEEDBACK SECTION ===== */

.feedback-section {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

.feedback-card {
  background: #1e293b;
  padding: 25px;
  border-radius: 16px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.feedback-card h2 {
  margin-bottom: 15px;
  color: #fff;
}

.feedback-card label {
  font-size: 14px;
  color: #cbd5e1;
  display: block;
  margin-bottom: 6px;
}

/* Inputs */
.feedback-input {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border-radius: 10px;
  border: none;
  background: #0f172a;
  color: white;
  outline: none;
}

.feedback-input:focus {
  border: 1px solid #f97316;
}

/* Submit Button */
.feedback-submit-btn {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, #f97316, #fb923c);
  border: none;
  border-radius: 10px;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: 0.3s ease;
}

.feedback-submit-btn:hover {
  transform: scale(1.03);
}

/* Feedback button (in session cards) */
.feedback-btn {
  margin-top: 10px;
  padding: 8px 12px;
  background: #f97316;
  border: none;
  border-radius: 8px;
  color: white;
  cursor: pointer;
  font-size: 13px;
  transition: 0.2s ease;
}

.feedback-btn:hover {
  background: #fb923c;
}