.responsive-container {
align-self: stretch;
justify-content: flex-start; 
align-items: flex-start;
gap: 24px; 
display: inline-flex
}

@media (max-width: 768px) {
.responsive-container {
  flex-direction: column;
  align-items: center;
}
}


@media (max-width: 1980px) {
  .mcontainer{
    max-width: 70%;
  }
}
.first-section,
.news-updates,
.releases,
.nat-committee-work,
.counties {
  margin: 4em 0;
}
.mkeimage{
  aspect-ratio: 1;
  object-fit: contain;
  object-position: center;
  width: 32px;
  align-self: stretch;
  margin: auto 0;
  }
.mikep {
  border-radius: 20px;
  width: 100%;
  height: 350px;
  margin: 10px 0;
}
.radio {
  background: rgba(0, 104, 16, 0.1);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: row;
  gap: 18px;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.07),
    -4px -4px 12px 0px rgba(0, 0, 0, 0.07);
}
.national-assembly-logo-1 {
  background: linear-gradient(to left, #ffffff, #ffffff);
  border-radius: 90px;
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  position: relative;
  object-fit: cover;
  aspect-ratio: 1;
}
.morning{
width: 622px; 
color: #131313; 
font-size: 18px; 
font-family: Montserrat; 
font-weight: 600;
 line-height: 22.50px;
 word-wrap: break-word;
}
.mypicdo {
border-radius: 2%;  
width: 100%;
      height: 20%;
      border: 1px solid #000000;
      float: left;
      margin-right: 1%
} 
.wfame {
margin-left:4%;   
margin-right:4%;
}
.notices-block {
  background-color: var(--green);
}
table {
  border-collapse: collapse!important;
  width: 100%!important;
}

th, td {
  padding: 8px!important;
  text-align: left!important;
  border-bottom: 2px solid var(--green)!important;
}
.notices-block * {
  color: #fff;
}
 .highlight6 {
  display: flex;
  align-items: flex-end;
  font: 400 18px/1.25 "Montserrat", Helvetica, Arial, serif;
  color: white;
}
 .highlight {
   display: flex;
  justify-content: left;
  align-items: flex-end;
  margin-top:4%;
  font: 600 18px/1.25 "Montserrat", Helvetica, Arial, serif;
  color: black;
  text-align:left;
}
.cover {
border-radius:8px!important;
}
.landing-page-hifi {
background-color: #fff;
display: flex;
flex-direction: column;

}
.public-participation {
color:#000;
align-self: start;
font: 600 28px/1 Montserrat, sans-serif;
}
.join-hands{
color:#000;
margin-top: 16px;
font: 400 16px/20px Montserrat, sans-serif;
}
@media (max-width: 991px) {
.join-hands{
max-width: 100%;
margin-right: 10px;
}
}
.ppartdiv-8 {
display: flex;
margin-top: 32px;
flex-direction: column;
font-family: Montserrat, sans-serif;
color: rgba(255, 255, 255, 1);
justify-content: start;
}
@media (max-width: 991px) {
.ppartdiv-8 {
max-width: 100%;
}
}
.myoutube {
  margin-bottom: 2rem !important;
}

.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
}  
.modal-content {
background-color: #fefefe;
margin: 1% auto;
padding: 20px;
border: 1px solid #888;
width: 60%;
}

.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}

.ppart-9 {
display: flex;
flex-direction: column;
border-radius: 8px;
position: relative;
min-height: 566px;
width: 100%;
overflow: hidden;
align-items: start;
padding: 171px 68px 61px;
}
@media (max-width: 991px) {
.ppart-9 {
max-width: 100%;
padding: 100px 20px 0;
}
}

.ppdiv1 {
align-self: center;
display: flex;
margin-top: 60px;
width: 100%;
max-width: 1281px;
padding-bottom: 517px;
flex-direction: column;
}
@media (max-width: 991px) {
.ppdiv1{
max-width: 100%;
padding-bottom: 100px;
margin-top: 40px;
}
}
.notices-block {
  border-radius: 8px 8px 8px 8px;
  display: grid;
  grid-template-columns: 1fr 13fr;
  padding: 35px 25px;
}
#grayRectangle {
    background: #D0E1D7;
    min-height: 200px;
    width: 100%;
}
.checkme{
margin-left:10%; 
line-height: 2;
}
.notices-block img {
  width: 100px;
}
.top-banner{
    padding: 3em 0 0;
    background: var(--green);
}
.breadcrumb-box {
    padding: .6em 6.8em;
    margin-bottom: 0;
    background: #749f7e;
}
.checkmepsc{
margin-left:10%;
margin-right:5%;
line-height: 2;
}
.breadcrumb-box a {
    color: #fff;
}

