@font-face {
  font-family: 'icomoon';
  src: url("../fonts/icomoon/icomoon.eot?srf3rx");
  src: url("../fonts/icomoon/icomoon.eot?srf3rx#iefix") format("embedded-opentype"), url("../fonts/icomoon/icomoon.ttf?srf3rx") format("truetype"), url("../fonts/icomoon/icomoon.woff?srf3rx") format("woff"), url("../fonts/icomoon/icomoon.svg?srf3rx#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}
/* =======================================================
*
* Template Style 
*
* ======================================================= */
/* Global Styles */
body {
  font-family: 'DM Sans', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f9f9f9;
  scroll-behavior: smooth; /* Enable smooth scrolling */

}

html {

  scroll-behavior: smooth !important;
}



#page {
  position: relative;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
.offcanvas #page {
  overflow: hidden;
  position: absolute;
}
.offcanvas #page:after {
  -webkit-transition: 2s;
  -o-transition: 2s;
  transition: 2s;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 101;
  background: rgba(0, 0, 0, 0.7);
  content: "";
}

a {
  color: #ff966a;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
a:hover, a:active, a:focus {
  color: #ff5722;
  outline: none;
  text-decoration: none;

}

p {
  margin-bottom: 30px;
}

h1, h2, h3, h4, h5, h6, figure {
  color: #000;
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  margin: 0 0 20px 0;
}

::-webkit-selection {
  color: #fff;
  background: #FF9000;
}

::-moz-selection {
  color: #fff;
  background: #FF9000;
}

::selection {
  color: #fff;
  background: #FF9000;
}

#fh5co-header,
.fh5co-cover {
  background-color: transparent;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
  height: 600px;
  width: 100%;
}
#fh5co-header .overlay,
.fh5co-cover .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; 
  /* background: rgba(61, 56, 103, 0.649); */
  /* background-color: #b46a53bc; */
  background-color: #a2697b95;

  /* first bg */
  /* test */
}
#fh5co-header .display-t,
.fh5co-cover .display-t {
  width: 100%;
  display: table;
}
#fh5co-header .display-tc,
.fh5co-cover .display-tc {
  display: table-cell;
  vertical-align: middle;
  height: 600px;
}
#fh5co-header .display-tc h1, #fh5co-header .display-tc h2, #fh5co-header .display-tc h3,
.fh5co-cover .display-tc h1,
.fh5co-cover .display-tc h2,
.fh5co-cover .display-tc h3 {
  margin: 0;
  padding: 0;
  color: white;
}
#fh5co-header .display-tc h1,
.fh5co-cover .display-tc h1 {
  font-family: "Kaushan Script", cursive;
  margin-bottom: 30px;
  font-size: 50px;
  line-height: 1.3;
  font-weight: 300;
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  -o-transform: rotate(-5deg);
  transform: rotate(-5deg);
}
#fh5co-header .display-tc h1 span,
.fh5co-cover .display-tc h1 span {
  padding: 4px 15px;
  position: relative;
}
#fh5co-header .display-tc h1 span:before,
.fh5co-cover .display-tc h1 span:before {
  position: absolute;
  top: 40px;
  left: 0;
  width: 30px;
  height: 4px;
  content: '';
  background: #fff;
  margin-left: -30px;
}
#fh5co-header .display-tc h1 span:after,
.fh5co-cover .display-tc h1 span:after {
  position: absolute;
  top: 40px;
  right: 0;
  width: 30px;
  height: 4px;
  content: '';
  background: #fff;
  margin-right: -30px;
}
@media screen and (max-width: 768px) {
  #fh5co-header .display-tc h1,
  .fh5co-cover .display-tc h1 {
    font-size: 34px;
  }
  #fh5co-header .display-tc h1 span:before,
  .fh5co-cover .display-tc h1 span:before {
    top: 28px;
    width: 20px;
    height: 3px;
    margin-left: -15px;
  }
  #fh5co-header .display-tc h1 span:after,
  .fh5co-cover .display-tc h1 span:after {
    top: 28px;
    width: 20px;
    height: 3px;
    margin-right: -15px;
  }
}
#fh5co-header .display-tc h2,
.fh5co-cover .display-tc h2 {
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 30px;
}
#fh5co-header .display-tc h3,
.fh5co-cover .display-tc h3 {
  font-size: 16px;
}
@media screen and (max-width: 768px) {
  #fh5co-header .display-tc h3,
  .fh5co-cover .display-tc h3 {
    font-size: 14px;
  }
}
#fh5co-header .display-tc .profile-thumb,
.fh5co-cover .display-tc .profile-thumb {
  background-image: url(../images/Sorn_profile.jpg);
  background-size: cover !important;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  height: 200px;
  width: 200px;
  margin: 0 auto;
  margin-bottom: 30px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  -webkit-transition: background-image 0.3s ease-in-out;
  -o-transition: background-image 0.3s ease-in-out;
  transition: background-image 0.3s ease-in-out;
}
#fh5co-header .display-tc .profile-thumb:hover,
.fh5co-cover .display-tc .profile-thumb:hover {
  background-image: url(../images/Sorn_profile_painted.jpg);
}
#fh5co-header .display-tc .fh5co-social-icons li a,
.fh5co-cover .display-tc .fh5co-social-icons li a {
  color: #fff;
}
#fh5co-header .display-tc .fh5co-social-icons li a i,
.fh5co-cover .display-tc .fh5co-social-icons li a i {
  font-size: 30px;
}

