@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

:root {
    --bluegrey   : #545863;
    --greenblue  : #f4d1c6;
    --gloworange : #e1bc9a;
    --lightpink  : #eee3e1;
    --beige      : #eed4bd;
    --warmorange : #e6af7c;
    --offwhite   : #fafafa;
}

body, html {
    margin      : 0;
    font-family : "Outfit", sans-serif;
    color       : var(--bluegrey);
    font-size   : 20px;
}

h1 {
    font-family : "Dancing Script", cursive;
    font-size   : 50px;
}

h2 {
    font-size : 30px;
}

p {
    font-size   : 20px;
    line-height : 28px;
}

header {
    background-color : var(--gloworange);
    height           : 120px;
    width            : 100%;
    border-bottom    : 4px solid var(--gloworange);
    position         : sticky;
    top              : 0;
    z-index          : 1000;
    box-shadow       : none;
    transition       : box-shadow 200ms ease;
}

header.scrolled {
    box-shadow : 0 6px 18px rgba(0, 0, 0, 0.08);
}

section {
    margin-top    : 30px;
    margin-bottom : 30px;
}

.innerheader {
    width          : 95%;
    max-width      : 1600px;
    height         : 120px;
    margin         : 0 auto;
    display        : flex;
    flex-direction : row;
}

.logo {
    height        : 120px;
    width         : auto;
    display       : flex;
    align-items   : center; /* Vertically center items */
    border-bottom : 4px solid var(--gloworange);
}

.logo h1 {
    margin-left   : 20px;
    margin-bottom : 0;
    margin-top    : 0;
    color         : var(--offwhite);
}

.logo h2 {
    font-size     : 18px;
    margin-top    : 0;
    margin-bottom : 0;
    margin-left   : 20px;
    color         : var(--offwhite);
}

.menu-toggle {
    display   : none;
    position  : absolute;
    top       : 50%;
    right     : 20px;
    transform : translateY(-50%);
    font-size : 24px;
    color     : var(--offwhite);
    cursor    : pointer;
    z-index   : 1001;
}

.nav {
    height        : 120px;
    flex-grow     : .9;
    text-align    : right;
    border-bottom : 4px solid var(--gloworange);
}

.nav ul {
    list-style : none;
    margin     : 0;
    font-size  : 0;
}

.clickli {
    cursor          : pointer;
    text-decoration : none;
    padding         : 0 15px;
    color           : var(--offwhite);
}

.clickli:hover {
    background-color : rgba(255, 255, 255, 0.10);
    border-bottom    : 4px solid var(--warmorange);
}

.clickli,
.imgli {
    display     : inline-block;
    line-height : 120px;
    font-size   : 18px;
}

.imgli {
    padding : 0;
}

.imgli img {
    width          : 40px;
    height         : 40px;
    cursor         : pointer;
    vertical-align : middle;
}

.selected {
    background-color : rgba(255, 255, 255, 0.10);
    border-bottom    : 4px solid var(--warmorange);
}


content {
    width          : 100%;
    min-height     : 100vh;
    display        : flex;
    flex-direction : column;
}

.main-content {
    display        : flex;
    flex-direction : column;
    flex-grow      : 1;
}

.profilepic {
    background-image    : url("images/nicolepedra.jpg");
    background-position : center center;
    background-repeat   : no-repeat;
    border              : var(--warmorange) solid 3px;
    border-radius       : 50%;
    height              : 90px;
    width               : 90px;
    margin              : 0;
}

.aboutme {
    display        : flex;
    flex-direction : row;
    width          : 95%;
    max-width      : 1400px;
    margin         : 0 auto;
    gap            : 50px;
}

.about_img {
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    align-items     : center;
    width           : 50%;
}

.about_img img {
    max-width     : 80%;
    border-radius : 25px;
    max-height    : 600px;
}

.about_txt {
    margin : 50px;
    width  : 50%;
}