.breadcrumb-box a::after {
    content: ">>";
    padding-left: 5px;
}

.breadcrumb-box a:last-child::after {
    content: "";
}

#greenRectangle {
    background: #006810;
    min-height: 30px;
    width: 70%;
    color:#FFFFFF;
    text-align:center;
    font-size:20px;
    margin-left:10%;
}
.notice-slider {
  padding: 1em 2em 0 3em;
  list-style: none;
  margin: 0;
  display: flex;
}

.notice-slider li {
  display: none;
}

.notice-slider li.ease-in {
  display: block;
  transition: ease-in;
}

.update-bloc {
  position: relative;
}

.update-bloc::after {
  content: "";
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, #282828d4, #30303057, transparent);
  position: absolute;
  bottom: 0;
  left: 0px;
}

.update-bloc img:hover, .news-updates img:hover, .nat-committee-work img:hover, .sen-committee-work img:hover {
  filter: grayscale(1);
  z-index: 1;
}

.update-bloc img {
  object-fit: cover;
  height: 560px;
  border-radius: 10px 10px 10px 10px;
}

.date-title {
  position: absolute;
  padding: 0 20px;
  z-index: 10;
  color: #fff;
  bottom: 40px;
}

.image-updates p {
  font-size: 14px;
  background: var(--gold);
  width: fit-content;
  padding: 3px 10px;
  border-radius:10px 10px 10px 10px;
}

.image-updates .splide__pagination {
  bottom: 1.5em;
}

.image-updates .splide__pagination__page {
  background: #fff;
  opacity: 1;
}

.splide__pagination__page.is-active {
  background: var(--gold);
  width: 35px;
  margin: 0 10px;
  border-radius: 10px;
}

.nat-schedule-bloc{
  background-color: rgba(0, 104, 16, 0.047);
  padding: .5em 1em;
  border-radius: 10px;
  max-height:380px;
}
.senate-schedule-bloc {
  background-color: rgba(23, 25, 92, 0.047);
  padding: .5em 1em;
  border-radius: 10px;
  max-height:380px;
}
.committe-schedule-bloc {
  background-color: rgba(23, 25, 92, 0.047);
  padding: .5em 1em;
  border-radius: 10px;
  max-height:480px;
}.nat-schedule-bloc h5,
.senate-schedule-bloc h5 {
  font-size: 18px;
}

.time-topic li::before {
  border-left: 2px solid var(--green);
  bottom: 0;
  content: "";
  position: absolute;
  top: 0;
  left: 4px;
}

.senate-schedule-bloc .time-topic li::before {
  border-left: 2px solid var(--blue);
}

.senate-schedule-bloc .time-topic li::after {
  border: 5px solid var(--blue);
}

.time-topic li::after {
  border: 5px solid var(--green);
  border-radius: 5px;
  content: "";
  height: 0;
  left: 0;
  position: absolute;
  top: 0;
  width: 0;
}

.time-topic li:nth-child(2)::after,
.time-topic li:nth-child(2)::before,
.time-topic li:nth-child(2) {
  color: grey;
  border-color: grey;
}

.schedule-date {
  font-weight: 600;
  margin-bottom: 2em;
}

.nat-schedule .splide__arrow {
  background: var(--green);
}

.senate-schedule .splide__arrow {
  background: var(--blue);
}

.first-section .splide__arrow svg {
  fill: #fff;
}

.nat-schedule .splide__arrow--prev,
.senate-schedule .splide__arrow--prev {
  left: 8em;
  top: 10px;
}

.nat-schedule .splide__arrow--next,
.senate-schedule .splide__arrow--next {
  right: 8em;
  top: 10px;
}

.nat-schedule li,
.senate-schedule li {
  list-style: none;
  margin-left: 1rem;
  margin-bottom: .8rem;
}

.na-schedule-link,
.senate-schedule-link {
  display: flex;
  justify-content: end;
}

