/* GENERAL */
        
        @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: "Poppins", sans-serif;
        }
        
        html {
            scroll-behavior: smooth;
        }
        
        p {
            color: rgb(85, 85, 85);
        }
        /* TRANSITION */
        
        a,
        .btn {
            transition: all 300ms ease;
        }
        /* DESKTOP NAV */
        
        nav,
        .nav-links {
            display: flex;
        }
        
        nav {
            justify-content: space-around;
            align-items: center;
            height: 17vh;
        }
        
        .nav-links {
            gap: 2rem;
            list-style: none;
            font-size: 1.5rem;
        }
        
        a {
            color: black;
            text-decoration: none;
            text-decoration-color: white;
        }
        
        a:hover {
            color: grey;
            text-decoration: underline;
            text-underline-offset: 1rem;
            text-decoration-color: rgb(181, 181, 181);
        }
        
        .logo {
            font-size: 2rem;
        }
        
        .logo:hover {
            cursor: default;
        }
        /* HAMBURGER MENU */
        
        #hamburger-nav {
            display: none;
        }
        
        .hamburger-menu {
            position: relative;
            display: inline-block;
        }
        
        .hamburger-icon {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 24px;
            width: 30px;
            cursor: pointer;
        }
        
        .hamburger-icon span {
            width: 100%;
            height: 2px;
            background-color: black;
            transition: all 0.3 ease-in-out;
        }
        
        .menu-links {
            position: absolute;
            top: 100%;
            right: 0;
            background-color: white;
            width: fit-content;
            max-height: 0;
            overflow: hidden;
            transition: all 0.3 ease-in-out;
        }
        
        .menu-links a {
            display: block;
            padding: 10px;
            text-align: center;
            font-size: 1.5rem;
            color: black;
            text-decoration: none;
            transition: all 0.3 ease-in-out;
        }
        
        .menu-links li {
            list-style: none;
        }
        
        .menu-links.open {
            max-height: 300px;
        }
        
        .hamburger-icon.open span:first-child {
            transform: rotate(45deg) translate(10px, 5px);
        }
        
        .hamburger-icon.open span:nth-child(2) {
            opacity: 0;
        }
        
        .hamburger-icon.open span:last-child {
            transform: rotate(-45deg) translate(10px, -5px);
        }
        
        .hamburger-icon span:first-child {
            transform: none;
        }
        
        .hamburger-icon span:first-child {
            opacity: 1;
        }
        
        .hamburger-icon span:first-child {
            transform: none;
        }
        /* SECTIONS */
        
        section {
            padding-top: 4vh;
            height: 96vh;
            margin: 0 10rem;
            box-sizing: border-box;
            min-height: fit-content;
        }
        
        .section-container {
            display: flex;
        }
        /* PROFILE SECTION */
        
        #profile {
            display: flex;
            justify-content: center;
            gap: 5rem;
            height: 80vh;
        }
        
        .section__pic-container {
            display: flex;
            height: 400px;
            width: 400px;
            margin: auto 0;
        }
        
        .section__text {
            align-self: center;
            text-align: center;
        }
        
        .section__text p {
            font-weight: 600;
        }
        
        .section__text__p1 {
            text-align: center;
        }
        
        .section__text__p2 {
            font-size: 1.75rem;
            margin-bottom: 1rem;
        }
        
        .title {
            font-size: 3rem;
            text-align: center;
        }
        
        #socials-container {
            display: flex;
            justify-content: center;
            margin-top: 1rem;
            gap: 1rem;
        }
        /* ICONS */
        
        .icon {
            cursor: pointer;
            height: 2rem;
        }
        /* BUTTONS */
        
        .btn-container {
            display: flex;
            justify-content: center;
            gap: 1rem;
        }
        
        .btn {
            font-weight: 600;
            transition: all 300ms ease;
            padding: 1rem;
            width: 8rem;
            border-radius: 2rem;
        }
        
        .btn-color-1,
        .btn-color-2 {
            border: rgb(53, 53, 53) 0.1rem solid;
        }
        
        .btn-color-1:hover,
        .btn-color-2:hover {
            cursor: pointer;
        }
        
        .btn-color-1,
        .btn-color-2:hover {
            background: rgb(53, 53, 53);
            color: white;
        }
        
        .btn-color-1:hover {
            background: rgb(0, 0, 0);
        }
        
        .btn-color-2 {
            background: none;
        }
        
        .btn-color-2:hover {
            border: rgb(255, 255, 255) 0.1rem solid;
        }
        
        .btn-container {
            gap: auto;
        }
        /* ABOUT SECTION */
        
        #about {
            position: relative;
        }
        
        .about-containers {
            gap: 2rem;
            margin-bottom: 2rem;
            margin-top: 1rem;
        }
        
        .about-details-container {
            justify-content: center;
            flex-direction: column;
        }
        
        .about-containers,
        .about-details-container {
            display: flex;
        }
        
        .about-pic {
            border-radius: 2rem;
        }
        
        .arrow {
            position: absolute;
            right: -5rem;
            bottom: 2.5rem;
        }
        
        .details-container {
            padding: 1rem;
            flex: 1;
            background: white;
            border-radius: 2rem;
            border: rgb(53, 53, 53) 0.1rem solid;
            border-color: rgb(163, 163, 163);
            text-align: center;
        }
        
        .section-container {
            gap: 4rem;
            height: 80%;
        }
        
        .section__pic-container {
            height: 400px;
            width: 400px;
            margin: auto 0;
        }
        /* EXPERIENCE SECTION */
        
        #experience {
            position: relative;
        }
        
        .experience-sub-title {
            color: rgb(85, 85, 85);
            font-weight: 600;
            font-size: 1rem;
            margin-bottom: 2rem;
        }
        
        .experience-details-container {
            display: flex;
            justify-content: center;
            flex-direction: column;
        }
        
        .article-container {
            display: flex;
            text-align: initial;
            flex-wrap: wrap;
            flex-direction: row;
            gap: 2.5rem;
            justify-content: space-around;
        }
        
        article {
            display: flex;
            flex-wrap: wr;
            width: 10rem;
            justify-content: space-around;
            gap: 1.5rem;
        }
        
        article .icon {
            cursor: default;
        }
        /* certificate SECTION */
        /* 
        #certificate {
            position: relative;
        }
        
        .certificate-sub-title {
            color: rgb(85, 85, 85);
            font-weight: 600;
            font-size: auto;
            margin-bottom: 2rem;
        }
        
        .certificate-details-container {
            display: flex;
            justify-content: center;
            flex-direction: column;
        } */
		#certificate {
		  position: relative;
		  padding: 50px 0;
		  text-align: center;
		}
		
		/* Title under certificate section */
		.certificate-sub-title {
		  color: rgb(85, 85, 85);
		  font-weight: 600;
		  font-size: 1.2rem; /* adjusted to a readable size */
		  margin-bottom: 2rem;
		}
		
		/* Main container for all certificates */
		.certificate-details-container {
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  flex-wrap: wrap; /* allows wrapping into multiple rows */
		  gap: 20px;       /* space between boxes */
		  width: 90%;
		  margin: auto;
		}
		
		/* Each individual award box */
		#certificate .details-container {
		  flex: 1 1 250px;   /* responsive width */
		  max-width: 320px;
		  background-color: #f9f9f9;
		  border-radius: 10px;
		  padding: 15px;
		  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		}
		
		/* Images inside award box */
		#certificate .project-img {
		  width: 100%;
		  height: 200px;        /* fixed height for uniform look */
		  object-fit: cover;    /* keeps proportions */
		  border-radius: 8px;
		}
		
		/* Buttons below image */
		#certificate .btn-container {
		  margin-top: 10px;
		}
		
		/* ---------- Responsive behavior ---------- */
		
		/* Tablet view (≤ 768px): two cards per row */
		@media (max-width: 768px) {
		  .certificate-details-container {
		    justify-content: center;
		  }
		
		  #certificate .details-container {
		    flex: 1 1 45%;
		  }
		}
		
		/* Mobile view (≤ 480px): one card per row */
		@media (max-width: 480px) {
		  #certificate .details-container {
		    flex: 1 1 100%;
		    max-width: 90%;
		  }
		}

		/* Honar and award */
		/* ============ HONORS & AWARDS SECTION ============ */

		#Honors-awards {
		  position: relative;
		  padding: 60px 0;
		  text-align: center;
		  background-color: #fff;
		}
		
		/* Section top small text */
		#Honors-awards .section__text__p1 {
		  color: rgb(85, 85, 85);
		  font-size: clamp(1rem, 2vw, 1.3rem);
		  font-weight: 500;
		  margin-bottom: 0.5rem;
		}
		
		/* Main heading */
		#Honors-awards .title {
		  color: #222;
		  font-size: clamp(1.8rem, 4vw, 2.8rem); /* Responsive scaling */
		  font-weight: 700;
		  margin-bottom: 2rem;
		}
		
		/* Certificates container */
		.certificate-details-container {
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  flex-wrap: wrap;
		  gap: 25px;
		  width: 90%;
		  margin: auto;
		}
		
		/* Each award box */
		#Honors-awards .details-container {
		  flex: 1 1 280px;
		  max-width: 320px;
		  background-color: #f9f9f9;
		  border-radius: 12px;
		  padding: 20px;
		  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
		  transition: transform 0.2s ease, box-shadow 0.2s ease;
		}
		
		#Honors-awards .details-container:hover {
		  transform: translateY(-5px);
		  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
		}
		
		/* Image inside award box */
		#Honors-awards .project-img {
		  width: 100%;
		  height: 200px;
		  object-fit: cover;
		  border-radius: 10px;
		}
		
		/* Certificate title */
		.certificate-sub-title {
		  color: rgb(60, 60, 60);
		  font-size: clamp(1rem, 2.5vw, 1.3rem);
		  font-weight: 600;
		  margin: 12px 0 8px 0;
		}
		
		/* Arrow icon at bottom */
		#Honors-awards .arrow {
		  width: 35px;
		  margin-top: 30px;
		  cursor: pointer;
		  transition: transform 0.2s ease;
		}
		
		#Honors-awards .arrow:hover {
		  transform: translateY(4px);
		}
		
		/* ============ RESPONSIVE TWEAKS ============ */
		@media (max-width: 768px) {
		  #Honors-awards {
		    padding: 40px 0;
		  }
		
		  #Honors-awards .project-img {
		    height: 160px;
		  }
		
		  #Honors-awards .details-container {
		    max-width: 280px;
		    padding: 15px;
		  }
		}
		
		@media (max-width: 480px) {
		  #Honors-awards .project-img {
		    height: 140px;
		  }
		
		  .certificate-sub-title {
		    font-size: 1rem;
		  }
		}

        /* PROJECTS SECTION */
        
        #projects {
            position: relative;
        }
        
        .projects-sub-title {
            color: rgb(85, 85, 85);
            font-weight: 600;
            font-size: auto;
            margin-bottom: 2rem;
        }
        
        .projects-details-container {
            display: flex;
            justify-content: center;
            flex-direction: column;
        }
        
        .color-container {
            border-color: rgb(163, 163, 163);
            background: rgb(250, 250, 250);
        }
        
        .project-img {
            border-radius: 1rem;
            width: 90%;
            height: 90%;
        }
        
        .project-title {
            margin: 1rem;
            color: black;
        }
        
        .project-btn {
            color: black;
            border-color: rgb(163, 163, 163);
        }
        /* --------- */
        
        .project-containers {
            gap: 2rem;
            margin-bottom: 2rem;
            margin-top: 1rem;
        }
        
        .project-details-container {
            justify-content: center;
            flex-direction: column;
        }
        
        .project-containers,
        .project-details-container {
            display: flex;
        }
        
        .project-pic {
            border-radius: 2rem;
        }
        
        .arrow {
            position: absolute;
            right: -5rem;
            bottom: 2.5rem;
        }
	   /* Outer section wrapper */
		#projects_2 {
		    position: relative;
		    padding: 60px 0;
		    text-align: center;
		    background-color: #fff;
		}
		
		/* Main flex container */
		.projects_2-details-container {
		    display: flex;
		    flex-direction: row;
		    flex-wrap: wrap;
		    justify-content: center;
		    align-items: stretch;
		    gap: 2rem;
		    width: 90%;
		    margin: 0 auto;
		}
		
		/* Group wrapper (if multiple project groups exist) */
		.project_2-containers {
		    display: flex;
		    flex-wrap: wrap;
		    justify-content: center;
		    gap: 2rem;
		}

		.project_2-img {
		  width: 100%;
		  height: 200px;        /* fixed height for uniform look */
		  object-fit: cover;    /* keeps proportions */
		  border-radius: 8px;
		}

		/* Each card */
		.details-container.color-container {
		    flex: 1 1 320px;
		    max-width: 400px;
		    padding: 1.2rem;
		    border: 1px solid rgb(220, 220, 220);
		    border-radius: 1rem;
		    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
		    background-color: #fafafa;
		    transition: transform 0.3s ease, box-shadow 0.3s ease;
		}
		
		.details-container.color-container:hover {
		    transform: translateY(-5px);
		    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
		}
		
		/* Inner content inside card */
		.article-container {
		    display: flex;
		    flex-direction: row;
		    flex-wrap: wrap;
		    text-align: initial;
		    gap: 2.5rem;
		    justify-content: space-around;
		}
		
		/* ----------- RESPONSIVE DESIGN ----------- */
		@media (max-width: 768px) {
		    .projects_2-details-container,
		    .project_2-containers {
		        flex-direction: column;
		        align-items: center;
		    }
		
		    .details-container.color-container {
		        max-width: 100%;
		    }
		
		    .article-container {
		        flex-direction: column;
		        align-items: center;
		        gap: 1.5rem;
		    }
		}

		      
        /* #projects_2 {
            position: relative;
        }
        
        .projects_2-sub-title {
            color: rgb(85, 85, 85);
            font-weight: 600;
            font-size: auto;
            margin-bottom: 2rem;
        }
        
        .projects_2-details-container {
            display: flex;
            justify-content: center;
            flex-direction: column;
        }
        
        .project_2-img {
            border-radius: 1rem;
            width: 90%;
            height: 90%;
        }
        
        .project_2-title {
            margin: 1rem;
            color: black;
        }
        
        .project_2-btn {
            color: black;
            border-color: rgb(163, 163, 163);
        } */
        /* --------- */
        
        /* .project_2-containers {
            gap: 2rem;
            margin-bottom: 2rem;
            margin-top: 1rem;
        }
        
        .project_2-details-container {
            justify-content: center;
            flex-direction: column;
        }
        
        .project_2-containers,
        .project_2-details-container {
            display: flex;
        }
        
        .project_2-pic {
            border-radius: 2rem;
        } */

		/* ========================= PUBLICATION SECTION ========================= */
		#publication {
		  position: relative;
		  padding: 50px 0;
		  text-align: center;
		}
		
		.publication-sub-title {
		  color: rgb(85, 85, 85);
		  font-weight: 600;
		  font-size: 1.2rem;
		  margin-bottom: 2rem;
		}
		
		.publication-details-container {
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  flex-wrap: wrap;
		  gap: 25px;
		  width: 90%;
		  margin: 0 auto;
		}
		
		#publication .details-container {
		  flex: 1 1 250px;
		  max-width: 320px;
		  background: rgb(250, 250, 250);
		  border: 1px solid rgb(163, 163, 163);
		  border-radius: 10px;
		  padding: 15px;
		  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		}
		
		.publication-img {
		  border-radius: 1rem;
		  width: 100%;
		  height: 200px;
		  object-fit: cover;
		}
		
		.publication-title {
		  margin: 1rem;
		  color: black;
		}
		
		.publication-btn {
		  color: black;
		  border-color: rgb(163, 163, 163);
		}
		
		/* Tablet */
		@media (max-width: 768px) {
		  #publication .details-container {
		    flex: 1 1 45%;
		  }
		}
		
		/* Mobile */
		@media (max-width: 480px) {
		  #publication .details-container {
		    flex: 1 1 100%;
		    max-width: 90%;
		  }
		}

        /* CONTACT */
        
        #contact {
            display: flex;
            justify-content: center;
            flex-direction: column;
            height: 70vh;
        }
        
        .contact-info-upper-container {
            display: flex;
            justify-content: center;
            border-radius: 2rem;
            border: rgb(53, 53, 53) 0.1rem solid;
            border-color: rgb(163, 163, 163);
            background: (250, 250, 250);
            margin: 2rem auto;
            padding: 0.5rem;
        }
        
        .contact-info-container {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            margin: 1rem;
        }
        
        .contact-info-container p {
            font-size: larger;
        }
        
        .contact-icon {
            cursor: default;
        }
        
        .email-icon {
            height: 2.5rem;
        }
        /* FOOTER SECTION */
        
        footer {
            height: 26vh;
            margin: 0 1rem;
        }
        
        footer p {
            text-align: center;
        }
        /* Addon Education and work experience */
        /* Define styles for the left and right containers within the Experience section */
        /* .details-container {
    flex: 1;
    padding: 0.1 1rem;
    /* Adjust padding as needed */
        /* } */
        
        */ .experience-details-container {
            display: flex;
            justify-content: space-between;
            /* Additional styles for the containers */
        }
        /* Adjust styles for the timeline and work experience items */
        
        * {
            margin: 10;
            padding: 0;
            box-sizing: border-box;
            justify-content: center;
        }
        /* body{
	width: 100%;
	min-height: 100vh;
	background-color: #fafafa;
	display: flex;
	justify-content: center;
	align-items: center;
} */
        /* .container {
    flex: 1;
    padding: 0 1rem;
} */
        
        .container {
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            align-items: center;
        }
        
        main.row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-column-gap: px;
        }
        
        .col .contents {
            padding: 0px 15px;
            border-left: 1px solid #bababa;
        }
        
        .col .contents .box {
            position: relative;
            padding: 10px;
            border: 1px solid #eaeaea;
            background-color: #ffffff;
            cursor: pointer;
            transition: all 0.4s;
            margin-bottom: 20px;
        }
        
        .col .contents .box:hover {
            box-shadow: 0px 3px 12px 0px #ccc;
            border: 1px solid transparent;
        }
        
        .col .contents .box::before {
            content: '';
            position: absolute;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            right: calc(100% + 22px);
            top: 0;
            background-color: #646060;
            border: 2px solid white;
        }
        
        .box h4 {
            position: relative;
            color: #363636;
            font-size: auto;
        }
        
        .box h3 {
            font-size: auto;
            padding: 10px 0px 6px;
            font-family: helvetica;
            color: #000000;
        }
        
        .box p {
            line-height: 1.2;
            color: #666;
            font-size: auto;
        }
        
        @media(max-width: 1080px) {
            main.row {
                grid-template-columns: 1fr;
            }
            .row .col:nth-child(2) {
                margin-top: 10px;
            }
        }
        /*  Scrolling option */
        
        .scrollmenu {
            background-color: #333;
            overflow: auto;
            white-space: nowrap;
        }
        
        .scrollmenu a {
            display: inline-block;
            color: white;
            text-align: center;
            padding: 14px;
            text-decoration: none;
        }
        
        .scrollmenu a:hover {
            background-color: #777;

        }