#first-page-content {
 padding-top: 80px;
}


/* table of content */
#fh5co-toc {
    padding: 50px 0;
    margin-bottom: 0px;
    text-align: center;
}

#fh5co-toc h2 {
    font-family: 'Kaushan Script', cursive;
    font-size: 40px;
    font-weight: bold;
    color: rgb(0, 0, 0);
    padding-bottom : 30px;
}

.toc-list {
    list-style-type: none;
    padding-left: 0;
    margin-top: 0px;
    display: inline-block; /* Makes the list horizontally centered */
}

.toc-list li {
    margin-bottom: 10px;
}

.toc-list a {
    color: black;
    text-decoration: none;
    font-size: 20px;
    transition: color 0.3s ease;
    display: inline-block;
    margin-bottom: 10px; /* Adds space between the links */
}

.toc-list a:hover {
    color: #ffcc00; /* Highlight color on hover */
}


/* About Section */
#fh5co-about {
  background: linear-gradient(90deg, #8c85cb 0%, #ffa078 100%);

  /* background-color: #7d6c8f; */
  color: #fff;
  padding: 50px 0;
  border-radius: 0px;
  
}

/* Heading */
#fh5co-about h2 {
  font-family: 'Kaushan Script', cursive;
  font-size: 36px;
  color: white;
  margin-bottom: 30px;
  padding-bottom: 20px;
}

/* Information List */
.info {
  list-style-type: none;
  padding: 0;
  text-align: center;
}

#social-2 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 15px;
  position: relative;
  bottom: 10px;

}

#social-2 i {
  transition: all 0.3s ease;
  color:rgb(255, 255, 255);
}
#social-2 i:hover {
  transform: scale(1.1);
  color:rgb(255, 255, 255);
  
}


.info-label {
  font-weight: bold;
  font-size: 16px;
  color: #fff;
}

.info-value {
  font-size: 16px;
  color: #f9f9f9;
}
span.firstname{
  font-size: 70px;
  position: relative;
  top: -10px;

  /* background-color: green; */
}

span.lastname{
  font-size: 40px;
  position: relative;
  bottom: 30px;
  /* background-color: green; */

}

/* About Me Text */
#fh5co-about h3 {
  font-size: 28px;
  color: #fff;
  font-family: 'DM Sans', sans-serif;
}

#fh5co-about p {
  font-size: 18px;
  line-height: 1.6;
  color: #fff;
}

#fh5co-about a {
  color: #383838;
  text-decoration: none;
  transition: all 0.0s ease;
}

#fh5co-about a:hover {
  color: #000000;
  text-decoration: underline;
}

/* Social Media Icons */
.fh5co-social-icons {
  list-style: none;
  /* padding-left: 100px; */
  /* background-color: green; */
}

#social-1 {
  padding-right:20px;
  
}

#social-1 i {
  transition: all 0.3s ease;
  color:rgb(237, 236, 236);
}
#social-1 i:hover {
  transform: scale(1.1);
  color:rgb(255, 255, 255);
  
}



.fh5co-social-icons li {
  display: inline;
  margin-right: 20px;
}

.fh5co-social-icons li a {
  font-size: 24px;
  color: #fff;
  transition: transform 0.3s ease;
}

.fh5co-social-icons li a:hover {
  transform: scale(1.1);
}

.fh5co-social-icons li i {
  font-size: 30px;
  color: #ffffff;
}

/* Style for the profile image */
.profile-image {
  width: 300px; /* Adjust the size as needed */
  object-fit: cover; /* Ensures the image covers the area without distortion */
  border-radius: 30px; /* Rounded corners, adjust to make it less or more rounded */
  margin: 15px auto; /* Add empty space around the image, centered horizontally */
  display: block; /* Ensure it's treated as a block element for margin centering */
}