.na-schedule-link a,
.senate-schedule-link a {
  padding: 7px 12px;
  border: 1px solid var(--green);
  border-radius: 25px;
  color: var(--green);
  font-size: 14px;
  transition: .3s;
}
.naschedule{
  display: flex;!important;
  justify-content: end;!important;
}
.naschedule a{
  padding: 7px 12px;!important;
  border: 1px solid var(--green);!important;
  border-radius: 25px;!important;
  color: var(--green);!important;
  font-size: 14px;!important;
  transition: .3s;!important;
}
.na-schedule-link a:hover, .releases-bloc a:hover {
  background: var(--green);
  color: #fff;
}

.senate-schedule-link a:hover{
  background: var(--blue);
  color: #fff;
}

.senate-schedule-link a {
  border: 1px solid var(--blue);
  color: var(--blue);
}

.news-updates h5,
.nat-committee-work h5,
.sen-committee-work h5 {
  font-size: 1.1rem;
  padding: 14px 0;
}

.news-updates h5, .nat-committee-work h5, .sen-committee-work h5 {
  color: var(--green);
}

.nav-pills .nav-link:not(.active) {
  border-radius: 0;
  background-color: #fff;
  color: var(--lightgreen);
  border: 2px solid;
}

.nav-pills .nav-link.active {
  background-color: var(--lightgreen);
  border-radius: 0;
  border: 2px solid var(--lightgreen);
}

.schedule-bloc .fc-scroller {
  height: 350px !important;
}

.maintab-info>div {
  display: flex;
  position: relative;
}

.maintab-info>div::before {
  border-left: 2px solid var(--lightgreen);
  bottom: 0;
  content: "";
  left: 10px;
  position: absolute;
  top: 0;
}
#views-exposed-form-vacancies-page-1hh .form-item {
    margin: 2em 0em 0em 2em;
    width: 300px;
}
input#edit-field-job-title-value{
margin-top:0em!important;  
width: 1020px!important;
}
input#edit-field-job-reference-value{
margin-top: 0em!important;  
}
input#edit-field-contract-type-value{
margin-top: 2em!important;  
}
input#edit-field-designation-value{
margin-top: 2em!important;  
}
input#edit-actions-submit {
    margin-top: 1.1em;
    padding: 5px 30px;
    background: var(--green);
    border-color: var(--green);
}
input#edit-submit-vacancies {
    margin-top: 1.1em;
    padding: 5px 30px;
    background: var(--green);
    border-color: var(--green);
}
.maintab-info>div::after {
  border: 5px solid var(--lightgreen);
  border-radius: 5px;
  content: "";
  height: 0;
  left: 6px;
  position: absolute;
  top: 6px;
  width: 0;
}

.schedule-topic,
.schedule-time {
  margin-left: 2em;
}
 .highlight5 {
  right: 454px;
  bottom: 375px;
  left: 623px;     
  display: flex;
  align-items: flex-end;
  width: 110px;
  height: 20px;
  font: 600 16px/1.25 "Montserrat", Helvetica, Arial, serif;
  color: #1e293b;
}
.highlight51 {

  right: 178px;
  bottom: 375px;
  left: 822px;
  display: flex;
  align-items: flex-end;
  width: 187px;
  height: 20px;
  font: 600 16px/1.25 "Montserrat", Helvetica, Arial, serif;
  color: #1e293b;
}
 


.schedule-topic {
  color: var(--green);
  text-decoration: underline;
  margin-bottom: 1.5em;
}
 .text {
  display: flex;
  align-items: flex-end;
  font: 400 14px/1.25 "Montserrat", Helvetica, Arial, serif;
  color: #1e293b;
}
.news-title {
  text-align: center;
  color: var(--blue);
  font-weight: 900;
}

.splide.committee-articles .splide__arrow--prev,
.splide.second-committee-articles .splide__arrow--prev {
  left: -3em;
}

.splide.committee-articles .splide__arrow--next,
.splide.second-committee-articles .splide__arrow--next {
  right: -3em;
}

.maintab {
  display: flex;
  flex-wrap: wrap; /* Ensures wrapping on smaller screens */
  align-items: center;
  overflow: hidden;
  background-color: #fff;
  padding: 1px;
}

@media screen and (max-width: 768px) {
  .maintab {
    flex-direction: column; /* Stack items on smaller screens */
    align-items: stretch; /* Make full width */
  }
}


