:root {
   --button-color: #f1f1f1;
}


body {
   font-family: 'inter', sans-serif;
   padding: 10px;
}

.header {
   display: flex;
   width: 100%;
   padding: 0px;
   justify-content: space-between;
   align-items: center;
}

.headerItem button {
   outline: none;
   border-radius: 10px;
   border: none;
   box-shadow: none;
   background: none;
   cursor:pointer;
}

/* Header item 1 */

.headerItem.one {
   display: flex;
   flex-direction: row;
   align-items: center;
}

.headerItem.one .buttonContainer {
   border: none;
   margin-right: 10px;
}

.headerItem.one i.fa-youtube {
   font-size: 24px;
   color: red;
   margin-right: 8px; 
}

.headerItem.one p{
   display: inline-block;
   line-height: 1;
   font-size: 1.2em;
   font-weight: 750;
}

.headerItem.one p span{
   font-size: 8px;
   vertical-align: top;
}

/* Header item 2 */
.headerItem.two {
   flex-direction: row;
}

.headerItem.two {
   display: flex; 
   align-items: center;
}

.headerItem.two input {
   border: 1px solid #ccc;
   border-radius: 20px 0 0 20px;
   padding: 8px 12px;
   outline: none;
   flex-grow: 1; 
   width: 450px;
   height: 10px
}

.headerItem.two button {
   border: 1px solid #ccc;
   border-left: none; 
   border-radius: 0 20px 20px 0; 
   padding: 8px 12px;
   background-color: var(--button-color); 
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 28px
}


/* Header item 3 */
.headerItem.three {
   display: flex;
   flex-direction: row;
   align-items: center;
   padding: 8px;
   gap: 10px
}

.headerItem.three button{
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   border: 1px solid #ccc;
   background: var(--button-color);
   border-radius: 100%;
   width: 28px;
   height: 28px;
}

.headerItem.three img{
   border-radius: 100px;
   width: 24px;
}

/* Body items */
.bodyItem {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
}

.bodyItemOne {
   margin-top: 15px;
   width: 60%;
   display: flex;
   flex-direction: column;
}

.videoplayer {
border-radius: 8px;
width: 100%;
height: auto;
aspect-ratio: 16/9;
}

.videoTitle{
   margin-top: 2px;
   font-size: 1rem;
   font-weight: 650;
}

.description {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
}

.description img {
   border-radius: 50%;
   width: 35px;
   height: 35px;
   margin-right: 10px;
}

.description .channelDetails {
   display: flex;
   flex-direction: row; /* Stack the channel name and subscriber count vertically */
   margin-right: auto; /* Pushes .likeAndDislike to the right */
}

.channelDetailsSub {
   display: flex;
   flex-direction: column;
}

.description p {
   line-height: 1.2;
   font-size: 0.85rem;
   margin: 0;
}

.hurskiChannel {
   font-weight: 600;
   font-size: 0.95rem;
}

.hurskiChannel1 {
   font-size: 0.85rem;
   color: #555; /* Optional: a lighter color to differentiate from the channel name */
}

.description .likeAndDislike {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 10px;
}

.description button {
   cursor: pointer;
   background: var(--button-color);
   border: none;
   border-radius: 25px;
   padding: 5px 10px;
}

.likeAndDislike button{
   height:30px;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   gap:5px
}

.bodyItemTwo {
   display: flex;
   flex-direction: column;
   width: 40%;
   margin-right: 10px;
   overflow: hidden;
   margin-left: 10px;
}

.bi-two-options {
   display: flex;
   flex-direction: row;
   gap: 10px;
   overflow-x: auto;
}

.bi-two-p {
   display: flex;
   flex-direction: column;
   align-self: center;
   font-size: 0.8rem;
   margin-top: 28px;
   margin-bottom: 48px;
}

.bi-two-options button{
   display: inline-block;
   flex-direction: row;
   align-items: center;
   border: none;
   background: var(--button-color);
   cursor: pointer;
   border-radius: 8px;
   height: 30px;
   font-weight: 600;
   padding: 10px;
   box-sizing: border-box;
   width: auto;
   font-size: 0.75rem;
   white-space: nowrap;
}

.bi-two-options-container {
   display: flex;
   align-items: center;
   position: relative;
   width: 100%;
   gap:10px;
}

.arrow {
   border: none;
   background: var(--button-color);
   cursor: pointer;
   border-radius: 50%;
   height: 32px;
   width: 32px;
   display: flex; 
   justify-content: center; /* Center horizontally */
   align-items: center; /* Center vertically */
   padding: 0; /* Remove padding to ensure perfect circle */
   font-size: 1rem;
   z-index: 1;
   position: absolute;
}


.left-arrow {
   left: 0;
}

.right-arrow {
   right: 0;
}

.bi-two-video-preview-container {
   margin-top: 10px;
   display: flex;
   flex-direction: row;
   align-items: flex-start;
   border-bottom: 1px solid #ccc;
   padding-bottom: 20px;
   margin-bottom: 20px;
}

.bi-two-video-preview {
   border-radius: 8px;
   width: 180px;
   height: auto;
   aspect-ratio: 16/9;
   }

.bi-two-video-preview-p-container {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   margin-left: 5px;
   padding: none;
}

.bi-two-video-preview-p-container p{
   display: flex;
   flex-direction: row;
   margin: 0;
   padding: 0;
}

.bi-two-p1 {
      font-size: 1.2rem;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      max-height: 2.4em; 
      line-height: 1.2em; 
}


.bi-two-p2 {
   font-size: 0.74rem;
}


.bi-two-video-preview-container-others {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   margin-bottom: 10px;
}

.bodyItemOne-part2 {
   display: flex;
   flex-direction: row;
}

.video-description-box {
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   align-items: flex-start;
   width: 100%;
   height: 140px;
   background:var(--button-color);
   border-radius: 8px;
   overflow: hidden;
   padding: 5px;
   margin-top: 15px;
}

.video-description-box div{
   display: flex;
   margin: 0;
}

.bodyItemOne-part2 {
   display: flex;
   flex-direction: column;
}

.video-description-box-two {
   display: flex;
   flex-direction: row;
   align-items: space-evenly;
   margin-top: 16px;
   gap:14px;
}

.vdb-2 {
   display: flex;
   flex-direction: column;
   width:100%;
   margin:0;
}

.vdb-2 p{
   margin:0;
}

.vdb-1 p {
   margin: 0;
}

.vdb-3 button {
   border-radius: 25px;
   border: 1px solid #ccc;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   height: 28px;
   background: var(--button-color);
   cursor: pointer;
   gap:4px;
   padding: 10px;
}

.vdbt {
   width:100%;
   border: none;
   background: var(--button-color);
   border-radius: 8px;
   display: flex;
   flex-direction: row;
   height:100%
}

.vdbt-img-container img {
   width: 50px;
   height: 100%;
   overflow: hidden;
   border-radius: 8px 0 0 8px;
}

.vdbt-2 {
   border: none;
   background: var(--button-color);
   border-radius: 8px;
   height:100%
}

.vdbt-p-container {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   height
}
.button {
   border:none;
   cursor: pointer;
   width: 100%;
   background:transparent;
}