@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Syne:wght@400..800&display=swap');

/* Root colors */
:root {
  --black-60: #0009;             
  --bento-bg: #2c2c2c;         
  --white: #fff;
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-600: #6c757d;
  --gray-800: #333;
  --pink: #e91e63;
  --pink-bg: #fce4ec;
  --orange: #ff9800;
  --orange-bg: #fff3e0;
  --blue: #2196f3;
  --blue-bg: #e3f2fd;
  --green: #4caf50;
  --green-bg: #e8f5e8;
  --purple: #9c27b0;
  --purple-bg: #f3e5f5;
  --teal: #009688;
  --teal-bg: #e0f2f1;
  --red: #dc3545;
  --red-dark: #b02a37;
  --red-light: #d90000;
  --contact-bg: #fff8f5;
}

/* Body font */
body {
  font-family: Poppins, sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* Circle Button */
.btn-circle {
  width: 25px;
  height: 25px;
}

/* Hero Overlay Image */
.hero-overlay-image {
  top: -40px;
  right: 50px;
  z-index: 10;
  width: 400px;
  height: 610px;
  min-height: 500px;
}

/* Video Container */
.video-container {
  min-height: 500px;
}

/* Hero Content Overlay */
.hero-content {
  z-index: 5;
  background: var(--black-60);
  border-radius: 25px;
}

/* Bento Cards */
.bento-card {
  background: var(--bento-bg);
  transition: transform 0.3s ease;
  padding: 1.5rem;
}

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

/* Bento Grid */
.bento-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 0.6rem;
  height: 100%;
}

.bento-card.large {
  grid-row: span 2;
}

/* Navbar Logo */
.navbar-logo {
  height: 40px;
  width: auto;
}

/* Features Section */
.features-section {
  padding: 80px 0;
  background-color: var(--gray-100);
}

.feature-badge {
  padding: 8px 20px;
}

.section-title {
  color: var(--gray-800);
  margin-bottom: 20px;
}

.section-subtitle {
  color: var(--gray-600);
}

.feature-card {
  padding: 40px 30px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.feature-icon {
  width: 60px;
  height: 60px;
}

.icon-pink { 
  background-color: var(--pink-bg); 
  color: var(--pink); 
}

.icon-orange { 
  background-color: var(--orange-bg); 
  color: var(--orange); 
}

.icon-blue { 
  background-color: var(--blue-bg); 
  color: var(--blue); 
}

.icon-green { 
  background-color: var(--green-bg); 
  color: var(--green); 
}

.icon-purple { 
  background-color: var(--purple-bg); 
  color: var(--purple); 
}

.icon-teal { 
  background-color: var(--teal-bg); 
  color: var(--teal); 
}

.feature-title { 
  color: var(--gray-800); 
  margin-bottom: 15px; 
  font-size: 20px; 
}

.feature-description { 
  color: var(--gray-600); 
  line-height: 1.6; 
  margin-bottom: 25px; 
}

.discover-link { 
  color: var(--red); 
  transition: color 0.3s ease; 
}

.discover-link:hover { 
  color: var(--red-dark); 
  text-decoration: underline; 
}

.stats-container {
  margin-top: 70px;
  margin-bottom: 80px;
  transform: skewY(-6deg);
}

.stats-section {
  background-color: var(--red-light);
  transform: skewY(6deg); 
  margin: 50px 0; 
  border-top-left-radius: 170px; 
  border-bottom-right-radius: 170px;
}

.partner { 
  max-height: 40px; 
}

.blog-image { 
  flex-shrink: 0; 
  width:100px 
}

@media (width < 768px) {
  .section-title { font-size: 2.5rem; }
  .features-section { padding: 60px 0; }
}

/* Contact Section */
.contact-section {
  background: linear-gradient(to right, var(--gray-100), var(--contact-bg));
  padding: 60px 0;
}

.contact-info i {
  font-size: 1.5rem;
  color: var(--red-light);
  margin-right: 15px;
}

.contact-form .form-control {
  border-radius: 12px;
  padding: 12px;
}

.contact-form button {
  background-color: var(--red-light);
  color: var(--white);
  border-radius: 12px;
  padding: 12px;
  border: none;
  width: 100%;
}

/* Footer */
.footer-links { 
  margin-top: 50px; 
}

.footer-links h6 { 
  font-weight: 600; 
  margin-bottom: 15px; 
}

.social-icons a { 
  font-size: 1.2rem;
  margin-right: 10px; 
  color: var(--red-light); 
}

.footer-logo { 
  width: 200px; 
}

.button { 
  font-size: 12px; 
  background-color: var(--red-light); 
}

.button:hover { 
  background-color: var(--red-dark); 
}

.section-spacing { 
  padding: 90px 0; 
}