.partner-section {
    background-color : var(--gloworange);
    width            : 100%;
    padding          : 50px 0;
    color            : var(--offwhite);
    display          : flex;
    flex-direction   : column;
    align-items      : center;
}

.homebtn_white {
    padding          : 10px 50px 10px 20px; /* Extra right padding for the icon */
    border-radius    : 25px;
    background-color : var(--warmorange);
    color            : var(--offwhite);
    font-family      : "Outfit", sans-serif;
    font-size        : 20px;
    cursor           : pointer;
    border           : var(--beige) solid 5px;
    position         : relative;
}

.homebtn_white::after {
    content             : "";
    position            : absolute;
    right               : 15px;
    top                 : 50%;
    transform           : translateY(-50%);
    width               : 30px; /* Adjust to your icon size */
    height              : 30px;
    background-image    : url('images/clickicon.png');
    background-size     : contain;
    background-repeat   : no-repeat;
    background-position : center;
    animation           : point 1s ease-in-out infinite;
}

@keyframes point {
    0%, 100% {
        transform : translateY(-50%) translateX(0);
    }
    50% {
        transform : translateY(-50%) translateX(3px);
    }
}


.homebtn_white:hover {
    box-shadow : 0 0 8px rgba(255, 255, 255, 0.7);
}

.workedwith {
    width            : 100%;
    background-color : var(--lightpink);
}

.ploygon_l_r {
    clip-path      : polygon(0 0, 100% 0, 100% 100%, 0 90%);
    padding-bottom : 125px;
}


.ww_inner {
    display        : flex;
    flex-direction : column;
    width          : 90%;
    max-width      : 1400px;
    margin         : 0px auto;
    padding-top    : 30px;
}

.clogos {
    display        : flex;
    flex-direction : row;
    width          : 100%;
    flex-wrap      : wrap;
}

.clogos img {
    height : 50px;
    margin : 30px;
}

.partnerhome {
    width          : 85%;
    max-width      : 1000px;
    display        : flex;
    flex-direction : column;
    margin         : 100px auto 0;
    gap            : 75px;
}

.media-spotlight .title {
    width     : 100%;
    max-width : 800px;
}

.media-spotlight .title img {
    max-width : 250px;
}

.mediahome {
    position   : relative;
    padding    : 0;
    overflow   : hidden;
    margin-top : 100px;
}

.topborderwave {
    width               : 100%;
    height              : 80px;
    transform           : rotate(180deg);

    /* Background */
    background-image    : url('images/wavesOpacity.svg');
    background-size     : cover;
    background-repeat   : no-repeat;
    background-position : center bottom;

    /* Positioning */
    display             : block;
    margin              : 0;
    padding             : 0;
}

.mediahomecontent {
    background-color : var(--gloworange);
    position         : relative;
    z-index          : 1;
    padding          : 20px 0 80px;
    color            : white;
    overflow         : hidden; /* Prevents margin collapse */
    margin-top       : -1px; /* Pull it up by 1px */
}

.mhc-pad {
    padding-bottom : 90px;
}

.mediahomecontent .title {
    width      : 90%;
    max-width  : 900px;
    margin     : 0 auto;
    text-align : center;
}

.media-feature-box {
    width          : 90%;
    max-width      : 900px;
    display        : flex;
    flex-direction : row;
    gap            : 40px;
    margin         : 40px auto 0;
}

.media-feature {
    flex           : 1;
    display        : flex;
    flex-direction : column;
    cursor         : pointer;
    border-radius  : 10px;
    border         : var(--beige) solid 5px;
}

.media-feature:hover {
    box-shadow : 0 0 20px rgba(255, 255, 255, 0.9);
}

.media-feature__img {
    /* Optional: Set a specific height if you want consistent image container heights */
    /* height: 200px; */
    overflow: hidden; /* This will crop images that exceed the container */
}

.media-feature__img img {
    width         : 100%;
    height        : auto; /* Changed from 100% to auto to maintain aspect ratio */
    border-radius : 10px 10px 0 0;
    object-fit    : cover; /* This ensures images fill the container nicely without distortion */
    display       : block; /* Removes any inline spacing issues */
}

