#linkBtn{
text-align:center;
display: block;
text-align: center;
width: 100%;
text-decoration: none;
}
.modal {
  display: none; 
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85); 
  justify-content: center;
  align-items: center;
}
.modal-content {
  position: relative;
  background-color: #000;
  width: 90%;
  max-width: 800px;
  border-radius: 8px;
  padding: 10px;
}
.close-btn {
  position: absolute;
  top: -40px;
  right: 0;
  color: #fff;
  font-size: 35px;
  font-weight: bold;
  cursor: pointer;
}
.link-btn a{
  color: #fff;
  font-size: 35px;
  font-weight: bold;
  cursor: pointer;
}
.link-btn{
text-align:center;
}
.video-container {
  position: relative;
  padding-bottom: 56.25%; 
  height: 0;
  overflow: hidden;
}
/* Updated selector to target the HTML5 video player */
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
}
/* 1. MOOC Hide the horizontal scrollbar and establish bounds */
.moocsexplorediv{
margin: 16% 0px 15px 0px;
border:2px #000000 solid;
width:150px;
font-size:18px;
font-family:"Courier New", Courier, monospace;
color:#000000;
padding:5px;
font-weight:bold;
background-color: #fff;
}
a .moocsexplorediv:hover{
color:#FFFFFF;
background-color:#999999;
}
.moocshdline{
font-size:30px;
font-family:Georgia, "AR BERKLEY", Times, serif;
color: white;
-webkit-text-stroke: 7px #ea5b57;
paint-order: stroke fill; /* Renders stroke underneath the fill */
/* Increase space */
letter-spacing:4px;
word-spacing: 3px;
line-height:40px;
padding: 30px 0px 30px 0px;
}
.moocshrline{
border:3px #000000 solid; width:70%; text-align:center; margin:5px; text-align:center; 
}
.moocsmidivhd{
font-size:40px;
font-weight:bolder;
text-align:center;
padding-top:20px;
padding-bottom:20px;
//border-top-left-radius:20px;
//border-top-right-radius:20px;
color: white;
-webkit-text-stroke: 10px #095ec1;
paint-order: stroke fill; /* Renders stroke underneath the fill */
/* Increase space */
letter-spacing: 6px;
text-decoration: underline;
}
.smoocsdiv{
background-image:url(sites/default/cecbg/cecmooc.png);
width:100%;
height:100%;
display: flow-root;
background-size: cover;
//background-position: center;
background-repeat: no-repeat;
padding:14px;
height:420px;
}
.swayammoccstripbgtbl{
border-collapse: separate;
width:100%;
border-spacing: 0 30px;
}
.swayammoccstripbg td{
//border-top:2px solid #0276c0;
//border-bottom:2px solid #0276c0;
//vertical-align: middle;
}
.awardstripbg td{
border-top:2px solid #0276c0;
border-bottom:2px solid #0276c0;
}

.vyasstripbg{
//background-color:#999999;
padding: 10px;
}

.swayammoccstripbg{
 box-shadow: 0px 1px 11px 2px #ccc;
}
.moocmarquee-container {
  overflow: hidden;
  width: 100%;
  display: flex;
  max-width:initial;
  padding: 10px 0px 0px 0px;  
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); /* Responsive columns */
  justify-content: start; /* Keeps the grid structure locked to the left side */
  width: 100%;
}
/* 2. Position the dual groups side-by-side */
.moocmarquee-track {
  display: flex;
  animation: moocscrollMarquee 100s linear infinite; /* Increase time for 172 images */
 //animation: moocscrollMarquee 360s linear infinite; /* Increase time for 172 images */
  gap: 40px; /* Space between separate images */
  
}
.moocmarquee-track img {
 height: 250px; /* Control image scaling */
  width: 250px;
  flex-shrink: 0;
  object-fit: contain;
  cursor:pointer;
}
/* 4. Pause the scroller when someone hovers over it */
.moocmarquee-container:hover .moocmarquee-track {
  animation-play-state: paused;
}
/* 5. The infinite math magic */
@keyframes moocscrollMarquee {
  0% {
    transform: translateX(0);
  }
  100% {
     /* Replace -5000px with the actual width of your 172 images */
    transform: translateX(-54000px); 
  }
}
/* Mooc End */
.stripcontainer{
text-align: center;
font-size: 1.2em;
margin-top: 50px;
padding: 5px;
line-height: 35px;
}
/* Container styling to position buttons relative to the list */
.moocsawareouteronline{
//width: 70%;
margin-top: 40px;
padding: 0px 0px 0px 0px;
}
.scroller-containeronline {
    position: relative;
    align-items: center;
}
/* Horizontal scrolling wrapper */
.moocsawareonline {
    width: 100%;
    scrollbar-width: none; /* Firefox */
	margin: 15px 15px 15px 15px;
	text-align: center;
	border-top: 1px solid #faba5b;
	border-bottom: 1px solid #faba5b;
	box-shadow: 1px -2px 14px #dbdbdb;
}
.moocsaware::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}
.moocsaware-triggeronline:hover img{
cursor: pointer;
transform: scale(1.1); /* Increases size by 20% */
opacity: 150%;
}
.moocsaware-triggeronline img {
    height: 400px;
    width: auto;
	padding:15px;
}
.moocsawarehdonline{
font-size:30px;
font-weight:bolder;
text-align:center;
padding-top:20px;
padding-bottom:20px;
letter-spacing: 3px;
word-spacing: 3px;
text-decoration: underline;
color: coral;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}


 
/* Moocs swayam Text Caption Overlay Guard */
.moocsslide-caption {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
	top:0px;
    background: rgba(0, 0, 0, 0.82); /* Keeps text color contrast compliant at 4.5:1 */
    color: #ffffff;
    padding: 30px calc(5vw + 10px); /* Aligns text with main page content grid layout */
    z-index: 3;
	display: flex;
    justify-content: center;
}

