<!--..........Banner Section.............-->
.inner-banner {
position: relative;
width: 100%;
height: 388px;
background:
linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.34) 100%
),
url("/mes_college/static/img/admission.png");

background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-blend-mode: normal, darken;
display: flex;
align-items: center;
padding: 0px 100px;
box-sizing: border-box;
}
.inner-overlay {
color: #fff;
height: 100%;
padding: 124px 0;
}

.inner-overlay h1 {
color: #FFF;
text-shadow: 0 3px 5.4px rgba(0, 0, 0, 0.25);
font-family: Poppins;
font-size: 50px;
font-style: normal;
font-weight: 700;
line-height: 55px;
text-transform: capitalize;
}

.inner-overlay p {
color: #FFF;
text-shadow: 0 4px 4px rgba(0, 0, 0, 0.33);
font-family: Poppins;
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: normal;
letter-spacing: -0.64px;
margin-bottom:32px;
}
#apply-btn {
border: 1px solid #fff;
color: #fff;
z-index: 1;
background: #116CF8;
}
#apply-btn .mes_buttn-icon{
background: #fff;
}
#apply-btn:hover{
color:#116CF8;
}
#apply-btn:hover::after {
z-index: -1;
background: #fff;
width:93%;
}
.mes_buttn{
color: #116CF8;
font-family: Poppins;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 24px;
display: flex;
padding: 10px 10px 10px 12px;
align-items: center;
gap: 8px;
transition: all 0.3s ease-in-out;
border-radius: 100px;
border: 1px solid #116CF8;
width: fit-content;
position:relative;
}
.mes_buttn-icon {
border-radius: 100px;
background: #1f6fff;
box-shadow: none;
display: flex;
width: 26px;
height: 26px;
justify-content: center;
align-items: center;
gap: 8px;
z-index: 2;
transition: all 0.3s
ease-in-out;
}
.mes_buttn:hover{
color:white;
}
.mes_buttn:hover .mes_buttn-icon {
transform: rotate(45deg);
}
.mes_buttn::after {
z-index: 1;
content: "";
position: absolute;
width: 26px;
height: 26px;
background: #1f6fff;
border-radius: 100px;
right: 10px;
transition: all 0.3s
ease-in-out;
}
.mes_buttn:hover::after {
height: 37px;
width: 95%;
right: 5px;
z-index: -1;
}
<!--..........Bottom Bar.............-->

.bottombar {
width: 100%;
}
.announcement-section {
display: flex;
background: #ECF3FF;
overflow: hidden;
}
.announcement-text {
width: 100%;
padding: 12px 0px;
overflow: hidden;
background:#EEF7FF;
left: -20px;
z-index: 1;
}
.announcement-items {
will-change: transform;
animation: marquee 30s
linear infinite;
display: flex;
align-items: center;
z-index: 2;
position: relative;
width: 100%;
overflow: visible;
white-space: nowrap;
gap: 7px;
}
@keyframes marquee {
0% {
transform: translateX(100%);
}

100% {
transform: translateX(-100%);
}
}

.announcement-section:hover .announcement-items {
animation-play-state: paused;
}

#announce-item a {
display: block;
color: #0F172A;
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px;
}

#announce-item {
margin: 0;
display: flex;
align-items: center;
gap: 7px;
}

<!--..........Side Items............-->

.side_items {
width: 280px;
position: sticky;
top: 20px;
height: fit-content;

}
.side_item_head{
border-radius: 32px 32px 0 0;
background: #ECF3FF;
display: flex;
padding: 16px 24px;
align-items: center;
gap: 10px;
align-self: stretch;
color: #0F172A;
font-family: Poppins;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 32px;
}
.side_items .s_table_of_content_navbar{
padding-left:0;
border-right: 1px solid #ECF3FF;
border-bottom: 1px solid #ECF3FF;
border-left: 1px solid #ECF3FF;
background: #FFF;
border-radius: 0 0 32px 32px;
height: 100%;
display: block;
}
.side_items .s_table_of_content_navbar .table_of_content_link{
display: flex;
flex: 1 0 0;
}

