.diploma-links { height: 68px;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 12px;
padding: 0px 60px 0px 60px;
list-style: none;
position: relative;
}
.diploma-links::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: var(--border);
pointer-events: none;
}
.diploma-links li a {
display: inline-block;
font-size: 16px;
font-weight: 600;
color: var(--text-soft);
white-space: nowrap;
transition: color 0.2s;
position: relative;
}
.diploma-links li.active a {
color: var(--primary);
}
.diploma-links li a:hover {
cursor: pointer;
}
.diploma-links .active-indicator {
position: absolute;
bottom: 0;
height: 4px;
background: var(--primary);
border-radius: 4px 4px 0 0;
transition: left 0.3s ease, width 0.3s ease;
pointer-events: none;
z-index: 1;
}
[id^="diploma-layout"]:not(#diploma-layout1) {
display: none;
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(40px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-40px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
[id^="diploma-layout"].slide-in-right {
animation: slideInRight 0.35s ease;
}
[id^="diploma-layout"].slide-in-left {
animation: slideInLeft 0.35s ease;
} #diploma-layout1,
#diploma-layout2,
#diploma-layout3,
#diploma-layout4,
#diploma-layout5 {
width: 90%;
margin: 0 auto;
margin-top: 3rem;
}
.diploma-section {
display: flex;
flex-direction: column;
gap: 4rem;
}
.diploma-section h2 {
color: var(--primary);
font-family: 'Archivo Expanded', sans-serif;
font-size: 24px;
line-height: 32px;
} .diploma-lists li .diploma-text {
padding-top: 24px;
display: flex;
flex-direction: column;
gap: 24px;
}
.diploma-lists li img {
width: 100%;
height: 321px;
object-fit: cover;
}
.diploma-lists li .diploma-desc {
font-size: 16px;
font-weight: 400;
letter-spacing: -1.1%;
line-height: 24px;
color: var(--text-sub);
font-family: 'Poppins', sans-serif;
}
.diploma-heading {
display: flex;
flex-direction: column;
gap: 8px;
}
.diploma-heading span {
font-size: 20px;
font-weight: 400;
font-family: 'Archivo Expanded', sans-serif;
color: var(--primary);
line-height: 24px;
}
.diploma-lists li .diploma-text h3 {
font-size: 24px;
font-weight: 700;
letter-spacing: 0%;
line-height: 32px;
color: var(--text);
}
.diploma-lists li .diploma-text p {
font-family: 'Poppins', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: -1.1%;
color: var(--text-sub);
} .partner-section {
width: 100%;
margin-top: 3rem;
display: flex;
flex-direction: column;
gap: 2.5rem;
}
.partner-heading {
display: flex;
flex-direction: column;
gap: 8px;
}
.partner-heading h3 {
font-size: 24px;
font-weight: 700;
font-family: 'Archivo Expanded', sans-serif;
color: var(--primary);
line-height: 32px;
letter-spacing: 0;
}
.partner-heading p {
font-size: 16px;
line-height: 24px;
font-weight: 600;
font-size: 16px;
letter-spacing: -1.1%;
color: var(--text-sub);
font-family: 'Poppins', sans-serif;
}
.partnership-lists {
display: flex;
flex-direction: column;
gap: 40px;
}
.partnership-lists li {
display: flex;
flex-direction: row;
width: 100%;
height: auto;
gap: 2rem;
background-color: var(--white);
border-radius: 24px;
padding: 3rem; } .partnership-lists li .partnership-text {
flex: 1;
height: auto;
display: flex;
flex-direction: column;
align-items: start;
gap: 16px;
}
.partnership-text-header {
display: flex;
flex-direction: column;
gap: 5px;
}
.partnership-text-header h4 {
font-size: 20px;
line-height: 24px;
font-weight: 700;
color: var(--text);
}
.partnership-text-header span {
font-size: 16px;
font-weight: 600;
line-height: 24px;
letter-spacing: -1.1%;
color: var(--text);
}
.partnership-text p {
font-size: 16px;
font-weight: 400;
letter-spacing: -1.1%;
line-height: 24px;
color: var(--text-sub);
font-family: 'Poppins', sans-serif;
} .partner-section li .part-img-wrapper {
width: 360px;
height: auto;
display: flex;
justify-content: center;
align-items: center; padding-top: 16px;
}
.partner-section li .und-img {
margin-left: -12px;
margin-top: 0;
padding-top: 0;
display: flex;
align-items: start;
}
.partner-section li .UND-img {
width: 310px;
height: 208px;
}
.partner-section li .txl-dip-logo {
margin-left: -12px; margin-top: 0;
padding-top: 0;
display: flex;
align-items: start;
}
.partner-section li .txl-img {
width: 240px;
height: 240px;
}
.partnership-text a {
text-decoration: underline;
color: var(--primary);
font-size: 12px;
font-family: 'Poppins', sans-serif;
font-weight: 600;
letter-spacing: 0;
line-height: 16px;
} .program-inform {
width: 100%;
height: auto;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 3rem;
}
.program-inform h5,
.pg-achievemet-section h5 {
font-size: 24px;
font-weight: 700;
line-height: 32px;
color: var(--primary);
}
.progam-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 3rem;
font-family: 'Poppins', sans-serif;
}
.progam-container ul {
margin: 15px 0 0 25px;
}
.admission-req-lists {
padding-top: .5rem;
padding-left: 1.5rem;
}
.admission-req-lists li {
list-style-type: disc;
line-height: 24px;
font-size: 18px;
gap: 1rem;
text-wrap: wrap;
color: var(--text-sub);
}
.admission-req {
display: flex;
flex-direction: column;
}
.admission-req h6,
.program-req h6 {
font-weight: 600;
font-size: 18px;
line-height: 24px;
letter-spacing: -1.5%;
font-family: 'Poppins', sans-serif;
}
.program-req {
display: flex;
flex-direction: column;
}
.program-req ul {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.program-lists {
list-style-type: decimal;
padding-top: .5rem;
padding-left: 1.5rem;
}
.program-lists ul {
list-style-type: "- ";
padding-left: 1rem;
}
.program-lists li,
.program-lists-layout5 li {
line-height: 24px;
font-size: 18px;
gap: 1rem;
text-wrap: wrap;
color: var(--text-sub);
font-family: 'Poppins', sans-serif;
}
.program-lists-layout4 ul {
list-style-type: "- ";
padding-left: 2rem;
}
.program-lists-layout4 ul span {
font-weight: bold;
}
.program-lists-layout5 {
padding-left: 1.5rem;
padding-top: .5rem;
font-size: 18px;
}
.program-lists-layout5 ul {
list-style-type: "- ";
padding-left: 2rem;
}
.program-lists-layout5 ul li span {
font-weight: bold;
color: var(--text);
}
.pg-achievemet-section {
display: flex;
flex-direction: column;
width: 100%;
gap: 3rem;
margin-top: 3rem;
align-items: center;
}
.ahievement-lists {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 3rem;
}
.ahievement-lists ul,
.ahievement-lists ol {
margin: 15px 0 0 25px;
}
.ahievement-lists p {
padding-top: 1rem;
font-size: 18px;
line-height: 24px;
font-weight: 400;
letter-spacing: -1.5%;
color: var(--text-sub);
font-family: 'Poppins', sans-serif;
}
.ahievement-lists .program-fees ul {
padding-left: 1.5rem;
list-style-type: disc;
font-family: 'Poppins', sans-serif;
}
.ahievement-lists .program-fees ul span {
font-weight: bold;
}
.program-lists-layout4 {
font-size: 18px;
line-height: 30px;
font-weight: 500;
letter-spacing: -1.5%;
}
.ahievement-lists .inquiry ul {
margin-left: 1rem;
margin-top: 1rem;
font-family: 'Poppins', sans-serif;
font-size: 18px;
list-style-type: disc;
}
.ahievement-lists .inquiry ul li {
line-height: 24px;
letter-spacing: -1.5%;
color: var(--text-sub);
}
.ahievement-lists .inquiry ul span {
font-weight: bold;
color: var(--text);
}
.enroll-btn {
width: 173px;
height: 48px;
font-size: 14px;
font-family: 'Poppins', sans-serif;
font-weight: 600;
letter-spacing: 0.6%;
line-height: 20px;
border-radius: 120px;
padding: 14px 16px;
background-color: var(--primary);
color: var(--white);
border: none;
cursor: pointer;
margin-bottom: 3rem;
} @media (max-width: 768px) { .diploma-links {
overflow: auto;
white-space: nowrap;
height: auto;
padding: 0;
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: nowrap;
}
.diploma-links li {
display: inline-flex;
align-items: center;
padding: 18px 18px;
font-size: 13px;
font-weight: 600;
text-align: center;
color: var(--text-soft);
white-space: nowrap;
transition: color 0.2s;
}
.diploma-links a:hover {
color: var(--primary);
} .diploma-section {
display: flex;
flex-direction: column;
gap: 1rem;
}
.diploma-lists {
display: flex;
flex-direction: column;
gap: 3rem;
}
.diploma-lists img {
width: 100%;
border-radius: 12px;
}
.diploma-links {
gap: 1rem;
}
.diploma-lists li {
display: flex;
flex-direction: column;
gap: 1rem;
}
.diploma-lists li .diploma-img {
order: -1;
}
.diploma-lists li .diploma-img img {
width: 100%;
border-radius: 12px;
}
.partner-section {
display: flex;
flex-direction: column;
}
.partner-section li .part-img-wrapper {
display: flex;
align-items: center;
justify-content: center;
width: auto;
}
.partnership-lists li {
display: flex;
flex-direction: column;
}
.program-inform {
display: flex;
flex-direction: column;
}
.progam-container {
display: flex;
flex-direction: column;
}
.pg-achievemet-section .ahievement-lists {
display: flex;
flex-direction: column;
}
} @media (min-width: 769px) and (max-width: 1279px) {
.diploma-links {
display: flex;
gap: 1.5rem;
}
.diploma-lists {
display: flex;
flex-direction: column;
gap: 2rem;
}
.diploma-lists li {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.diploma-lists li img {
border-radius: 12px;
}
} @media (min-width: 1280px) {
.container {
padding: 0 60px;
} .diploma-links {
display: flex;
gap: 4rem;
padding: 20px 60px 20px;
}
.diploma-links li a {
font-size: 16px;
} .diploma-lists {
display: flex;
flex-direction: column;
gap: 24px;
width: 100%;
}
.diploma-section h2 {
font-size: 24px;
}
.diploma-lists li {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.diploma-lists li img {
width: 628px;
height: 321px;
border-radius: 12px;
object-fit: cover;
}
}