/* Resume Section Styling */
#fh5co-resume {
  background-color: #f9f9f9;
  padding: 50px 0;

}

/* Heading */
#fh5co-resume h2 {
  font-family: 'Kaushan Script', cursive;
  font-size: 36px;
  color: rgb(0, 0, 0);
  padding-bottom: 40px;
}

/* Centering the timeline */
.timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  
}

.timeline li {
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  margin: 5px 0;
 

}

.timeline li .education{
  padding-top: 60px; 

}

.timeline-text a {
  color : #ff966a;
}

.timeline-text a:hover {
  color : #ff5722;
}

.timeline-panel {
  max-width: 700px;
  padding: 40px 20px 40px 15px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: relative;
  display: flex;
  align-items: center;

}

.timeline-panel-ed {
  max-width: 700px;
  padding: 40px 20px 0px 15px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: relative;
  display: flex;
  align-items: center;

}

/* Image Section */
.timeline-image {
  flex: 0 0 120px; /* Set a fixed width for images */
  height: 150px; /* Fixed height for image */
  margin-right: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline-image img {
  height: 70%; /* Image fills the container */
  width: auto;
  object-fit: cover; /* Ensures image aspect ratio is preserved */
  border-radius: 8px;
}



/* Making the timeline heading text centered */
.timeline-heading {
  text-align: left;
  
  /* margin-top: 20px; */

}

/* Optional: Center the company and other info */
.timeline-body {
  text-align: left;
}


/* Additional optional styles for the timeline */
.timeline-heading h3 {
  font-size: 1.8em;
  font-weight: bold;
  padding-top :2px;

}

.timeline-body p {
  font-size: 1em;
  color: #555;
  margin : 0;
}

.summa-cum-laude {
  font-weight: bold;
  font-size: 1.1em;
}

/* Styling for major section */
.major {
  font-size: 16px;
  color: #ff7236; /* Orange color to match the theme */
  margin-top: 5px;
  font-style: italic;
}


/* academic project */

#fh5co-work {
  /* background-color: #e79e59; */
  background: linear-gradient(90deg, #8c85cb 0%, #ffa078 100%);

  padding: 50px 0;
  border-radius: 0px;
}

/* Optional: Orange highlight for the section heading */
#fh5co-work h2 {
  font-family: 'Kaushan Script', cursive;
  font-size: 36px;
  color: rgb(255, 255, 255);
  padding-bottom: 20px;

}
@keyframes backgroundAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

#fh5co-work .row {
  /* background-color: green; */
  padding-bottom: 20px;
}

/* Position the GitHub icon in the top-right corner of the project box */
.github-link {
  position: absolute;
  top: 10px;
  right: 15px;
  color: rgb(222, 220, 220);
  font-size: 30px; /* Make the GitHub icon size appropriate */
  transition: all 0.3s ease;
  opacity: 0; /* Initially hidden */
  visibility: hidden; /* Initially hidden */
}

.github-link:hover {
  color: white;
  transform: scale(1.1);
}

.github-icon {
  color: white;
  transition: color 0.3s ease;
}

.project-box:hover .github-link {
  opacity: 1; 
  visibility: visible;
}


/* Initial state of the project box */
.project-box {
  position: relative;
  overflow: hidden;
  display: block;
  height: 200px; /* Initially only show the project title */
  background-size: cover;
  background-position: center;
  transition: all 0.3s ease-in-out;
  border: 2px solid #aeaeae; /* Light orange border */
  margin: 20px 0;
  border-radius: 10px; /* Optional: rounded corners */
}

.project-box:hover {
  transform: scale(1.05);
  border-color: #cbcbcb; /* Darker orange on hover */
  height: 300px; /* Increase height on hover to show description and keywords */
}

/* Background and text for the description box */
.project-box .desc {
  height : 150px;
  position: absolute;
  bottom: -100px;
  left: 0;
  right: 0;
  color: white;
  padding: 15px 5px 10px 5px;
  transition: all 0.3s ease-in-out;
  opacity: 1; /* Initially hidden */
  /* visibility: hidden; */
  /* background: #6864b7a3; */
  background: #2b2b2bb1;
}

.project-box:hover .desc {
  height : auto;
  opacity: 1; /* Show description on hover */
  bottom: 0px;
  visibility: visible; /* Ensure visibility on hover */
  /* background: #6864b7eb; */
  background: #000000c8;
}

.project-box h3 {
  font-size: 22px;
  font-weight: bold;
  /* margin-bottom: 5px; */
  color: white; /* Keep the text white for contrast */
}