.side_items .s_table_of_content_navbar .table_of_content_link{
display: flex;
flex: 1 0 0;
padding: 12px 24px;
align-self: stretch;
overflow: hidden;
color: #0F172A;
font-family: Poppins;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-align:left;
border:none !important;
}

.s_table_of_content_navbar .list-group-item.active {
background:#116CF8 !important;
color:#fff !important;
}

.s_table_of_content_navbar .list-group-item:hover {
background:#116CF8 !important;
color:#fff !important;
}
.side_items {
position: sticky;
top: 20px;
}
.view_more{
color: #116CF8 !important;
}

<!--..........Table of content............-->

.s_table_of_content .row{
justify-content: space-between;
}

#programmes .programme_card{
width:320px;
height:319px;
}
.dep_pgm{
margin-bottom:16px;
overflow: hidden;
color: #4B5262;
font-family: Poppins;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 28px;
max-height:30px;
overflow:hidden;
}

<!--.......... Explore Our Programmes ............-->

#programmes .programme-card-box{
gap:0;
height:183px;
padding:24px 25px;
}
#programmes .programme-card-name{
margin-bottom:4px;
}
#programmes .programme-card-image{
height:135px;
}

.programme-filters {
display: flex;
flex-direction: column;
gap: 24px;
padding-top:24px;
}

/* Top row */
.main-tabs,
.sub-tabs {
display: flex;
flex-wrap: wrap;
gap: 12px;
}

/* Link */
.main-tabs a {
border: 1.5px solid #116CF8;
background: transparent;
color: #116CF8;
padding: 8px 16px;
border-radius: 999px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: 0.3s ease-in-out;
}

/* Active state */
.main-tabs a.active {
background: #116CF8;
color: #fff;
}

/* Hover */
.main-tabs a:hover {
background: #116CF8;
color: #fff;
}
.sub-tabs a{
border-radius: 100px;
border: 1px solid #ECF3FF;
cursor: pointer;
white-space: nowrap;
transition: 0.3s ease-in-out;
color: #4B5262;
font-family: Poppins;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
padding: 8px 16px;
}
.sub-tabs a.active{
background: #ECF3FF;
color: #116CF8;
}
.sub-tabs a:hover{
background: #ECF3FF;
color: #116CF8;
}

.application-steps {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 32px;
padding-top: 32px;
}

/* Card */
.step-card {
border-radius: 32px;
border: 1px solid #DAEDFE;
padding: 16px;
background: #fff;
transition: 0.3s ease-in-out;
}

.step-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 30px rgba(17,108,248,0.12);
}
.step-card h3 {
color: #0F172A;
font-family: Poppins;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height:24px;
margin-bottom: 16px;
margin-top: 16px;
}

.step-card p {
color: #4B5262;
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 22px;
}

<!--...............Important Dates &amp; Admission Process.............-->

.pgm-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
margin-top: 32px;
}

/* Card */
.pgm-card {
border: 1px solid #DAEDFE;
border-radius: 32px;
overflow: hidden;
background: #fff;
}

/* Header */
.pgm-header {
display: flex;
height: 75px;
padding: 24px 32px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 23px;
align-self: stretch;
border-radius: 32px 32px 0 0;
background: #116CF8;
color: #FFF;
font-family: Poppins;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 24px;
}

/* Body */
.pgm-body {
padding: 24px 32px;
}

.pgm-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
color: #4B5262;
font-family: Poppins;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}

.pgm-row a {
margin-left: auto;
color: #116CF8;
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-decoration-line: underline ! IMPORTANT;
text-decoration-style: solid !important;
text-decoration-skip-ink: auto;
text-decoration-thickness: auto !important;
text-underline-offset: auto;
text-underline-position: from-font;

}

<!--.............Prospects.............-->

.prospect-list {
display: flex;
flex-direction: column;
gap: 32px;
max-width: 100%;
}

/* Item row */
.prospect-item {
display: flex;
align-items: center;
justify-content: space-between;
background: #ECF3FF;
border-radius: 32px;
transition: 0.3s ease-in-out;
height: 84px;
padding: 16px 24px;
color: #0F172A;
font-family: Poppins;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 32px;
}
.prospect-item .prospects-img{
transition: 0.3s ease-in-out;
width:52px;
height:52px;

}