.media-feature__text {
    background-color : var(--warmorange);
    border-radius    : 0 0 10px 10px;
    padding          : 20px;
    font-size        : 16px;
    min-height       : 80px;
}

.media-button {
    width           : 90%;
    max-width       : 900px;
    display         : flex;
    flex-direction  : row;
    justify-content : center;
    margin          : 40px auto;
}

.bottomborderwave {
    width               : 100%;
    height              : 80px;
    background-image    : url('images/wavesOpacityBtm.svg');
    background-size     : cover;
    background-repeat   : no-repeat;
    background-position : center top;
    display             : block;
    margin              : 0;
    padding             : 0;
}


.ww_feature {
    width : 100%;
}

.wwft_inner {
    display        : flex;
    flex-direction : column;
    width          : 90%;
    max-width      : 1200px;
    margin         : 150px auto 0;
}

.feat {
    display        : flex;
    flex-direction : row;
}

.ftgif {
    width     : 50%;
    margin    : 20px;
    min-width : 620px;
}

.fttxt {
    width  : 50%;
    margin : 20px;
}

video {
    cursor : pointer;
}

video:hover {
    opacity : 0.5;
}

.tickertitle {
    width      : 90%;
    max-width  : 900px;
    margin     : 0 auto;
    text-align : center;
}

.logo-ticker {
    --ticker-height : 72px; /* max visible height for logos */
    --gap           : 28px; /* gap between logos */
    --px-per-sec    : 60; /* base speed (pixels/second) */
    --duration      : 30s; /* gets overwritten by JS for consistency */
    position        : relative;
    width           : 90%;
    max-width       : 1200px;
    margin          : 0 auto;
    overflow        : hidden;
    padding         : 12px 0;
    background      : transparent;
}

.logo-ticker__viewport {
    overflow      : hidden;
    margin-bottom : 30px;
}

.logo-ticker__track {
    display     : flex;
    align-items : center;
    gap         : var(--gap);
    will-change : transform;
    /* the animation is applied by JS after duplication is ready */
}

.logo-ticker__item {
    flex        : 0 0 auto; /* keep items from shrinking */
    display     : grid;
    place-items : center;
    min-width   : max(120px, var(--ticker-height));
}

.logo-ticker__item img {
    height     : var(--ticker-height);
    width      : auto;
    max-width  : 300px; /* prevent ultra-wide logos from dominating */
    max-height : 70px;
    object-fit : contain;
    filter     : none; /* tweak if you need grayscale: grayscale(1) */
    opacity    : 0.95;
    transition : transform 200ms ease;
}

.logo-ticker__item img:hover {
    transform : scale(1.06);
}

/* Fades at edges (optional but nice) */
.logo-ticker__fade {
    position       : absolute;
    top            : 0;
    bottom         : 0;
    width          : 60px;
    pointer-events : none;
    z-index        : 2;
    background     : linear-gradient(to right, rgba(225, 188, 154, 1), rgba(225, 188, 154, 0));
}

.logo-ticker__fade--left {
    left : 0;
}

.logo-ticker__fade--right {
    right     : 0;
    transform : scaleX(-1);
}

/* Scrolling animation */
@keyframes ticker-scroll {
    from {
        transform : translateX(0);
    }
    to {
        transform : translateX(var(--loop-end, -50%));
    }
}

/* Applied when JS signals the track is ready */
.logo-ticker__track.is-animating {
    animation : ticker-scroll var(--duration) linear infinite;
}

/* Pause on hover/focus for accessibility & UX */
.logo-ticker:hover .logo-ticker__track,
.logo-ticker:focus-within .logo-ticker__track {
    animation-play-state : paused;
}

/* Respect reduced motion */
@media (prefers-reduced-motion : reduce) {
    .logo-ticker__track {
        animation : none !important;
    }
}

.media {
    width            : 100%;
    background-color : var(--gloworange);
    padding          : 50px 0;
}

