@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
    :root {
        --primary-color:#282E3F;
        --yellow-color:#ECDD54;
        --pink-color:#EE59A0;
        --green-color:#11936B;
        --teal-color:#168986;
        --purple-color:#B03E96;
        --gray-color:#D3DCDD;
        --dark-green-color:#094e39;
        --dark-pink-color:#cc156c;
        --dark-yellow-color:#c5b416;
        --font-family:"Poppins", sans-serif;
        --green-gradient: linear-gradient(180deg, #44C4BA 0%, #3DA29C 100%);
        --pink-gradient: linear-gradient(180deg, #FC5E93 0%, #D6409A 100%);
        --yellow-gradient: linear-gradient(180deg, #DECC45 0%, #D1BF3F 100%);
        --gray-gradient: linear-gradient(90deg, #168986 0%, #3B445E 33%);
        --border-radius:32px;
    }
    body {
        background-color:var(--primary-color);
    }
    
    h1 {
        color:var(--pink-color) !important;
        font-family: var(--font-family) !important;
        text-shadow:none !important;
        font-weight: bold !important;
    }
    
    h2 {
        font-size: 2.2rem;
    }
    
    h3, h4 {
         font-family: var(--font-family) !important;
        font-weight: bold;
    }
    
    .masthead-2026 {
    	position:relative;
    }
    
    .main-container { 
        background:var(--primary-color) !important;
        color:#fff;
    }
    
    .green-gradient {
        background: var(--green-gradient);
        padding:1.5rem;
        border-radius:var(--border-radius);
    }
    
    
    .green-gradient h4 {
        color:#fff;
    }
    
    .pink-gradient {
        background: var(--pink-gradient);
        padding:1.5rem;
        border-radius:var(--border-radius);
    }
    
    .yellow-gradient {
        background: var(--yellow-gradient);
        padding:1.5rem;
        border-radius:var(--border-radius);
    }
   
    .countdown-timer-inner {
        display: flex;
        flex-direction: column;
    }
    .time-segment#days .value  {
        line-height: 3rem;
        display:block;
        float:right;
        clear:both;
        border-left:5px solid var(--yellow-color);
        border-right:5px solid var(--yellow-color);
        font-weight:bold;
        padding:0 .5rem;
    }

    
    .page-pd24-white {
        background-color:var(--primary-color);
    }

    .masthead-2026 {
        width:100%;
        min-height:900px;
        height:100vh;
        background-image:url("/sites/patronsday.smu.edu.sg/files/2026/hero2026.png?3");
        background-repeat:no-repeat;
        background-size:120% auto;
        background-position: 15% 50%;
    }
    .countdown-timer {
        position:absolute;
        right:23vw;
        bottom:15vh;
        text-align: right;
        font-family: var(--font-family);
        font-weight: bold;
        font-size:1.5rem;
        line-height:1.7rem;
        color:#FFF;
    }
    .text-lg {
        font-size:2.5rem;
        line-height:2.7rem;
    }
    .text-xl {
        font-size:3.5rem;
        line-height:3.7rem;
        color:var(--yellow-color);
    }
    .text-sm {
        font-size:1rem;
        line-height:1rem;
        font-weight: normal;
    }
    .event-date {
        position:absolute;
        right:23vw;
        top:15vh;
        text-align: right;
        font-family: var(--font-family);
        font-weight: bold;
        font-size:1.2rem;
        line-height:1.4rem;
        color:#000;
        
    }
    .team-text {
        position:absolute;
        left:18vw;
        top:15vh;
        font-family: var(--font-family);
        font-weight: bold;
        font-size:1.2rem;
        line-height:1.4rem;
        color:#fff;
    }
    
    .container-white .container .row .col .paragraph--type--group-column  {
        background-color:#fff;
        border-radius: var(--border-radius);
        padding:1.5rem;
    }
    
    .container-gray-gradient .row .col .paragraph--type--group-column  {
        background: var(--gray-gradient);
        border-radius: var(--border-radius);
        padding:1.5rem;
    }
    
    .container-gray-gradient .row .col .paragraph--type--group-column h2 {
        color:var(--gray-color) !important;
    }
    
        
    
    .card-pd24 {
        box-shadow: none;    
    }
    
    .card-pd24 .triangle{
        display:none;
    }
    
    .card-pd24 .card-img-overlay {
        opacity:1;
    }
    

    
    .comp-grid .col:nth-child(6n + 1) .card-pd24 .card-img ,
    .comp-grid .col:nth-child(6n + 1) > div .background-image {
        border-radius: var(--border-radius) !important;
        border:8px solid var(--green-color);
        box-shadow: 12px 12px 0px -1px var(--dark-green-color);
    }
    
    .comp-grid .col:nth-child(6n + 2) .card-pd24 .card-img,
    .comp-grid .col:nth-child(6n + 2) > div .background-image{
        border-radius: var(--border-radius) !important;
        border:8px solid var(--pink-color);
        box-shadow: 12px 12px 0px -1px var(--dark-pink-color);
    }
    
    .comp-grid .col:nth-child(6n + 3) .card-pd24 .card-img,
    .comp-grid .col:nth-child(6n + 3) > div .background-image{
        border-radius: var(--border-radius) !important;
        border:8px solid var(--yellow-color);
        box-shadow: 12px 12px 0px -1px var(--dark-yellow-color);
    }
    
    .comp-grid .col:nth-child(6n + 4) .card-pd24 .card-img,
    .comp-grid .col:nth-child(6n + 4) > div .background-image{
        border-radius: var(--border-radius) !important;
        border:8px solid var(--yellow-color);
        box-shadow: 12px 12px 0px -1px var(--dark-yellow-color);
    }
    
    .comp-grid .col:nth-child(6n + 5) .card-pd24 .card-img,
    .comp-grid .col:nth-child(6n + 5) > div .background-image{
        border-radius: var(--border-radius) !important;
        border:8px solid var(--pink-color);
        box-shadow: 12px 12px 0px -1px var(--dark-pink-color);
    }
    
    .comp-grid .col:nth-child(6n + 6) .card-pd24 .card-img,
    .comp-grid .col:nth-child(6n + 6) > div .background-image{
        border-radius: var(--border-radius) !important;
        border:8px solid var(--green-color);
        box-shadow: 12px 12px 0px -1px var(--dark-green-color);
    }
    
    .card-img-overlay {
        position:relative;
    }
    
    div[class*=page-pd24] h1, div[class*=page-pd24] h2, div[class*=page-pd24] h3, div[class*=page-pd24] h4, div[class*=page-pd24] h5, div[class*=page-pd24] h6, main[class*=page-pd24] h1, main[class*=page-pd24] h2, main[class*=page-pd24] h3, main[class*=page-pd24] h4, main[class*=page-pd24] h5, main[class*=page-pd24] h6 {
        font-family: var(--font-family);
        font-weight: bold;
    }
    
    .card-pd24:after,
    .card-pd24:before {
        display:none;
    }
    
    h2 {
        font-family: var(--font-family) !important;
        width: auto;
        display: inline-block;
        font-weight: 800;
        text-transform: uppercase;
        text-shadow: none !important;
        z-index: 9;
        position: relative;
    }
    
    
    .footer-logo {
        text-align: center;
        margin-top:-80px;
        margin-bottom:-30px;
        z-index:9;
        position: relative;
    }
    
    .site-corporate-v2 .title-breadcrumbs {
       background-color:transparent;
    }
    
    .main-container::before,
    .main-container::after {
        display:none
    }
    
    .component--header-style--arrow .h1:before, 
    .component--header-style--arrow .h2:before, 
    .component--header-style--arrow .h3:before,
    .component--header-style--arrow .h4:before,
    .component--header-style--arrow .h5:before, 
    .component--header-style--arrow .h6:before, 
    .component--header-style--arrow h1:before, 
    .component--header-style--arrow h2:before, 
    .component--header-style--arrow h3:before, 
    .component--header-style--arrow h4:before, 
    .component--header-style--arrow h5:before, 
    .component--header-style--arrow h6:before {
        display:none;
        
    }
    
    .component--header-style--arrow .h1, 
    .component--header-style--arrow .h2, 
    .component--header-style--arrow .h3, 
    .component--header-style--arrow .h4, 
    .component--header-style--arrow .h5, 
    .component--header-style--arrow .h6, 
    .component--header-style--arrow h1, 
    .component--header-style--arrow h2, 
    .component--header-style--arrow h3, 
    .component--header-style--arrow h4, 
    .component--header-style--arrow h5, 
    .component--header-style--arrow h6 {
        padding-left:0;
    }
    
    .component--header {
        font-weight: bold;
    }
    
    .component--header small {
        color:var(--teal-color);
        
    }
    
    
    .breadcrumb li {
        color:#fff !important;
    }
    
    .modal.modal-pd {
        background: transparent;
    }
    
    .modal-content {
        border-radius: var(--border-radius) !important;
        background: var(--gray-color);
        color:#000;
    }
    
    .modal-img .modal-img-inner {
        border-radius: var(--border-radius);
        border:8px solid var(--green-color);
        
    }
    .modal-img .triangle {
        display:none;
    }
    
    .disableoverlay.card-pd24 {
        margin-bottom: 2rem;
    }
    .disableoverlay.card-pd24 .card-img-container {
        overflow:visible;
    }
    .disableoverlay.card-pd24:hover .card-img {
        transform: scale(1);
    }
    
    .disableoverlay.card-pd24 .card-img-overlay {
        padding-top:2rem;
    }
    
    
    .container-gray-gradient .disableoverlay.card-pd24 .card-img-overlay h4 {
        color:#fff !important;    
    }


    @media (max-width: 1900px) {
        .masthead-2026 {
            background-size:2300px auto;
            background-position: -280px -60px;
            max-height:1000px;
        }
        .team-text {
            left:200px;
            top:160px;
        }
        .event-date {
            top:160px;
            right:auto;
            left:1100px;
        }
        .countdown-timer {
            right:auto;
            left:1100px;
            bottom:100px        
        }
    }
    
    
   
    
    @media (max-width: 1500px) {
        .masthead-2026 {
            background-size:2000px auto;
            background-position: -280px -60px;
            max-height:500px;
        }
        .team-text {
            left:80px;
            top:160px;
            font-size:1rem;
            line-height:1rem;
        }
        .event-date {
            top:160px;
            right:auto;
            left:900px;
            font-size:1.3rem;
            line-height:1.3rem;
            width:250px;
        }
         .text-lg {
            font-size:2.3rem;
            line-height:2.3rem;
        }
        .text-xl {
            font-size:3.3rem;
            line-height:3.3rem;
            color:var(--yellow-color);
        }
        .text-sm {
            font-size:.7rem;
            line-height:.7rem;
            font-weight: normal;
        }
        .countdown-timer {
            right:auto;
            left:900px;
            bottom:150px;
            font-size:1.3rem;
            line-height:1.3rem;
            width:250px;
        }
    }
    

    
    
    @media (max-width: 1200px) {
        .masthead-2026 {
            background-size:1800px auto;
            background-position: -230px -10px;
            max-height:800px;
            min-height: 800px
        }
        .team-text {
            left:40px;
            top:160px;
            font-size:1rem;
            line-height:1rem;
        }
        .event-date {
            top:160px;
            right:auto;
            left:800px;
            font-size:1.3rem;
            line-height:1.3rem;
            width:250px;
        }
         .text-lg {
            font-size:2.3rem;
            line-height:2.3rem;
        }
        .text-xl {
            font-size:3.3rem;
            line-height:3.3rem;
            color:var(--yellow-color);
        }
        .text-sm {
            font-size:.7rem;
            line-height:.7rem;
            font-weight: normal;
        }
        .countdown-timer {
            right:auto;
            left:800px;
            bottom:100px;
            font-size:1.3rem;
            line-height:1.3rem;
            width:250px;
        }
    }
    
    @media (max-width: 1100px) {
        .masthead-2026 {
            background-size:1600px auto;
            background-position: -220px -10px;
            max-height:700px;
            min-height: 700px
        }
        .team-text {
            left:20px;
            top:130px;
            font-size:1rem;
            line-height:1rem;
        }
        .event-date {
            top:160px;
            right:auto;
            left:700px;
            font-size:1.3rem;
            line-height:1.3rem;
            width:250px;
        }
        .text-lg {
            font-size:2.3rem;
            line-height:2.3rem;
        }
        .text-xl {
            font-size:3.3rem;
            line-height:3.3rem;
            color:var(--yellow-color);
        }
        .text-sm {
            font-size:.7rem;
            line-height:.7rem;
            font-weight: normal;
        }
        .countdown-timer {
            right:auto;
            left:700px;
            bottom:50px;
            font-size:1.3rem;
            line-height:1.3rem;
            width:250px;
        }
    }
    
    
    @media (max-width: 992px) {
        .masthead-2026 {
            background-image:url("/sites/patronsday.smu.edu.sg/files/2026/hero2026-mobile.png");
            background-size:1400px auto;
            background-position: 55% 10%;
            padding-bottom:900px
        }   
        .team-text {
            left:20px;
            top:40px;
            font-size:1rem;
            line-height:1rem;
        }
        .countdown-timer {
            right:auto;
            left:auto;
            bottom:auto;
            top:700px;
            font-size:1.3rem;
            line-height:1.5rem;
            width:100%;
            text-align: left;
            font-weight:500;
        }
        .countdown-timer-inner {
            display: flex;
            justify-content: center;
            margin-top:2rem;
            flex-direction: row;
        }
        .time-segment#days .value  {
            margin-right:1rem;
        }
        .text-lg {
            font-weight:700
        }
    }
    
    @media (max-width: 768px) {
        .masthead-2026 {
            background-size:1100px auto;
            background-position: 55% 10%;
            padding-bottom:800px
        }   
        .countdown-timer {
            right:auto;
            left:auto;
            bottom:auto;
            top:560px;
        }
				.card-pd24 .card-img-overlay {
					opacity: 1;
					background-color: transparent;
					height: 18%;
				}
    }
    
    
    @media (max-width: 576px) {
        .masthead-2026 {
            background-size:900px auto;
            background-position: 50% 20%;
            padding-bottom:700px
        } 
        .countdown-timer {
            right:auto;
            left:auto;
            bottom:auto;
            top:500px;
            transform: scale(.9);
        }
    }