:root {
        /* Modern Color System */
        --primary-blue: #013966;
        --primary-orange: #f97316;
        --navy-900: #0f172a;
        --navy-800: #1e293b;
        --navy-700: #334155;
        --navy-600: #475569;
        --navy-500: #64748b;
        --navy-400: #94a3b8;
        --navy-300: #cbd5e1;
        --navy-200: #e2e8f0;
        --navy-100: #f1f5f9;

        /* System Colors */
        --white: #ffffff;
        --gray-50: #f8fafc;
        --gray-100: #f1f5f9;
        --gray-200: #e2e8f0;
        --gray-300: #cbd5e1;
        --gray-400: #94a3b8;
        --gray-500: #64748b;

        /* Gradients */
        --gradient-primary:linear-gradient(135deg, #054a82 0%, #013966 100%);
        --gradient-secondary: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
        --gradient-hero: linear-gradient(
          135deg,
          #0f172a 0%,
          #1e293b 50%,
          #334155 100%
        );

        /* Shadows */
        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
          0 2px 4px -1px rgba(0, 0, 0, 0.06);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
          0 4px 6px -2px rgba(0, 0, 0, 0.05);
        --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
          0 10px 10px -5px rgba(0, 0, 0, 0.04);

        /* Border Radius */
        --radius-sm: 0.375rem;
        --radius-md: 0.5rem;
        --radius-lg: 0.75rem;
        --radius-xl: 1rem;
        --radius-2xl: 1.5rem;
      }

      /* Reset and Base Styles */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
      }

      body {
        font-family:
          "Inter",
          -apple-system,
          BlinkMacSystemFont,
          sans-serif;
        font-weight: 400;
        line-height: 1.6;
        color: var(--navy-700);
        background-color: var(--white);
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      /* Modern Typography Scale */
      .text-display {
        font-family: "Space Grotesk", sans-serif;
        font-size: clamp(2.5rem, 5vw, 4rem);
        font-weight: 700;
        line-height: 1.1;
        color: var(--navy-900);
        letter-spacing: -0.02em;
      }

      .text-h1 {
        font-family: "Space Grotesk", sans-serif;
        font-size: clamp(2rem, 4vw, 3rem);
        font-weight: 700;
        line-height: 1.2;
        color: var(--navy-900);
        letter-spacing: -0.01em;
      }

      .text-h2 {
        font-family: "Space Grotesk", sans-serif;
        font-size: clamp(1.5rem, 3vw, 2.25rem);
        font-weight: 600;
        line-height: 1.25;
        color: var(--navy-900);
      }

      .text-h3 {
        font-family: "Space Grotesk", sans-serif;
        font-size: clamp(1.25rem, 2.5vw, 1.875rem);
        font-weight: 600;
        line-height: 1.3;
        color: var(--navy-900);
      }

      .text-lead {
        font-size: 1.25rem;
        font-weight: 400;
        line-height: 1.6;
        color: var(--navy-600);
      }

      .text-body {
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.6;
        color: var(--navy-600);
      }

      .text-small {
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 1.5;
        color: var(--navy-500);
      }

      /* Modern Navigation */
      .navbar-modern {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--gray-200);
        box-shadow: var(--shadow-sm);
        transition: all 0.3s ease;
        padding: 1rem 0;
      }

      .navbar-modern.scrolled {
        background: rgba(255, 255, 255, 0.98);
        box-shadow: var(--shadow-md);
      }

      .navbar-brand-modern {
        display: flex;
        align-items: center;
        font-family: "Space Grotesk", sans-serif;
        font-weight: 700;
        font-size: 1.5rem;
        color: var(--navy-900);
        text-decoration: none;
        transition: transform 0.2s ease;
      }

      .navbar-brand-modern:hover {
        transform: scale(1.02);
        color: var(--primary-blue);
      }

      .nav-link-modern {
        font-weight: 500;
        color: var(--navy-600);
        padding: 0.5rem 1rem;
        border-radius: var(--radius-md);
        transition: all 0.2s ease;
        position: relative;
        text-decoration: none;
      }

      .nav-link-modern:hover {
        color: var(--primary-blue);
        background-color: var(--gray-100);
      }

      .nav-link-modern.active {
        color: var(--primary-blue);
        background-color: var(--gray-100);
      }

      /* Modern Button System */
      .btn-modern {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.75rem 1.5rem;
        border-radius: var(--radius-lg);
        font-weight: 600;
        font-size: 0.875rem;
        text-decoration: none;
        border: none;
        cursor: pointer;
        transition: all 0.2s ease;
        position: relative;
        overflow: hidden;
      }

      .btn-primary-modern {
        background: var(--gradient-primary);
        color: var(--white);
        box-shadow: var(--shadow-md);
      }

      .btn-primary-modern:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
        color: var(--white);
      }

      .btn-secondary-modern {
        background: var(--white);
        color: var(--navy-700);
        border: 2px solid var(--gray-300);
        box-shadow: var(--shadow-sm);
      }

      .btn-secondary-modern:hover {
        background: var(--gray-50);
        border-color: var(--primary-blue);
        color: var(--primary-blue);
        transform: translateY(-1px);
      }

      .btn-outline-modern {
        background: transparent;
        color: var(--primary-blue);
        border: 2px solid var(--primary-blue);
      }

      .btn-outline-modern:hover {
        background: var(--primary-blue);
        color: var(--white);
        transform: translateY(-1px);
      }

      /* Modern Sections */
      .section-modern {
        padding: 5rem 0;
        position: relative;
      }

      .section-hero {
       background: var(--gradient-hero);
    color: var(--white);
    min-height: 85vh;
    display: flex
;
    align-items: center;
    position: relative;
    overflow: hidden;
    margin-top: 94px;
      }

      .section-hero::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 100 100"><defs><pattern id="grain" patternUnits="userSpaceOnUse" width="100" height="100"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.05)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.05)"/><circle cx="50" cy="10" r="1" fill="rgba(255,255,255,0.03)"/><circle cx="90" cy="40" r="1" fill="rgba(255,255,255,0.03)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
        opacity: 0.4;
      }

      .section-light {
        background: var(--white);
      }

      .section-gray {
        background: var(--gray-50);
      }

      /* Modern Cards */
      .card-modern {
        background: var(--white);
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-xl);
        padding: 2rem;
        box-shadow: var(--shadow-sm);
        transition: all 0.3s ease;
        height: 100%;
        position: relative;
        overflow: hidden;
      }

      .card-modern::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--gradient-primary);
        transform: scaleX(0);
        transition: transform 0.3s ease;
      }

      .card-modern:hover {
        transform: translateY(-8px);
        box-shadow: var(--shadow-xl);
        border-color: var(--primary-blue);
      }

      .card-modern:hover::before {
        transform: scaleX(1);
      }

      .card-course {
        background: var(--white);
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-2xl);
        padding: 2.5rem;
        box-shadow: var(--shadow-md);
        transition: all 0.3s ease;
        height: 100%;
        position: relative;
        overflow: hidden;
      }

      .card-course:hover {
        transform: translateY(-12px);
        box-shadow: var(--shadow-xl);
        border-color: var(--primary-orange);
      }

      /* Modern Icons */
      .icon-modern {
        width: 4rem;
        height: 4rem;
        border-radius: var(--radius-xl);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        color: var(--white);
        margin-bottom: 1.5rem;
        position: relative;
        overflow: hidden;
      }

      .icon-ai {
        background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
      }

      .icon-women {
        background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
      }

      .icon-satellite {
        background: linear-gradient(135deg, #06b6d4 0%, #10b981 100%);
      }

      .icon-automation {
        background: linear-gradient(135deg, #f97316 0%, #dc2626 100%);
      }

      .icon-contact {
        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
      }

      /* Modern Stats */
      .stat-modern {
        text-align: center;
        padding: 1.5rem;
      }

      .stat-number {
        font-family: "Space Grotesk", sans-serif;
        font-size: 3rem;
        font-weight: 800;
        line-height: 1;
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 0.5rem;
      }

      .stat-label {
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--navy-600);
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }

      /* Modern Animations */
      @keyframes float {
        0%,
        100% {
          transform: translateY(0px);
        }
        50% {
          transform: translateY(-10px);
        }
      }

      @keyframes fadeInUp {
        from {
          opacity: 0;
          transform: translateY(30px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .animate-float {
        animation: float 6s ease-in-out infinite;
      }

      .animate-fade-in-up {
        animation: fadeInUp 0.6s ease-out;
      }

      /* Modern Forms */
      .form-modern .form-control {
        border: 2px solid var(--gray-200);
        border-radius: var(--radius-lg);
        padding: 0.875rem 1rem;
        font-weight: 500;
        transition: all 0.2s ease;
        background: var(--white);
      }

      .form-modern .form-control:focus {
        border-color: var(--primary-blue);
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
        outline: none;
      }

      .form-modern .form-label {
        font-weight: 600;
        color: var(--navy-700);
        margin-bottom: 0.5rem;
      }

      /* Modern Footer */
      .footer-modern {
        background: var(--navy-900);
        color: var(--gray-300);
        padding: 3rem 0 2rem;
        position: relative;
      }

      .footer-modern::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent,
          var(--navy-700),
          transparent
        );
      }

      /* Responsive Design */
      @media (max-width: 768px) {
        .section-modern {
          padding: 3rem 0;
        }

        .card-modern,
        .card-course {
          padding: 1.5rem;
        }

        .icon-modern {
          width: 3rem;
          height: 3rem;
          font-size: 1.25rem;
        }

        .stat-number {
          font-size: 2.5rem;
        }
      }

      /* Floating Bubbles */
      .bubbles {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        pointer-events: none;
      }

      .bubble {
        position: absolute;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        animation: float-up 6s infinite ease-in-out;
        pointer-events: none;
      }

      .bubble:nth-child(1) {
        width: 20px;
        height: 20px;
        left: 10%;
        animation-delay: 0s;
        animation-duration: 6s;
      }

      .bubble:nth-child(2) {
        width: 30px;
        height: 30px;
        left: 20%;
        animation-delay: 1s;
        animation-duration: 8s;
      }

      .bubble:nth-child(3) {
        width: 15px;
        height: 15px;
        left: 35%;
        animation-delay: 2s;
        animation-duration: 7s;
      }

      .bubble:nth-child(4) {
        width: 25px;
        height: 25px;
        left: 50%;
        animation-delay: 3s;
        animation-duration: 9s;
      }

      .bubble:nth-child(5) {
        width: 18px;
        height: 18px;
        left: 65%;
        animation-delay: 1.5s;
        animation-duration: 6.5s;
      }

      .bubble:nth-child(6) {
        width: 35px;
        height: 35px;
        left: 80%;
        animation-delay: 4s;
        animation-duration: 8.5s;
      }

      .bubble:nth-child(7) {
        width: 12px;
        height: 12px;
        left: 90%;
        animation-delay: 2.5s;
        animation-duration: 7.5s;
      }

      @keyframes float-up {
        0% {
          bottom: -100px;
          transform: translateX(0);
          opacity: 0;
        }
        10% {
          opacity: 1;
        }
        90% {
          opacity: 1;
        }
        100% {
          bottom: 100vh;
          transform: translateX(-20px);
          opacity: 0;
        }
      }

      /* Hero Title Adjustments */
      .hero-title-small {
        font-family: "Space Grotesk", sans-serif;
        font-size: clamp(2rem, 4vw, 2.5rem);
        font-weight: 700;
        color: var(--white);
        line-height: 1.2;
        margin-bottom: 3rem;
        margin-top: 2rem;
        margin-left: 1rem;
        margin-right: 1rem;
        letter-spacing: -0.02em;
      }

      /* Utility Classes */
      .gradient-text {
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      .gradient-text-orange {
        background: var(--gradient-secondary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      /* Button Sizing */
      .btn-sm {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
      }

      .btn-lg {
        padding: 1rem 2rem;
        font-size: 1rem;
      }

      /* Testimonial Enhancements */
      .carousel-item blockquote {
        font-style: italic;
        position: relative;
        padding: 1rem 0;
      }

      .carousel-item blockquote::before {
        content: '"';
        font-size: 4rem;
        color: var(--primary-blue);
        position: absolute;
        top: -1rem;
        left: -1rem;
        opacity: 0.3;
        font-family: Georgia, serif;
      }

      /* Blog Card Enhancements */
      .card-modern img {
        transition: transform 0.3s ease;
      }

      .card-modern:hover img {
        transform: scale(1.05);
      }

      /* Carousel Controls */
      .carousel-control-custom {
        background: var(--white);
        border: 2px solid var(--primary-blue);
        color: var(--primary-blue);
        border-radius: var(--radius-lg);
        padding: 0.5rem 1rem;
        transition: all 0.3s ease;
      }

      .carousel-control-custom:hover {
        background: var(--primary-blue);
        color: var(--white);
      }
.contact-icon{
    width: 3rem;
    height: 3rem;
    font-size: 1.25rem
}

@media screen and (min-width:320px) and (max-width:400px){
    .text-h3 {
    font-size: 15px !important;
}
.hero-title-small {
    margin:25px 0px 10px;
}
.card-modern {
    padding: 22px 15px !important;
}
.contant-description{
    width:75%;
}
}