body {
       font-family: 'Arial', sans-serif;
       margin: 0;
       padding: 0;
       background-color: #1a1a1a;
       color: #ffffff;
       height: 100vh;
       width: 100%;
   }

   .container {
       display: flex;
       flex-direction: row;
       width: 100%;
       margin-top: 50px;
   }

   nav {
       background-color: black;

       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 10px 20px;
       position: fixed;
       top: 0;
       width: 100%;
       height: 40px;
   }

   
    

   .logo a {
       text-decoration: none;
       color: white;
       list-style-type: none;
       font-weight: bold;
       transition: color 0.3, transform 0.4;
       font-family: 'Times New Roman', Times, serif;

   }

   .logo a:hover {
       color: #011ec5dc;
       transform: scale(1.2);
   }

   .menu {
       list-style-type: none;
       display: flex;
       background-color: black;
       margin-right: 15px;
   }

   .menu li {
       margin-right: 20px;
   }

   .menu li a {
       text-decoration: none;
       color: #cfd1dd;
       font-weight: bold;
       transition: color 0.3s;
       font-family: 'Times New Roman', Times, serif;
   }

   .menu a:hover {
       color: #007bff;
   }

   .left-section {
       background-color: #1a1a1a;
       width: 30%;
       padding: 20px;
   }

   /* .left-section a {
       
   } */
   .Reference ul li {
       list-style-type: square;
   }

   .Reference a {
       text-decoration: none;
       color: #cfd1dd;
       font-weight: bold;
       transition: color 0.3s;
       font-family: 'Times New Roman', Times, serif;
   }

   .right-section {
       background-color: #3f4750;
       width: 70%;
       padding: 20px;
   }

   .profile-pic {
       width: 100px;
       height: 100px;
       border-radius: 50%;
       margin: 0 auto;
       display: block;
   }

   /* name and title */
   .name-title {
       text-align: center;
       margin-top: 10px;
   }

   .name-title h1 {
       margin: 0;
       font-size: 24px;
   }

   .name-title h2 {
       margin: 0;
       font-size: 18px;
       color: #cccccc;
   }

   .section-title {
       font-size: 20px;
       margin-top: 20px;
       margin-bottom: 10px;
       color: #ff6600f3;
   }

   /* Contact Information Style is here */
   .contact-info,
   .languages,
   .activities {
       margin-top: 20px;
   }

   .contact-info p,
   .languages p,
   .activities p {
       margin: 5px 0;
   }

   .contact-info i,
   .languages i,
   .activities i {
       margin-right: 10px;
   }

   .contact-info p i a {
       text-decoration: none;
       color: white;
       font-weight: normal;
   }

   .contact-info p i a:hover {
       color: #00f7ff;
   }

   .experience,
   .education,
   .certificates {
       margin-top: 20px;
   }

   .experience-item,
   .education-item,
   .certificate-item {
       margin-bottom: 20px;
   }

   .experience-item h3,
   .education-item h3,
   .certificate-item h3 {
       margin: 0;
       font-size: 19px;
       font-weight: bold;
       color: #12c9c0;
       padding: 5px;
       margin-left: 10px;

   }

   .experience-item p,
   .education-item p,
   .certificate-item p {
       margin: 5px 0;
       /* text-decoration: underline; */
       font-weight: bold;
       color: #00f7ff;

   }

   .certificate-item a {
       text-decoration: none;
       transition: color 0.3s;
       font-family: 'Times New Roman', Times, serif;

   }

   .experience-item ul {
       list-style-type: disc;
       margin: 5px 0 0 20px;
   }

   .experience-item ul li {
       margin: 5px 0;
   }

   button {
       background-color: #3498db;
       color: white;
       padding: 10px;
       font-size: 12px;
       border: none;
       cursor: pointer;
       transition: transform 0.9s;
       margin-bottom: 15px;
       margin-left: -6px;
   }


   button:hover {
       transform: scale(1.019);
       text-shadow: 2px 5px 3px #0000007a;
   }

   #certificate-list-btn {
       background-color: #2c8ed4;
       position: obsolute;
       padding: 20px;
       border-radius: 5px;
       font-size: 12px;
       margin-top: 25px;
       
   }

   .Academy {
       background-color: #0000001e;
       width: 100%;

   }

   .Academy h3 {
       color: #47e74f;
       font-family: 'Koulen', cursive;
       text-decoration: underline #7a9abd;
   }

   .Academy ul p a {
       color: #00f7ff;
       transition: scale(1.0);
   }

   .Academy ul p a:hover {
       color: #00f7ff;
       text-shadow: 2px 5px 3px #0000007a;
       transform: scale(1.5);
   }

   .Academy ul ul p a {

       color: white;
       font-family: 'Khmer S1', cursive;
       transition: transform 0.3s;
       transform: scale(1.0);
   }

   .Academy ul ul a:hover {
       color: #cdcfd1;
       /* color: #007bff; */
       text-shadow: 2px 5px 3px #0000007a;
       transform: scale(1.5);
   }

   .Academy ul ul p a button {
       background-color: #3498db;
       color: white;
       padding: 10px;
       font-size: 12px;
       border: none;
       cursor: pointer;
       transition: transform 0.9s;
       margin-bottom: 15px;
       margin-left: -6px;
   }

   .Academy ul ul p a button:hover {
       transform: scale(1.019);
       text-shadow: 2px 5px 3px #0000007a;
   }

   .Academy img {
       width: auto;
       height: auto;
       margin-left: -5px;
   }