.moocsslide-caption h2 {
    font-size: 5rem;
    color: #ffff00; /* High legibility target */
    margin-bottom: 8px;
	text-align:center;
	margin-top: -30px;
}

.moocsslide-caption p {
    font-size: 1.3rem;
    color: #f4f4f4;
	text-align:center;
    line-height: 40px;
}
.moocsslide-caption .innertxtcenter{
width:70%;
text-align:center;
}
.pgraphhyper{
display:flex;
justify-content:center;
gap:35px;
margin-top:7%;
}
.pgraphhyper div a{
padding: 25px 25px 25px 25px;
text-align: center;
color: #FFFFFF;
background-color: var(--primary-color);
text-decoration: none;
font-size: 1.2em;
font-weight: 500;
}
.pgraphhyper div a:hover{
color:#CCCCCC;
}
.enrolreg{
DISPLAY: FLEX;
JUSTIFY-CONTENT: center;
MIN-HEIGHT: 100PX;
MARGIN: 50PX;
FONT-WEIGHT: 500;
}
.enrolreg div a{
padding: 25px 25px 25px 25px;
text-align: center;
color: #FFFFFF;
background-color: var(--primary-color);
text-decoration: none;
font-weight: 500;
margin-left:50px;
}
.enrolreg div a:hover{
color:#CCCCCC;
}
.objectivemoocs{
display: grid;
grid-template-columns: repeat(2, 1fr); /* 6 Columns on PC/Laptop */
margin:0 auto;
padding:100px 0px 0px 0px;
text-align: center;
width:80%;
line-height: 40px;
}
.objectivemoocsfdiv{
text-align:left;
}
.objectivemoocsdiv{
}
.objectivemoocsdiv img{
padding:40px 0px 0px 0px;
width:85%;
}
.objectivemoocsfdiv ul li{
margin-left:25px;
text-align:left;
}
.proposalmoocs{
display: grid;
grid-template-columns: repeat(2, 1fr); /* 6 Columns on PC/Laptop */
margin:0 auto;
padding:100px 0px 0px 0px;
text-align: center;
width:80%;
line-height: 40px;
}
.proposalmoocsfdiv{
text-align:left;
margin:-10px 0px 100px 52px;

}
.proposalmoocsfdiv div a{
text-decoration: none;
}
.proposalmoocsfdiv div a:hover{
color: var(--primary-color);
}
.proposalmoocsdiv{
}
.proposalmoocsdiv img{
padding:10px 40px 70px 10px;
width:100%;
}
.swayamref{font-size:12px; margin-left:15px;}
@media (max-width: 1750px) {
	.moocsslide-caption h2 {
    	font-size: 3rem;
	}
}
@media (max-width: 1570px) {
	.moocsslide-caption .innertxtcenter {
 	   width: 90%;
	}
}
@media (max-width: 1470px) {
	.moocsslide-caption .innertxtcenter {
 	   width: 95%;
	}
	.moocsslide-caption p {
	    font-size: 1.2rem; 
	}
	.enrolreg {
	margin:5px 0px 5px 0px;		
	}
}
@media (max-width: 1370px) {	
	.pgraphhyper div a {
	    padding: 15px 15px 15px 15px;
	}
	.pgraphhyper {
	    margin-top: 4%;
	}
	.enrolreg div a {
	    padding: 15px 15px 15px 15px;
	}
}
@media (max-width: 1270px) {	
	.pgraphhyper div a {
	    padding: 15px 15px 15px 15px;
	}
	.pgraphhyper {
	    margin-top: 2%;
	}
	.enrolreg div a {
	    padding: 15px 15px 15px 15px;
	}
	.moocsslide-caption .innertxtcenter {
 	   width: 100%;
	}
	.moocsslide-caption h2 {
        font-size: 2rem;
    }
	.objectivemoocs {
		width: 100%;
		align-items: center;
	}
	.proposalmoocs {
		width: 100%;	
		align-items: center;
	}
}
@media (max-width: 1100px) {	
	.moocsslide-caption h2 {
        font-size: 1.5rem;
    }
	.moocsslide-caption p {
        font-size: 1.2rem;
        margin: 0px;
    }
	.pgraphhyper div a {
	    padding: 5px 15px 5px 15px;
	}
	.enrolreg {
        margin: 0px 0px 0px 0px;
		min-height:60px;
    }
	.enrolreg div a {
        padding: 5px 15px 5px 15px;
    }
	h2 {
		margin:0px;
		padding:0px;
		font-size: 1rem;		
	}
}
@media (max-width: 1024px) {	
	.moocsslide-caption {
        padding: 30px 10px 30px 10px;
	}
}