/*commecement2026 styles*/
 :root {
     --bc-navy: #172e81;
     --bc-navy-mid: #0e1d53;
     --bc-gold: #ebbf14;
     --bc-gold-light: #ebbf142b;
     --bc-cream: #e9ecef;
     --bc-white: #ffffff;
     --bc-text: #2f2f2f;
     --bc-gray-100: #e9ecef;
     --bc-gray-200: #ced4d9;
     --bc-gray-500: #8f999f;
     --bc-gray-700: #5f6368;
     --bc-gray-dark: #2f2f2f;
     --bc-inverted: #00000078;
     --bc-muted: #5a6475;
     --bc-alert: #B03A2E;
     --bc-shadow: 0 2px 16px rgba(10,34,64,0.08);
     --radius: 12px;
     --radius-sm: 6px;
     --font-headers: 'Helvetica Neue LT Std', Helvetica, Arial, sans-serif;
     --font-body: 'HelveticaNeueLTStd-Roman', Helvetica, Arial, sans-serif;
     --font-display: 'HelveticaNeueLTStd-Bd', Helvetica, Arial, sans-serif;
     --max-w: 1120px;
     --gap: clamp(1rem, 3vw, 2rem);
}
/* Hero Section */
 .comm-homepage-hero {
     position: relative;
     width: 100%;
     overflow: hidden;
}
 .comm-homepage-hero .video-image-wrapper {
     position: relative;
     width: 100%;
     height: 600px;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     display: flex;
     align-items: center;
     justify-content: center;
}
 .comm-background-video {
     position: absolute !important;
     top: 0 !important;
     left: 0 !important;
     width: 100% !important;
     height: 100% !important;
     object-fit: cover;
     transform: none !important;
     z-index: 1;
}
/* Hide video on screens 720px and smaller */
 @media (max-width: 719px) {
     .comm-background-video {
         display: none !important;
    }
}
 .comm-homepage-hero .comm-vid-title {
     font-family: var(--font-headers);
     position: relative;
     z-index: 2;
     color: white;
     text-align: center;
     font-size: 5rem;
     font-weight: bold;
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
     margin: 0;
}
 .comm-desktop-only-video {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.2);
     z-index: 1;
}
 @media (min-width: 720px) {
     .comm-homepage-hero .video-image-wrapper {
         height: 700px;
    }
}
/*countdown styles*/
 .countdown-container {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     text-align: center;
     padding: 25px 20px 20px 20px;
     background-color: var(--bc-gray-dark);
     width: 100%;
}
 .countdown-title{
     font-family: 'HelveticaNeueLTStd-Bd', Helvetica, Arial, sans-serif;
     font-size: 3rem;
     color: var(--bc-gold);
     text-align: center;
     margin-bottom: 5px;
     margin-top: 5px;
}
 #countdown {
     display: flex;
     justify-content: center;
     gap: 20px;
     flex-wrap: wrap;
    /* Ensures responsiveness on small screens */
}
 .time-section {
     background: white;
     padding: 15px;
     border-radius: 10px;
     min-width: 80px;
     box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
 .time-section span {
     display: block;
     font-size: 3rem;
     font-weight: bold;
     color: #e74c3c;
}
 .time-section p {
     margin: 5px 0 0;
     text-transform: uppercase;
     font-size: 0.8rem;
     letter-spacing: 1px;
     color: #2d3436;
}
/* Mobile adjustments */
 @media (max-width: 480px) {
     .time-section {
         min-width: 60px;
         padding: 15px;
    }
     .time-section span {
         font-size: 2rem;
    }
}
/* Hero Section */
 .comm-homepage-hero {
     position: relative;
     width: 100%;
     overflow: hidden;
}
 .comm-homepage-hero .video-image-wrapper {
     position: relative;
     width: 100%;
     height: 600px;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     display: flex;
     align-items: center;
     justify-content: center;
}
 .comm-background-video {
     position: absolute !important;
     top: 0 !important;
     left: 0 !important;
     width: 100% !important;
     height: 100% !important;
     object-fit: cover;
     transform: none !important;
     z-index: 1;
}
/* Hide video on screens 720px and smaller */
 @media (max-width: 719px) {
     .comm-background-video {
         display: none !important;
    }
}
 .comm-homepage-hero h1 {
     font-family: var(--font-headers);
     position: relative;
     z-index: 2;
     color: white;
     text-align: center;
     font-size: 5rem;
     font-weight: bold;
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
     margin: 0;
}
 .comm-desktop-only-video {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.2);
     z-index: 1;
}
 @media (min-width: 720px) {
     .comm-homepage-hero .video-image-wrapper {
         height: 700px;
    }
}
/* main styles */
/* === SKIP LINK (ADA) === */
 .skip-link {
     position: absolute;
     top: -100%;
     left: 1rem;
     z-index: 9999;
     background: var(--bc-navy);
     color: #fff;
     padding: 1.75rem 1.25rem;
     border-radius: 0 0 var(--radius-sm) var(--radius-sm);
     font-weight: 600;
     text-decoration: none;
     transition: top 0.2s;
}
 .skip-link:focus {
     top: 0;
}
/* === UTILITY === */
 .containercomm {
     max-width: var(--max-w);
     margin: 0 auto;
     padding: 0 clamp(1rem, 4vw, 2.5rem);
}
/* === HERO === */
 .hero {
     background: var(--bc-navy);
     color: #fff;
     padding: clamp(3rem, 8vw, 5.5rem) 0 clamp(2.5rem, 6vw, 4rem);
     position: relative;
     overflow: hidden;
}
 .hero::before {
     content: '';
     position: absolute;
     inset: 0;
     background: repeating-linear-gradient(135deg, transparent, transparent 40px, rgba(200,148,58,0.04) 40px, rgba(200,148,58,0.04) 41px), radial-gradient(ellipse 70% 60% at 80% 50%, rgba(26,74,138,0.6) 0%, transparent 70%);
     pointer-events: none;
}
/* === SECTION STYLING === */
 .btn-primary {
     display: inline-flex;
     align-items: center;
     gap: 0.4rem;
     background: var(--bc-gold);
     color: var(--bc-navy);
     padding: 0.8rem 1.6rem;
     border-radius: 50px;
     font-weight: 700;
     font-size: 15px;
     text-decoration: none;
     transition: background 0.15s, transform 0.15s;
     white-space: nowrap;
}
 .btn-primary:hover {
     background: #e0a845;
     transform: translateY(-1px);
     color: var(--bc-navy);
}
 .btn-primary:focus-visible {
     outline: 3px solid var(--bc-gold);
     outline-offset: 3px;
}
 .btn-ghost {
     display: inline-flex;
     align-items: center;
     gap: 0.4rem;
     background: rgba(255,255,255,0.1);
     color: #fff;
     border: 1px solid rgba(255,255,255,0.3);
     padding: 0.8rem 1.6rem;
     border-radius: 50px;
     font-weight: 600;
     font-size: 15px;
     text-decoration: none;
     transition: background 0.15s;
     white-space: nowrap;
}
 .btn-ghost:hover {
     background: rgba(255,255,255,0.18);
     color: #fff;
}
 .btn-ghost:focus-visible {
     outline: 3px solid var(--bc-gold);
     outline-offset: 3px;
}
/* === SECTION STYLING === */
 .section {
     padding: clamp(2.5rem, 6vw, 5rem) 0;
}
 .section-alt {
     background: var(--bc-white);
}
 .section-navy {
     background: var(--bc-navy);
     color: #fff;
}
 .accented-section-grey{
    background: var(--bc-cream);
}
 .accented-section-blue{
    background: var(--bc-navy);
     color: #fff;
}
 .accented-section-white{
    background: var(--bc-white);
}
 .section-label {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     background: var(--bc-gray-200);
     color: var(--bc-navy);
     font-size: 1.2rem;
     font-weight: 600;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     padding: 12px 12px 8px 12px;
     line-height: 1;
}
 .section-label-inverted {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     background: var(--bc-inverted);
     color: var(--bc-gold);
     font-size: 1.2rem;
     font-weight: 600;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     padding: 12px 12px 8px 12px;
     line-height: 1;
}
 .section-title {
     font-family: var(--font-headers);
     font-size: 4rem;
     font-weight: 700;
     line-height: 1.2;
     color: var(--bc-navy);
     margin-bottom: 1.5rem;
}
 .accented-section-blue .section-title {
     color: #fff;
}
 .section-intro {
     font-size: 1.75rem;
     color: var(--bc-text);
     margin-bottom: 0;
     line-height: 1.7;
}
 .accented-section-blue .section-intro {
     color:#FFF 
}
 .comm-block-spacing {
     margin-top: 25px 
}
/* === QUICK LINKS BANNER === */
 .quick-links {
     background: var(--bc-white);
     border-bottom: 2px solid var(--bc-gold);
     padding: 18px 0;
}
 .quick-links-grid {
     display: flex;
     gap: 1.5rem;
     flex-wrap: wrap;
     align-items: baseline;
}
 .quick-links-label {
     font-size: 12px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.07em;
     color: var(--bc-navy);
     margin-right: 1.5rem;
     white-space: nowrap;
}
 .quick-link-pill {
     display: inline-flex;
     align-items: center;
     line-height: 1;
     background: var(--bc-gray-100);
     color: var(--bc-navy);
     padding: 8px 15px 5px 15px;
     border-radius: 50px;
     font-size: 14px;
     text-decoration: none;
     transition: background 0.15s, border-color 0.15s;
     white-space: nowrap;
}
 .quick-link-pill:hover {
     background: var(--bc-gold);
     color: var(--bc-navy);
     border-color: var(--bc-gold);
     text-decoration: none;
}
 .quick-link-pill:focus-visible {
     outline: 3px solid var(--bc-navy);
     outline-offset: 2px;
}
/* === VIDEO CARDS === */
 .card-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
     gap: 1.25rem;
}
 .card {
     background: var(--bc-white);
     border: 1px solid var(--bc-gray-200);
     border-radius: var(--radius);
     overflow: hidden;
     box-shadow: var(--bc-shadow);
     transition: transform 0.2s, box-shadow 0.2s;
     padding: 6%;
     position: relative;
     display: flex;
     flex-direction: column;
     min-width: 0;
     word-wrap: break-word;
}
 .card:hover {
     transform: translateY(-3px);
     box-shadow: 0 6px 24px rgba(10,34,64,0.12);
}
 .card-video {
     position: relative;
     aspect-ratio: 16/9;
     background: var(--bc-navy);
}
 .card-video iframe {
     width: 100%;
     height: 100%;
     border: 0;
     display: block;
}
 .card-video-placeholder {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     height: 100%;
     background: var(--bc-navy);
     cursor: pointer;
     position: relative;
}
 .card-video-placeholder::after {
     content: '';
     position: absolute;
     inset: 0;
     background: radial-gradient(circle at center, rgba(200,148,58,0.2), transparent 70%);
}
 .play-btn {
     width: 56px;
     height: 56px;
     background: var(--bc-gold);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     z-index: 1;
     transition: transform 0.2s;
}
 .graduation-icon-container{
     width: 50px;
     height: 50px;
     margin: 0 auto;
     display: flex;
     flex-direction: row;
     justify-content: center;
}
 .card-video-placeholder:hover .play-btn {
     transform: scale(1.1);
}
 .play-btn svg {
     width: 24px;
     height: 24px;
     fill: var(--bc-navy);
     margin-left: 3px;
}
 .card-body {
     padding: 1.1rem 1.25rem 1.25rem;
}
 .card-tag {
     display: inline-block;
     font-size: 14px;
     font-weight: 700;
     letter-spacing: 0.08em;
     text-transform: uppercase;
     color: var(--bc-gray-700);
     margin-bottom: 0.4rem;
}
 .card-title {
     font-family: var(--font-headers);
     font-size: 2.5rem;
     font-weight: 700;
     color: var(--bc-navy);
     line-height: 1.3;
     margin-bottom: 0.35rem;
}
 .card-desc {
     font-size: 1.6rem;
     color: var(--bc-text);
     line-height: 1.55;
}
 .card-link {
     display: inline-flex;
     align-items: center;
     gap: 0.35rem;
     margin-top: 1.75rem;
     font-size: 1.6rem;
     font-weight: 600;
     color: var(--bc-navy);
     text-decoration: none;
}
 .card-link:hover {
     color: var(--bc-navy);
}
 .card-link svg {
     width: 14px;
     height: 14px;
}
/* === LINK LIST CARD === */
 .link-list-card {
     background: var(--bc-white);
     border: 1px solid var(--bc-gray-200);
     border-radius: var(--radius);
     overflow: hidden;
     box-shadow: var(--bc-shadow);
     transition: transform 0.2s, box-shadow 0.2s;
}
 .link-list-header {
     background: var(--bc-navy);
     color: #fff;
     padding: 1rem 1.5rem;
}
 .link-list-header h2, .link-list-header h3 {
     font-family: var(--font-headers);
     font-size: 2.5rem;
     font-weight: 700;
     padding: 2% 0;
     margin: 0;
}
 .link-list-body {
}
 .link-list-item {
     display: flex;
     align-items: center;
     gap: 1.75rem;
     padding: 3% 5%;
     border-bottom: 1px solid #dddddd !important;
     text-decoration: none;
     color: var(--bc-navy);
     font-weight: 500;
     transition: background 0.12s;
     font-size: 1.6rem;
}
 .link-list-item:last-child {
     border-bottom: 0;
}
 .link-list-item:hover {
     background: var(--bc-gold-light);
}
 .link-list-item:focus-visible {
     outline: 3px solid var(--bc-gold);
     outline-offset: -3px;
}
 .link-list-icon {
     width: 32px;
     height: 32px;
     border-radius: 8px;
     background: var(--bc-gold-light);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     display: none;
}
 .link-list-icon svg {
     width: 16px;
     height: 16px;
     fill: var(--bc-gold);
     display: none;
}
 .link-list-arrow {
     margin-left: auto;
     color: var(--bc-gold);
     height: 25px;
     width: 25px;
}
 .link-list-arrow svg {
     width: 25px;
     height: 25px;
     stroke: currentColor;
     fill: none;
     stroke-width: 2;
}
 .comm-gallery {
     border-radius: var(--radius);
     overflow: hidden;
     box-shadow: var(--bc-shadow);
     transition: transform 0.2s, box-shadow 0.2s;
     background-color: var(--bc-navy);
     text-decoration: none;
}
 .comm-gallery img{
     width: 100%;
     height: 220px;
     object-fit: cover;
}
 .flkrLink {
     background-color: var(--bc-navy);
     padding: 3%;
}
 .flkrLink a {
     font-size: 1.6rem;
     font-weight: 600;
     color: var(--bc-white);
     text-decoration: none;
}
 .flkrLink a:hover {
     color: var(--bc-gold);
     text-decoration: underline;
}
/* === COL LAYOUT === */
 .two-col, .two-col-grey {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 4rem;
     align-items: start;
}
 .two-col-plus {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1.25rem;
}
 .two-col-none{
     display: block;
}
/* === HONOREE CARDS === */
 .honoree-card {
     background: var(--bc-white);
     border: 1px solid var(--bc-gray-200);
     border-radius: var(--radius);
     overflow: hidden;
     box-shadow: var(--bc-shadow);
     transition: transform 0.2s, box-shadow 0.2s;
     position: relative;
     display: flex;
     flex-direction: column;
     min-width: 0;
     word-wrap: break-word;
}
 .honoree-card:hover {
     transform: translateY(-2px);
}
 .honoree-int{
     padding: 3% 7%;
}
 .honoree-award {
     font-size: 1.25rem;
     font-weight: 700;
     line-height: 1.2;
     text-transform: uppercase;
     color: var(--bc-text);
     margin-bottom: 0.4rem;
     padding: 10px;
     background-color: var(--bc-gray-200);
     text-align: center;
}
 .honoree-name {
     font-family: var(--font-headers);
     font-size: 2.5rem;
     font-weight: 700;
     color: var(--bc-navy);
     margin-bottom: 1.5rem;
     line-height: 1.25;
     padding: 0;
     margin: 0;
}
 .honoree-link {
     display: inline-flex;
     align-items: center;
     gap: 0.35rem;
     font-size: 13px;
     font-weight: 600;
     color: var(--bc-blue);
     text-decoration: none;
     margin-top: 0.35rem;
}
 .honoree-link:hover {
     color: var(--bc-navy);
}
 .honoree-int {
     padding: 3% 7%;
     display: flex;
     flex-direction: column;
}
/* === REMARKS GRID === */
 .remarks-grid, .two-col-blue {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 1.75rem;
}
 .remark-item {
     display: flex;
     align-items: center;
     gap: 1.75rem;
     background: var(--bc-inverted);
     border: 1px solid rgba(255,255,255,0.12);
     border-radius: var(--radius-sm);
     padding: 5%;
     text-decoration: none;
     color: #fff;
     font-size: 1.5rem;
     font-weight: 500;
     transition: background 0.15s;
}
 .remark-item:hover {
     background: var(--bc-gray-dark);
     border-color: rgba(200,148,58,0.3);
     color: var(--bc-gold);
}
 .remark-item:focus-visible {
     outline: 3px solid var(--bc-gold);
     outline-offset: 2px;
}
 .remark-play {
     width: 30px;
     height: 30px;
     border-radius: 50%;
     background: var(--bc-gold);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
}
 .remark-play svg {
     width: 12px;
     height: 12px;
     fill: var(--bc-navy);
     margin-left: 2px;
}
 .remark-name {
     font-size: 16px;
     color: var(--bc-gold);
     display: block;
     margin-top: 1px;
     line-height: 1;
}
 .remark-role {
     font-size: 15px;
     color: var(--bc-white);
     display: block;
     margin-top: 1px;
     line-height: 1;
}
/* === FAQ ACCORDION === */
 .faq-list {
     list-style: none;
     margin: 0;
     padding: 0;
}
 .faq-item {
     border: 1px solid var(--bc-gray-200);
     border-radius: var(--radius-sm);
     margin-bottom: 0.75rem;
     overflow: hidden;
     transition: box-shadow var(--transition);
}
 .faq-item:hover {
     box-shadow: var(--shadow-sm);
}
 .faq-question {
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 100%;
     background: none;
     border: none;
     cursor: pointer;
     padding: 1.1rem 1.4rem;
     font-size: 2rem;
     font-weight: 600;
     color: var(--bc-navy);
     text-align: left;
     gap: 1rem;
}
 .faq-question h3{
     margin: 10px 0 5px 0;
     line-height: 1;
     font-weight: normal;
     padding: 0;
}
 .faq-question:focus-visible {
     outline: 2px solid var(--bc-gold);
     outline-offset: -2px;
}
 .faq-icon {
     color: var(--bc-gold);
     font-size: 24px;
     flex-shrink: 0;
     line-height: 1;
     transition: transform var(--transition);
}
 .faq-question[aria-expanded="true"] .faq-icon {
     transform: rotate(45deg);
}
 .faq-answer {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.35s ease, padding 0.2s ease;
}
 .faq-answer.open {
     max-height: 400px;
}
 .faq-answer-inner {
     padding: 0 1.4rem 1.2rem;
     color: var(--bc-gray-dark);
     line-height: 1.65;
}
/* === INFO BANNER === */
 .info-banner {
     background: var(--bc-gold-light);
     border: 1px solid rgba(200,148,58,0.35);
     border-left: 4px solid var(--bc-gold);
     border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
     padding: 1.1rem 1.5rem;
     font-size: 14.5px;
     color: var(--bc-text);
     line-height: 1.7;
     margin-bottom: 0;
     margin-top: 3%;
}
 .info-banner strong {
     color: var(--bc-navy);
}
 .info-banner a {
     color: var(--bc-blue);
}
/* === CONTACT BAND === */
 .contact-band {
     padding: 2.5rem 0;
}
 .contact-band-inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 1.5rem;
     flex-wrap: wrap;
}
 .contact-actions {
     display: flex;
     gap: 1.75rem;
     flex-direction: column;
     flex-wrap: wrap;
}
 .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 5% 10%;
     border-radius: var(--radius);
     font-family: 'DM Sans', sans-serif;
     font-weight: 600;
     font-size: 1.6rem;
     text-decoration: none;
     cursor: pointer;
     border: 2px solid transparent;
     transition: all var(--transition);
     letter-spacing: 0.01em;
     white-space: nowrap;
}
 .btn-primary {
     background: var(--bc-gold);
     color: var(--bc-navy);
     border-color: var(--bc-gold);
}
 .btn-primary:hover {
     background: var(--bc-gray-dark);
     border-color: var(--bc-gold-light);
     transform: translateY(-1px);
     box-shadow: var(--shadow-sm);
     color: var(--bc-white);
}
/* === FOOTER === */
 .site-footer {
     background: #07182e;
     color: rgba(255,255,255,0.65);
     padding: 2.5rem 0 1.5rem;
     font-size: 13px;
}
/* === RESPONSIVE === */
 @media (max-width: 900px) {
     .two-col, .two-col-grey, .two-col-plus {
         grid-template-columns: 1fr;
    }
}
 @media (max-width: 720px) {
     .contact-band-inner {
         flex-direction: column;
         align-items: flex-start;
    }
     .hero h1 {
         font-size: clamp(2rem, 9vw, 2.8rem);
    }
}
 @media (max-width: 480px) {
     .quick-links-grid {
         gap: 0.4rem;
    }
     .remarks-grid, .two-col-blue {
         grid-template-columns: 1fr;
    }
}
/* === BACK TO TOP BUTTON === */
 .back-to-top-btn {
     position: fixed;
     bottom: 20px;
     right: 20px;
     width: 50px;
     height: 50px;
     background: var(--bc-navy);
     color: white;
     border: none;
     border-radius: 50%;
     cursor: pointer;
     z-index: 1000;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
     transition: all 0.3s ease;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 18px;
}
 .back-to-top-btn:hover {
     background: var(--bc-gold);
     color: var(--bc-navy);
     transform: translateY(-2px);
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}
 .back-to-top-btn:focus {
     outline: 3px solid var(--bc-gold);
     outline-offset: 2px;
}
 .back-to-top-btn i {
     font-size: 20px;
}
 .card-img-placeholder{
     display: flex;
     flex-direction: row;
     justify-content: center;
}
 .card-img-placeholder img{
     object-fit: cover;
     height: 250px;
}
 .commspeaker{
     min-height: 90px;
}
 .honoreeImg{
     padding-bottom: 5%;
}
 .contact-actions-single{
}
 .commfaqBtn{
     padding: 6px 12px;
     width: 180px;
     margin-top: 10px;
}
 .commYtTile{
     border-radius: var(--radius);
     overflow: hidden;
     box-shadow: var(--bc-shadow);
}
 .commYtIframe{
     display: block;
     border: 0;
}



    .liveStreamWrapper {
    width: 100%;
    max-width: 1000px; /* Limits width so height stays <= 700px */
    max-height: 600px;
    margin: 0 auto;    /* Centers the video on the page */
    aspect-ratio: 16 / 9;
}

.liveStreamWrapper iframe {
    width: 100%;
    height: 100%;
    display: block;
}

 @media (max-width: 992px){

    .comm-homepage-hero .video-image-wrapper {
        height: 600px;
        padding: 5%;
    }
}

 @media (max-width: 768px){
    .comm-homepage-hero .video-image-wrapper {
        height: 500px;
        padding: 5%;
    }
}
 @media (max-width: 576px){
    .comm-homepage-hero .video-image-wrapper {
        height: 400px;
        padding: 5%;
    }
}


.emmbedbg{
  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('https://berkeleycollege.edu/images/commencement-bg-2026.jpg');
}

#countdown h3{
    color:white;
}