*/
#pp-t3-endnote br,
#pp-t3-mendeley br {
content: "";
display: block;
margin-bottom: 10px;
}
/* Resource / link list */
#pp-t3-endnote ul,
#pp-t3-mendeley ul {
list-style: none;
margin: 18px 0 0;
padding: 0;
}
#pp-t3-endnote li,
#pp-t3-mendeley li {
background: #fff;
border: 1px solid #e2e6f0;
border-radius: 8px;
padding: 10px 14px;
margin-bottom: 8px;
font-size: 14px;
word-break: break-word;
}
#pp-t3-endnote li strong,
#pp-t3-mendeley li strong {
color: #0a2472;
}
#pp-t3-endnote li:hover,
#pp-t3-mendeley li:hover {
border-color: #c9a54e;
background: #fffdf7;
}
#pp-t3-mendeley li a {
color: #0a2472;
text-decoration: underline;
text-decoration-color: #c9a54e;
text-underline-offset: 2px;
word-break: break-all;
font-size: 13px;
}
#pp-t3-mendeley li a:hover {
color: #c9a54e;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b7028c9 *//* ===== Tab 4: Panduan — upgraded look ===== */
#pp-t4-wrap {
padding: 8px 4px;
}
/* Section headings — centered */
#pp-t4-head-1,
#pp-t4-head-2,
#pp-t4-head-3,
#pp-t4-head-4 {
text-align: center !important;
font-size: 14px;
font-weight: 800;
color: #0a2472;
text-transform: uppercase;
letter-spacing: 1px;
margin: 32px 0 14px 0 !important;
padding-top: 16px;
border-bottom: none !important;
position: relative;
}
#pp-t4-head-1::before,
#pp-t4-head-2::before,
#pp-t4-head-3::before,
#pp-t4-head-4::before {
content: "";
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
width: 6px;
height: 6px;
border-radius: 50%;
background: #c9a54e;
}
#pp-t4-head-1 {
margin-top: 4px !important;
}
/* Button grids */
#pp-t4-grid-1,
#pp-t4-grid-2,
#pp-t4-grid-3 {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 14px !important;
}
@media (max-width: 700px) {
#pp-t4-grid-1,
#pp-t4-grid-2,
#pp-t4-grid-3 {
grid-template-columns: 1fr !important;
}
}
/* Buttons — glassy depth + gold accent stripe on hover */
#pp-t4-grid-1 .elementor-button,
#pp-t4-grid-2 .elementor-button,
#pp-t4-grid-3 .elementor-button,
#pp-t4-info-btn .elementor-button {
background: linear-gradient(135deg, #0a2472, #0d2f8f) !important;
border-radius: 12px !important;
padding: 18px 22px !important;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.3px;
border: none !important;
border-left: 4px solid transparent !important;
width: 100%;
position: relative;
overflow: hidden;
box-shadow: 0 3px 10px rgba(10, 36, 114, 0.2);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* Subtle diagonal shine effect */
#pp-t4-grid-1 .elementor-button::after,
#pp-t4-grid-2 .elementor-button::after,
#pp-t4-grid-3 .elementor-button::after,
#pp-t4-info-btn .elementor-button::after {
content: "";
position: absolute;
top: 0;
left: -75%;
width: 50%;
height: 100%;
background: linear-gradient(120deg, transparent, rgba(255,255,255,0.15), transparent);
transform: skewX(-20deg);
transition: left 0.5s ease;
}
#pp-t4-grid-1 .elementor-button:hover::after,
#pp-t4-grid-2 .elementor-button:hover::after,
#pp-t4-grid-3 .elementor-button:hover::after,
#pp-t4-info-btn .elementor-button:hover::after {
left: 130%;
}
#pp-t4-grid-1 .elementor-button:hover,
#pp-t4-grid-2 .elementor-button:hover,
#pp-t4-grid-3 .elementor-button:hover,
#pp-t4-info-btn .elementor-button:hover {
border-left-color: #c9a54e !important;
transform: translateY(-3px) scale(1.01);
box-shadow: 0 10px 20px rgba(10, 36, 114, 0.3);
}
/* Info button — gold, stands apart as a utility action */
#pp-t4-info-btn .elementor-button {
background: linear-gradient(135deg, #c9a54e, #d4b563) !important;
color: #0a2472 !important;
border-left-color: #0a2472 !important;
}
#pp-t4-info-btn .elementor-button:hover {
border-left-color: #0a2472 !important;
box-shadow: 0 10px 20px rgba(201, 165, 78, 0.35);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a98d223 *//* ===== Tab 1: Info text ===== */
#pp-t1-text p {
font-size: 16px;
line-height: 1.7;
color: #1a1a2e;
margin-bottom: 14px;
}
#pp-t1-text strong,
#pp-t1-text b {
color: #0a2472; /* UKM navy */
}
#pp-t1-text em strong {
display: inline-block;
background: #fff4e0;
border-left: 3px solid #c9a54e; /* UKM gold */
padding: 8px 14px;
border-radius: 4px;
font-style: normal;
}
#pp-t1-text a {
color: #0a2472;
font-weight: 700;
text-decoration: underline;
text-decoration-color: #c9a54e;
text-underline-offset: 3px;
}
#pp-t1-text a:hover {
color: #c9a54e;
}
/* ===== Tab 1: Calendar (responsive fix) ===== */
#pp-t1-cal {
margin-top: 20px;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 6px 20px rgba(10, 36, 114, 0.1);
border: 1px solid #e2e6f0;
}
/* Force the iframe to scale instead of using fixed 800x600 */
#pp-t1-cal iframe {
width: 100% !important;
height: 600px !important; /* keep height fixed, width fluid */
border: none !important;
display: block;
}
/* Shrink height on smaller screens so month grid doesn't get cramped/scrolly */
@media (max-width: 1024px) {
#pp-t1-cal iframe {
height: 550px !important;
}
}
@media (max-width: 600px) {
#pp-t1-cal iframe {
height: 480px !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-02c901e *//* ===== Tab 2: Infoclinic — QR centered below text ===== */
#pp-t2-text {
background: linear-gradient(135deg, #f4f6fb, #ffffff);
border: 1px solid #e8d9ae;
border-radius: 16px;
padding: 28px;
text-align: left;
}
#pp-t2-text p {
font-size: 16px;
line-height: 1.7;
color: #1a1a2e;
margin-bottom: 20px;
}
#pp-t2-text i,
#pp-t2-text em {
color: #0a2472;
font-style: italic;
font-weight: 700;
}
#pp-t2-text a {
color: #0a2472;
font-weight: 700;
text-decoration: underline;
text-decoration-color: #c9a54e;
text-underline-offset: 3px;
}
#pp-t2-text a:hover {
color: #c9a54e;
}
/* QR centered below the text */
#pp-t2-text img {
display: block;
width: 180px;
height: 180px;
max-width: 100%;
margin: 10px auto 0;
border: 6px solid #ffffff;
border-radius: 12px;
box-shadow: 0 6px 18px rgba(10, 36, 114, 0.15);
}
@media (max-width: 600px) {
#pp-t2-text {
padding: 20px;
}
#pp-t2-text img {
width: 150px;
height: 150px;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c910cb2 *//* ===== Tab 3: Grid spacing (native 2-col already set) ===== */
#pp-t3-grid {
gap: 24px !important;
align-items: stretch !important;
}
/* ===== Card styling ===== */
#pp-t3-endnote,
#pp-t3-mendeley {
background: #f4f6fb;
border-radius: 14px;
padding: 26px;
border-left: 4px solid #0a2472;
box-shadow: 0 2px 10px rgba(10, 36, 114, 0.06);
box-sizing: border-box;
height: 100%;
text-align: left;
font-size: 15px;
line-height: 1.75;
color: #1a1a2e;
}
#pp-t3-mendeley {
border-left-color: #c9a54e;
}
/* Heading — first strong/bold line */
#pp-t3-endnote > strong:first-child,
#pp-t3-endnote > p:first-child strong,
#pp-t3-mendeley > strong:first-child,
#pp-t3-mendeley > p:first-child strong {
display: block;
font-size: 18px;
color: #0a2472;
margin-bottom: 16px;
padding-bottom: 10px;
border-bottom: 2px solid #e2e6f0;
}
/* Paragraph spacing */
#pp-t3-endnote p,
#pp-t3-mendeley p {
margin: 0 0 14px 0 !important;
}
#pp-t3-endnote p:last-of-type,
#pp-t3-mendeley p:last-of-type {
margin-bottom: 0 !important;
}
/* Fallback if lines are
separated instead of
*/
#pp-t3-endnote br,
#pp-t3-mendeley br {
content: "";
display: block;
margin-bottom: 10px;
}
/* Resource / link list */
#pp-t3-endnote ul,
#pp-t3-mendeley ul {
list-style: none;
margin: 18px 0 0;
padding: 0;
}
#pp-t3-endnote li,
#pp-t3-mendeley li {
background: #fff;
border: 1px solid #e2e6f0;
border-radius: 8px;
padding: 10px 14px;
margin-bottom: 8px;
font-size: 14px;
word-break: break-word;
}
#pp-t3-endnote li strong,
#pp-t3-mendeley li strong {
color: #0a2472;
}
#pp-t3-endnote li:hover,
#pp-t3-mendeley li:hover {
border-color: #c9a54e;
background: #fffdf7;
}
#pp-t3-mendeley li a {
color: #0a2472;
text-decoration: underline;
text-decoration-color: #c9a54e;
text-underline-offset: 2px;
word-break: break-all;
font-size: 13px;
}
#pp-t3-mendeley li a:hover {
color: #c9a54e;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b7028c9 *//* ===== Tab 4: Panduan — upgraded look ===== */
#pp-t4-wrap {
padding: 8px 4px;
}
/* Section headings — centered */
#pp-t4-head-1,
#pp-t4-head-2,
#pp-t4-head-3,
#pp-t4-head-4 {
text-align: center !important;
font-size: 14px;
font-weight: 800;
color: #0a2472;
text-transform: uppercase;
letter-spacing: 1px;
margin: 32px 0 14px 0 !important;
padding-top: 16px;
border-bottom: none !important;
position: relative;
}
#pp-t4-head-1::before,
#pp-t4-head-2::before,
#pp-t4-head-3::before,
#pp-t4-head-4::before {
content: "";
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
width: 6px;
height: 6px;
border-radius: 50%;
background: #c9a54e;
}
#pp-t4-head-1 {
margin-top: 4px !important;
}
/* Button grids */
#pp-t4-grid-1,
#pp-t4-grid-2,
#pp-t4-grid-3 {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 14px !important;
}
@media (max-width: 700px) {
#pp-t4-grid-1,
#pp-t4-grid-2,
#pp-t4-grid-3 {
grid-template-columns: 1fr !important;
}
}
/* Buttons — glassy depth + gold accent stripe on hover */
#pp-t4-grid-1 .elementor-button,
#pp-t4-grid-2 .elementor-button,
#pp-t4-grid-3 .elementor-button,
#pp-t4-info-btn .elementor-button {
background: linear-gradient(135deg, #0a2472, #0d2f8f) !important;
border-radius: 12px !important;
padding: 18px 22px !important;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.3px;
border: none !important;
border-left: 4px solid transparent !important;
width: 100%;
position: relative;
overflow: hidden;
box-shadow: 0 3px 10px rgba(10, 36, 114, 0.2);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* Subtle diagonal shine effect */
#pp-t4-grid-1 .elementor-button::after,
#pp-t4-grid-2 .elementor-button::after,
#pp-t4-grid-3 .elementor-button::after,
#pp-t4-info-btn .elementor-button::after {
content: "";
position: absolute;
top: 0;
left: -75%;
width: 50%;
height: 100%;
background: linear-gradient(120deg, transparent, rgba(255,255,255,0.15), transparent);
transform: skewX(-20deg);
transition: left 0.5s ease;
}
#pp-t4-grid-1 .elementor-button:hover::after,
#pp-t4-grid-2 .elementor-button:hover::after,
#pp-t4-grid-3 .elementor-button:hover::after,
#pp-t4-info-btn .elementor-button:hover::after {
left: 130%;
}
#pp-t4-grid-1 .elementor-button:hover,
#pp-t4-grid-2 .elementor-button:hover,
#pp-t4-grid-3 .elementor-button:hover,
#pp-t4-info-btn .elementor-button:hover {
border-left-color: #c9a54e !important;
transform: translateY(-3px) scale(1.01);
box-shadow: 0 10px 20px rgba(10, 36, 114, 0.3);
}
/* Info button — gold, stands apart as a utility action */
#pp-t4-info-btn .elementor-button {
background: linear-gradient(135deg, #c9a54e, #d4b563) !important;
color: #0a2472 !important;
border-left-color: #0a2472 !important;
}
#pp-t4-info-btn .elementor-button:hover {
border-left-color: #0a2472 !important;
box-shadow: 0 10px 20px rgba(201, 165, 78, 0.35);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a98d223 *//* ===== Tab 1: Info text ===== */
#pp-t1-text p {
font-size: 16px;
line-height: 1.7;
color: #1a1a2e;
margin-bottom: 14px;
}
#pp-t1-text strong,
#pp-t1-text b {
color: #0a2472; /* UKM navy */
}
#pp-t1-text em strong {
display: inline-block;
background: #fff4e0;
border-left: 3px solid #c9a54e; /* UKM gold */
padding: 8px 14px;
border-radius: 4px;
font-style: normal;
}
#pp-t1-text a {
color: #0a2472;
font-weight: 700;
text-decoration: underline;
text-decoration-color: #c9a54e;
text-underline-offset: 3px;
}
#pp-t1-text a:hover {
color: #c9a54e;
}
/* ===== Tab 1: Calendar (responsive fix) ===== */
#pp-t1-cal {
margin-top: 20px;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 6px 20px rgba(10, 36, 114, 0.1);
border: 1px solid #e2e6f0;
}
/* Force the iframe to scale instead of using fixed 800x600 */
#pp-t1-cal iframe {
width: 100% !important;
height: 600px !important; /* keep height fixed, width fluid */
border: none !important;
display: block;
}
/* Shrink height on smaller screens so month grid doesn't get cramped/scrolly */
@media (max-width: 1024px) {
#pp-t1-cal iframe {
height: 550px !important;
}
}
@media (max-width: 600px) {
#pp-t1-cal iframe {
height: 480px !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-02c901e *//* ===== Tab 2: Infoclinic — QR centered below text ===== */
#pp-t2-text {
background: linear-gradient(135deg, #f4f6fb, #ffffff);
border: 1px solid #e8d9ae;
border-radius: 16px;
padding: 28px;
text-align: left;
}
#pp-t2-text p {
font-size: 16px;
line-height: 1.7;
color: #1a1a2e;
margin-bottom: 20px;
}
#pp-t2-text i,
#pp-t2-text em {
color: #0a2472;
font-style: italic;
font-weight: 700;
}
#pp-t2-text a {
color: #0a2472;
font-weight: 700;
text-decoration: underline;
text-decoration-color: #c9a54e;
text-underline-offset: 3px;
}
#pp-t2-text a:hover {
color: #c9a54e;
}
/* QR centered below the text */
#pp-t2-text img {
display: block;
width: 180px;
height: 180px;
max-width: 100%;
margin: 10px auto 0;
border: 6px solid #ffffff;
border-radius: 12px;
box-shadow: 0 6px 18px rgba(10, 36, 114, 0.15);
}
@media (max-width: 600px) {
#pp-t2-text {
padding: 20px;
}
#pp-t2-text img {
width: 150px;
height: 150px;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c910cb2 *//* ===== Tab 3: Grid spacing (native 2-col already set) ===== */
#pp-t3-grid {
gap: 24px !important;
align-items: stretch !important;
}
/* ===== Card styling ===== */
#pp-t3-endnote,
#pp-t3-mendeley {
background: #f4f6fb;
border-radius: 14px;
padding: 26px;
border-left: 4px solid #0a2472;
box-shadow: 0 2px 10px rgba(10, 36, 114, 0.06);
box-sizing: border-box;
height: 100%;
text-align: left;
font-size: 15px;
line-height: 1.75;
color: #1a1a2e;
}
#pp-t3-mendeley {
border-left-color: #c9a54e;
}
/* Heading — first strong/bold line */
#pp-t3-endnote > strong:first-child,
#pp-t3-endnote > p:first-child strong,
#pp-t3-mendeley > strong:first-child,
#pp-t3-mendeley > p:first-child strong {
display: block;
font-size: 18px;
color: #0a2472;
margin-bottom: 16px;
padding-bottom: 10px;
border-bottom: 2px solid #e2e6f0;
}
/* Paragraph spacing */
#pp-t3-endnote p,
#pp-t3-mendeley p {
margin: 0 0 14px 0 !important;
}
#pp-t3-endnote p:last-of-type,
#pp-t3-mendeley p:last-of-type {
margin-bottom: 0 !important;
}
/* Fallback if lines are
separated instead of
*/
#pp-t3-endnote br,
#pp-t3-mendeley br {
content: "";
display: block;
margin-bottom: 10px;
}
/* Resource / link list */
#pp-t3-endnote ul,
#pp-t3-mendeley ul {
list-style: none;
margin: 18px 0 0;
padding: 0;
}
#pp-t3-endnote li,
#pp-t3-mendeley li {
background: #fff;
border: 1px solid #e2e6f0;
border-radius: 8px;
padding: 10px 14px;
margin-bottom: 8px;
font-size: 14px;
word-break: break-word;
}
#pp-t3-endnote li strong,
#pp-t3-mendeley li strong {
color: #0a2472;
}
#pp-t3-endnote li:hover,
#pp-t3-mendeley li:hover {
border-color: #c9a54e;
background: #fffdf7;
}
#pp-t3-mendeley li a {
color: #0a2472;
text-decoration: underline;
text-decoration-color: #c9a54e;
text-underline-offset: 2px;
word-break: break-all;
font-size: 13px;
}
#pp-t3-mendeley li a:hover {
color: #c9a54e;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b7028c9 *//* ===== Tab 4: Panduan — upgraded look ===== */
#pp-t4-wrap {
padding: 8px 4px;
}
/* Section headings — centered */
#pp-t4-head-1,
#pp-t4-head-2,
#pp-t4-head-3,
#pp-t4-head-4 {
text-align: center !important;
font-size: 14px;
font-weight: 800;
color: #0a2472;
text-transform: uppercase;
letter-spacing: 1px;
margin: 32px 0 14px 0 !important;
padding-top: 16px;
border-bottom: none !important;
position: relative;
}
#pp-t4-head-1::before,
#pp-t4-head-2::before,
#pp-t4-head-3::before,
#pp-t4-head-4::before {
content: "";
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
width: 6px;
height: 6px;
border-radius: 50%;
background: #c9a54e;
}
#pp-t4-head-1 {
margin-top: 4px !important;
}
/* Button grids */
#pp-t4-grid-1,
#pp-t4-grid-2,
#pp-t4-grid-3 {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 14px !important;
}
@media (max-width: 700px) {
#pp-t4-grid-1,
#pp-t4-grid-2,
#pp-t4-grid-3 {
grid-template-columns: 1fr !important;
}
}
/* Buttons — glassy depth + gold accent stripe on hover */
#pp-t4-grid-1 .elementor-button,
#pp-t4-grid-2 .elementor-button,
#pp-t4-grid-3 .elementor-button,
#pp-t4-info-btn .elementor-button {
background: linear-gradient(135deg, #0a2472, #0d2f8f) !important;
border-radius: 12px !important;
padding: 18px 22px !important;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.3px;
border: none !important;
border-left: 4px solid transparent !important;
width: 100%;
position: relative;
overflow: hidden;
box-shadow: 0 3px 10px rgba(10, 36, 114, 0.2);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* Subtle diagonal shine effect */
#pp-t4-grid-1 .elementor-button::after,
#pp-t4-grid-2 .elementor-button::after,
#pp-t4-grid-3 .elementor-button::after,
#pp-t4-info-btn .elementor-button::after {
content: "";
position: absolute;
top: 0;
left: -75%;
width: 50%;
height: 100%;
background: linear-gradient(120deg, transparent, rgba(255,255,255,0.15), transparent);
transform: skewX(-20deg);
transition: left 0.5s ease;
}
#pp-t4-grid-1 .elementor-button:hover::after,
#pp-t4-grid-2 .elementor-button:hover::after,
#pp-t4-grid-3 .elementor-button:hover::after,
#pp-t4-info-btn .elementor-button:hover::after {
left: 130%;
}
#pp-t4-grid-1 .elementor-button:hover,
#pp-t4-grid-2 .elementor-button:hover,
#pp-t4-grid-3 .elementor-button:hover,
#pp-t4-info-btn .elementor-button:hover {
border-left-color: #c9a54e !important;
transform: translateY(-3px) scale(1.01);
box-shadow: 0 10px 20px rgba(10, 36, 114, 0.3);
}
/* Info button — gold, stands apart as a utility action */
#pp-t4-info-btn .elementor-button {
background: linear-gradient(135deg, #c9a54e, #d4b563) !important;
color: #0a2472 !important;
border-left-color: #0a2472 !important;
}
#pp-t4-info-btn .elementor-button:hover {
border-left-color: #0a2472 !important;
box-shadow: 0 10px 20px rgba(201, 165, 78, 0.35);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a98d223 *//* ===== Tab 1: Info text ===== */
#pp-t1-text p {
font-size: 16px;
line-height: 1.7;
color: #1a1a2e;
margin-bottom: 14px;
}
#pp-t1-text strong,
#pp-t1-text b {
color: #0a2472; /* UKM navy */
}
#pp-t1-text em strong {
display: inline-block;
background: #fff4e0;
border-left: 3px solid #c9a54e; /* UKM gold */
padding: 8px 14px;
border-radius: 4px;
font-style: normal;
}
#pp-t1-text a {
color: #0a2472;
font-weight: 700;
text-decoration: underline;
text-decoration-color: #c9a54e;
text-underline-offset: 3px;
}
#pp-t1-text a:hover {
color: #c9a54e;
}
/* ===== Tab 1: Calendar (responsive fix) ===== */
#pp-t1-cal {
margin-top: 20px;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 6px 20px rgba(10, 36, 114, 0.1);
border: 1px solid #e2e6f0;
}
/* Force the iframe to scale instead of using fixed 800x600 */
#pp-t1-cal iframe {
width: 100% !important;
height: 600px !important; /* keep height fixed, width fluid */
border: none !important;
display: block;
}
/* Shrink height on smaller screens so month grid doesn't get cramped/scrolly */
@media (max-width: 1024px) {
#pp-t1-cal iframe {
height: 550px !important;
}
}
@media (max-width: 600px) {
#pp-t1-cal iframe {
height: 480px !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-02c901e *//* ===== Tab 2: Infoclinic — QR centered below text ===== */
#pp-t2-text {
background: linear-gradient(135deg, #f4f6fb, #ffffff);
border: 1px solid #e8d9ae;
border-radius: 16px;
padding: 28px;
text-align: left;
}
#pp-t2-text p {
font-size: 16px;
line-height: 1.7;
color: #1a1a2e;
margin-bottom: 20px;
}
#pp-t2-text i,
#pp-t2-text em {
color: #0a2472;
font-style: italic;
font-weight: 700;
}
#pp-t2-text a {
color: #0a2472;
font-weight: 700;
text-decoration: underline;
text-decoration-color: #c9a54e;
text-underline-offset: 3px;
}
#pp-t2-text a:hover {
color: #c9a54e;
}
/* QR centered below the text */
#pp-t2-text img {
display: block;
width: 180px;
height: 180px;
max-width: 100%;
margin: 10px auto 0;
border: 6px solid #ffffff;
border-radius: 12px;
box-shadow: 0 6px 18px rgba(10, 36, 114, 0.15);
}
@media (max-width: 600px) {
#pp-t2-text {
padding: 20px;
}
#pp-t2-text img {
width: 150px;
height: 150px;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c910cb2 *//* ===== Tab 3: Grid spacing (native 2-col already set) ===== */
#pp-t3-grid {
gap: 24px !important;
align-items: stretch !important;
}
/* ===== Card styling ===== */
#pp-t3-endnote,
#pp-t3-mendeley {
background: #f4f6fb;
border-radius: 14px;
padding: 26px;
border-left: 4px solid #0a2472;
box-shadow: 0 2px 10px rgba(10, 36, 114, 0.06);
box-sizing: border-box;
height: 100%;
text-align: left;
font-size: 15px;
line-height: 1.75;
color: #1a1a2e;
}
#pp-t3-mendeley {
border-left-color: #c9a54e;
}
/* Heading — first strong/bold line */
#pp-t3-endnote > strong:first-child,
#pp-t3-endnote > p:first-child strong,
#pp-t3-mendeley > strong:first-child,
#pp-t3-mendeley > p:first-child strong {
display: block;
font-size: 18px;
color: #0a2472;
margin-bottom: 16px;
padding-bottom: 10px;
border-bottom: 2px solid #e2e6f0;
}
/* Paragraph spacing */
#pp-t3-endnote p,
#pp-t3-mendeley p {
margin: 0 0 14px 0 !important;
}
#pp-t3-endnote p:last-of-type,
#pp-t3-mendeley p:last-of-type {
margin-bottom: 0 !important;
}
/* Fallback if lines are
separated instead of
*/
#pp-t3-endnote br,
#pp-t3-mendeley br {
content: "";
display: block;
margin-bottom: 10px;
}
/* Resource / link list */
#pp-t3-endnote ul,
#pp-t3-mendeley ul {
list-style: none;
margin: 18px 0 0;
padding: 0;
}
#pp-t3-endnote li,
#pp-t3-mendeley li {
background: #fff;
border: 1px solid #e2e6f0;
border-radius: 8px;
padding: 10px 14px;
margin-bottom: 8px;
font-size: 14px;
word-break: break-word;
}
#pp-t3-endnote li strong,
#pp-t3-mendeley li strong {
color: #0a2472;
}
#pp-t3-endnote li:hover,
#pp-t3-mendeley li:hover {
border-color: #c9a54e;
background: #fffdf7;
}
#pp-t3-mendeley li a {
color: #0a2472;
text-decoration: underline;
text-decoration-color: #c9a54e;
text-underline-offset: 2px;
word-break: break-all;
font-size: 13px;
}
#pp-t3-mendeley li a:hover {
color: #c9a54e;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b7028c9 *//* ===== Tab 4: Panduan — upgraded look ===== */
#pp-t4-wrap {
padding: 8px 4px;
}
/* Section headings — centered */
#pp-t4-head-1,
#pp-t4-head-2,
#pp-t4-head-3,
#pp-t4-head-4 {
text-align: center !important;
font-size: 14px;
font-weight: 800;
color: #0a2472;
text-transform: uppercase;
letter-spacing: 1px;
margin: 32px 0 14px 0 !important;
padding-top: 16px;
border-bottom: none !important;
position: relative;
}
#pp-t4-head-1::before,
#pp-t4-head-2::before,
#pp-t4-head-3::before,
#pp-t4-head-4::before {
content: "";
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
width: 6px;
height: 6px;
border-radius: 50%;
background: #c9a54e;
}
#pp-t4-head-1 {
margin-top: 4px !important;
}
/* Button grids */
#pp-t4-grid-1,
#pp-t4-grid-2,
#pp-t4-grid-3 {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 14px !important;
}
@media (max-width: 700px) {
#pp-t4-grid-1,
#pp-t4-grid-2,
#pp-t4-grid-3 {
grid-template-columns: 1fr !important;
}
}
/* Buttons — glassy depth + gold accent stripe on hover */
#pp-t4-grid-1 .elementor-button,
#pp-t4-grid-2 .elementor-button,
#pp-t4-grid-3 .elementor-button,
#pp-t4-info-btn .elementor-button {
background: linear-gradient(135deg, #0a2472, #0d2f8f) !important;
border-radius: 12px !important;
padding: 18px 22px !important;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.3px;
border: none !important;
border-left: 4px solid transparent !important;
width: 100%;
position: relative;
overflow: hidden;
box-shadow: 0 3px 10px rgba(10, 36, 114, 0.2);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* Subtle diagonal shine effect */
#pp-t4-grid-1 .elementor-button::after,
#pp-t4-grid-2 .elementor-button::after,
#pp-t4-grid-3 .elementor-button::after,
#pp-t4-info-btn .elementor-button::after {
content: "";
position: absolute;
top: 0;
left: -75%;
width: 50%;
height: 100%;
background: linear-gradient(120deg, transparent, rgba(255,255,255,0.15), transparent);
transform: skewX(-20deg);
transition: left 0.5s ease;
}
#pp-t4-grid-1 .elementor-button:hover::after,
#pp-t4-grid-2 .elementor-button:hover::after,
#pp-t4-grid-3 .elementor-button:hover::after,
#pp-t4-info-btn .elementor-button:hover::after {
left: 130%;
}
#pp-t4-grid-1 .elementor-button:hover,
#pp-t4-grid-2 .elementor-button:hover,
#pp-t4-grid-3 .elementor-button:hover,
#pp-t4-info-btn .elementor-button:hover {
border-left-color: #c9a54e !important;
transform: translateY(-3px) scale(1.01);
box-shadow: 0 10px 20px rgba(10, 36, 114, 0.3);
}
/* Info button — gold, stands apart as a utility action */
#pp-t4-info-btn .elementor-button {
background: linear-gradient(135deg, #c9a54e, #d4b563) !important;
color: #0a2472 !important;
border-left-color: #0a2472 !important;
}
#pp-t4-info-btn .elementor-button:hover {
border-left-color: #0a2472 !important;
box-shadow: 0 10px 20px rgba(201, 165, 78, 0.35);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a98d223 *//* ===== Tab 1: Info text ===== */
#pp-t1-text p {
font-size: 16px;
line-height: 1.7;
color: #1a1a2e;
margin-bottom: 14px;
}
#pp-t1-text strong,
#pp-t1-text b {
color: #0a2472; /* UKM navy */
}
#pp-t1-text em strong {
display: inline-block;
background: #fff4e0;
border-left: 3px solid #c9a54e; /* UKM gold */
padding: 8px 14px;
border-radius: 4px;
font-style: normal;
}
#pp-t1-text a {
color: #0a2472;
font-weight: 700;
text-decoration: underline;
text-decoration-color: #c9a54e;
text-underline-offset: 3px;
}
#pp-t1-text a:hover {
color: #c9a54e;
}
/* ===== Tab 1: Calendar (responsive fix) ===== */
#pp-t1-cal {
margin-top: 20px;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 6px 20px rgba(10, 36, 114, 0.1);
border: 1px solid #e2e6f0;
}
/* Force the iframe to scale instead of using fixed 800x600 */
#pp-t1-cal iframe {
width: 100% !important;
height: 600px !important; /* keep height fixed, width fluid */
border: none !important;
display: block;
}
/* Shrink height on smaller screens so month grid doesn't get cramped/scrolly */
@media (max-width: 1024px) {
#pp-t1-cal iframe {
height: 550px !important;
}
}
@media (max-width: 600px) {
#pp-t1-cal iframe {
height: 480px !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-02c901e *//* ===== Tab 2: Infoclinic — QR centered below text ===== */
#pp-t2-text {
background: linear-gradient(135deg, #f4f6fb, #ffffff);
border: 1px solid #e8d9ae;
border-radius: 16px;
padding: 28px;
text-align: left;
}
#pp-t2-text p {
font-size: 16px;
line-height: 1.7;
color: #1a1a2e;
margin-bottom: 20px;
}
#pp-t2-text i,
#pp-t2-text em {
color: #0a2472;
font-style: italic;
font-weight: 700;
}
#pp-t2-text a {
color: #0a2472;
font-weight: 700;
text-decoration: underline;
text-decoration-color: #c9a54e;
text-underline-offset: 3px;
}
#pp-t2-text a:hover {
color: #c9a54e;
}
/* QR centered below the text */
#pp-t2-text img {
display: block;
width: 180px;
height: 180px;
max-width: 100%;
margin: 10px auto 0;
border: 6px solid #ffffff;
border-radius: 12px;
box-shadow: 0 6px 18px rgba(10, 36, 114, 0.15);
}
@media (max-width: 600px) {
#pp-t2-text {
padding: 20px;
}
#pp-t2-text img {
width: 150px;
height: 150px;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c910cb2 *//* ===== Tab 3: Grid spacing (native 2-col already set) ===== */
#pp-t3-grid {
gap: 24px !important;
align-items: stretch !important;
}
/* ===== Card styling ===== */
#pp-t3-endnote,
#pp-t3-mendeley {
background: #f4f6fb;
border-radius: 14px;
padding: 26px;
border-left: 4px solid #0a2472;
box-shadow: 0 2px 10px rgba(10, 36, 114, 0.06);
box-sizing: border-box;
height: 100%;
text-align: left;
font-size: 15px;
line-height: 1.75;
color: #1a1a2e;
}
#pp-t3-mendeley {
border-left-color: #c9a54e;
}
/* Heading — first strong/bold line */
#pp-t3-endnote > strong:first-child,
#pp-t3-endnote > p:first-child strong,
#pp-t3-mendeley > strong:first-child,
#pp-t3-mendeley > p:first-child strong {
display: block;
font-size: 18px;
color: #0a2472;
margin-bottom: 16px;
padding-bottom: 10px;
border-bottom: 2px solid #e2e6f0;
}
/* Paragraph spacing */
#pp-t3-endnote p,
#pp-t3-mendeley p {
margin: 0 0 14px 0 !important;
}
#pp-t3-endnote p:last-of-type,
#pp-t3-mendeley p:last-of-type {
margin-bottom: 0 !important;
}
/* Fallback if lines are
separated instead of
*/ #pp-t3-endnote br, #pp-t3-mendeley br { content: ""; display: block; margin-bottom: 10px; } /* Resource / link list */ #pp-t3-endnote ul, #pp-t3-mendeley ul { list-style: none; margin: 18px 0 0; padding: 0; } #pp-t3-endnote li, #pp-t3-mendeley li { background: #fff; border: 1px solid #e2e6f0; border-radius: 8px; padding: 10px 14px; margin-bottom: 8px; font-size: 14px; word-break: break-word; } #pp-t3-endnote li strong, #pp-t3-mendeley li strong { color: #0a2472; } #pp-t3-endnote li:hover, #pp-t3-mendeley li:hover { border-color: #c9a54e; background: #fffdf7; } #pp-t3-mendeley li a { color: #0a2472; text-decoration: underline; text-decoration-color: #c9a54e; text-underline-offset: 2px; word-break: break-all; font-size: 13px; } #pp-t3-mendeley li a:hover { color: #c9a54e; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-b7028c9 *//* ===== Tab 4: Panduan — upgraded look ===== */ #pp-t4-wrap { padding: 8px 4px; } /* Section headings — centered */ #pp-t4-head-1, #pp-t4-head-2, #pp-t4-head-3, #pp-t4-head-4 { text-align: center !important; font-size: 14px; font-weight: 800; color: #0a2472; text-transform: uppercase; letter-spacing: 1px; margin: 32px 0 14px 0 !important; padding-top: 16px; border-bottom: none !important; position: relative; } #pp-t4-head-1::before, #pp-t4-head-2::before, #pp-t4-head-3::before, #pp-t4-head-4::before { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 6px; height: 6px; border-radius: 50%; background: #c9a54e; } #pp-t4-head-1 { margin-top: 4px !important; } /* Button grids */ #pp-t4-grid-1, #pp-t4-grid-2, #pp-t4-grid-3 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px !important; } @media (max-width: 700px) { #pp-t4-grid-1, #pp-t4-grid-2, #pp-t4-grid-3 { grid-template-columns: 1fr !important; } } /* Buttons — glassy depth + gold accent stripe on hover */ #pp-t4-grid-1 .elementor-button, #pp-t4-grid-2 .elementor-button, #pp-t4-grid-3 .elementor-button, #pp-t4-info-btn .elementor-button { background: linear-gradient(135deg, #0a2472, #0d2f8f) !important; border-radius: 12px !important; padding: 18px 22px !important; font-size: 13px; font-weight: 700; letter-spacing: 0.3px; border: none !important; border-left: 4px solid transparent !important; width: 100%; position: relative; overflow: hidden; box-shadow: 0 3px 10px rgba(10, 36, 114, 0.2); transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* Subtle diagonal shine effect */ #pp-t4-grid-1 .elementor-button::after, #pp-t4-grid-2 .elementor-button::after, #pp-t4-grid-3 .elementor-button::after, #pp-t4-info-btn .elementor-button::after { content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,0.15), transparent); transform: skewX(-20deg); transition: left 0.5s ease; } #pp-t4-grid-1 .elementor-button:hover::after, #pp-t4-grid-2 .elementor-button:hover::after, #pp-t4-grid-3 .elementor-button:hover::after, #pp-t4-info-btn .elementor-button:hover::after { left: 130%; } #pp-t4-grid-1 .elementor-button:hover, #pp-t4-grid-2 .elementor-button:hover, #pp-t4-grid-3 .elementor-button:hover, #pp-t4-info-btn .elementor-button:hover { border-left-color: #c9a54e !important; transform: translateY(-3px) scale(1.01); box-shadow: 0 10px 20px rgba(10, 36, 114, 0.3); } /* Info button — gold, stands apart as a utility action */ #pp-t4-info-btn .elementor-button { background: linear-gradient(135deg, #c9a54e, #d4b563) !important; color: #0a2472 !important; border-left-color: #0a2472 !important; } #pp-t4-info-btn .elementor-button:hover { border-left-color: #0a2472 !important; box-shadow: 0 10px 20px rgba(201, 165, 78, 0.35); }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-b1f9e0e *//* ===== Page Heading ===== */ #pp-heading { text-align: center; margin-bottom: 28px !important; } #pp-heading .elementor-heading-title { color: #0a2472; font-weight: 800; letter-spacing: 0.5px; position: relative; display: inline-block; padding-bottom: 14px; } #pp-heading .elementor-heading-title::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 4px; background: #c9a54e; border-radius: 2px; } /* ===== Tab switcher row (Nested Tabs widget) ===== */ #pp-tabs .e-n-tabs-heading { display: flex !important; flex-wrap: wrap; gap: 10px; border-bottom: none !important; margin-bottom: 24px !important; } #pp-tabs .e-n-tab-title { flex: 1 1 auto; justify-content: center; background: #f4f6fb !important; color: #0a2472 !important; border-radius: 10px !important; padding: 16px 20px !important; font-weight: 700 !important; border: 2px solid transparent !important; transition: all 0.25s ease !important; } #pp-tabs .e-n-tab-title:hover { border-color: #c9a54e !important; background: #fff !important; transform: translateY(-2px); } #pp-tabs .e-n-tab-title[aria-selected="true"] { background: #0a2472 !important; box-shadow: 0 4px 14px rgba(10, 36, 114, 0.25); } #pp-tabs .e-n-tab-title[aria-selected="true"] .e-n-tab-title-text { color: #fff !important; } #pp-tabs .e-n-tab-title[aria-selected="true"] .e-n-tab-icon { color: #c9a54e !important; } @media (max-width: 700px) { #pp-tabs .e-n-tab-title { flex: 1 1 100%; } }/* End custom CSS */