/* Hover effect */
.prospect-item:hover {
transform: translateX(4px);
}
.prospect-item:hover .prospects-img{
transform: rotate(45deg);
}

<!--..................Study in India.................-->

.study-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
align-items: center;
}
.study-images {
display: flex;
gap: 32px;
}

.image-large img,
.image-stack img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 32px;
background: #FFF;
}

/* Big image */
.image-large {
width: 232px;
height: 506px;
border-radius: 32px;
background: #FFF;
}

/* Right stack */
.image-stack {
display: flex;
flex-direction: column;
gap: 32px;
width: 232px;
height: 100%;
border-radius: 32px;
}
.image-stack img{
height:237px;
}

/* Stat card */
.stat-card {
background: #116CF8;
color: white;
border-radius: 32px;
padding: 31px 26px;
text-align: center;
height: 237px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
}

.stat-card h2 {
color: #FFF;
font-family: "Plus Jakarta Sans";
font-size: 52px;
font-style: normal;
font-weight: 800;
line-height: normal;
margin-bottom: 0px;
}
.stat-card span{
color: #FFF;
text-align: center;
font-family: Poppins;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 26px;
}

<!--.................Placement Partners.............-->

.featured-products-list {
display: flex;
gap: 2rem;
overflow-x: hidden;
overflow-y: hidden;
list-style: none;
}
.product-card {
background-color: transparent;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 2rem;
border-radius: 5px;
height: 100%;
width: 180px;
}
.product-card-img {
display: flex;
align-items: center;
justify-content: center;
width: 180px;
height: 180px;
border-radius: 150px;
border: 5px solid #CBF0FF;
background: #FFF;
box-shadow: -2px 2px 5.7px 0px rgba(16, 80, 105, 0.10);
padding: 47px 24.632px 46px 25.632px;
}
.product-card-img img {
border-radius: 10px;
width: 100%;
height: 100%;
object-fit: contain;

}
.feedslider-container:nth-child(2) .slider-track:hover {
animation-play-state: paused;

}
#studyInIndia .slider-track{
animation: scroll 24s linear infinite;
}
#studyInIndia .feedslider-container:nth-child(2) .slider-track {
animation: scroll-reverse 24s linear infinite;
}
@keyframes marquee {
0% {
transform: translateX(100%);
}

100% {
transform: translateX(-140%);
}
}

.faq-grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 40px;
align-items: flex-start;
}

/* FAQ */

.faq-item {
background: #EFF5FF;
border-radius: 32px;
margin-bottom: 0px;
overflow: hidden;
}
.s_faq_collapse.s_faq_collapse_boxed .faq-accordion.accordion .card{
gap:32px;
}

.s_faq_collapse .accordion .card .card-header.faq-btn {
width: 100%;
border: none;
border-radius: 32px;
background: #ECF3FF !important;
padding: 16px;
font-size: 16px;
font-weight: 500;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
box-shadow:none;
color: #0F172A !important;
font-family: Poppins;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 32px;
padding-right: 60px;

}
.s_faq_collapse .accordion .card .card-header.faq-btn:before {
position: absolute;
margin-left: -1.5em;
width: 40px;
height: 40px;
border: 1px solid #116CF8;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #116CF8 ! IMPORTANT;
font-size: 22px;
font-weight: 600;
opacity: 1;
transition: all 0.6s ease-in-out;
}
.s_faq_collapse .accordion .card .card-header.faq-btn.collapsed:before{
content: "+";
align-items: center;
}
.s_faq_collapse .accordion .card .card-header.faq-btn:before {
content: "_";
align-items: baseline;
}
.s_faq_collapse.s_faq_collapse_boxed .accordion .card .faq-item .collapse.show {
background-color: #ECF3FF !important;
border-radius: 0 0 32px 32px;
border-bottom: 2px solid #116CF8;
}


.faq-body {
padding: 0 22px 18px;
color: #475569;
}

.custom-enquiry-form .enquiry-card {
max-width: 495px;
margin-left: auto;
background: #ffffff;
padding: 32px 17px;
border-radius: 32px;
border: 1px solid #DAEDFE;
width: 495px;
}