.maintab button {
  background-color: inherit;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

.maintab button:hover {
  background-color: #aef09f;
}

.maintab button.active {
  border-bottom: 3px solid var(--green);
  color:#fff;
  background:var(--green);
}

.tabcontent {
  display: none;
  padding: 2em 1em;
}
.medium_title1 {
  margin-left:1%;
  font: 600 24px/1.25 "Montserrat", Helvetica, Arial, serif;
  color: black;
}
 .highlight12 {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 86px;
  height: 20px;
  font: italic 500 16px/1.25 "Montserrat", Helvetica, Arial, serif;
  color: black;
  text-align: center;
}
h2 {
  font-size: 1rem;
  position: relative;
}
h2 span {
  background-color: white;
  padding-right: 10px;
}
h2:after {
  content: "";
  position: absolute;
  bottom:5%;
  left: 2%;
  right:3%;
  height: 0.5em;
  border-top:3px solid green;
  z-index: -4;
}
.subtitle12 {
  font: 600 15px/1.25 "Montserrat", Helvetica, Arial, serif;
  color: black;
  letter-spacing: -0.2px;
}

.subtitle11 {
  font: 600 20px/1.25 "Montserrat", Helvetica, Arial, serif;
  color: black;
  letter-spacing: -0.2px;
}
 .box1 {
  right: 0px;
  display: flex;
  flex-direction: column;
  width: 564px;
  height: 40px;
  border-color: #006810;
  border-style: solid;
  border-width: 0px 0px 2px 0px;
}
 .box31 {
  right: 0px;
  display: flex;
  flex-direction: column;
  width: 564px;
  height: 40px;
  border-color: #006810;
  border-style: solid;
  border-width: 0px 0px 2px 0px;
}

 .text1 {
  display: flex;
  align-items: flex-end;
  font: 400 14px/1.25 "Montserrat", Helvetica, Arial, serif;
  color: black;
}
 .flex_row4 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0px 10px;
  margin: 11px 16px;
  padding: 0px 171px 0px 0px;
}
 .flex_row3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0px 10px;
  margin: 11px 16px;
  padding: 0px 171px 0px 0px;
}
 .text15 {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 131px;
  height: 18px;
  font: 400 14px/1.25 "Montserrat", Helvetica, Arial, serif;
  color: black;
  text-align: center;
}

 .text17 {
  display: flex;
  justify-content: left;
  align-items: flex-end;
  width: 95px;
  height: 18px;
  font: 400 14px/1.25 "Montserrat", Helvetica, Arial, serif;
  color: black;
  text-align: center;
  letter-spacing: -1.2px;
}
 .highlight26 {
  display: flex;
  align-items: flex-end;
  width: 533px;
  height: 40px;
  font: 400 16px/1.25 "Montserrat", Helvetica, Arial, serif;
  color: black;
}


.releases-bloc {
  padding: 3em 3em;
  background: #f7fafc;
}

.nat-committee-work img,
.news-updates img,
.sen-committee-work img {
  height: 272px;
  border-radius: 10px;
  object-fit: cover;
}

*{
box-sizing: border-box;
}

.counties a:hover {
  background: var(--green);
  color: #ebfff0;
}

.youtube-links {
  margin: 5em 0;
}

.youtube-links hr {
  border: 1px solid;
  opacity: 1;
}

.video-title {
  font-weight: 600;
  position: absolute;
  background: #fff;
  padding: 0px 15px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  font-size:20px;
}
/* Media Query for smaller screens */
@media (max-width: 768px) {
  .video-title {
    font-size: 5vw; /* Slightly larger on small screens */
    padding: 3px 8px;
  }
}

/* Media Query for very small screens (mobile) */
@media (max-width: 480px) {
  .video-title {
    font-size: 12px; /* Fixed size for tiny screens */
    max-width: 90%;
    white-space: normal; /* Allows wrapping */
    padding: 5px;
  }
}
.youtube-video {
  border-radius: 10px;
  position: relative;
  padding-bottom: 44.25%;
  padding-top: 30px;
  height: 480px;
  overflow: hidden;
}

.youtube-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.kenyan-map svg {
  stroke: var(--green);
  stroke-width: 1.5px;
}

.kenyan-map path {
  fill: #fff;
}
.kenyan-map path:hover {
  stroke: var(--green);
  stroke-width: 2px;
  fill: var(--green);
}
.tooltiptext {
  display: none;
}
.ppart-card{
    display: flex;
    padding-left: 1em;
    padding-right: 1em;
    margin-bottom: 2em;
    box-shadow: 4px 4px 5px 0px #e7e5e5;
	text-align:left !important;
}





