.nav-link {
	display: inline-block;  /* Allow setting width */
	width: 200px;           /* Set a fixed width */
	white-space: nowrap;   /* Prevent line breaks */
	overflow: hidden;      /* Hide overflow */
	text-overflow: ellipsis; /* Add ellipsis */
}
.navbar {
	z-index: 999 !important;
  }
.animate {
		  transition: all 0.1s;
		  -webkit-transition: all 0.1s;
		}

		.action-button {
		  position: relative;
		  padding: 5px 10px;
		  margin: 0px 10px 10px 0px;
		  float: center;
		  border-radius: 8px;
		  font-family: 'Rubik', sans-serif;
		  font-size: 20px;
		  color: #FFF;
		  text-decoration: none;
		}

		.blue {
		  background-color: #3498DB;
		  border-bottom: 5px solid #2980B9;
		  text-shadow: 0px -2px #2980B9;
		}

		.red {
		  background-color: #E74C3C;
		  border-bottom: 5px solid #BD3E31;
		  text-shadow: 0px -2px #BD3E31;
		}

		.green {
		  background-color: #82BF56;
		  border-bottom: 5px solid #669644;
		  text-shadow: 0px -2px #669644;
		}

		.yellow {
		  background-color: #F2CF66;
		  border-bottom: 5px solid #D1B358;
		  text-shadow: 0px -2px #D1B358;
		}

		.action-button:active {
		  transform: translate(0px, 5px);
		  -webkit-transform: translate(0px, 5px);
		  border-bottom: 1px solid;
		}

		h2 {

		  font-family: serifbold;

		  color: black;

		  text-align: center;
		}

		.blog {
		  display: block;
		  /* Change from flex to block */
		  clear: both;
		  /* Clear any floats before displaying */
		  margin-top: 20px;
		  /* Add margin-top to create space between the content above */
		}

		.blog2 {
		  max-width: 800px;
		  width: 100%;
		}

		.wrapper {
		  margin: auto;
		  max-width: 500px;
		  width: 98%;
		  box-shadow: 9px 9px 8px #8c8c8c,
		    -29px -29px 58px #ffffff;
		  border-radius: 10px;
		  overflow: hidden;

		}

		:root {
		  --plyr-color-main: #25d366;
		  --plyr-video-control-color: #e8ffba;
		}


		.padding-md {
		  padding: 20px;
		}

		.intro {
		  background-color: #f5f5f5;
		  padding: 20px;
		  border-radius: 5px;
		}



		.bg-main {
		  background-attachment: fixed;
		  background-image: url('https://images.unsplash.com/photo-1519882189396-71f93cb4714b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
		  background-position: center;
		  background-size: cover;
		}

		a {
		  text-decoration: none;
		}

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

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

		.center {
		  align-items: center;
		  justify-content: center;
		}


		.mt-2 {
		  margin-top: 2rem;
		}

		.wrapper {
		  margin: 0 auto;
		  max-width: 1200px;
		  width: 100%;
		}

		.padding-md {
		  padding: 1rem 1rem;
		}


		h2 {
		  font-size: 1.2rem;
		}

		.post p {
		  margin-bottom: 1rem;
		}

		.col {
		  padding: 0px
		}

		/* structure */


		.header {
		  border: 1px solid #4f3232;
		  background-color: rgba(244, 244, 249, 0.8);
		}

		main {
		  background-color: rgba(244, 244, 249, 0.8);
		  border: 1px solid #4f3232;
		  margin-top: 1rem;
		}

		.post img {
		  align-items: center;
		  width: 100%;
		  height: auto;

		}

		/* jwplayer Css Started From Here*/

		.jw-stats-item {
		  display: none;
		}

		body {
		  margin: 0px
		}

		.box-shadow {
		  width: 100%;
		  box-shadow: 9px 9px 8px #8c8c8c,
		    -29px -29px 58px #ffffff;
		  border-radius: 10px;
		  overflow: hidden;

		}

		.jwplayer.jw-flag-aspect-mode {
		  min-height: 30%;
		  max-height: 30%
		}

		#player p {
		  text-align: center;
		}

		.jw-icon-fullscreen path {
		  display: none;
		}

		.jw-icon-fullscreen svg {
		  background-image: url('/icon/full-screen.svg');
		  background-size: cover;
		  background-position: center;
		  margin-left: 5px;
		}

		.jw-icon-fullscreen.jw-off svg {
		  background-image: url('/icon/full-screen-exit.svg');
		  background-size: contain;
		  background-repeat: no-repeat;
		}


		.jw-icon-pip path {
		  display: none;
		}

		.jw-icon-pip svg {
		  background-image: url('/icon/pip-on.svg');
		  background-size: contain;
		  background-repeat: no-repeat;
		  height: 25px;
		  width: 25px;
		  margin-top: 5px;
		  margin-left: 5px;
		}

		.jw-icon-pip.jw-off svg {
		  background-image: url('/icon/pip-off.svg');
		  background-size: contain;
		  background-repeat: no-repeat;
		}

		.jw-svg-icon-rewind path {
		  display: none;
		}

		.jw-svg-icon-rewind {
		  background-image: url("icon.svg");
		  background-size: contain;
		  background-repeat: no-repeat;
		}

		.jw-icon-rewind:hover .jw-svg-icon-rewind {
		  background-image: url("icon.svg");
		}


		.jw-state-paused .jw-svg-icon-play path {
		  display: none;
		}

		.jw-state-paused .jw-svg-icon-play {
		  background-image: url("/icon/play.svg");
		  background-size: contain;
		  background-repeat: no-repeat;
		}

		.jw-state-paused .jw-icon-playback:hover .jw-svg-icon-play {
		  background-image: url("/icon/pause.svg");
		}

		.jw-svg-icon-pause path {
		  display: none;
		}

		.jw-svg-icon-pause {
		  background-image: url("/icon/pause.svg");
		  background-size: contain;
		  background-repeat: no-repeat;
		}

		.jw-svg-icon-buffer path {
		  display: none;
		}

		.jw-svg-icon-buffer {
		  background-image: url("buffer.svg");
		  background-size: contain;
		  background-repeat: no-repeat;
		}


		.jw-svg-icon-volume-100 path {
		  display: none;
		}

		.jw-svg-icon-volume-100 {
		  background-image: url("/icon/sound.svg");
		  background-size: contain;
		  background-repeat: no-repeat;
		  margin-right: 5px;

		}

		.jw-icon-volume:hover .jw-svg-icon-volume-100 {
		  background-image: url("/icon/sound.svg");
		  margin-right: 5px;

		}

		.jw-svg-icon-volume-0 path {
		  display: none;
		}

		.jw-svg-icon-volume-0 {
		  background-image: url("/icon/mute.svg");
		  background-size: contain;
		  background-repeat: no-repeat;
		  margin-right: 5px;

		}

		.jw-icon-volume:hover .jw-svg-icon-volume-0 {
		  background-image: url("/icon/mute.svg");
		  margin-right: 5px;

		}

		.jw-svg-icon-settings path {
		  display: none;
		}

		.jw-svg-icon-settings {

		  background-image: url("/icon/setting.svg");
		  background-size: contain;
		  background-repeat: no-repeat;
		  margin-left: 5px;


		}

		#player .jw-rightclick-link {
		  display: none;
		}


		.jw-stats-item {
		  display: none;
		}

		body {
		  margin: 0px
		}

		.box-shadow {
		  width: 100%;
		  box-shadow: 9px 9px 8px #8c8c8c,
		    -29px -29px 58px #ffffff;
		  border-radius: 10px;
		  overflow: hidden;

		}

		.jwplayer.jw-flag-aspect-mode {
		  min-height: 30%;
		  max-height: 30%
		}

		#player p {
		  text-align: center;
		}

		.jw-icon-fullscreen path {
		  display: none;
		}

		.jw-icon-fullscreen svg {
		  background-image: url('/icon/full-screen.svg');
		  background-size: cover;
		  background-position: center;
		  margin-left: 5px;
		}

		.jw-icon-fullscreen.jw-off svg {
		  background-image: url('/icon/full-screen-exit.svg');
		  background-size: contain;
		  background-repeat: no-repeat;
		}


		.jw-icon-pip path {
		  display: none;
		}

		.jw-icon-pip svg {
		  background-image: url('/icon/pip-on.svg');
		  background-size: contain;
		  background-repeat: no-repeat;
		  height: 25px;
		  width: 25px;
		  margin-top: 5px;
		  margin-left: 5px;
		}

		.jw-icon-pip.jw-off svg {
		  background-image: url('/icon/pip-off.svg');
		  background-size: contain;
		  background-repeat: no-repeat;
		}

		.jw-svg-icon-rewind path {
		  display: none;
		}

		.jw-svg-icon-rewind {
		  background-image: url("../icon.svg");
		  background-size: contain;
		  background-repeat: no-repeat;
		}

		.jw-icon-rewind:hover .jw-svg-icon-rewind {
		  background-image: url("../icon.svg");
		}


		.jw-state-paused .jw-svg-icon-play path {
		  display: none;
		}

		.jw-state-paused .jw-svg-icon-play {
		  background-image: url("/icon/play.svg");
		  background-size: contain;
		  background-repeat: no-repeat;
		}

		.jw-state-paused .jw-icon-playback:hover .jw-svg-icon-play {
		  background-image: url("/icon/pause.svg");
		}

		.jw-svg-icon-pause path {
		  display: none;
		}

		.jw-svg-icon-pause {
		  background-image: url("/icon/pause.svg");
		  background-size: contain;
		  background-repeat: no-repeat;
		}

		.jw-svg-icon-buffer path {
		  display: none;
		}

		.jw-svg-icon-buffer {
		  background-image: url("buffer.svg");
		  background-size: contain;
		  background-repeat: no-repeat;
		}


		.jw-svg-icon-volume-100 path {
		  display: none;
		}

		.jw-svg-icon-volume-100 {
		  background-image: url("/icon/sound.svg");
		  background-size: contain;
		  background-repeat: no-repeat;
		  margin-right: 5px;

		}

		.jw-icon-volume:hover .jw-svg-icon-volume-100 {
		  background-image: url("/icon/sound.svg");
		  margin-right: 5px;

		}

		.jw-svg-icon-volume-0 path {
		  display: none;
		}

		.jw-svg-icon-volume-0 {
		  background-image: url("/icon/mute.svg");
		  background-size: contain;
		  background-repeat: no-repeat;
		  margin-right: 5px;

		}

		.jw-icon-volume:hover .jw-svg-icon-volume-0 {
		  background-image: url("/icon/mute.svg");
		  margin-right: 5px;

		}

		.jw-svg-icon-settings path {
		  display: none;
		}

		.jw-svg-icon-settings {

		  background-image: url("/icon/setting.svg");
		  background-size: contain;
		  background-repeat: no-repeat;
		  margin-left: 5px;


		}

		#player .jw-rightclick-link {
		  display: none;
		}

		* {
		  box-sizing: border-box;
		}

		html {
		  height: 100%;
		}

		body {
		  min-height: 100%;
		}

		.jw-video.jw-reset {
		  margin: 0px;

		}


