/* Course Details Section */
.course-details {
    z-index: 10;
    width: 100%;
}

.section-background {
    aspect-ratio: 2.44;
    object-fit: contain;
    object-position: center;
    width: 100%;
}

.course-content {
    display: flex;
    flex-direction: column;
    background-blend-mode: color_dodge;
    position: relative;
    z-index: 10;
    margin-bottom: -18px;
    width: 100%;
    padding: 0 120px 95px;
    
	background: linear-gradient(224.04deg, #0F0B28  45.4%, #1E1650 54.96%, #151038 61.18%);
    animation: gradientMove 35s ease-in-out infinite;
    margin-top: -7px;
}

.course-background {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
	display: none;
}
.course-apply-button:hover, .small-btn:hover{
   color: white !important;
}
.course-info {
    position: relative;
    border-radius: 30px;
    background-color: rgba(255, 255, 255, 1);
    z-index: 10;
    display: flex;
    margin-top: 60px;
    /* margin-top: -214px; */
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    padding: 36px 0 36px;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.course-header {
    align-self: center;
    display: flex;
    width: 100%;
    align-items: start;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: space-between;
	padding: 0px 40px;
}

.course-title-section {
    display: flex;
    flex-direction: column;
    align-items: stretch;
	width: 70%;
}

.course-main-title {
    color: #323232;
    letter-spacing: 0.25px;
    font: 400 25px 'DM Sans', -apple-system, Roboto, Helvetica, sans-serif;
}

.course-subtitle {
    color: rgba(0, 0, 0, 1);
    letter-spacing: -0.32px;
    margin-top: 6px;
    font: 600 32px/1 'DM Sans', -apple-system, Roboto, Helvetica, sans-serif;
}

.course-apply-button {
    border-radius: 8px;
    display: flex;
    margin-top: 4px;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 1);
    letter-spacing: -0.47px;
    justify-content: center;
    padding: 20px 18px;
    font: 600 16px/1.4 'DM Sans', -apple-system, Roboto, Helvetica, sans-serif;
    background: #8954ff;
	cursor: pointer;
	height: 46px;
	text-decoration: none;
}

.apply-arrow {
    aspect-ratio: 1;
    object-fit: contain;
    object-position: center;
    width: 25px;
    align-self: stretch;
    flex-shrink: 0;
    margin: auto 0;
}

.course-divider {
    aspect-ratio: 500;
    object-fit: contain;
    object-position: center;
    width: 100%;
    margin-top: 32px;
}

.universities-section {
    margin-top: 25px;
    width: 100%;
    font-family: 'DM Sans', -apple-system, Roboto, Helvetica, sans-serif;
    font-weight: 600;
}

.university-item {
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 20px;
	padding-left: 30px;
    padding-right: 30px;


}

.university-logo {
    aspect-ratio: 1;
    object-fit: contain;
    object-position: center;
    width: 92px;
    flex-shrink: 0;
}

.university-info {
    display: flex;
    flex-direction: column;
    align-items: stretch;
	gap: 3px;
}

.university-name {
    color: #323232;
    font-size: 27px;
    line-height: 1;
    letter-spacing: -0.53px;
    margin: 0;
}
.university-item.active {
    padding-bottom: 20px;
}

.university-location {
    color: #323232;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.43px;
    align-self: start;
	width: 100%;
	font-weight: 500;
}

.university-separator {
    aspect-ratio: 0.89;
    object-fit: contain;
    object-position: center;
    width: 75px;
    align-self: stretch;
    flex-shrink: 0;
    margin: auto 0;
}
.programs-section {
    display: flex;
    width: 100%;
    align-items: end;
    gap: 20px;
    justify-content: space-between;
}
.program-section {
    display: flex;
    width: 100%;
    gap: 35px;
    justify-content: space-between;
	padding: 30px 20px;
	flex-wrap: wrap;
}
.programs-left {
    width: 48%;
    align-self: start;
    font-family: 'DM Sans', -apple-system, Roboto, Helvetica, sans-serif;
}
.programs-right {
    width: 48%;
}
.program-category {
    width: 100%;
    max-width: 100%;
    align-items: stretch;
    font-family: 'DM Sans', -apple-system, Roboto, Helvetica, sans-serif;
    flex-wrap: wrap;
}

.program-header {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 0;
    width: fit-content;
}

.program-icon {
    aspect-ratio: 100;
    object-fit: contain;
    object-position: center;
    width: 100%;
}

.program-category-title {
    color: #323232;
    font-size: 28px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.44px;
}
.program-list {
  display: flex;
  flex-direction: column;
 
}

.program-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  color: #333333;
  border-bottom: 1px solid #80808042;
}
.program-row span:nth-child(1){
    color: #2e2eb4;
    cursor: pointer;
font-size: 24px;
}
.program-row span:nth-child(1):hover{
  color: #0000ffcf;
}