.custom-enquiry-form h3 {
margin-bottom: 0;
font-size: 22px;
padding: 32px 17px;
}

.custom-enquiry-form .form-group {
margin-bottom: 14px;
}

.custom-enquiry-form label {
font-size: 14px;
font-weight: 500;
margin-bottom: 6px;
display: block;
}

.custom-enquiry-form input,
.custom-enquiry-form textarea {
width: 100%;
padding: 12px;
border-radius: 12px;
border: none;
background: #EFF5FF;
outline: none;
}

.custom-enquiry-form input:focus,
.custom-enquiry-form textarea:focus {
background: #E6F0FF;
}

.custom-enquiry-form .submit-btn {
width: 100%;
margin-top: 10px;
background: #116CF8;
color: white;
border: none;
font-weight: 600;
cursor: pointer;
padding: 12px 20px;
border-radius: 8px;
}
.phone-field-wrapper{
display:flex;
gap:0px;
}

.phone-field-wrapper{
display:flex;
gap:0px;
}

.country-code{
max-width:100px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
width='16' height='16' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5l6 6
6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 30px;
width: 100%;
border-radius: 12px 0 0 12px;
border: none;
background-color: #EFF5FF;
outline: none;
}
.form-check-input:checked[type="checkbox"]{
background-repeat: no-repeat;
height:20px;
width:20px;
}
.form-check-input:checked {
background-color: #00BFA5 !important;
border-color: #00BFA5 !important;
}

.custom-enquiry-form .form-control:focus{
box-shadow:none;
}
.custom-enquiry-form input:focus, .custom-enquiry-form textarea:focus {
background: #EFF5FF;
}
.custom-enquiry-form .form-check-input:focus{
box-shadow:none;
}

.custom-enquiry-form .form-check .form-check-input{
padding:0;
}

@media (max-width: 1200px) {
.inner-banner {
padding: 0px 20px;
}
}

@media (max-width: 992px) {
.inner-banner{
padding: 0px 16px;
justify-content: center;
}
.inner-overlay{
padding: 150px 0;
}
.inner-overlay h1 {
margin: 0;
line-height: normal;
font-size: 22px;
}
.inner-overlay p{
font-size: 18px;
line-height: normal;
margin-bottom: 16px;
}
.inner-overlay #apply-btn{
bottom: auto;
}
.programme-filters a {
font-size: 13px;
}
.application-steps {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
padding-top: 24px;
}
.pgm-cards {
grid-template-columns: 1fr;
}
.study-container {
grid-template-columns: 1fr;
text-align: center;
}

.study-images {
justify-content: center;
}
.custom-enquiry-form .enquiry-card {
margin: auto;
width: 100%;
padding: 24px 0px;
}
.faq-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
.main-tabs a{
padding: 7px 8px;
width: 50%;
margin: auto;
text-align: center;
}
.sub-tabs a{
font-size: 12px;
padding: 7px 10px;
width: auto;
}
.application-steps {
grid-template-columns: 1fr;
gap: 16px;
padding-top: 16px;
}
.main-tabs, .sub-tabs {
justify-content: center;
}
.pgm-row {
flex-wrap: wrap;
}

.pgm-row a {
margin-left: 0;
}
.prospect-item{
height: 70px;
padding: 16px;
line-height: normal;
font-size:16px
}
.prospect-item .prospects-img {
width: 42px;
height: 42px;
}
.study-images {
flex-direction: column;
align-items: center;
}
.image-large {
width: 100%;
height: 300px;
}
.image-stack{
width: 100%;
height: 100%;
}
.image-stack img {
height: 300px;
}
.stat-card{
height:300px;
}


}
@media (max-width: 325px) {
.inner-overlay #apply-btn {
font-size:14px;
}
.inner-overlay {
padding: 100px 0;
}
.inner-overlay h1 {
font-size: 18px;
}
.inner-overlay p {
font-size: 16px;
}
.image-large,
.image-stack {
width: 100%;
max-width: 320px;
}

.image-large {
height: 300px;
}
}