@keyframes zoomOutAnimation {
      0% { transform: scale(1); }
      100% { transform: scale(0.95); } 
    }

    .hero-section {
      min-height: 100vh; 
      display: flex;
      animation: zoomOutAnimation 5s ease-in-out infinite alternate; 
      margin-top: 3rem;
    }

    .hero-section .card {
        background: rgba(255,255,255,0.05);
    }

    .hero-heading {
      margin-left: 1.5rem;
    }

    .hero-section p,
    .hero-section .card p {
      font-size: 1.35rem;
    }

    .assignments-section,
    .about-section,
    .process-section,
    .domain-section,
    .solution-section,
    .service-section{
      min-height: 80vh; 
      display: flex;
      align-items: center; 
      position: relative;
      overflow-x: hidden;
    }

    .assignments-section::before,
    .assignments-section::after,
    .about-section::before,
    .about-section::after,
    .process-section::before,
    .process-section::after,
    .domain-section::before,
    .domain-section::after,
    .solution-section::before,
    .solution-section::after,
    .service-section::before,
    .service-section::after {
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: 20px; 
        pointer-events: none;
    }

    .assignments-section::before,
    .about-section::before,
    .process-section::before,    
    .domain-section::before,
    .solution-section::before,
    .service-section::before {
        top: 0;
        background: linear-gradient(to bottom, #2d2d2e, transparent); 
    }

    .assignments-section::after,
    .about-section::after,
    .process-section::after,
    .domain-section::after,
    .solution-section::after,
    .service-section::after {
        bottom: 0;
        background: linear-gradient(to top, #2d2d2e, transparent); 
    }

    .toggle-icon {
        font-size: 1.5rem;
        color: cyan;
        cursor: pointer;
        transition: transform 0.3s ease, color 0.3s ease;
    }

    section {
      position: relative;
      padding: 80px 0;
      width: 100%;
    }

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

    .card {
      background: rgba(255, 255, 255, 0.05);
      color: var(--cyan);
      backdrop-filter: blur(2px);
      transition: box-shadow 0.3s ease, transform 0.3s ease;
    }

    .card p {
      font-size: 1.10rem;
    }

    .about-section ul,
    .process-section ul,
    .domain-section ul,
    .solution-section ul,
    .service-section ul {
      margin-top: 1rem;  
      display: flex;
      flex-direction: column; 
      gap: 10px; 
    }

    .about-section h3,
    .process-section h3,
    .domain-section h3,
    .solution-section h3,
    .service-section h3 {
        margin-bottom: 0.75rem;
    }

    li {
      line-height: 25px;
    } 

    .custom-list {
        list-style: none; 
        padding: 0;
    }

    .custom-list li {
        position: relative;
        padding-left: 1.8rem; 
        margin-bottom: 0.75rem;
        font-size: 1.1rem;
    }

    .custom-list li::before {
        content: "\f280"; 
        font-family: "bootstrap-icons";
        position: absolute;
        left: 0;
        top: 0;
        color: cyan; 
        font-size: 1.1rem;
    }

    @media (max-width: 768px) {
      .hero h1 {
        font-size: 2rem;
      }
    }