:root{
      --primary:#5A67D8;
      --primary-dark:#4C51BF;
      --accent:#F56565;
      --bg:#F7FAFC;
      --text:#2D3748;
      --text-light:#718096;
      --radius:12px;
      --shadow:0 8px 24px rgba(0,0,0,.06);
    }
    *{box-sizing:border-box;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;}
    body{background:var(--bg);color:var(--text);line-height:1.6;}
    a{color:var(--primary);text-decoration:none}
    img{max-width:100%;display:block}
    .btn{background:var(--primary);color:#fff;padding:.85rem 2rem;border-radius:50px;font-weight:600;display:inline-block;transition:.3s;box-shadow:var(--shadow);}
    .btn:hover{background:var(--primary-dark);transform:translateY(-2px)}
    .center{text-align:center}

    /* ------ COLOURFUL TAGS ------ */
    .color-tags{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:1rem}
    .color-tags span{padding:.35rem .9rem;border-radius:999px;font-size:.85rem;font-weight:600;color:#fff;box-shadow:var(--shadow);}
    .tag1{background:#f472b6}.tag2{background:#60a5fa}.tag3{background:#34d399}.tag4{background:#fbbf24}.tag5{background:#a78bfa}.tag6{background:#fb7185}

    /* ------ NAVBAR + HAMBURGER ------ */
    header{position:sticky;top:0;z-index:1000;background:#fff;box-shadow:var(--shadow);}
    .nav-container{max-width:1100px;margin:auto;padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between;}
    .logo{font-weight:800;font-size:1.25rem;color:var(--primary)}
    .nav-links{display:flex;gap:2rem;list-style:none}
    .nav-links a{font-weight:600;color:var(--text);transition:color .2s}
    .nav-links a:hover{color:var(--primary)}
    .hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer}
    .hamburger span{width:26px;height:3px;background:var(--text);border-radius:2px;transition:.3s}
    @media(max-width:768px){
      .nav-links{position:fixed;right:-100%;top:60px;width:70%;max-width:280px;height:calc(100% - 60px);background:#fff;flex-direction:column;gap:1.5rem;padding:2rem;box-shadow:-4px 0 10px rgba(0,0,0,.08);transition:right .35s ease}
      .nav-links.open{right:0}
      .hamburger{display:flex}
    }

    /* ------ HERO ------ */
    .hero{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:80vh;padding:4rem 2rem;text-align:center;background:#fff}
    .hero-pic{width:200px;height:200px;border-radius:50%;object-fit:cover;box-shadow:0 10px 30px rgba(0,0,0,.1);margin-bottom:1.5rem}
    .hero h1{font-size:clamp(2.2rem,5vw,3.5rem);margin-bottom:1rem}
    .hero p{font-size:1.1rem;margin-bottom:1.5rem;max-width:700px}
    @media(max-width:768px){.hero-pic{width:180px;height:180px}}

    /* ------ ABOUT ------ */
    #about{padding:4rem 2rem;max-width:1100px;margin:auto}
    .about-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);display:flex;align-items:center;gap:2.5rem;padding:2.5rem;flex-wrap:wrap}
    .about-card .photo{width:220px;height:220px;border-radius:50%;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.08);flex-shrink:0}
    .about-card .photo img{width:100%;height:100%;object-fit:cover}
    .about-text{flex:1;min-width:280px}
    .about-text h2{margin-bottom:1rem;color:var(--primary)}

    /* ------ PROJECT & EXPERIENCE LIGHT CARDS ------ */
    .proj-card{background:linear-gradient(135deg,#e0e7ff 0%,#c7d2fe 100%);border:1px solid #a5b4fc}
    /* .exp-card{background:linear-gradient(135deg,#FFF 0%,#9DDCFF 100%);border:1px solid #9DDCFF} */
    .exp-card{border:1px solid #9DDCFF}
    

    /* ------ PROJECTS ------ */
    #projects{padding:4rem 2rem;max-width:1100px;margin:auto}
    .cards{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
    .card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:2rem;display:flex;flex-direction:column}
    .card h3{margin-bottom:.5rem}
    .card .role{font-size:.9rem;color:var(--text-light);margin-bottom:1rem}
    .more-detail{margin-top:auto;text-align:right;font-weight:600}

    /* ------ EXPERIENCE ------ */
    #experience{padding:4rem 2rem;max-width:1100px;margin:auto}
    .exp-cards{display:grid;gap:1.5rem}
    .exp-card{padding:2rem;border-radius:var(--radius);box-shadow:var(--shadow)}
    .exp-card h3{margin-bottom:.5rem;color:var(--primary)}
    .exp-card .role{margin-bottom:1rem;color:var(--text-light)}
    .exp-card ul{padding-left:1.2rem}

    /* ------ TESTIMONIAL CAROUSEL ------ */
    #testimonials{padding:4rem 2rem;max-width:800px;margin:auto;position:relative;overflow:hidden}
    .carousel{display:flex;transition:transform .6s ease}
    .carousel-item{min-width:100%;padding:2rem}
    .quote{background:#fff;border-left:6px solid var(--primary);padding:2rem;font-style:italic;border-radius:var(--radius);box-shadow:var(--shadow)}
    .quote strong{display:block;margin-top:1rem;text-align:right}

	<!-- =====  RESUME CSS  ===== -->

	  .resume-download{text-align:center;margin-bottom:2.5rem;}
	  .btn-download{background:var(--accent);color:#fff;padding:.85rem 2rem;border-radius:50px;font-weight:600;display:inline-flex;align-items:center;gap:.5rem;transition:.3s;margin-bottom:10px;}
	  .btn-download:hover{background:#e53e3e;transform:translateY(-2px)}
	  .resume-preview{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:#fff}
	  .resume-preview iframe{border:none;width:100%;height:600px}
	  .resume-fallback{text-align:center;margin-top:1rem;font-size:.9rem;color:var(--text-light)}
	  @media(max-width:768px){.resume-preview iframe{height:500px}}


	<!-- ===== ACHIEVE CARD CSS ===== -->
	<!-- ===== MINIMAL CSS (add once) ===== -->

  .container{max-width:1100px;margin:auto;padding:0 2rem}
  .sub-title{margin:3rem 0 1.5rem;text-align:center;font-size:1.4rem;color:var(--primary)}
  .achieve-card{text-align:center;padding:2rem 1.5rem;display:flex;flex-direction:column;align-items:center;gap:1rem}
  .achieve-icon{font-size:2.2rem;line-height:1}
  .achieve-card h4{margin-bottom:.5rem;color:var(--primary)}

 
  .section{padding:4rem 2rem;max-width:1100px;margin:auto}
  .section-title{font-size:2rem;margin-bottom:2.5rem;text-align:center}
  .sub-title{margin:3rem 0 1.5rem;text-align:center;font-size:1.4rem;color:var(--primary)}

  
    /* ------ CONTACT FORM ------ */
    #contact{padding:4rem 2rem;max-width:600px;margin:auto}
    .form-group{margin-bottom:1.25rem}
    .form-group label{display:block;margin-bottom:.35rem;font-weight:600}
    .form-group input,.form-group textarea{width:100%;padding:.75rem 1rem;border:1px solid #cbd5e0;border-radius:var(--radius);font-size:1rem;transition:border .3s}
    .form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--primary)}
    .form-group textarea{resize:vertical;min-height:140px}
    .form-status{margin-top:1rem;font-weight:600}

    /* ------ PROJECT DETAIL PAGE ------ */
    #project-detail{display:none;padding:4rem 2rem;max-width:800px;margin:auto}
    #project-detail a{margin-bottom:1rem;display:inline-block}

    /* ------ FOOTER ------ */
    footer{text-align:center;padding:2.5rem 1rem;font-size:.9rem;color:var(--text-light)}
	

   <!-- =====  Social Media CSS  ===== -->

  .social-bar{background:#fff;padding:3rem 0;margin-top:3rem}
  .social-icons{display:flex;gap:1.2rem;justify-content:center;align-items:center;margin-top:1rem}
  .social-icons img{transition:transform .3s,box-shadow .3s;border-radius:50%;background:#fff;padding:4px}
  .social-icons img:hover{transform:translateY(-3px);box-shadow:0 6px 16px rgba(0,0,0,.15)}
  @media(max-width:768px){.social-icons{gap:.8rem}.social-icons img{width:28px;height:28px}}

	<!-- =====  Back To Projects CSS  ===== -->
  .btn-back{background:var(--primary);color:#fff;padding:.5rem 1.2rem;border:none;border-radius:6px;cursor:pointer;font-size:1rem;transition:.3s}
	.btn-back:hover{background:var(--primary-dark); color:#fff}
	
	<!-- =====  Project Deatils CSS  ===== -->

  .pd-container{max-width:1100px;margin:auto;padding:2rem}
  .pd-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}
  .btn-back{background:var(--primary);color:#fff;border:none;padding:.5rem 1rem;border-radius:6px;cursor:pointer;font-size:1rem;transition:.3s}
  .btn-back:hover{background:var(--primary-dark)}
  .pd-category{background:var(--accent);color:#fff;padding:.25rem .75rem;border-radius:999px;font-size:.85rem;font-weight:600}

  .pd-hero{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin-bottom:2rem}
  .pd-hero img{width:100%;height:auto;object-fit:cover}
  .pd-title-box{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.55);color:#fff;padding:1.5rem}
  .pd-title-box h1{margin:0;font-size:2rem}
  .pd-title-box p{margin:.25rem 0 0;font-size:1rem;opacity:.9}

  .pd-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
  .pd-card{background:#fff;border-radius:var(--radius);padding:2rem;box-shadow:var(--shadow)}
  .pd-card h3{margin-bottom:1rem;color:var(--primary)}
  .pd-card ul{padding-left:1.2rem}
  .quote-box{border-left:5px solid var(--accent)}
  blockquote{margin:0;font-style:italic}
  cite{display:block;text-align:right;margin-top:1rem;font-weight:600;color:var(--text-light)}

  @media(max-width:768px){
    .pd-hero img{height:220px}
    .pd-title-box h1{font-size:1.5rem}
  }

	<!-- =====  PROJECT STORY  ===== -->

	.pd-story{background:#fff;border-radius:var(--radius);padding:2rem;box-shadow:var(--shadow);margin-bottom:2rem}
	.pd-story h2{margin-bottom:1rem;color:var(--primary)}
	.pd-story p{margin-bottom:1rem;line-height:1.7}
	.pd-story ul{padding-left:1.2rem}
	
	/* ----  PROJECT STORY CARD (clone)  ---- */

	.pd-story{
	  background: #fff;          /* soft grey */
	  border: 1px solid #e5e7eb;    /* thin border */
	  border-radius: 12px;          /* rounded corners */
	  padding: 2rem 2.5rem;         /* same padding as Objectives */
	  box-shadow: 0 4px 12px rgba(0,0,0,.06);
	  line-height: 1.7;
	  margin-bottom:10px;
	  text-align:justify;
	}
	.pd-story-card h3{margin-bottom: 1rem;color: var(--primary);}
	.pd-story-card p{margin-bottom: 1rem;}
	.story-list{padding-left: 1.2rem;list-style: none;}
	.story-list li{position: relative;padding-left: 1.2rem;margin-bottom: .5rem;}
	.story-list li::before{content: ':';position: absolute;left: 0;font-weight: bold;color: var(--accent);}
	.pd-story-card ul{padding-left: 1.2rem;margin-top: 1rem}
	.pd-story-card li{margin-bottom: .5rem}
	  
	#gcaptcha{ font-size:14px; color:#FF0000}