:root {
        --bg: #0a0a0a;
        --text: #ffffff;
        --accent: #0d6efd;
      }

      body.light {
        --bg: #e5f0f0;
        --text: #000000;
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: Arial, sans-serif;
        transition: 0.3s;
      }

      body {
        background: var(--bg);
        color: var(--text);
      }

      header {
        padding: 20px 50px;
        position: fixed;
        width: 100%;
        top: 0;
        background: rgba(0,0,0,0.6);
        z-index: 999;
      }

      body.light header {
        background: rgba(255,255,255,0.7);
      }

      nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      nav ul {
        display: flex;
        list-style: none;
        gap: 20px;
        align-items: center;
      }

      nav a {
        color: var(--text);
        text-decoration: none;
        font-weight: bold;
      }

      .toggle-btn {
        cursor: pointer;
        background-color: transparent;
        border: none;
      }

      .hero {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 100px 50px 50px;
        flex-wrap: wrap;
      }

      .hero-text {
        max-width: 600px;
      }

      .hero-text h1 {
        font-size: 3rem;
        margin-bottom: 10px;
      }

      .hero-text span {
        color: var(--accent);
      }

      .typing {
        border-right: 3px solid var(--accent);
        white-space: nowrap;
        overflow: hidden;
        display: inline-block;
        animation: blink 0.7s infinite;
      }

      @keyframes blink {
        50% { border-color: transparent; }
      }

      .hero-text p {
        font-size: 1.2rem;
        color: gray;
        margin-bottom: 20px;
      }

      .hero-text button {
        padding: 12px 25px;
        border: none;
        background: var(--accent);
        color: white;
        font-size: 1rem;
        border-radius: 30px;
        cursor: pointer;
      }

      .hero-img img {
        width: 300px;
        border-radius: 20px;
        box-shadow: 0 0 30px rgba(13,110,253,0.5);
        animation: float 3s ease-in-out infinite;
      }

    

      .mid-gallery {
        padding: 70px 15px;
        text-align: center;
        overflow: hidden;
      }

      .gallery-title {
        font-size: clamp(22px, 4vw, 34px);
        font-weight: 700;
      }

      .gallery-sub {
        color: #666;
        margin-bottom: 30px;
        font-size: clamp(14px, 3vw, 16px);
      }

      /* Slider */
      .gallery-slider {
        width: 100%;
        overflow: hidden;
      }

      .gallery-track {
        display: flex;
        gap: 20px;
        animation: galleryScroll 28s linear infinite;
      }

      /* Card */
      .gallery-card {
        width: clamp(200px, 70vw, 260px);
        height: clamp(260px, 80vw, 330px);
        border-radius: 22px;
        overflow: hidden;
        flex-shrink: 0;
        background: #000;
        box-shadow: 0 15px 35px rgba(0,0,0,0.25);
      }

      /* Image & Video */
      .gallery-card img,
      .gallery-card video {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      /* Animation */
      @keyframes galleryScroll {
        from {
          transform: translateX(0);
        }
        to {
          transform: translateX(-1600px);
        }
      }


            .education-section{
            padding: 100px 8%;
            background: transparent;
            color: #fff;
            font-family: 'Poppins', sans-serif;
        }

        .section-title{
            text-align: center;
            font-size: 40px;
            margin-bottom: 60px;
            position: relative;
            letter-spacing: 2px;
        }

        .section-title::after{
            content: "";
            width: 150px;
            height: 4px;
            background: linear-gradient(90deg,#00f5d4,#c77dff);
            display: block;
            margin: 15px auto 0;
            border-radius: 10px;
        }

        /* Container */
        .education-container{
            display: flex;
            gap: 30px;
            flex-wrap: wrap;
            justify-content: center;
        }

        /* Card */
        .edu-card{
            background: #1a1a1a;
            padding: 30px;
            width: 320px;
            border-radius: 15px;
            transition: 0.4s ease;
            position: relative;
            border: 1px solid rgba(255,255,255,0.08);
        }

        /* Glow hover */
        .edu-card:hover{
            transform: translateY(-10px);
            box-shadow: 0 0 25px rgba(0,255,255,0.3);
        }

        /* Highlight card */
        .edu-card.highlight{
            border: 1px solid #c77dff;
            box-shadow: 0 0 20px rgba(199,125,255,0.4);
        }

        .edu-card h3{
            color: #00f5d4;
            margin-bottom: 10px;
        }

        .edu-card h4{
            font-size: 18px;
            margin-bottom: 10px;
        }

        .edu-card .college{
            font-size: 14px;
            color: #c77dff;
            margin-bottom: 15px;
        }

        .edu-card p{
            font-size: 14px;
            line-height: 1.6;
            margin-bottom: 15px;
            color: #ccc;
        }

        .edu-card a{
            text-decoration: none;
            color: #00f5d4;
            font-weight: 500;
            transition: 0.3s;
        }

        .edu-card a:hover{
            letter-spacing: 1px;
        }


          /* SECTION */
          .tech-section{
            max-width:1200px;
            margin:60px auto;
            padding:20px;
            text-align:center;
          }

          .tech-title{
            font-size:32px;
            margin-bottom:40px;
            color:#c48a2a;
          }

          /* GRID */
          .tech-grid{
            display:grid;
            grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
            gap:25px;
          }

          /* CARD */
          .tech-card{
            background:#ffffff;
            color:#000;
            border-radius:12px;
            padding:20px;
          }

          .tech-card:hover{
            transform:translateY(-6px);
            box-shadow:0 10px 20px rgba(0,0,0,0.15);
          }

          /* LOGO */
          .tech-card img{
            width:40px;
            margin-bottom:12px;
          }

          /* TEXT */
          .tech-card p{
            font-size:15px;
            font-weight:600;
          }

          
        
          /* Premium Vertical Card */
          .projects-section {
          padding: 80px 20px;
          background: transparent;
          color: #fff;
          text-align: center;
        }

          .section-title {
            font-size: 36px;
            margin-bottom: 50px;
            color: #d8e354;
          }

          .projects-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            max-width: 1200px;
            margin: auto;
          }

          .project-card {
            background: #141414;
            border-radius: 15px;
            overflow: hidden;
            transition: 0.4s ease;
            box-shadow: 0 0 20px rgba(0, 247, 255, 0.1);
          }

          .project-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 0 25px rgba(0, 247, 255, 0.5);
          }

          .project-img img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            transition: 0.4s;
          }

          .project-card:hover .project-img img {
            transform: scale(1.1);
          }

          .project-info {
            padding: 20px;
          }

          .project-info h3 {
            margin-bottom: 10px;
            color: #eae986;
          }

          .project-info p {
            font-size: 14px;
            color: #ccc;
            margin-bottom: 15px;
          }

          .project-links {
            display: flex;
            gap: 10px;
            justify-content: center;
          }

          .btn {
            padding: 8px 16px;
            border-radius: 30px;
            text-decoration: none;
            font-size: 14px;
            transition: 0.3s;
          }

          .btn.live {
            background: #d0d654;
            color: #000;
          }

          .btn.code {
            border: 1px solid #ebda3f;
            color: #dadf45;
          }

          .btn:hover {
            transform: scale(1.1);
          }


            /* footer */

            .portfolio-footer {
            background: #0d0d0d;
            color: #fff;
            padding: 60px 20px 20px;
            font-family: Arial, sans-serif;
          }

          .footer-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 40px;
            max-width: 1200px;
            margin: auto;
          }

          .footer-logo {
            font-size: 24px;
            color: #e1de5d;
            margin-bottom: 10px;
          }

          .footer-col h3 {
            margin-bottom: 15px;
            color: #e4e860;
          }

          .footer-col p {
            font-size: 14px;
            line-height: 1.6;
            color: #ccc;
          }

          .footer-col ul {
            list-style: none;
            padding: 0;
          }

          .footer-col ul li {
            margin: 8px 0;
          }

          .footer-col ul li a {
            color: #ccc;
            text-decoration: none;
            transition: 0.3s;
          }

          .footer-col ul li a:hover {
            color: #e1dc42;
          }

          .social-icons a,
          .tech-icons i {
            font-size: 20px;
            margin-right: 12px;
            color: #ccc;
            transition: 0.3s;
          }

          .social-icons a:hover,
          .tech-icons i:hover {
            color: #ecef54;
            transform: scale(1.2);
          }

          .footer-bottom {
            text-align: center;
            margin-top: 40px;
            border-top: 1px solid #222;
            padding-top: 15px;
            font-size: 14px;
            color: #aaa;
          }

            /* ============================= */
      /* PREMIUM RESPONSIVE SYSTEM */
      /* ============================= */

      /* Tablets */
      @media (max-width: 1024px) {

        header {
          padding: 18px 30px;
        }

        .hero {
          padding: 120px 30px 60px;
          flex-direction: column-reverse;
          text-align: center;
          gap: 40px;
        }

        .hero-img img {
          width: 260px;
        }

        .hero-text h1 {
          font-size: 2.5rem;
        }

        .projects-container {
          grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        }
      }


      /* ============================= */
      /* MOBILE PHONES */
      /* ============================= */

      @media (max-width: 768px) {

        /* NAVIGATION */
        nav ul {
          position: fixed;
          top: 70px;
          right: -100%;
          height: 100vh;
          width: 240px;
          background: var(--bg);
          flex-direction: column;
          padding: 40px 20px;
          gap: 25px;
          transition: 0.4s ease;
          box-shadow: -10px 0 30px rgba(0,0,0,0.3);
        }

        nav ul.active {
          right: 0;
        }

        .toggle-btn {
          font-size: 22px;
          color: var(--text);
        }

        /* HERO */
        .hero {
          padding: 110px 20px 50px;
        }

        .hero-text h1 {
          font-size: 2rem;
          line-height: 1.3;
        }

        .hero-text p {
          font-size: 1rem;
        }

        .hero-img img {
          width: 220px;
        }

        /* GALLERY */
        .gallery-track {
          animation-duration: 35s;
        }

        .gallery-card {
          width: 180px;
          height: 260px;
        }

        /* TECH STACK */
        .tech-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 18px;
        }

        .tech-card {
          padding: 16px;
        }

        /* PROJECTS */
        .projects-section {
          padding: 60px 15px;
        }

        .section-title {
          font-size: 26px;
        }

        .project-img img {
          height: 180px;
        }

        .project-info h3 {
          font-size: 18px;
        }

        /* FOOTER */
        .footer-container {
          grid-template-columns: 1fr;
          text-align: center;
        }

        .social-icons,
        .tech-icons {
          justify-content: center;
        }
      }


      /* ============================= */
      /* SMALL PHONES */
      /* ============================= */

      @media (max-width: 480px) {

        .hero-text h1 {
          font-size: 1.7rem;
        }

        .hero-img img {
          width: 180px;
        }

        .gallery-card {
          width: 150px;
          height: 220px;
        }

        .project-card {
          border-radius: 12px;
        }

        .btn {
          font-size: 12px;
          padding: 6px 12px;
        }
      }

      /* Smoother mobile performance */
      @media (max-width: 768px) {
        [data-aos] {
          transform: none !important;
          opacity: 1 !important;
        }
      }

      /* Subtle section spacing */
      section {
        scroll-margin-top: 80px;
      }