.mediawave {
    width               : 100%;
    height              : 40px;
    background-image    : url('images/shallowWaves.svg');
    background-size     : cover;
    background-repeat   : no-repeat;
    background-position : center top;
    display             : block;
    margin              : 0;
    padding             : 0;
}

.innermedia {
    margin         : 0 auto;
    width          : 95%;
    max-width      : 1600px;
    display        : flex;
    flex-direction : row;
    gap            : 50px;
}

.innermedia .img {
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    align-items     : flex-start;
    width           : 60%;
}

.innermedia .img img {
    width         : 96%;
    border-radius : 5px;
}

.innermedia .txt {
    width           : 40%;
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    color           : var(--offwhite)
}

.innermedia .txt h1 {
    color : var(--offwhite);
}

.medialist {
    width          : 90%;
    max-width      : 770px;
    display        : flex;
    flex-direction : column;
    gap            : 40px;
    align-items    : center;
    margin         : 50px auto;
}

.medialist__item {
    display        : flex;
    flex-direction : row;
    gap            : 50px;
}

.medialist__item > div {
    flex : 1;
}

.medialist__item .img {
    overflow      : hidden;
    max-height    : 300px;
    border-radius : 5px;
    cursor        : pointer;
}

.medialist__item .img:hover {
    box-shadow : 0 0 10px rgba(224, 187, 153, 0.5);
}

.medialist__item .img img {
    width : 100%;
}

.medialist__item .txt h4 {
    margin-top : 5px;
}

.medialist__item .txt a {
    color      : var(--gloworange);
    /* Add transition for smooth animation */
    transition : transform 0.3s ease, color 0.3s ease;
    /* Ensure it's positioned correctly */
    display    : inline-block;
}

.medialist__item .txt a:hover {
    color     : var(--warmorange);
    /* Move up by 3 pixels */
    transform : translateY(-3px);
}

.quotesection {
    /* Sizing and spacing */
    width      : 90%;
    max-width  : 900px;
    margin     : 50px auto 100px;


    /* Center content */
    text-align : center;
    position   : relative;
}

.quotesection span {
    /* Text styling */
    font-size   : 1.5rem;
    line-height : 1.6;
    font-weight : 300;
    color       : #2c3e50;
    position    : relative;
    display     : block;

    /* Add quotes inline */
    quotes      : "" " " "" "'" "'";
}

.quotesection span::before {
    content        : open-quote;
    font-size      : 4rem;
    line-height    : 0;
    margin-right   : 10px;
    vertical-align : -25px;
    color          : var(--gloworange, #ff6b35);
    font-family    : Georgia, serif;
}

.quotesection span::after {
    content        : close-quote;
    font-size      : 4rem;
    line-height    : 0;
    margin-left    : 10px;
    vertical-align : -25px;
    color          : var(--gloworange, #ff6b35);
    font-family    : Georgia, serif;
}

.quotesection cite {
    display     : block;
    margin-top  : 20px;
    font-size   : 1rem;
    font-style  : normal;
    font-weight : 500;
}

footer {
    width            : 100%;
    background-color : var(--warmorange);
}

.inner-footer {
    width          : 85%;
    max-width      : 1400px;
    margin         : 0 auto;
    display        : flex;
    flex-direction : column;
}

.lower-footer {
    width     : 100%;
    padding   : 20px 0;
    color     : var(--offwhite);
    font-size : 14px;
    flex-grow : 1;
    display   : flex;
}

.lower-footer > div {
    flex : 1;
}

.lower-footer .left {
    text-align : left;
}

.lower-footer .middle {
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    align-items     : center;
}

.lower-footer .right {
    align-items     : center;
    display         : flex;
    flex-direction  : row;
    justify-content : flex-end;
}

.lower-footer .right img {
    height : 40px;
    width  : 40px;
    cursor : pointer;
}

/* ============================================
   MS Marathon Fundraising Page Styles
   ============================================ */

/* Hero Section */
.ms-hero {
    position: relative;
    height: 80vh;
    min-height: 500px;
    max-height: 800px;
    background-image: url('images/marathon/boston-group-family.jpg');
    background-size: cover;
    background-position: center top;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--offwhite);
}

.ms-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
            to bottom,
            rgba(84, 88, 99, 0.4) 0%,
            rgba(84, 88, 99, 0.7) 100%
    );
}