.vaccancies-card{
    background-color:#CCCCCC;
    display: flex;
    padding-left: 1em;
    padding-right: 1em;
    margin-bottom: 2em;
    box-shadow: 4px 4px 5px 0px #e7e5e5;
	text-align:left !important;
}
.vaccancies-card>div:nth-child(2) {
    padding-left: 1em;
}
.vaccancies-card p, .vacancies-card i{
    color: dimgray!important;
	text-align:left !important;
}
.vaccancies-card p:nth-child(2)::after{
    content: "";
    display: block;
    width: 100%;
    padding-top: 10px;
    border-bottom: 1px solid dimgray;
}
.vaccancies-card>div:last-child{
    flex-grow: 1;
    align-self: center;
    text-align: end;
}
.vaccancies-card i {
    font-size: 2em;
}
.tooltiptext.active {
  display: initial;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  position: fixed;
  z-index: 1;
  padding: 5px;
  font-size: 14px;
}

.tooltiptext.active {
  display: initial;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  position: fixed;
  z-index: 1;
  padding: 5px;
  font-size: 14px;
}

.program-schedule {
  align-self: stretch;
  height: 326px;
  position: relative;
  background-color: rgba(0, 104, 16, 0.03);
  overflow: hidden;
  flex-shrink: 0;
  max-width: 100%;
  text-align: center;
  font-size:16px;;
  color: #131313;
}
.schedule-controls {
  position: absolute;
  top: -20.3px;
  left: 0;
  width: 1512px;
  height: 767.2px;
}
.objects-icon1{
  position: absolute;
  top: 0;
  left: -23.4px;
  width: 1577.7px;
  height: 767.2px;
}
.calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 10px;
width: 500px;
margin-top: 10px;
}
@media (max-width: 480px) {
  .calendar {
display: grid;
    grid-template-columns: repeat(7,auto);
    gap: 5px;
    width: 100px;
    margin-left: 20%;
  }
 }
.day {
font-feature-settings: "liga" off, "clig" off;
padding: 10px;
text-align: center;
cursor: pointer;
}


.clheader {
  display: contents; /* Makes this element disappear and lets the children act as siblings */
}

/* For screens smaller than 768px (tablets and below) */
@media (max-width: 768px) {
  .clheader {
    /* Depending on the structure of your content, you might want to modify its children */
    /* Example: Adjust padding or margin for children elements */
    padding: 10px;
  }
}

/* For screens smaller than 480px (mobile devices) */
@media (max-width: 480px) {
  .clheader {
    padding: 5px;
    /* You can adjust other styles based on the structure of the children */
  }
}

/* For very small screens (below 360px) */
@media (max-width: 360px) {
  .clheader {
    /* Further adjust padding or margins if needed */
    padding: 3px;
  }
}

.visit-parliament {
background:#fff;
background-color:#fff;
display: flex;
flex-direction: column;
overflow: hidden;
}
.clheader-cell {
  font-feature-settings: "liga" off, "clig" off;
  flex-grow: 1;
  text-align: center; /* Center align header text */
  padding: 10px 0; /* Padding around header cells */
  border-bottom: 2px solid #000; /* Adding border to the header cells */
}

/* For screens smaller than 768px (tablets and below) */
@media (max-width: 768px) {
  .clheader-cell {
    padding: 8px 0; /* Slightly reduce padding for tablets */
    font-size: 14px; /* Reduce font size for smaller screens */
  }
}

/* For screens smaller than 480px (mobile devices) */
@media (max-width: 480px) {
  .clheader-cell {
    padding: 6px 0; /* Further reduce padding for mobile */
    font-size: 12px; /* Reduce font size even further for better readability */
  }
}

/* For very small screens (below 360px) */
@media (max-width: 360px) {
  .clheader-cell {
    padding: 4px 0; /* Keep padding minimal for tiny screens */
    font-size: 10px; /* Very small font size to avoid overflow */
  }
}
	
    .day:hover {
      background-color: #e0e0e0;
    }
    .selected {
      background-color: #D4AF37;
      color: white;
	  border-radius: 50%;
	  display: inline-block;
    }

    .clddate button {
      border: none;
      cursor: pointer;
	  background:#fff:
    }
    .clddate button:hover {
      background-color: #e0e0e0;
    }