.project-description {
  font-size: 14px;
  line-height: 1.5;
  color: white; /* White text for better readability */
  opacity: 0; /* Initially hidden */
  visibility: hidden; /* Initially hidden */
  /* margin-top: 10px; */
  padding: 0px 10px;

}

.project-box:hover .project-description {
  font-size: 14px;
  line-height: 1.5;
  color: white; /* White text for better readability */
  opacity: 1; /* Show keywords on hover */
  visibility: visible; /* Ensure visibility on hover */
  /* margin-top: 10px; */
}

/* Keywords section styling */
.keywords {
  opacity: 0; /* Initially hidden */
  visibility: hidden; /* Initially hidden */
  transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth reveal */
  /* background-color: green; */
}

.project-box:hover .keywords {
  opacity: 1; /* Show keywords on hover */
  visibility: visible; /* Ensure visibility on hover */
}

.keyword-btn {
  display: inline-block;
  background-color: #ff7b43; /* Dark orange */
  color: white;
  padding: 5px 10px;
  margin: 5px;
  border-radius: 15px; /* Rounded button style */
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.keyword-btn:hover {
  background-color: rgb(254, 160, 120); /* Light orange on hover */
  color: #000; /* Black text on hover */
}

/* Media query for smaller screens */
@media (max-width: 768px) {
  .project-box {
      height: 200px;
  }
  .project-box:hover {
      height: 250px;
  }
}





/* # publications */
/* Main container for publications */
#fh5co-publication {
  padding: 50px 0;
  background-color: #f7f7f7;
}

/* Optional: Orange highlight for the section heading */
#fh5co-publication h2 {
  font-family: 'Kaushan Script', cursive;
  font-size: 36px;
  color: rgb(0, 0, 0);
  padding-bottom: 20px;

}

/* Publication table styles */
.table_publication {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 15px; /* Adds space between rows */
}

.cell_publication {
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

/* Hover effect for publication cells */
.cell_publication:hover {
  transform: translateY(-5px);
}

/* Title styling */
.cell_publication b {
  font-size: 24px;
  color: #333;
  /* display: block; */
  /* margin-bottom: 1px; */
}

/* Author names and conference info */
.cell_publication p {
  font-size: 16px;
  line-height: 1.6;
  color: #666;
  margin: 0;
}

.cell_publication i {
  font-style: italic;
  color: #999;
}

/* Link styling */
.cell_publication a {
  color: #ff966a;
  text-decoration: none;
  margin-right: 10px;
}

.cell_publication a:hover {
  color: #ff5722;
  text-decoration: underline;
}

/* Underlined name for the user */
.cell_publication u {
  text-decoration: underline;
  color: #333;
}

/* Publication content layout */
.publication-content {
  display: flex;
  flex-direction: column-reverse; /* Image comes after the text */
  align-items: center;
}

.publication-image {
  /* width: 800px; */
  max-width : 800px;
  margin-top: 20px; /* Space between text and image */
}

.publication-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.publication-text {
  text-align: left;
  margin-bottom: 20px; /* Space below the text */
}

/* Responsive styles */
@media (max-width: 768px) {
  .cell_publication {
    padding: 15px;
  }

  .fh5co-heading h2 {
    font-size: 28px;
  }

  .cell_publication b {
    font-size: 22px;
  }

  .cell_publication p {
    font-size: 14px;
  }

  .publication-content {
    flex-direction: column-reverse; /* Stack image below the text on mobile */
    align-items: flex-start;
  }

  .publication-image {
    margin-top: 10px; /* Adjust margin for smaller screens */
  }
}


/* awards */

/* Main container for awards section */
#fh5co-awards {
  background-color: #fff;
  padding: 50px 0;
}

/* Optional: Orange highlight for the section heading */
#fh5co-awards h2 {
  font-family: 'Kaushan Script', cursive;
  font-size: 36px;
  color: rgb(0, 0, 0);
  padding-bottom: 20px;

}

/* Styling for the award section */
.award-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 50px;
}

/* Award item styling */
.award-item {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

/* Hover effect for award items */
.award-item:hover {
  transform: translateY(-5px);
}

/* Award title styling */
.award-item h3 {
  font-size: 22px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

/* Award date styling */
.award-item .award-date {
  font-size: 16px;
  color: #ff5722;
  margin-bottom: 10px;
}

/* Award description styling */
.award-item p {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
  margin: 0;
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
  .award-item {
    padding: 15px;
  }

  .fh5co-heading h2 {
    font-size: 28px;
  }

  .award-item h3 {
    font-size: 20px;
  }

  .award-item p {
    font-size: 14px;
  }
}


/* contact */
/* Background color for the contact section */
#fh5co-contact.fh5co-bg-orange {
	background-color: #ff966a; /* Orange background */
	color: white; /* White text for contrast */
  padding: 50px 0px 20px 0px;
}

/* Optional: Orange highlight for the section heading */
#fh5co-contact h2 {
  font-family: 'Kaushan Script', cursive;
  font-size: 36px;
  color: rgb(255, 255, 255);
  padding-bottom: 20px;

}