.ms-hero__content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    padding: 0 20px;
}

.ms-hero__tag {
    display: inline-block;
    background-color: var(--warmorange);
    color: var(--offwhite);
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.ms-hero__title {
    font-family: "Dancing Script", cursive;
    font-size: clamp(48px, 10vw, 90px);
    margin: 0 0 20px;
    text-shadow: 2px 4px 20px rgba(0, 0, 0, 0.3);
}

.ms-hero__subtitle {
    font-size: clamp(16px, 2.5vw, 22px);
    line-height: 1.6;
    margin: 0 0 30px;
    opacity: 0.95;
}

/* Buttons */
.ms-btn {
    display: inline-block;
    padding: 14px 36px;
    border-radius: 30px;
    font-family: "Outfit", sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 3px solid transparent;
}

.ms-btn--primary {
    background-color: var(--warmorange);
    color: var(--offwhite);
    border-color: var(--beige);
}

.ms-btn--primary:hover {
    background-color: var(--gloworange);
    box-shadow: 0 8px 25px rgba(230, 175, 124, 0.4);
    transform: translateY(-2px);
}

.ms-btn--secondary {
    background-color: transparent;
    color: var(--warmorange);
    border-color: var(--warmorange);
}

.ms-btn--secondary:hover {
    background-color: var(--warmorange);
    color: var(--offwhite);
}

.ms-btn--large {
    padding: 18px 48px;
    font-size: 18px;
}

/* Story Section */
.ms-story {
    padding: 100px 0;
    background-color: var(--offwhite);
}

.ms-story__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 60px;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.ms-story__image {
    flex: 1;
    max-width: 500px;
}

.ms-story__image img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(84, 88, 99, 0.15);
}

.ms-story__text {
    flex: 1;
}

