:root {

       --primary: #696cff;
       --secondary: #8592ff;
       --dark: #0b1220;
       --light: #f4f7fe;
       --success: #28c76f;
       --danger: #ea5455;
       --warning: #ff9f43;
   }

   * {
       font-family: 'Poppins', sans-serif;
   }

   html {
       scroll-behavior: smooth;
   }

   body {

       background: var(--light);
       overflow-x: hidden;
   }

   /*
        |--------------------------------------------------------------------------
        | NAVBAR
        |--------------------------------------------------------------------------
        */

   .navbar {

       background: rgba(11, 18, 32, 0.90);

       backdrop-filter: blur(10px);

       padding: 18px 0;

       position: sticky;

       top: 0;

       z-index: 999;
   }

   .navbar-brand {

       font-size: 32px;

       font-weight: 800;

       color: white !important;
   }

   .nav-link {

       color: white !important;

       margin-left: 20px;

       font-weight: 500;

       position: relative;
   }

   .nav-link::after {

       content: '';

       width: 0;

       height: 2px;

       background: white;

       position: absolute;

       left: 0;

       bottom: -5px;

       transition: 0.3s;
   }

   .nav-link:hover::after {

       width: 100%;
   }

   /*
        |--------------------------------------------------------------------------
        | HERO
        |--------------------------------------------------------------------------
        */

   .hero {

       min-height: 100vh;

       background:
           linear-gradient(rgba(4, 10, 30, 0.88),
               rgba(4, 10, 30, 0.90)),
           url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?q=80&w=1600');

       background-size: cover;

       background-position: center;

       display: flex;

       align-items: center;

       position: relative;

       overflow: hidden;
   }

   .hero::before {

       content: '';

       width: 450px;

       height: 450px;

       background: rgba(105, 108, 255, 0.2);

       position: absolute;

       top: -100px;

       left: -100px;

       border-radius: 50%;

       filter: blur(100px);
   }

   .hero::after {

       content: '';

       width: 350px;

       height: 350px;

       background: rgba(133, 146, 255, 0.15);

       position: absolute;

       bottom: -100px;

       right: -100px;

       border-radius: 50%;

       filter: blur(100px);
   }

   .hero-content {

       position: relative;

       z-index: 2;

       color: white;
   }

   .hero-content h1 {

       font-size: 70px;

       font-weight: 800;

       line-height: 1.2;
   }

   .hero-content h1 span {

       color: var(--secondary);
   }

   .hero-content p {

       font-size: 19px;

       margin-top: 20px;

       line-height: 1.8;

       color: #d9def2;
   }

   .hero-btn {

       background: linear-gradient(135deg,
               var(--primary),
               var(--secondary));

       border: none;

       color: white;

       padding: 16px 35px;

       border-radius: 15px;

       font-weight: 600;

       text-decoration: none;

       display: inline-block;

       margin-top: 30px;

       transition: 0.3s;

       box-shadow: 0 15px 35px rgba(105, 108, 255, 0.4);
   }

   .hero-btn:hover {

       transform: translateY(-5px);

       color: white;
   }

   /*
        |--------------------------------------------------------------------------
        | STATS
        |--------------------------------------------------------------------------
        */

   .stats {

       margin-top: -70px;

       position: relative;

       z-index: 3;
   }

   .stats-card {

       background: white;

       border-radius: 25px;

       padding: 35px;

       text-align: center;

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

       transition: 0.3s;
   }

   .stats-card:hover {

       transform: translateY(-10px);
   }

   .stats-card i {

       font-size: 55px;

       color: var(--primary);

       margin-bottom: 15px;
   }

   .stats-card h2 {

       font-size: 42px;

       font-weight: 700;
   }

   /*
        |--------------------------------------------------------------------------
        | SECTION
        |--------------------------------------------------------------------------
        */

   .section {

       padding: 100px 0;
   }

   .section-title {

       text-align: center;

       margin-bottom: 60px;
   }

   .section-title span {

       color: var(--primary);

       text-transform: uppercase;

       font-size: 14px;

       font-weight: 700;

       letter-spacing: 2px;
   }

   .section-title h2 {

       font-size: 48px;

       font-weight: 800;

       margin-top: 10px;

       color: var(--dark);
   }

   .section-title p {

       color: #666;

       max-width: 700px;

       margin: auto;

       margin-top: 15px;
   }

   /*
        |--------------------------------------------------------------------------
        | CARD
        |--------------------------------------------------------------------------
        */

   .modern-card {

       background: white;

       border-radius: 25px;

       overflow: hidden;

       height: 100%;

       transition: 0.4s;

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

       position: relative;
   }

   .modern-card:hover {

       transform: translateY(-12px);

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

   .card-top {

       height: 220px;

       background: linear-gradient(135deg,
               var(--primary),
               var(--secondary));

       display: flex;

       align-items: center;

       justify-content: center;

       position: relative;
   }

   .card-top i {

       font-size: 90px;

       color: white;
   }

   .premium-badge {

       position: absolute;

       top: 20px;

       right: 20px;

       background: gold;

       color: black;

       font-size: 12px;

       font-weight: 700;

       padding: 8px 15px;

       border-radius: 30px;
   }

   .card-body-custom {

       padding: 30px;
   }

   .card-body-custom h4 {

       font-size: 25px;

       font-weight: 700;

       margin-bottom: 15px;
   }

   .card-body-custom p {

       color: #666;

       line-height: 1.8;

       min-height: 80px;
   }

   .info-grid {

       display: grid;

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

       gap: 12px;

       margin-top: 20px;
   }

   .info-box {

       background: #f5f7ff;

       padding: 14px;

       border-radius: 14px;

       font-size: 14px;
   }

   .info-box strong {

       display: block;

       color: var(--primary);

       margin-bottom: 5px;
   }

   .btn-modern {

       background: linear-gradient(135deg,
               var(--primary),
               var(--secondary));

       width: 100%;

       display: block;

       text-align: center;

       padding: 15px;

       color: white;

       text-decoration: none;

       border-radius: 14px;

       margin-top: 25px;

       font-weight: 600;
   }

   .btn-modern:hover {

       color: white;
   }

   /*
        |--------------------------------------------------------------------------
        | FOOTER
        |--------------------------------------------------------------------------
        */

   footer {

       background: #081222;

       color: white;

       padding: 80px 0 30px;
   }

   .footer-title {

       font-size: 30px;

       font-weight: 700;

       margin-bottom: 20px;
   }

   .footer-links a {

       display: block;

       color: #c9d1f2;

       margin-bottom: 12px;

       text-decoration: none;
   }

   .footer-links a:hover {

       color: white;
   }

   .footer-bottom {

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

       margin-top: 40px;

       padding-top: 20px;

       text-align: center;

       color: #c9d1f2;
   }

   /*
        |--------------------------------------------------------------------------
        | RESPONSIVE
        |--------------------------------------------------------------------------
        */

   @media(max-width:992px) {

       .hero-content h1 {

           font-size: 48px;
       }
   }

   @media(max-width:768px) {

       .hero {

           text-align: center;

           padding: 120px 0;
       }

       .hero-content h1 {

           font-size: 38px;
       }

       .section-title h2 {

           font-size: 32px;
       }

       .info-grid {

           grid-template-columns: 1fr;
       }

       .stats {

           margin-top: 0;
       }
   }