/* Global Styles */
body {
    font-family: "Roboto", sans-serif;
    color: #444;
  }
  
  /* Navbar */
  .main-nav {
    background: linear-gradient(45deg, #1976d2, #64b5f6);
  }
  .main-nav .brand-logo {
    font-weight: 500;
  }
  .main-nav ul li a {
    color: #fff;
    font-weight: 500;
  }
  
  /* Hero Section */
  .hero-section {
    padding: 50px 0;
    background: #f5faff; /* Light background for contrast */
  }
  .hero-content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  .hero-text {
    margin-bottom: 20px;
  }
  .hero-text h1 {
    font-size: 3rem;
    margin-bottom: 10px;
  }
  .hero-text h4 {
    font-size: 1.7rem;
    margin-bottom: 20px;
  }
  .hero-image img {
    width: 100%;
    border-radius: 6px;
  }
  
  /* Key Benefits */
  .key-benefits-section {
    padding: 50px 0;
  }
  .benefit-row {
    margin-top: 40px;
  }
  .benefit-icon {
    margin-bottom: 10px;
  }
  .benefit-icon:hover {
    transform: scale(1.05);
    transition: 0.3s;
  }
  
  /* Section Titles */
  .section-title {
    font-size: 2.2rem;
    color: #1976d2;
    margin-bottom: 30px;
  }
  
  /* Features Section */
  .features-section {
    padding: 50px 0;
  }
  .features-list {
    list-style: none;
    padding: 0;
    font-size: 1.1rem;
  }
  .features-list li {
    margin: 10px 0;
    display: flex;
    align-items: center;
  }
  .features-list li i {
    color: #1976d2;
    margin-right: 10px;
    font-size: 1.3rem;
  }
  .features-image img {
    max-width: 100%;
    border-radius: 8px;
  }
  
  /* Contact Section */
  .contact-section {
    padding: 50px 0;
  }
  .contact-info h5 {
    margin-bottom: 15px;
  }
  .card-title {
    font-size: 1.5rem;
    margin-bottom: 20px;
  }
  
  /* Footer */
  .page-footer {
    background: #f5f5f5;
    padding: 20px 0;
    color: #666;
  }
  
  /* Buttons */
  .cta-btn {
    background: linear-gradient(45deg, #1976d2, #64b5f6);
    border: none;
    padding: 12px 25px;
    border-radius: 30px;
    text-transform: uppercase;
    font-size: 1rem;
    line-height: 1.2;
  }

  /* .video-container {
    min-height: 400px;
    margin-bottom: 20px;
  } */
  /* Center text within carousel slides */
  .carousel-item h5, 
  .carousel-item p {
    margin-top: 15px;
  }
  
  /* Responsive */
  @media (max-width: 992px) {
    .hero-content {
      flex-direction: column;
      text-align: center;
    }
    .hero-image {
      margin-top: 20px;
    }
  }
  
  @media (max-width: 600px) {
    .hero-text h1 {
      font-size: 2.5rem;
    }
    .hero-text h4 {
      font-size: 1.4rem;
    }
    .section-title {
      font-size: 1.8rem;
    }
  }

  .sidenav-trigger {
    position: absolute!important;
  }
  /* About Section: Default HTML order is text then image (good for mobile) */
  @media only screen and (min-width: 601px) {
    #about .row {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    /* The image column (with .about-image) should appear first */
    #about .about-image {
      order: 1;
    }
    /* The text column gets pushed to the right */
    #about .about-text {
      order: 2;
      padding-left: 20px;
    }
  }

  /* Make the navigation bar fixed at the top */
  nav.main-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px; /* Fixed height */
    background: rgba(33, 150, 243, 0.95);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: flex;
    align-items: center;
  }
  nav.main-nav .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 95%;
    margin: 0 auto;
  }
  .brand-logo {
    position: relative!important;
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    text-transform: uppercase;
    background: linear-gradient(45deg, #2980b9, #2c3e50);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
    line-height: 70px; /* vertically centered */
    margin: 0;
  }
  nav ul {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
  }
  nav ul li {
    list-style: none;
  }
  nav ul li a {
    font-size: 1rem;
    font-weight: 500;
    margin: 0 10px;
    line-height: 70px; /* vertically centered */
  }
  .sidenav-trigger {
    margin-left: 15px;
  }
  .sidenav {
    width: 250px;
  }
  body {
    padding-top: 70px; /* ensures content is not hidden behind the fixed nav */
  }
  @media only screen and (max-width: 600px) {
    .brand-logo {
      font-size: 2rem;
    }
    nav ul {
      display: none;
    }
    /* Adjust the trigger so it aligns well on mobile */
    .sidenav-trigger {
      margin-left: 0;
      line-height: 70px;
    }
  }

/* ╔═══════════════════════════════════════════════════╗
   ║  Professional nav call-to-action: “Live Demo”     ║
   ╚═══════════════════════════════════════════════════╝ */
   .live-demo-cta{
    background:linear-gradient(90deg,#3949ab 0%,#1e88e5 100%);
    color:#fff!important;
    font-weight:600;
    padding:0 24px;
    border-radius:28px;
    line-height:40px;
    display:inline-block;
    text-transform:uppercase;
    letter-spacing:.4px;
    box-shadow:0 4px 8px rgba(0,0,0,.12);
    transition:transform .15s ease-out,box-shadow .15s ease-out;
  }
  
  .live-demo-cta:hover,
  .live-demo-cta:focus{
    transform:translateY(-2px);
    box-shadow:0 8px 16px rgba(0,0,0,.18);
  }
  
  /* mobile sidenav: full-width & a bit of breathing room */
  .sidenav .live-demo-cta{
    display:block;
    margin:12px 16px;
    text-align:center;
  }
  
  
  
  
  /* You can also adjust the brand-logo styling as needed */