* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  font-family: "Battambang", system-ui;
  background-color: #eee;
}

img {
  width: 100%;
  object-fit: cover;
}

/* grid system */
.container {
  width: 1200px;
  margin: auto;
}
.navbar {
  display: flex;
  align-items: center;
}
.row {
  display: flex;
}

.col-12 {
  width: 100%;
}
.col-9 {
  width: 75%;
}

.col-7 {
  width: 58.33333333333333%;
}

.col-5 {
  width: 41.66666666666667%;
}
.col-4 {
  width: calc(100% / 3);
}
.col-3 {
  width: calc(100% / 4);
}

.banner-area .container > .row div[class*="col-3"] {
  padding-inline-start: 20px;
}
.top-header {
  display: flex;
  background-color: #000;
  padding: 15px 0;
}
.brand-logo {
  width: 80px;
}

/* header section */
.header {
  background-color: #fa1939;
  position: sticky;
  top: 0;
  z-index: 99;
}
.header .navbar .navbar-nav {
  list-style-type: none;
  display: flex;
}
.header .navbar .navbar-nav .nav-item .nav-link {
  display: inline-block;
  padding: 10px 15px;
  text-decoration: none;
  font-size: 20px;
  font-weight: 700;
  color: #e0dfdf;
  transition: 0.3s;
}
.header .navbar .navbar-nav .nav-item .nav-link:hover {
  color: #fff;
}
.header .navbar .navbar-nav .nav-item .nav-link.active {
  color: #fff;
  background-color: #0000001c;
}

/* banner section */

.banner-area .content {
  /* height: 300px; */
  position: relative;
  overflow: hidden;
}
.banner-area .container .row {
  flex-wrap: wrap;
  /* gap: 20px; */
}

.banner-area {
  margin-top: 16px;
}
.banner-area .img-banner {
  height: 300px;
}
.banner-area .content img {
  height: 100%;
  width: 100%;
}
.banner-area .content .content-body {
  position: absolute;
  left: 0;
  bottom: 0;

  color: #fff;
  width: 100%;
  height: 100%;
  /* background: #4f4f4f; */
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.514) 0%,
    rgba(0, 0, 0, 0.356) 50%,
    rgba(0, 0, 0, 0.158) 100%
  );
}
.banner-area .content .content-body .content-title {
  font-size: 18px;
  font-weight: 600;
}

.banner-area .content .category-content {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-block;
  width: 100px;
  color: #fff;
  background-color: #000;
  text-align: center;
  align-content: center;
  z-index: 11;
  font-weight: 600;
}
.banner-area .content .category-content.Tech {
  background-color: blue;
}
.banner-area .content .category-content.sports {
  width: 60px;
  background-color: orange;
}

.banner-area .content .category-content {
  background-color: rgb(105, 212, 105);
}

.banner-area .content .content-body {
  width: 100%;
  padding-top: 180px;
  height: 100%;
  position: absolute;
  bottom: 0px;
  left: 0;
  padding-left: 20px;
  transition: 0.3s;
  background-color: #00000000;
}
.banner-area .content:hover .content-body {
  /* position: relative; */
  position: absolute;
  left: 0;
  background-color: #0000006c;
}

.banner-area .content .content-body .hover-content {
  width: 100%;
  /* background-color: rebeccapurple; */
  height: calc(100% - 55px);
  overflow: hidden;
  position: absolute;
  left: 0;
  padding-left: 20px;
  bottom: 55px;
  /* border: 2px solid blue; */
}
.banner-area .content .content-body .hover-info {
  position: absolute;
  /* background-color: red; */
  /* left: 0; */
  bottom: 10px;
  /* padding-left: 20px; */
  height: auto;
  color: #fff;
  transform: translateY(40px);
  transition: 0.3s;
  /* border: 2px solid yellow; */
}
.banner-area .content:hover .content-body .hover-info {
  transform: translateY(0);
}
.banner-area .content:hover .content-body .hover-info .content-title {
  color: #fd0b2f;
}
.banner-area .content-title {
  margin-bottom: 10px;
}
.banner-area .content .content-body .hover-info .content-desc {
  display: block;
  line-height: 22px;
  font-size: 14px;
  font-size: 500;
  color: #e0dfdf;
}


/* add more descriptions */
.banner-area .content .add-description .hover-info{
  transform: translateY(63px);
}

.banner-area .content .content-body .content-date {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 55px;
  width: 100%;
  align-content: center;
  padding: 0 20px;
  background-color: #00000000;
  font-size: 14px;
  /* border: 2px solid springgreen; */
}

.banner-area .advertisement {
  width: 100%;
  height: 50%;
  margin-bottom: 7px;
  /* margin-inline: -5px; */
}
.banner-area .content-ad {
  height: calc(100% - 7px);
  background-color: gray;
}

/* Technology Section */

.Technology-area {
  margin-top: 70px;
  position: relative;
  height: 500px;
}
.Technology-area .content-tech {
  background-color: #fff;
  width: 100%;
  height: 400px;
  border-top: 3px solid rgb(24, 166, 255);
  box-shadow: 1px 1px 5px rgba(128, 128, 128, 0.733);
}
.Technology-area .content-tech::before {
  content: "បច្ចេកវិទ្យា";
  position: absolute;
  top: -40px;
  width: 140px;
  height: 40px;
  background-color: rgb(24, 166, 255);
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  padding-left: 20px;
  align-content: center;
  clip-path: polygon(0 0, 88% 0, 100% 100%, 0% 100%);
}