.ms-story__eyebrow,
.ms-ireland__eyebrow,
.ms-marathons__eyebrow {
    display: inline-block;
    color: var(--warmorange);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.ms-story__text h2 {
    font-family: "Dancing Script", cursive;
    font-size: 48px;
    color: var(--bluegrey);
    margin: 0 0 25px;
}

.ms-story__text p {
    color: var(--bluegrey);
    margin-bottom: 20px;
}

.ms-story__text p:last-child {
    margin-bottom: 0;
}

.ms-story__text em {
    color: var(--warmorange);
    font-style: italic;
}

.ms-story__text a {
    color: var(--warmorange);
}

.ms-story__text a:hover {
    color: var(--gloworange);
}

/* Ireland Section */
.ms-ireland {
    position: relative;
    background-color: var(--gloworange);
    color: var(--offwhite);
}

.ms-ireland__wave-top {
    width: 100%;
    height: 80px;
    background-image: url('images/wavesOpacity.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
    transform: rotate(180deg);
}

.ms-ireland__wave-bottom {
    width: 100%;
    height: 80px;
    background-image: url('images/wavesOpacityBtm.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
}

.ms-ireland__content {
    padding: 40px 0 60px;
}

.ms-ireland__header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px;
    padding: 0 20px;
}

.ms-ireland__header h2 {
    font-family: "Dancing Script", cursive;
    font-size: 48px;
    margin: 0 0 20px;
}

.ms-ireland__header p {
    font-size: 18px;
    line-height: 1.7;
    opacity: 0.95;
}

/* Photo Gallery */
.ms-gallery {
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
}

.ms-gallery__main {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    margin-bottom: 20px;
}

.ms-gallery__main img {
    width: 100%;
    height: 800px;
    object-fit: cover;
    display: block;
    transition: opacity 0.3s ease;
}

.ms-gallery__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    padding: 60px 25px 25px;
    font-size: 16px;
    color: white;
}

.ms-gallery__thumbs {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.ms-gallery__thumb {
    width: 100px;
    height: 70px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.3s ease;
    opacity: 0.7;
}

.ms-gallery__thumb:hover {
    opacity: 1;
    transform: translateY(-3px);
}

.ms-gallery__thumb.active {
    border-color: var(--offwhite);
    opacity: 1;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.ms-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Marathons Section */
.ms-marathons {
    padding: 100px 0;
    background-color: var(--lightpink);
}

.ms-marathons__inner {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.ms-marathons__header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 60px;
}

.ms-marathons__header h2 {
    font-family: "Dancing Script", cursive;
    font-size: 48px;
    color: var(--bluegrey);
    margin: 0 0 20px;
}

.ms-marathons__header p {
    color: var(--bluegrey);
    font-size: 18px;
    line-height: 1.7;
}

.ms-marathons__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* Marathon Cards */
.ms-marathon-card {
    background: var(--offwhite);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(84, 88, 99, 0.1);
    transition: all 0.3s ease;
}

.ms-marathon-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(84, 88, 99, 0.15);
}

.ms-marathon-card__img {
    height: 250px;
    overflow: hidden;
}

.ms-marathon-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.5s ease;
}

.ms-marathon-card:hover .ms-marathon-card__img img {
    transform: scale(1.05);
}

.ms-marathon-card__content {
    padding: 25px;
}

.ms-marathon-card__year {
    display: inline-block;
    background-color: var(--gloworange);
    color: var(--offwhite);
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 12px;
}

.ms-marathon-card__content h3 {
    font-size: 22px;
    color: var(--bluegrey);
    margin: 0 0 12px;
}

.ms-marathon-card__content p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--bluegrey);
    opacity: 0.8;
    margin: 0;
}

/* Donate Section */
.ms-donate {
    padding: 100px 0;
    background: linear-gradient(135deg, var(--warmorange) 0%, var(--gloworange) 100%);
    color: var(--offwhite);
}

.ms-donate__inner {
    width: 90%;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.ms-donate__content h2 {
    font-family: "Dancing Script", cursive;
    font-size: 48px;
    margin: 0 0 20px;
}

.ms-donate__content > p {
    font-size: 18px;
    line-height: 1.7;
    opacity: 0.95;
    margin-bottom: 40px;
}

/* Progress Bar */
.ms-donate__goal {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 40px;
}

.ms-donate__progress {
    height: 20px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}

.ms-donate__progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--beige), var(--offwhite));
    border-radius: 10px;
    transition: width 1s ease;
}

.ms-donate__stats {
    display: flex;
    justify-content: space-between;
}

.ms-donate__stat {
    display: flex;
    flex-direction: column;
}

.ms-donate__stat-value {
    font-size: 28px;
    font-weight: 700;
}