/* Text and heading color */
#fh5co-contact.fh5co-bg-orange h2 {
	color: white;
	font-size: 36px;
}

#fh5co-contact.fh5co-bg-orange p {
	color: white;
	font-size: 18px;
}

/* Button styling */
#fh5co-contact .btn-orange {
	background-color: #6d68fb; /* A darker orange for the button */
	color: white;
}

#fh5co-contact .btn-orange:hover {
	background-color: #9f98e0; /* A deeper orange on hover */
}


/* Navigation Bar Styling */
.sorn-navbar {
  position: fixed;
  top: 0;
  width: 100vw;
  background: linear-gradient(90deg, #8c85cbe2 0%, #ffa178e2 100%);
  z-index: 1000;
  border-radius: 0;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  padding: 8px 0;  
}

.name {
  color: white;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

.sorn-dropdown {
  position: absolute;
  bottom: 0;

}

.sorn-dropdown-btn {
  background-color: #ffc08c00;
  color: white;
  font-size: 20px;
  border: none;
  cursor: pointer;
  width: 50px;
  transition: transform 0.3s ease-in-out;
  padding: 8px 0;  
}

.sorn-dropdown-btn:hover {
  background-color: #57575700;
  transform: scale(1.2); /* Slightly enlarge the button on hover */
}

/* Dropdown Menu Styling */
.sorn-dropdown-content {
  display: none; /* Hide by default */
  position: absolute;
  top: 100%; /* Position below the navbar */
  background: linear-gradient(90deg, #8c85cbe2 0%, #ffa178e2 100%);
  width: 100vw; /* Full viewport width */
  z-index: 1;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  left: 0; /* Ensure it aligns with the left side of the viewport */
  transition: transform 0.5s ease-out, opacity 0.5s ease-out, max-height 0.5s ease-out;
  max-height: 0; /* Initially collapsed */
  opacity: 0; /* Initially invisible */
  overflow: hidden; /* Hide content when collapsed */
  transform: translateY(-20px); /* Start position slightly above */
}

/* When dropdown content is visible */
.sorn-dropdown-content.show {
  max-height: 500px; /* Set a max-height to make the transition visible */
  opacity: 1; /* Make content visible */
  transform: translateY(0); /* Slide down to normal position */
}

/* Style for the links in dropdown */
.sorn-dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size: 18px;
  transition: background-color 0.3s ease;
}

.sorn-dropdown-content a:hover {
  background-color: #575757;
}



/* news section */
#news {
  background-color: #fff;
  padding: 50px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction:column;
  

}
/* Optional: Orange highlight for the section heading */
#news h2 {
  font-family: 'Kaushan Script', cursive;
  font-size: 36px;
  color: rgb(0, 0, 0);
  padding-bottom: 20px;
  text-align: center;

}

#news-inner {
  max-width : 600px;
  background-color: rgb(252, 247, 255);
  border-radius: 20px;
  max-height:500px;
  overflow-y: auto; /* Enables vertical scrolling if content exceeds the height */
  margin: 0px 30px;
  padding: 15px 10px;
  position: relative; /* Needed for absolute positioning of fade effect */
  border: 3px dashed #d2cdff;
}

.news-item {
  background-color: #f9f9f9; /* Light background for individual news items */
  padding: 20px 20px 1px 20px;
  border-left: 5px solid #ff7f32; /* Orange left border to highlight news item */
  border-radius: 8px;
  margin: 10px 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

}

.news-item:last-child {
  margin-bottom: 0;
}

.news-item .date {
  font-size: 1.2em;
  font-weight: bold;
  color: #ff7f32; /* Orange color for the date */
  margin-bottom: 10px;
}

.news-item .news-text {
  font-size: 1.2em;
  color: #333; /* Black color for the news content text */
}

.news-item .news-text strong {
  color: #ff7f32; /* Orange color for highlighted text */
}

/* Hover Effect for News Items */
.news-item:hover {
  background-color: #f0f0f0; /* Slightly darker gray on hover */
  cursor: pointer;
}

.news-item:hover .news-text {
  color: #000000; /* Orange color on hover for text */
}

.news-item:hover .news-text a {
  color: #ff5722; /* Orange color on hover for text */
}

.news-item:hover .date {
  color: #ff5722; /* Darker orange on hover for date */
}