@media screen and (max-width: 800px) {
  .program-schedule {
    height: auto;
    min-height:326;
  }
}
.cldiv {
background-color: rgba(0, 104, 16, 0.03);
display: flex;
flex-direction: column;
position: relative;
min-height: 10px;
width: 100%;
align-items: center;
padding:15px 20px 15px;
overflow: hidden;
}
@media (max-width: 991px) {
.cldiv{
max-width: 100%;
padding: 0 20px 100px;
}
}
.cldimg {
position: absolute;
inset: 0;
height: 100%;
width: 100%;
object-fit: cover;
object-position: center;
background-color:#FFFFFF;
}
.cldiv-3 {
position: relative;
margin-bottom: -23px;
width: 100%;
max-width: 1265px;
}
@media (max-width: 991px) {
.cldiv-3 {
max-width: 100%;
margin-bottom: 10px;
}
}
.cldiv-4 {
gap: 20px;
display: flex;
}
@media (max-width: 991px) {
.cldiv-4 {
flex-direction: column;
align-items: stretch;
gap: 0px;
}
}
.cldcolumn {
display: flex;
flex-direction: column;
line-height: normal;
width: 42%;
margin-left: 50px;
}
@media (max-width: 991px) {
.cldcolumn {
width: 100%;
}
}
.cldiv-5 {
position: relative;
display: flex;
flex-direction: column;
font-family: Montserrat, sans-serif;
}
@media (max-width: 991px) {
.cldiv-5 {
max-width: 100%;
margin-top: 40px;
}
}
.upcoming-committees-schedule {
color:#131313;
font-size: 28px;
font-weight: 600;
letter-spacing: 0.56px;
}
@media (max-width: 991px) {
.upcoming-committees-schedule {
max-width: 100%;
}
}
.cldiv-6 {
  display: flex;
  margin-top: 65px;
  width: 100%;
  flex-direction: column;
  align-items: end;
  font-size: 16px;
  color: #000;
  font-weight: 400;
  line-height: 1;
  padding: 0 14px 0 46px;
}

/* Adjustments for Samsung S10 (or screens with a width of 360px) */
@media (max-width: 360px) {
  .cldiv-6 {
    margin-top: 30px; /* Adjust margin-top for smaller screens */
    padding: 0 10px 0 14px; /* Adjust padding for better fit */
    font-size: 14px; /* Smaller font size */
    align-items: flex-start; /* Align items to the left for smaller screens */
  }
}

.month {
font-feature-settings: "liga" off, "clig" off;
font-size: 20px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.38px;
align-self: center;
}
.cldiv-7 {
align-self: start;
display: flex;
gap: 30px;
color: var(--Label-Colors-LC-L-Secondary, rgba(60, 60, 67, 0.6));
white-space: nowrap;
text-align: center;
line-height: 1;
margin: 33px 0 0 13px;
}
@media (max-width: 991px) {
.cldiv-7 {
margin-left: 10px;
white-space: initial;
}
}
.cldcolumn-2 {
display: flex;
flex-direction: column;
line-height: normal;
width: 58%;
margin-left: 20px;
margin-top:-3%;
}
@media (max-width: 991px) {
.cldcolumn-2 {
width: 100%;
}
}
.cldiv-16 {
position: relative;
display: flex;
margin-top: 79px;
align-items: center;
gap: 40px 47px;
font-family: Montserrat, sans-serif;
justify-content: start;
}
@media (max-width: 991px) {
.cldiv-16 {
margin-top: 40px;
}
}
.schedule {
align-self: stretch;
display: flex;
min-width: 240px;
width: 627px;
flex-direction: column;
overflow: hidden;
margin: auto 0;
padding: 0 9px;
}
.cldiv-17 {
display: flex;
width: 100%;
padding-top: 8px;
flex-direction: column;
justify-content: start;
}
@media (max-width: 991px) {
.cldiv-17 {
max-width: 100%;
}
}
.program {
display: flex;
margin-top: 16px;
width: 100%;
flex-direction: column;
justify-content: start;
}
@media (max-width: 991px) {
.program {
max-width: 100%;
}
}
.program-item {
display: flex;
width: 100%;
align-items: start;
gap: 13px;
justify-content: center;
flex-wrap: wrap;
padding: 10px 0;
}
@media (max-width: 991px) {
.program-item {
max-width: 100%;
}
}
  .div-19 {
    display: flex;
    min-width: 240px;
    flex-direction: column;
    justify-content: start;
    flex: 1;
    flex-basis: 0%;
  }
  @media (max-width: 991px) {
    .div-19 {
      max-width: 100%;
    }
  }
  .img-4 {
    aspect-ratio: 0.14;
    object-fit: contain;
    object-position: center;
    width: 10px;
    stroke-width: 2px;
    stroke: #006810;
  }
    .climg-3 {
    aspect-ratio: 1;
    object-fit: contain;
    object-position: center;
    width: 24px;
    align-self: stretch;
    margin: auto 0;
  }
    .climg-2 {
    aspect-ratio: 1;
    object-fit: contain;
    object-position: center;
    width: 24px;
    align-self: stretch;
    margin: auto 0;
  }
