html {
  border-top: 37px solid #2C7E93;
  border-bottom: 37px solid #2C7E93;
}
    
body {
  font-family: Arial, sans-serif;
  margin: 20px;
  background-color:  #e6f2f1;
}

video.videoPresentation {
   width: 33%;
   margin: auto;
   border: 4px solid #2c7e94 !important;
}

div.arrangeTextMilestone  {
   text-align: center;
   margin-bottom: 6%;
}

h3 {
  color: #2C7E93;
  font-weight: bold;
}

.btnBack {
    text-align: center;
    margin-top: 4%;
    margin-bottom: 4%
}

.btnBack > a{
    text-align: center;
    background: #2C7E93;
    color: white;
    text-decoration: none;
    padding: 1%;
    border: 4px solid #2C7E93;
}


.btnBack > a:hover {
    color: #2C7E93 !important;
    border: 4px solid #2C7E93;
    background: #e6f2f1;
}

p.durationSpec {
  font-size: 20px;
  text-align: center;
}

span.interval {
  color: #2C7E93;
  font-weight: bold;
}


.bioText {
    background: #2C7E93;
    color: white;
    width: 52%;
    margin: auto;
    padding: 1%;
    border-radius: 20px;
}

div.bioText > p {
    margin: auto;
    /*width: 45%;*/
    text-align: justify;
    margin-bottom: 1%;
}

div.downloadLessonPlan {
    text-align: center;
}

p.lessonPlanTextDownload {
  text-align: center;
  display: inline-block;
}

img.imgIcon {
  width: 2%;
  margin: auto;
  display: inline-block;
}

p.lessonPlanTextDownload > a {
    text-decoration: none;
    font-size: 20px;
    color: #2C7E93;
    font-weight: bold;
    position: relative;
    top: -0.7em;
}

.video-item > p {
    text-align: center;
}

h1 {
  text-align: center;
}

.search-bar {
  display: flex;
  justify-content: center;
  margin: 20px;
}

.search-bar input {
  width: 300px;
  padding: 8px;
  font-size: 16px;
}

.category-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 20px 0;
}

.category-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  border-radius: 8px;
  padding: 10px;
  width: 120px;
  text-align: center;
  cursor: pointer;
  transition: 0.2s ease;
}

.category-icon:hover {
  /*background-color: #ccc;*/
  background-color: #2c7e94;
}

.category-icon img {
  /*
  width: 40px;
  height: 40px;
  */
  /*margin-bottom: 6px;*/
  margin-bottom: 23px;
  width: 83%;
  border: 4px solid #2c7e94 !important;
}

.category-icon span {
  font-size: 14px;
  color: #333;
  position: relative;
  top: 0px;
  height: 32px;
}

.category-icon span:hover {
  color: white;
}


.category-icon span {
  transition: color 0.3s ease;
}

.subtitle-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin: 20px 0;
}

.subtitle-filters label {
  font-size: 14px;
  cursor: pointer;
}
    
    
/* ---- AFIȘARE CATEGORIE SELECTATĂ ---- */
.category-display {
    text-align: center;
    margin: 8px 0 22px;
    font-weight: bold;
    font-size: 22px;
    margin-bottom: 2%;
    margin-top: 3%;
    color: #2c7e94;
}

div#categoryDisplay > div {
    margin-bottom: 1%;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  /*gap: 20px;*/
  gap: 40px;
}


.video-item {
  display: none;
}

.video-item iframe {
  width: 100%;
  height: 200px;
  border: none;
}

.selectedIcon {
    background: #2c7e94;
}


.textUnderPosterPresentation {
    text-align: center;
    margin-top: 4%;
     margin-bottom: 5%;
}


.posterPersonHomepage > a > img {
    width: 100%;
    border: 5px solid #2C7E93;
}

.textUnderPosterPresentation > a {
  font-weight: bold;
  text-align: center;
  margin-top: 4%;
  margin-bottom: 5%;
  color:  #2C7E93 !important;
  font-size: 19px;
  text-decoration: none !important;
}

.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.1); }

input#searchInput {
  opacity: 0 !important;
  pointer-events: none !important;
}


.video-container {
  position: relative;
  width: 100%;
  max-width: 960px; /* opțional: limita maximă */
  aspect-ratio: 16 / 9; /* păstrează proporția standard YouTube */
}
.video-container iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}

h2.countrySection {
    text-align: center;
    margin: 8px 0 22px;
    font-weight: bold;
    font-size: 22px;
    margin-bottom: 2%;
    margin-top: 3%;
    color: #2c7e94;
}

div#subtitleName {
    display: inline !important;
}

div#textBeforeSubtitle {
    display: inline !important;
}

iframe.specialIframeYoutube {
    /*
    width: 60%;
    height: 600px;
    */
    width: 50%;
    height: 530px;
    border: 9px solid #2C7E93;
}

.time-range {
    color: #2C7E93 !important;
    font-weight: bold;
    text-align: center;
    cursor: pointer !important;
}


.shortDescription {
    background: #2c7e94;
    padding: 4%;
    margin-bottom: 20%;
    border-radius: 18px;
  
    /*
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    */
}

.shortDescription > p {
    text-align: center;
    color: white;
}

div.tableRange > table {
    margin: auto;
}


@media (max-width: 479px) {
    .bioText {
      background: #2C7E93;
      color: white;
      width: 100%; 
      margin: auto;
      padding: 9%;
      line-height: 25px;
      border-radius: 20px;
  }
  
  iframe.specialIframeYoutube {
    width: 100%;
    height: auto;
    border: none !important;
  }
}