.duration {
  font-weight: 400;
}

.program-list {
    color: rgba(51, 51, 51, 1);
    font-size: 20px;
    font-weight: 500;
    line-height: 53px;
    letter-spacing: -0.4px;
}

.program-duration {
    align-self: end;
    margin-top: 80px;
    font-size: 20px;
    color: rgba(51, 51, 51, 1);
    letter-spacing: -0.4px;
    line-height: 53px;
}

.duration-bold {
    font-weight: 400;
}

.duration-group {
    display: flex;
    padding-left: 13px;
    flex-direction: column;
    align-items: start;
    font-weight: 600;
}

.program-image {
    width: 100%;
}

.program-image:first-child {
    aspect-ratio: 500;
    object-fit: contain;
    object-position: center;
}
.university-mobile .program-image:last-child{
	margin-top: 0px;
}
.program-image:last-child {
    aspect-ratio: 1.95;
    object-fit: contain;
    object-position: center;
    border-radius: 11px;
    margin-top: 18px;
}
#bharathiyar .program-image:last-child, #tamilnadu .program-image:last-child {
  margin-top: 0px;
}
.programs-right {
    font-family: 'DM Sans', -apple-system, Roboto, Helvetica, sans-serif;
}

.distance-title {
    color: #323232;
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.44px;
}

.distance-programs {
    color: rgba(51, 51, 51, 1);
    font-size: 20px;
    font-weight: 500;
    line-height: 53px;
    letter-spacing: -0.4px;
}

.distance-duration {
    margin-top: 80px;
    color: rgba(51, 51, 51, 1);
    letter-spacing: -0.4px;
    font: 500 20px/53px 'DM Sans', -apple-system, Roboto, Helvetica, sans-serif;
}

.duration-list {
    display: flex;
    padding-left: 17px;
    flex-direction: column;
    align-items: start;
}

.duration-months {
    margin-top: 54px;
}

.action-cards {
    position: relative;
    margin: 60px 0px 100px;
    gap: 20px;
    display: flex;
    padding: 0px 120px;
}

.action-card {
    border-radius: 28px;
    background-color: rgba(255, 255, 255, 0.24);
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    align-items: start;
    font-family: 'DM Sans', -apple-system, Roboto, Helvetica, sans-serif;
    color: #c6c6c6;
    width: 100%;
    padding: 35px;
    border: 2px solid rgba(255, 255, 255, 0.28);
}
.action-card::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 30px;
    padding: 2px;

    background: linear-gradient(
        90deg,
        transparent,
        #8954ff,
        transparent
    );

    background-size: 200% 200%;
    opacity: 0;
    transition: opacity 0.3s ease;

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
}

.action-card:hover::before {
    opacity: 1;
    animation: borderRun 2s linear infinite;
}

@keyframes borderRun {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}


.action-icon {
    aspect-ratio: 1;
    object-fit: contain;
    object-position: center;
    width: 70px;
}

.action-title {
    font-size: 24px;
    font-weight: 600;
    margin-top: 32px;
	margin-bottom: 8px;
    color: #c6c6c6;
}

.action-description {
    font-size: 21px;
    font-weight: 400;
    line-height: 26px;
    align-self: stretch;
    margin-top: 0px;
}
.small-btn{
	    border-radius: 8px;
    display: flex;
    margin-top: 4px;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 1);
    letter-spacing: -0.47px;
    justify-content: center;
    padding: 8px 14px;
    font: 600 16px / 1.4 'DM Sans', -apple-system, Roboto, Helvetica, sans-serif;
    background: #8954ff;
    cursor: pointer;
    text-decoration: none;
	width: fit-content;
	margin-top : 0px ;
	margin-left: 10px;
	white-space: nowrap;
}
.program-category-title, .distance-title {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    justify-content: space-between;
}
@media (min-width: 1026px){
     .university-mobile{
         display: none;
    }
     .university-desktop{
         display: block;
    }
}