.noshedule {
aspect-ratio: 1;
object-fit: contain;
object-position: center;
width: 200px;
align-self: stretch;
margin: auto 0;
}  
.clddate {
align-self: center;
display: flex;
align-items: center;
gap: 16px;
font-size: 16px;
color: #131313;
font-weight: 500;
text-align: center;
line-height: 1;
justify-content: center;
}
@media (max-width: 480px) {
.clddate {
font-size:10px;
}
}
.cltoday {
align-self: stretch;
margin: auto 0;
}

.page-link{
background-color:#D4AF37!important;
color:#000000!important;
border-radius:10%!important; 
}

/* Modal Container */
.modal {
  display: none;
  position: fixed;
  z-index: 999;
  padding-top: 50px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}
  .div-7 {
    align-self: center;
    display: flex;
    margin-top: 32px;
    width: 100%;
    max-width: 1273px;
    flex-direction: column;
  }
  @media (max-width: 991px) {
    .div-7 {
      max-width: 100%;
    }
  }
.mypupdiv-2 {
position: relative;
justify-content: center;
border-radius: 12px;
background: #006810;
display: flex;
width: 866px;
max-width: 100%;
flex-direction: column;
overflow: hidden;
color: rgba(255, 255, 255, 1);
padding: 6px;
font: 400 18px Montserrat, sans-serif;
}
@media (max-width: 991px) {
.mypupdiv-2 {
margin-top: 40px;
padding: 0 20px;
}
}
.mypupdiv-42 {
  position: relative;
  justify-content: center;
  border-radius: 12px;
  background: #006810;
  display: flex;
  width: 866px;
  max-width: 100%;
  flex-direction: column;
  overflow: hidden;
  color: rgba(255, 255, 255, 1);
  padding: 6px;
  font: 400 18px Montserrat, sans-serif;
  margin-left: 20%;
margin-top: 3%;
}
  @media (max-width: 991px) {
    .mypupdiv-42 {
      margin-top: 40px;
      padding: 0 20px;
    }
  }  
  
  
.pupdiv-2 {
position: relative;
justify-content: center;
border-radius: 12px;
background: #006810;
display: flex;
width: 866px;
max-width: 100%;
flex-direction: column;
overflow: hidden;
color: rgba(255, 255, 255, 1);
margin:-100px 0 0 50px;
padding: 6px;
font: 400 18px Montserrat, sans-serif;
}
@media (max-width: 991px) {
.pupdiv-2 {
margin-top: 40px;
padding: 0 20px;
}
}
.pupdiv-42 {
  position: relative;
  justify-content: center;
  border-radius: 12px;
  background: #17195C;
  display: flex;
  width: 866px;
  max-width: 100%;
  flex-direction: column;
  overflow: hidden;
  color: rgba(255, 255, 255, 1);
  margin: 10px 0 0 120px;
  padding: 6px;
  font: 400 18px Montserrat, sans-serif;
  margin-top:-10%;
}
  @media (max-width: 991px) {
    .pupdiv-42 {
      margin-top: 40px;
      padding: 0 20px;
    }
  }
.mygive-view {
border-radius: 80px;
background-color:#17195C;
margin-top: 24px;
width: 286px;
max-width: 100%;
color:rgba(255, 255, 255, 1);
font-weight: 500;
line-height: 1;
padding: 16px 24px;
}
@media (max-width: 991px) {
.mygive-view {
padding: 0 20px;
}
 }

.give-view {
align-self: end!important;
border-radius: 80px;
background-color: rgba(255, 255, 255, 1);
margin-top: 24px;
width: 286px;
max-width: 100%;
gap: 10px!important;
color:#17195C;
font-weight: 500;
line-height: 1;
padding: 16px 24px;
}
@media (max-width: 991px) {
.give-view {
padding: 0 20px;
}
 }
