html {
  scroll-behavior: smooth;
}body {
            font-family: 'Inter', sans-serif;
            line-height: 1.6;
            color: var(--gray-800);
        }

    a { color: inherit;}
    .hero {
      background: linear-gradient(to right, #004080, #0073e6);
      color: white;
      padding: 60px 0;
    }

    .section-title {
      font-weight: bold;
      color: #004080;
    }

  

 :root {
            --primary-blue: #1e3a8a;
            --accent-blue: #3b82f6;
            --light-blue: #e0f2fe;
            --dark-blue: #0f172a;
            --gold: #fbbf24;
            --gray-100: #f8fafc;
            --gray-800: #1e293b;
        }

        .navbar {
            padding: 1rem 0;
        }

        .navbar-brand {
            font-weight: 700;
            font-size: 1.5rem;
            color: white !important;
            max-width: 210px;
        }

        .navbar-nav .nav-link {
            font-weight: 500;
            margin-left: 15px;
            transition: all 0.3s ease;
        }

        .navbar-nav .nav-link:hover {
            color: var(--primary-blue) !important;
            transform: translateY(-2px);
        }

        /* Hero Section */
        .hero-section {
            background: linear-gradient(135deg, #003366 0%, #005b99 100%);
            color: white;
            padding: 100px 0;
            position: relative;
            overflow: hidden;
        }

        .hero-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="white" opacity="0.1"><polygon points="0,0 1000,100 1000,0"/></svg>');
            background-size: cover;
        }

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

        .hero-title {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .hero-subtitle {
            font-size: 1.2rem;
            opacity: 0.9;
            margin-bottom: 2rem;
        }


 
.section {padding-top: 80px;}

        .section-title {
            font-size: 2.5rem;
            font-weight: 700;
            text-align: center;
            margin-bottom: 1.75rem;
            color: var(--primary-blue);
            position: relative;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: var(--gold);
            border-radius: 2px;
        }

        /* Card Styles */
        .custom-card {
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            padding: 1.5rem;
            /* margin-bottom: 2rem; */
            transition: all 0.3s ease;
            border: none;
        }

        .custom-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
        }

        .card-header-custom {
            background: linear-gradient(135deg, var(--light-blue), rgba(59, 130, 246, 0.1));
            border-radius: 10px;
            padding: 1.125rem;
            margin-bottom: 1.25rem;
            border: none;
        }

        .card-title {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--primary-blue);
            margin-bottom: 0;
        }

        /* List Styles */
        .custom-list {
            list-style: none;
            padding: 0;
        }

        .custom-list li {
            padding: 0px 0;
            position: relative;
            padding-left: 20px;
            margin-bottom: 6px;
        }

        .custom-list li::before {
            content: '•';
            color: var(--accent-blue);
            font-weight: bold;
            position: absolute;
            left: 0;
        }

        .custom-list li:last-child {
            border-bottom: none;
        }

        /* Supplier Section */
        .supplier-section {
            background: var(--gray-100);
        }

        .supplier-card {
            background: white;
            border-radius: 15px;
            padding: 1.5rem;
            margin-bottom: 2rem;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }

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

        .supplier-logo {
            height: 60px;
            width: auto;
            margin-bottom: 1rem;
        }

        .supplier-title {
            font-size: 1.3rem;
            font-weight: 600;
            color: var(--primary-blue);
            margin-bottom: 1rem;
        }

        .supplier-description {
            font-size: 0.9rem;
            color: #666;
            margin-bottom: 1rem;
        }
.supplier-card .custom-list > li {
    width: 50%;
}










@media(max-width:1023px) {
  html { font-size:15px}
  .banner .display-4 {
    font-size: 3rem;
}
 .banner p.lead {
    font-size: 1.1rem;
}   
  .section-title { font-size: 2rem;}
.navbar-nav .nav-link {
    font-weight: 500;
    margin-left: 10px;
    transition: all 0.3s ease;
}
.navbar-brand {
    max-width: 180px;
}
}
@media(max-width:767px) {
  html { font-size:14px}
  .banner .display-4 {
    font-size: 2rem;
}
  .section-title { font-size: 2rem;}
button.navbar-toggler {border:1px solid #004a83;line-height: 25px;}

      .hero-title {
                font-size: 2.5rem;
            }
            
            .section-title {
                font-size: 2rem;
            }
            
            .hero-section {
                padding: 60px 0;
            }
            
            .section {
                padding-top: 50px;
            }
}
@media(max-width:570px) {
.supplier-card .custom-list > li {
    width: 100%;
}
}