.ms-donate__stat-label {
    font-size: 14px;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Donate Buttons */
.ms-donate__buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.ms-donate__buttons .ms-btn--primary {
    background-color: var(--offwhite);
    color: var(--warmorange);
    border-color: var(--offwhite);
}

.ms-donate__buttons .ms-btn--primary:hover {
    background-color: var(--beige);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.ms-donate__buttons .ms-btn--secondary {
    border-color: var(--offwhite);
    color: var(--offwhite);
}

.ms-donate__buttons .ms-btn--secondary:hover {
    background-color: var(--offwhite);
    color: var(--warmorange);
}

/* Share Icons */
.ms-donate__share {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.ms-donate__share span {
    font-size: 14px;
    opacity: 0.9;
}

.ms-donate__share-icons {
    display: flex;
    gap: 12px;
}

.ms-share-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: var(--offwhite);
    transition: all 0.3s ease;
}

.ms-share-icon:hover {
    background: var(--offwhite);
    color: var(--warmorange);
    transform: translateY(-3px);
}

/* Quote Section */
.ms-quote {
    padding: 80px 0;
    background-color: var(--offwhite);
}

.ms-quote__inner {
    width: 90%;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.ms-quote blockquote {
    margin: 0;
    position: relative;
}

.ms-quote blockquote::before {
    content: """;
    font-family: Georgia, serif;
    font-size: 120px;
    color: var(--gloworange);
    opacity: 0.3;
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    line-height: 1;
}

.ms-quote blockquote p {
    font-size: clamp(20px, 3vw, 26px);
    line-height: 1.7;
    color: var(--bluegrey);
    font-weight: 300;
    position: relative;
    z-index: 1;
    margin: 0 0 25px;
}

.ms-quote blockquote cite {
    font-size: 16px;
    font-style: normal;
    color: var(--warmorange);
    font-weight: 500;
}

/* Countdown Section */
.ms-countdown {
    padding: 60px 0;
    background-color: var(--bluegrey);
    color: var(--offwhite);
    text-align: center;
}

.ms-countdown__inner {
    width: 90%;
    max-width: 800px;
    margin: 0 auto;
}

.ms-countdown h3 {
    font-family: "Dancing Script", cursive;
    font-size: 36px;
    margin: 0 0 30px;
}

.ms-countdown__timer {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 20px;
}

.ms-countdown__item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ms-countdown__number {
    font-size: clamp(36px, 8vw, 56px);
    font-weight: 700;
    line-height: 1;
    color: var(--warmorange);
}

.ms-countdown__label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.7;
    margin-top: 8px;
}

.ms-countdown__date {
    font-size: 16px;
    opacity: 0.8;
    margin: 0;
}

/* ============================================
   Marathon Promo Banner
   ============================================ */

.marathon-banner {
    background: linear-gradient(135deg, var(--gloworange) 0%, var(--warmorange) 100%);
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

.marathon-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('images/wavesOpacity.svg');
    background-size: 200% auto;
    background-position: center;
    opacity: 0.1;
    pointer-events: none;
}

.marathon-banner__inner {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 40px;
    position: relative;
    z-index: 1;
}

.marathon-banner__badge {
    display: none;
}

.marathon-banner__content {
    flex: 1;
    color: var(--offwhite);
}

.marathon-banner__eyebrow {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.marathon-banner__content h2 {
    font-family: "Dancing Script", cursive;
    font-size: 42px;
    margin: 0 0 15px;
    color: var(--offwhite);
}

.marathon-banner__content p {
    font-size: 17px;
    line-height: 1.7;
    margin: 0 0 25px;
    opacity: 0.95;
}

.marathon-banner__btn {
    display: inline-block;
    background: var(--offwhite);
    color: var(--warmorange);
    padding: 14px 32px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    border: 3px solid var(--beige);
}

.marathon-banner__btn:hover {
    background: var(--beige);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.marathon-banner__image {
    flex: 0 0 280px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    border: 4px solid rgba(255, 255, 255, 0.3);
}

.marathon-banner__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media only screen and (max-width: 1024px) {
    .ms-marathons__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ms-marathons__grid .ms-marathon-card:last-child {
        grid-column: span 2;
        max-width: 400px;
        margin: 0 auto;
    }
}


@media only screen and (max-width : 767px) {
    h2 {
        font-size : 30px;
    }

    .logo {
        max-width : 90%;
    }

    .nav {
        position : relative;
        height   : 70px;
    }

    .menu-toggle {
        display : block;
    }

    .nav ul {
        display          : none;
        position         : fixed;
        top              : 0;
        left             : 0;
        width            : 100%;
        height           : 100vh;
        background-color : var(--gloworange);
        flex-direction   : column;
        justify-content  : flex-start;
        align-items      : center;
        z-index          : 1000;
        margin           : 0;
        padding          : 80px 0 0 0;
    }

    .nav ul.active {
        display : flex;
    }

    .clickli, .imgli {
        display       : block;
        line-height   : normal;
        padding       : 20px;
        font-size     : 24px;
        text-align    : center;
        width         : 100%;
        border-bottom : 1px solid rgba(255, 255, 255, 0.2);
    }

    .clickli:hover {
        background-color : rgba(255, 255, 255, 0.1);
        border-bottom    : 1px solid rgba(255, 255, 255, 0.2);
    }

    .imgli {
        padding : 15px;
    }

    .imgli img {
        width  : 50px;
        height : 50px;
    }

    .logo h1 {
        font-size : 24px;
    }

    .logo h2 {
        font-size : 12px;
    }

    .aboutme {
        flex-direction : column-reverse;
        margin-bottom  : 50px;
    }

    .about_img {
        width           : 90%;
        margin          : 0 auto;
        display         : flex;
        flex-direction  : row;
        justify-content : center;
    }

    .about_img img {
        width : 90%;
    }

    .about_txt {
        margin : 0 auto;
        width  : 90%;
    }

    .ploygon_l_r {
        clip-path      : polygon(0 0, 100% 0, 100% 100%, 0 95%);
        padding-bottom : 100px;
    }

    .media-feature-box {
        flex-direction : column;
    }


    .medialist__item {
        flex-direction : column;
    }

    .videos video {
        width : 100%;
    }

    .clogos img {
        height     : auto;
        max-width  : 90%;
        max-height : 50px;
        margin     : 20px;
    }

    .feat {
        flex-direction : column;
    }

    .ftgif {
        width     : 100%;
        min-width : auto;
        margin    : 20px 0;
    }

    .fttxt {
        width  : 100%;
        margin : 20px 0;
    }

    .innermedia {
        flex-direction : column-reverse;
        align-items    : center;
    }

    .innermedia .img {
        align-items : center;
        width       : 100%;
    }

    .innermedia .txt {
        width : 95%;
    }

    .ms-hero {
        height: 70vh;
        min-height: 450px;
    }

    .ms-story__inner {
        flex-direction: column-reverse;
        gap: 40px;
    }

    .ms-story__image {
        max-width: 100%;
    }

    .ms-story__text h2,
    .ms-ireland__header h2,
    .ms-marathons__header h2,
    .ms-donate__content h2 {
        font-size: 38px;
    }

    .ms-gallery__main img {
        height: 350px;
    }

    .ms-gallery__thumb {
        width: 60px;
        height: 45px;
    }

    .ms-marathons__grid {
        grid-template-columns: 1fr;
    }

    .ms-marathons__grid .ms-marathon-card:last-child {
        grid-column: auto;
        max-width: none;
    }

    .ms-countdown__timer {
        gap: 15px;
    }

    .ms-donate__buttons {
        flex-direction: column;
        align-items: center;
    }

    .ms-donate__buttons .ms-btn {
        width: 100%;
        max-width: 300px;
    }

    .marathon-banner {
        padding: 50px 0;
    }

    .marathon-banner__inner {
        flex-direction: column;
        text-align: center;
    }

    .marathon-banner__content h2 {
        font-size: 34px;
    }

    .marathon-banner__image {
        flex: none;
        width: 100%;
        max-width: 300px;
        order: -1;
    }

}

/* Mobile */
@media (max-width: 480px) {
    .ploygon_l_r {
        clip-path      : polygon(0 0, 100% 0, 100% 100%, 0 97%);
        padding-bottom : 75px;
    }
    .ms-hero {
        height: 60vh;
    }

    .ms-story,
    .ms-marathons,
    .ms-donate {
        padding: 60px 0;
    }

    .ms-gallery__main img {
        height: 280px;
    }

    .ms-countdown__timer {
        gap: 10px;
    }

    .ms-countdown__item {
        min-width: 60px;
    }
}

/* Very small mobile screens */
@media (max-width: 320px) {
    .ploygon_l_r {
        clip-path      : polygon(0 0, 100% 0, 100% 100%, 0 98%);
        padding-bottom : 50px;
    }
}