/* style.css - SGR Infotech Website */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

:root {
  --primary: #0d6efd;
  --secondary: #6610f2;
  --success: #28a745;
  --dark: #0b1724;
  --light: #f8f9fa;
  --text-dark: #212529;
  --text-muted: #6c757d;
  --font: 'Inter', sans-serif;

  /* Theme Colors */
  --bg-color: #fff;
  --bg-alt: #f8f9fa;
  --text-color: var(--text-dark);
}

/* Global Reset */
html, body {
  max-width: 100%;
  overflow-x: clip; /* prevents unwanted scroll but safer than hidden */
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font);
  color: var(--text-color);
  background: var(--bg-color);
  line-height: 1.6;
}

/* Images */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Container */
.container {
  max-width: 1320px;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}

/* Headings & Paragraphs */
h1,h2,h3,h4,h5,h6 {
  font-weight: 700;
  margin: 0 0 .75rem;
}
p { margin: 0 0 1rem; }

/* Navbar */
.navbar-brand { font-weight: 700; letter-spacing: -0.5px; }

.navbar-dark .nav-link {
  color: #dfe8f2;
  transition: color .3s;
}
.navbar-dark .nav-link:hover,
.navbar-dark .nav-link.active {
  color: var(--primary);
  font-weight: 600;
  border-bottom: 2px solid var(--primary);
}
.navbar-dark .nav-link:focus { outline: 2px dashed var(--primary); }

.navbar .btn-toggle {
  margin-left: auto;
  margin-right: 10px;
  flex-shrink: 0;
}

/* Hero Section */
.hero-section {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  padding: 120px 0;
  text-align: center;
}
.hero-section .lead { max-width: 650px; margin: auto; }
.hero-section .btn { min-width: 180px; }

@media (max-width: 768px) {
  .hero-section { padding: 80px 0; }
}
@media (max-width: 576px) {
  .hero-section { padding: 60px 0; }
}

/* Features, Services, Pricing, Portfolio */
.features .card,
#services .card,
#pricing .card,
#portfolio .card {
  border-radius: 1rem;
  transition: transform .3s, box-shadow .3s;
}
.features .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
}
#services .card:hover { border-color: var(--primary); transform: translateY(-4px); }
#services i { color: var(--primary); }
#portfolio img { border-radius: .75rem .75rem 0 0; }
#portfolio .card:hover { transform: scale(1.03); }
#pricing .card:hover { transform: translateY(-6px); }
#pricing .display-6 { color: var(--primary); }

/* Program Cards */
.program-card {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.program-card img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  transition: transform .3s ease;
  will-change: transform;
}
.program-card:hover img { transform: scale(1.1); }
.program-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,.2);
}
.program-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,.3));
  color: #fff; padding: 15px;
}
.program-overlay h6 { margin: 0; font-weight: bold; }

/* Contact */
#contact form {
  background: #fff;
  border-radius: 1rem;
  padding: 20px;
}
#contact .btn-success {
  background: var(--success);
  border: none;
  transition: background .3s;
}
#contact .btn-success:hover { background: #218838; }

/* Footer */
footer {
  background: var(--dark);
  color: #dfe8f2;
  padding: 40px 0;
  text-align: center;
}
footer a { color: #dfe8f2; transition: color .3s; }
footer a:hover { color: var(--primary); }
footer p { margin: 0; font-size: .9rem; color: var(--text-muted); }

/* Buttons */
.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  transition: background .3s, border .3s;
}
.btn-primary:hover { background: #0b5ed7; border-color: #0a58ca; }
body.dark-mode .btn-primary {
  background: var(--secondary);
  border-color: var(--secondary);
}
.btn-outline-primary:hover { background: var(--primary); color: #fff; }

/* Utilities */
.section-title { font-size: 2rem; font-weight: 700; margin-bottom: 1rem; }
.text-muted { color: var(--text-muted) !important; }

/* Dark Mode */
body.dark-mode {
  --bg-color: #121212;
  --bg-alt: #1e1e1e;
  --text-color: #f8f9fa;
}
body.dark-mode footer { background: #000; }

/* Toggle Button */
.btn-toggle {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 25px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.3s ease;
}
.btn-toggle:hover { background: #0b5ed7; }

/* Accessibility */
a:focus, button:focus {
  outline: 2px dashed var(--secondary);
  outline-offset: 3px;
}


/*add new */

.step-card {
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.step-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.step-number {
  position: absolute;
  top: -15px;
  left: 15px;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}

.social-icons .social-link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  font-size: 22px; /* bigger icon */
  color: #fff;
  background: #0d6efd; /* default blue */
  border-radius: 50%; /* makes it circular */
  transition: all 0.3s ease;
  text-decoration: none;
}

.social-icons .social-link:nth-child(2) {
  background: #E1306C; /* Instagram pink */
}

.social-icons .social-link:nth-child(3) {
  background: #25D366; /* WhatsApp green */
}

.social-icons .social-link:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}