.cparbpart {
font-size:20px;
}
@media (max-width: 991px) {
.cparbpart{
max-width: 100%;
}
}
.pubwell {
line-height: 23px;
margin-top: 24px;
}
@media (max-width: 991px) {
.pubwell{
max-width: 100%;
}
}


.climg-2 {
aspect-ratio: 1;
object-fit: contain;
object-position: center;
width: 24px;
align-self: stretch;
margin: auto 0;
}
.page-link{
background-color:#D4AF37!important;
color:#000000!important;
border-radius:10%!important; 
}

/* Modal Container */
.modal {
  display: none;
  position: fixed;
  z-index: 999;
  padding-top: 50px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}
  .div-7 {
    align-self: center;
    display: flex;
    margin-top: 32px;
    width: 100%;
    max-width: 1273px;
    flex-direction: column;
  }
  @media (max-width: 991px) {
    .div-7 {
      max-width: 100%;
    }
  }
.pupdiv {
display: flex;
flex-direction: column;
border-radius: 8px;
position: relative;
min-height: 566px;
overflow: hidden;
align-items:center;
color: rgba(255, 255, 255, 1);
padding: 171px 68px 100px;
font: 400 18px Montserrat, sans-serif;
}
@media (max-width: 991px) {
.pupdiv {
padding: 100px 20px 0;
}
}
.info-div {
  height: 200px;
  overflow-y: scroll;
}  
.pdimg{
position: absolute;
inset: 0;
width: 100%;
object-fit: cover;
object-position: center;
border-radius:20px 20px 20px 20px;
height:350px!important;
}
.mypdimg{
position: absolute;
inset: 0;
width: 100%;
object-fit: cover;
object-position: center;
border-radius:20px 20px 20px 20px;
height:150px;
}
.myppart-9 {
display: flex;
flex-direction: column;
border-radius: 8px;
position: relative;
width: 100%;
overflow: hidden;
align-items: start;
padding:40px 68px 61px 140px;
}
@media (max-width: 991px) {
.myppart-9 {
max-width: 100%;
padding: 100px 20px 0;
}
}

.releasetableother {
display: grid;
grid-template-columns: 7fr 1fr 1fr;
gap: 15px 10px;
overflow-x: auto;
border-bottom: 1px solid lightblue;
padding: 10px;
}

/* Medium screens: Adjust grid layout */
@media screen and (max-width: 1024px) {
.releasetableother {
grid-template-columns: 1fr 1fr 1fr; /* Reduce number of columns */
}
}

/* Small screens: Stack into fewer columns */
@media screen and (max-width: 768px) {
.releasetableother {
grid-template-columns: 1fr 1fr; /* Simple two-column layout */
}
}

/* Extra small screens: Stack into a single column */
@media screen and (max-width: 480px) {
.releasetableother {
grid-template-columns: 1fr; /* Full width stacking */
}
}






.releasetable {
display: grid;
grid-template-columns: 1fr 1fr 3fr 1fr 0.8fr;
gap: 15px 10px;
overflow-x: auto;
border-bottom: 1px solid lightblue;
padding: 10px;
}

/* Medium screens: Adjust grid layout */
@media screen and (max-width: 1024px) {
.releasetable {
grid-template-columns: 1fr 2fr 1fr 1fr; /* Reduce number of columns */
}
}

/* Small screens: Stack into fewer columns */
@media screen and (max-width: 768px) {
.releasetable {
grid-template-columns: 1fr 1fr; /* Simple two-column layout */
}
}

/* Extra small screens: Stack into a single column */
@media screen and (max-width: 480px) {
.releasetable {
grid-template-columns: 1fr; /* Full width stacking */
}
}

.form--inline.clearfix {
display: flex;
flex-wrap: wrap;
gap:0px;
}

.input-field {
width: 48%;
margin-bottom: 10px;
}

.section-a-personal-info {
background-color: #f4f4f4;
margin-left: 20%;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 950px;
}

.section-b-motion {
margin-top: 20px;
padding: 20px;
background-color: #e8f7ff;
border-radius: 8px;
width: 950px;
margin-left: 20%;
}

.radio-buttons {
margin-bottom: 15px;
}

.checkbox-group {
margin-bottom: 20px;
}

.submit-section {
text-align: center;
}

.submit-section input[type="submit"] {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}

.submit-section input[type="submit"]:hover {
background-color: #0056b3;
}