.wrapper {
  margin: auto;
  width: 90%; /* Start at 90% of viewport width for smaller screens */
  max-width: 900px; /* Cap the maximum width on larger screens */
  box-shadow: 9px 9px 8px #8c8c8c, -29px -29px 58px #ffffff;
  border-radius: 10px;
  overflow: hidden;
}

.videoplayer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  aspect-ratio: 16 / 9; /* Maintain a 16:9 aspect ratio */
  max-width: 100%; /* Full width within the .wrapper constraints */
}

#player {
  width: 100%;
  height: 100%;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
              rgba(0, 0, 0, 0.3) 0px 30px 60px -30px,
              rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  border-radius: 10px;
}

/* Media query for screens larger than 900px */
@media (min-width: 900px) {
  .wrapper {
    width: 50vw; /* Use 50% of the viewport width */
    max-width: 1200px; /* Max out at 1200px to prevent over-expansion */
  }
  
  .videoplayer {
    width: 100%; /* Take full width within wrapper */
  }

  #player {
    max-height: 70vh; /* Limit height to 60% of viewport height */
  }
}

/* Styling for links and paragraphs */
a {
  color: #000;
  font-size: 18px;
  text-decoration: none;
}

p {
  color: #000;
}

		/*  @media (min-width:900px) {
   .videoplayer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 650px; /
}
  }*/