@media (max-width: 1025px){
     .university-mobile{
         display: block;
    }
     .university-desktop{
         display: none;
    }
     .program-section {
         flex-direction: column !important;
         padding: 0px !important;
    }
     .programs-right, .programs-left {
         width: 100% !important;
    }
     .programs-right {
         margin-top: 0px;
    }
     .program-category-title, .distance-title {
         font-size: 24px !important;
         margin: 0px !important;
    }
}
@media screen and (max-width: 991px) {
 .programs-overview {
         max-width: 100%;
         margin-top: 40px;
         padding: 20px;
    }
     .programs-title {
         max-width: 100%;
    }
     .programs-grid {
         flex-direction: column;
         align-items: stretch;
         gap: 0px;
    }
     .program-card {
         max-width: 100%;
         margin-top: 32px;
         padding: 20px;
    }
     .course-details {
         max-width: 100%;
    }
     .section-background {
         max-width: 100%;
    }
     .course-content {
         max-width: 100%;
         margin-bottom: 10px;
         padding: 0 20px;
    }
     .course-info {
         max-width: 100%;
         margin-top: -200px;
         padding: 20px;
    }
     .course-header {
         max-width: 100%;
    }
     .course-main-title {
         max-width: 100%;
    }
     .course-subtitle {
         max-width: 100%;
         margin-right: 6px;
    }
     .course-divider {
         max-width: 100%;
    }
     .universities-section {
         max-width: 100%;
    }
     .programs-section {
         max-width: 100%;
    }
     .program-category {
         max-width: 100%;
    }
     .program-category-title {
         margin: 0 10px;
    }
     .program-list {
         margin: 0 10px;
    }
     .program-duration {
         margin-top: 40px;
    }
     .program-images {
         max-width: 100%;
         padding-left: 20px;
    }
     .program-image {
         max-width: 100%;
    }
     .program-image:last-child {
         margin-right: 3px;
    }
     .programs-right {
         max-width: 100%;
    }
     .distance-title {
         max-width: 100%;
         margin-right: 8px;
    }
     .distance-programs {
         max-width: 100%;
    }
     .distance-duration {
         margin-top: 40px;
    }
     .action-cards {
         max-width: 100%;
         margin-top: 40px;
         margin-bottom: 40px;
         flex-direction: row;
         align-items: stretch;
         gap: 20px;
         width: 100%;
         flex-wrap: wrap;
    }
     .action-card {
         margin-top: 27px;
         padding: 20px;
         width: 44%;
    }
     .student-projects {
         max-width: 100%;
         margin-top: 40px;
         padding: 0 20px;
    }
     .projects-gallery {
         flex-direction: column;
         align-items: stretch;
         gap: 0px;
    }
     .projects-left, .projects-right {
         width: 100%;
    }
     .projects-left {
         margin-top: 13px;
    }
     .projects-right{
         margin-left: 0px;
    }
     .project-row {
         flex-direction: row;
         align-items: stretch;
         gap: 0px;
    }
     .project-image {
         margin-top: 12px;
    }
     .projects-right {
         max-width: 100%;
         margin-top: 13px;
    }
}
@media screen and (max-width: 820px){
  .programs-overview {
         margin-top: 0px !important;
         padding: 20px !important;
    }
     .programs-title{
         font-size: 24px !important;
    }
     .programs-grid {
         margin-top: 0px;
    }
     .card-title {
         font: 600 24px / 28px 'Host Grotesk', -apple-system, Roboto, Helvetica, sans-serif;
    }
     .program-card {
         margin-top: 20px;
         padding: 20px;
    }
     .card-description {
         margin-top: 10px;
         font: 500 18px / 24px 'DM Sans', -apple-system, Roboto, Helvetica, sans-serif;
    }
.course-main-title {
         font-size: 20px !important;
         font-weight: 500 !important;
    }
	.course-title-section{
width: 100% !important;
}
     .course-subtitle {
         font: 600 24px / 1 'DM Sans', -apple-system, Roboto, Helvetica, sans-serif !important;
    }
     .course-apply-button{
         font-size: 16px !important;
         padding: 10px !important;
		 height: unset;
    }
     .university-item{
         padding-bottom: 15px !important;
         padding-left: 0px !important;
         padding-right: 0px !important;
         margin-bottom: 0px !important;
         width: 100%;
         border: none !important;
    }
     .university-name{
         font-size: 24px !important;
    }
     .university-location {
         font-size: 15px !important;
         line-height: 20px;
    }
     .program-section{
         flex-direction: column !important;
         padding: 0px !important;
    }
 .program-row span{
    font-family: 'DM Sans', -apple-system, Roboto, Helvetica, sans-serif;
}
     .programs-right,.programs-left{
         width: 100% !important;
    }
     .programs-right{
         margin-top: 10px !important;
    }
     .program-category-title, .distance-title {
         font-size: 18px !important;
         margin: 0px !important;
         line-height: 28px;
    }
     .program-list, .distance-programs {
         font-size: 18px !important;
         line-height: 32px !important;
         gap: 0px !important;
         margin: 10px 0px !important;
    }
     .program-images {
         padding-left: 0px;
    }
     .action-cards{
         flex-wrap: wrap !important;
         flex-direction: row;
         gap: 10px;
         margin-bottom: 40px;
    }
     .action-card{
         width: 45% !important;
         margin-top: 5px !important;
         padding: 20px;
    }
     
     .action-title {
         font-size: 15px;
         margin-top: 8px;
         line-height: 28px;
    }
     .action-description {
         font-weight: 400;
         line-height: 18px;
         margin-top: 5px;
         font-size: 15px;
    }
     .course-info{
         max-width: 100%;
         margin-top: -80px;
         padding: 20px;
    }
     .universities-section{
         gap: 10px;
    }
     .project-row {
         flex-direction: row;
    }
     .projects-right{
         margin: 0px !important;
    }
  .projects-title{
         font-size: 24px;
    }
 .university-mobile{
         display: block;
    }
     .university-desktop{
         display: none;
    }
}
@media screen and (max-width: 1024px) {
	.program-images{
		padding: 0 20px;
	}
	.course-title-section{
		width: 100% !important;
	}
}
@media screen and (max-width: 581px){
    .programs-content{
         padding: 0px;
    }
     .programs-grid {
         margin-top: 0px;
    }
  .course-apply-button{
         height: unset;
    }
}
@media screen and (max-width: 480px){
 .course-header{
         padding: 0px;
    }
	.program-category-title a span, .distance-title a span{
		 font-size: 13px !important;
	}
}
@media screen and (max-width: 417px){
     
     .university-name {
         font-size: 20px !important;
    }
}
@media screen and (max-width: 361px){
     .header-section{
         font-size: 12px;
    }
     .action-card{
         padding: 10px;
    }
     .action-card img {
         width: 36px;
    }
     .action-card {
         border-radius: 18px;
    }
     .card-title {
         font: 600 20px / 26px 'Host Grotesk', -apple-system, Roboto, Helvetica, sans-serif;
    }
     .card-description{
         font-size: 18px;
    }
     .course-info{
         padding: 10px;
    }
     .universities-section {
         gap: 5px;
    }
     .header-section i.fa-brands{
         font-size: 16px;
    }
     .separator-line {
         height: 12.5px;
    }
   .university-name {
         font-size: 18px !important;
    }
     .university-location {
         font-size: 17px !important;
    }
}
@media screen and (min-width: 780px) and (max-width: 1100px) {
.university-item{
		width: 100% ;
	}
	.program-category{
		padding : 20px ;
	}
	.programs-right{
		padding-top: 0px !important;
        padding:  20px;
	}
	.university-item.active{
		border-bottom: 4px solid  transparent;
	}
	.university-item{
		    align-items: anchor-center;
	}
	.program-image{
		margin-top: 0px !important;
	}
	.action-cards{
		    flex-wrap: wrap;
	}
	.action-card{
		width: 48%;
	}
}
@media screen and (max-width: 820px) {
    .university-location {
        font-size: 20px !important;
        line-height: 24px;
    }
}
@media (max-width: 417px){
    .university-location {
        font-size: 18px !important;
		}
	
}
@media screen and (max-width: 1441px) {
	.action-card{
		padding: 25px;
	}
}
@media screen and (max-width: 1367px) {
	.action-title {
        font-size: 22px;
	}
	.action-description {
        font-size: 20px;
	}
}
@media screen and (max-width: 1281px) {
   .action-card{
		padding: 20px;
	}
	.action-title {
        font-size: 21px;
	}
	.action-description {
        font-size: 19px;
	}
}
@media screen and (max-width: 480px){
	.action-title{
		font-size: 20px;
		min-height: 48px;
        margin-bottom: 0px;
	}
	.action-description {
        line-height: 24px;
		font-size: 16px;
    }
}
@media screen and (max-width: 480px){
.course{
		font-size: 18px !important;
	}
.action-card img{
         width: 45px;
    }
}
@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
#alagappa, #tamilnadu{
  border-bottom: 1px solid #8954ff;
  padding-bottom: 40px;
  margin-bottom: 40px;
}
.distance-education-title{
  font-size: 26px;
  color: #323232;
}