/*
Theme Name: SCCS Version 4
Theme URI: http://www.madtech.com.my
Description: Custom Theme for Sarawak Children's Cancer Society
Version: 4.0
Author: Madtech Systems Company
Tags: two columns, widgets, wordpress 6.8, Bootstrap 5.3 custom

This template is a custom theme for use on Sarawak Children's Cancer Society's Official Website
All rights reserved by Madtech Systems Company
*/
/* Variables */
:root {
    /* Base Colors */
    --sccsred: #EA1C3F;
    --sccsgold: #FFC313;
    --sccsgreen: #9BC53D;
    --sccspink: #EB4195;
    --sccsblue: #5BC0EB;
    --sccsblack:#000;
    --sccsblack70: #4D4D4D;
    --sccsblack50: #7F7F7F;
    --sccsblack30:#B3B3B3;
    --sccsblack10:#E6E6E6;
    --sccsblack5:#F2F2F2;
    --sccswhite: #fff;
    --sccscream:#FFF9EB;
    --sccspink2: #FFA4D1;
    --sccsbabyblue: #ACDFF4;
    --sccsbabyblue2: #EFF9FD;

    /* Colors with Alpha */
    --sccsred90:rgba(234,28,63,0.9);
    --sccsblack90:rgba(0,0,0,0.9);
    --sccsblack7090:rgba(77,77,77,0.9);
    --sccsblack5090:rgba(127,127,127,0.9);
    --sccsblack3090:rgba(179,179,179,0.9);
    --sccsblack1090:rgba(230,230,230,0.9);
    --sccsblack590:rgba(242,242,242,0.9);
    --sccswhite90:rgba(255,255,255,0.9);
    --sccscream90:rgba(255,249,235,0.9);
    --sccsbabyblue90:rgba(173,207,244,0.9);
    --sccsgreen90:rgba(156,197,69,0.9);
    --sccspink90:rgba(235,65,149,0.9);
    --sccsgold90: rgba(255,195,19,0.9);
    --sccswhite50: rgba(255,255,255,0.5);
    --sccsblackfull30: rgba(0,0,0,0.3);

    /* Legacy/Unused - Consider for removal */
    --menucolor:rgba(255,255,255,0.8);
    --background: #E5E5E5;
    --lightertext: #a0a0a0;
    --lighterbg : #FFF9EB;
    --darktext: #f8f0f0;
    --primary-button: #fffc2e;
    --secondary-button: #d5f1e3;
    --accent: #d91f12;

    /* Typography */
    --text-xxl: 3.4375rem;   /* 55px */
    --text-xl: 2.8125rem;    /* 45px */
    --text-lg: 1.75rem;      /* 28px */
    --text-md: 1.125rem;     /* 18px */
    --text-base: 1rem;       /* 16px */
    --text-sm: 0.875rem;     /* 14px */
}

/* General Styles */
html{height:100%;scroll-behavior: smooth;}
body{background-color:var(--background);margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;font-family: 'Poppins', sans-serif;font-weight:300;position:relative;color:var(--sccsblack70);height:100%;position:relative;font-size: var(--text-base);}

/* Typography */
h1 { font-size: var(--text-xxl);font-weight: 800; }
h2 { font-size: var(--text-xl); font-weight: 800;}
h3 { font-size: var(--text-lg); font-weight: 600;}
h4 { font-size: var(--text-md); font-weight: 600;}
h5 { font-size: var(--text-base); font-weight:500;}
h6 { font-size:var(--text-sm); }
p { font-size: var(--text-base); }
small { font-size: var(--text-sm); }
b,em,strong{font-weight:600;color:var(--sccsblack);}

/* Responsive Typography - Adjust font sizes for smaller screens */
@media (max-width: 767.98px) {
    h1 { font-size: 2.5rem; } /* 40px */
    h2 { font-size: 2rem; }    /* 32px */
    h3 { font-size: 1.5rem; }  /* 24px */
    h4 { font-size: 1.125rem; }/* 18px */
}

@media (max-width: 575.98px) {
    h1 { font-size: 2rem; }    /* 32px */
    h2 { font-size: 1.75rem; } /* 28px */
}

/* Utility Classes */
.sccs-header-white {color:var(--sccswhite);}
.sccs-header-white a{color:var(--sccswhite);}
.sccs-header-white a:hover{color:var(--sccsred);}
.sccs-headerline.aligncenter {text-align: center;}
.sccs-headerline.alignleft {text-align: left;}
.sccs-headerline.alignright {text-align:right;}

/* Only hide content if JS is enabled */
.js-enabled .hidden {
  display: none !important;
}

/* Layout & Containers */
div.container.sccs-white{background-color: var(--sccswhite);padding:60px;}
div.container.sccs-cream{background-color: var(--sccscream);padding:60px;}
div.container.sccs-green{background-color: var(--sccsgreen);padding:60px;}
div.container.sccs-babyblue{background-color: var(--sccsbabyblue);padding:60px;}
div.container.sccs-pink{background-color: var(--sccspink2);padding:60px;}

div.container.sccs_container_first_header {padding:180px 60px 60px 60px;}

/* Responsive Padding for Containers */
@media (max-width: 767.98px) {
    div.container.sccs-white, div.container.sccs-cream, div.container.sccs-green, div.container.sccs-babyblue, div.container.sccs-pink {
        padding: 40px 20px;
    }
    div.container.sccs_container_first_header {padding: 140px 20px 40px 20px;}
}

/* Header & Menu */
#headerbox{position: relative;}
#header{position: relative;min-height: 120px;background-color: var(--sccswhite);padding: 0px;}
#menubox{z-index:1003;position: fixed;top:30px;left: 50%; transform: translateX(-50%);}
#menubar {font-weight: 500;padding-left:50px;padding-right:50px;}
#mega-menu-wrap-main_menu.mmenu_open{border-bottom-left-radius: 0px;border-bottom-right-radius: 0px;}
@media (max-width:1399.98px) {
    #menubar{padding-left:0px;padding-right:0px;}
}
@media (max-width:1199.98px) {
    #mega-menu-wrap-main_menu #mega-menu-main_menu > li.mega-menu-item > a.mega-menu-link {
        padding:0px 4px;
        font-size:var(--text-sm); /* is in megamenu custom styling */

    }
}
@media (max-width:991.98px) {
    #menubar{padding-left:20px;padding-right:20px;}
	div.mega-menu-toggle.mmenu_open{border-bottom-left-radius: 0px !important;border-bottom-right-radius: 0px !important;}    
}
@media (max-width:767.98px) {
    #menubar{padding-left:20px;padding-right:20px;}
	div.mega-menu-toggle.mmenu_open{border-bottom-left-radius: 0px !important;border-bottom-right-radius: 0px !important;}
}
@media (max-width:575.98px) {
    #menubar{padding-left:10px;padding-right:10px;}
}
#mega-menu-wrap-main_menu #mega-menu-main_menu > li.donate-button {
	line-height: 0;
}

/* Mega Menu Widgets */
#mega-menu-wrap-main_menu  .sccs_menu_widgetbox {
  display: block;
  background-color: var(--sccswhite);
  border-radius: 10px;
  border:1px var(--sccsblack70) solid;
  width: 100%;
  height: 100%;
  padding:32px;
  text-decoration: none;
  position: relative;  
}

/* Style the hover icon container */
#mega-menu-wrap-main_menu .sccs_menu_hover_icon {
  position: absolute;
  top: 48px;
  right: 32px; /* Match the padding of the parent */
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Show the hover icon on hover */
#mega-menu-wrap-main_menu .sccs_menu_widgetbox:hover .sccs_menu_hover_icon {
  opacity: 1;
}

/* Add the SVG as a background image */
#mega-menu-wrap-main_menu .sccs_menu_hover_icon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("images/hover_icon.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#mega-menu-wrap-main_menu .sccs_menu_icon{
  margin-bottom: 8px;
}

#mega-menu-wrap-main_menu .sccs_menu_title{
  color:var(--sccsblack);
  font-size:var(--text-base);
  font-weight:500;
  margin-top:12px;
  margin-bottom:12px;
}

#mega-menu-wrap-main_menu .sccs_menu_desc{
  color:var(--sccsblack70);
  font-size: var(--text-sm);
  font-weight: 400;
  margin-top:8px;
  margin-bottom:8px;
}

/* Mega Menu Search */
#mega-menu-wrap-main_menu .searchform {
            max-width: 100%;
            margin: 0 auto;
        }

        #mega-menu-wrap-main_menu .searchform div {
            position: relative;
            display: flex;
            align-items: center;
            background: white;
            border-radius: 25px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            border: 1px solid #e0e0e0;
        }

        #mega-menu-wrap-main_menu .screen-reader-text {
            position: absolute;
            left: -9999px;
            width: 1px;
            height: 1px;
            overflow: hidden;
        }

        #mega-menu-wrap-main_menu #s {
            flex: 1;
            border: none;
            outline: none;
            padding: 15px 20px;
            font-size: var(--text-base);
            color: #333;
            background: transparent;
        }

        #mega-menu-wrap-main_menu #s::placeholder {
            color: #999;
            font-weight: 300;
        }

        #mega-menu-wrap-main_menu #searchsubmit {
            background: transparent;
            border: none;
            padding: 15px 20px;
            cursor: pointer;
            transition: opacity 0.3s ease;
            border-radius: 0 25px 25px 0;
            width: 60px;
            height: 50px;
            text-indent: -9999px;
            overflow: hidden;
            position: relative;
            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.75 15C12.2018 15 15 12.2018 15 8.75C15 5.29822 12.2018 2.5 8.75 2.5C5.29822 2.5 2.5 5.29822 2.5 8.75C2.5 12.2018 5.29822 15 8.75 15Z' stroke='%23000000' stroke-opacity='0.5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.1699 13.1696L17.5004 17.5' stroke='%23000000' stroke-opacity='0.5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 20px 20px;
        }

        #mega-menu-wrap-main_menu #searchsubmit::before {
            display: none;
        }

        #mega-menu-wrap-main_menu #searchsubmit:hover {
            opacity: 0.7;
        }

        #mega-menu-wrap-main_menu #searchsubmit:active {
            transform: translateY(1px);
        }

        /* Focus states */
        #mega-menu-wrap-main_menu #s:focus {
            box-shadow: inset 0 0 0 2px rgba(0, 124, 186, 0.2);
        }

        /* Responsive adjustments */
        @media (max-width: 600px) {
            #mega-menu-wrap-main_menu .searchform {
                max-width: 100%;
                margin: 0 10px;
            }
            
            #mega-menu-wrap-main_menu #s {
                padding: 12px 18px;
                font-size: var(--text-sm);
            }
            
            #mega-menu-wrap-main_menu #searchsubmit {
                padding: 12px 18px;
                width: 50px;
                height: 40px;
            }
        }

        /* Search Modal */
        #sccsmodal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: rgba(225, 219, 203, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            z-index: 1003;
        }

        #sccsmodal.sccs-modal-on {
            opacity: 1;
            visibility: visible;
        }

        .sccs-modal-content {
            background-color: var(--sccscream);
            border: 3px solid var(--sccsgold);
        }
        .sccs-modal-header {
            border-bottom-color: var(--sccsgold);
        }    
        .sccs-modal-header .modal-title {width: 100%;}

/* Breadcrumb CSS */
#sccs-breadcrumbs{
    padding:5px 10px;border:1px solid var(--sccsblackfull30);border-radius: 20px;background-color: var(--sccswhite50);display: inline;
}
#sccs-breadcrumbs span a {text-decoration: none;color:var(--sccsblack70);}
#sccs-breadcrumbs span a:hover {color:var(--sccsred);}
#sccs-breadcrumbs span.breadcrumb_last {font-weight:900;color:var(--sccsblack);}

@media (max-width: 575.98px) {
    #sccs-breadcrumbs{
        font-size:var(--text-sm);
        display: block;
        width: fit-content;
    }
}

/* Scroll Down Link */
a.sccs-scroll-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--sccsred);
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
}
a.sccs-scroll-link:hover { 
    color:var(--sccsred90);
}
a.sccs-scroll-link .arrow {
    font-size: 16px;
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
    transform: translateY(1px);
}

a.sccs-scroll-link:hover .arrow {
    transform: translateY(5px);
    animation: 0.6s ease-in-out ;
}

/* history page */
@media (max-width: 501.98px) {
#sccs-fhf {position: relative;}
    #sccs-fhf .sccs-headerline-icon{
        position: absolute;
        right:0px;
    }
}
/* Our stories */


/* Our Stories Page */
div.container.sccs-our-stories-container{background-image:url('images/our-stories-bg.svg');
    background-position: right -10px top 200px;
    background-repeat: no-repeat;
    padding-top:180px !important;
    position: relative;
}
div.container.sccs-our-stories-container div.post-excerpt {font-style: italic;padding-top:1rem;padding-bottom: 1rem;}
div.container.sccs-our-stories-container div.row.sccs-our-stories-row {padding-top:3rem;padding-bottom:3rem;display: flex;align-items: center;}
div.featured-image{position: relative;min-height:300px;background-color: var(--sccscream);}
img.sccs-featured-image {border-radius: 20px;border:2px solid var(--sccsblack5);}
div.container.sccs-our-stories-content-bg {position: relative;z-index: 0;}
div.container.sccs-our-stories-content {
    position: relative;z-index: 1;
    background-image: url('images/our-stories-floater.svg');
    background-position:left 50px top -150px;
    background-repeat: no-repeat;
}
div.row.sccs-our-stories-row div.story-excerpt{position: relative;z-index: 1002;}
div.sccs-our-stories-imagebg {position: absolute;overflow: hidden;bottom:0px;right:50px;width: calc(100% - 100px);height:150px;z-index: 100;}
@media (max-width: 1399.98px){
    div.container.sccs-our-stories-container{
        background-position: right -60px top 200px;
    }
    div.container.sccs-our-stories-container div.row.sccs-our-stories-row{
        padding-bottom: 0px;
    }
}
@media (max-width: 1199.98px){
    div.container.sccs-our-stories-container{
        background-position: left 320px top 200px;
    }
    div.sccs-our-stories-imagebg {
        height:220px;
    }
    div.container.sccs-our-stories-content{
        background-position: left 218px top -150px;
    }
}
@media (max-width: 991.98px){
    div.container.sccs-our-stories-container{
        background-position: left 240px top -200px;
        background-size:100% 100%;
    }
    div.featured-image{
        background-color: transparent;
    }
    div.sccs-our-stories-imagebg {
        bottom:200px;
        width:calc(100% - 20px);
        right:0px;
    }
    div.sccs-our-stories-imagebg svg {width: 150%;height: auto;}
}
@media (max-width: 767.98px){
    div.sccs-our-stories-imagebg {
        bottom:180px;
    }
}
@media (max-width: 575.98px){
    div.featured-image{
        min-height: auto;
    }
    div.sccs-our-stories-imagebg {
        top:calc(50% + 106px);
    }
}
@media (max-width: 515.98px){
    div.sccs-our-stories-imagebg {
        top:calc(100vw * 0.68 + 242px);
    }
}
/* Story Page Content */
div.sccs-end-of-story{text-align: center;}
div.sccs-end-of-story svg {max-width: 100%;}
div.sccs-sharethis {padding:50px;}
div.sccs-social-line {height:1px;width:100%;background-color:var(--sccsblack30);margin-bottom:1rem;}
div.sccs-share-box{display: flex;justify-content: space-between;align-items:center;padding:20px;}
div.sccs-share-title {font-size: var(--text-md);font-weight: 600;}

@media (max-width: 991px){

}
@media (max-width: 575px){
    div.sccs-sharethis {padding-left:0px;padding-right:0px}
    div.sccs-share-box{padding-left:0px;padding-right:0px;}
    div.sccs-share-title{
        font-size: var(--text-sm);
    }   
    div.sccs-sassy .heateor_sss_horizontal_sharing .heateor_sss_svg, div.sccs-sassy .heateor_sss_standard_follow_icons_container .heateor_sss_svg {width:25px !important; height: 25px !important;}
}


/* Our Stories Listing Page */

div.sccs-featured-story-box{display:grid;grid-template-columns: 1fr 1fr;gap:10px;padding:20px;} /* This seems to be for a specific layout, maybe a featured section */
#storiesGrid{display: grid;grid-template-columns: repeat(4, 1fr);grid-template-rows: repeat(4, 1fr);gap: 10px;padding: 20px;width:100%;position: relative;}
div.all-stories-section{position: relative;}
div.filter-controls{display: flex;}
div.filter-controls #yearFilter{
    display:flex;border:2px solid var(--sccsblack5);border-radius: 22px;background-color: transparent;height:45px;overflow: hidden;
}
div.filter-controls #yearFilter button.year-pill{
    border-radius: 22px;
    height:45px;
    padding-left: 10px;padding-right: 10px;
    border-width:0px;
    background-color: transparent;
    min-width: 80px;
}

div.filter-controls #yearFilter button.year-pill:hover{
    background-color: var(--sccsblack5);
}
div.filter-controls #yearFilter button.year-pill.active{
    background-color: var(--sccsred);
    color:var(--sccswhite);
}

/* Responsive Stories Grid */
@media (max-width: 991.98px) {
    div.sccs-featured-story-box   {grid-template-columns: 1fr;}
    #storiesGrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
    div.filter-controls #yearFilter{ 
        font-size: var(--text-sm);
    }
    div.filter-controls #yearFilter button.year-pill{
        padding-left:4px;padding-right:4px;min-width:50px;
    }
    #storiesGrid { grid-template-columns: 1fr; }
}

/* Pagination (Custom JS version) */
#pagination{display: flex;flex-direction: row;justify-content: center;width: 100%;height:80px;align-items: center;}
.stories-button-previous,.stories-button-next{
    background: var(--sccswhite);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    border-style: solid;
    border-color: var(--sccsgold);
    border-width: 1px;
    margin-left:10px;margin-right:10px;
}
.stories-button-page{
    border-radius: 50%;
    width: 44px;
    height: 44px;   
    background-color: transparent;
    border:none;
}
.stories-button-page:hover{
    background-color: var(--sccsblack5);
}
.stories-button-page.active{
    background-color: var(--sccsred);
    color:var(--sccswhite);
}
.stories-button-page.active:hover{
    color:var(--sccswhite);
}

.stories-button-next:hover,
.stories-button-previous:hover {
    background: var(--sccsgold);
    color:var(--sccswhite);
}

.stories-button-disabled{
    border-color: var(--sccsblack30);
}
.stories-button-disabled:after{
    color: var(--sccsblack30);
}

/* Pagination (WordPress default) */
div.pagination-wrapper{display: flex;flex-direction: row;justify-content: center;width: 100%;height:80px;align-items: center;}

div.pagination-wrapper ul.page-numbers {list-style-type: none;display:flex;}
div.pagination-wrapper ul.page-numbers li a.page-numbers {
    border-radius: 50%;
    width: 44px;
    height: 44px;   
    background-color: transparent;
    border:none;    
    display:flex;
    justify-content: center;
    align-items: center;    
    text-decoration: none;
    color:var(--sccsblack70);
    margin-left:4px;margin-right:4px;
}
div.pagination-wrapper ul.page-numbers li a.page-numbers:hover{
    background-color: var(--sccsblack5);
} 
div.pagination-wrapper ul.page-numbers li span.page-numbers.current {
    border-radius: 50%;
    width: 44px;
    height: 44px;   
    background-color: var(--sccsred);
    color:var(--sccswhite);
    border:none;    
    display:flex;
    justify-content: center;
    align-items: center;    
    margin-left:4px;margin-right:4px;
}
div.pagination-wrapper ul.page-numbers li span.page-numbers.current:hover{
    color:var(--sccswhite);
} 

div.pagination-wrapper ul.page-numbers li a.page-numbers.prev,div.pagination-wrapper ul.page-numbers li a.page-numbers.next{
    background: var(--sccswhite);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    border-style: solid;
    border-color: var(--sccsgold);
    border-width: 1px;
    margin-left:10px;margin-right:10px;
}
div.pagination-wrapper ul.page-numbers li a.page-numbers.prev:hover,div.pagination-wrapper ul.page-numbers li a.page-numbers.next:hover{
    background: var(--sccsgold);
    color:var(--sccswhite);
}

/* News Articles */
div.news-articles-section {
    display: grid;
    gap:8px;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 0px;
    column-gap: 8px;
}
div.news-articles-section .sccs-news-articles {
    /* Ensure cards in the same row have equal height */
    display: flex;
    flex-direction: column;
}
div.news-articles-section .sccs-news-articles .sccs-card-horizontal {
    flex-grow: 1; /* Allow card to grow to fill space */
    height: 100%;
    margin: 0;

}
div.news-articles-section .sccs-news-articles .sccs-card-horizontal{
    margin-top:4px;
    margin-bottom:4px;
    width: 100%;
}

@media (max-width: 767.98px) {
    div.news-articles-section { grid-template-columns: 1fr; }
}

/* Media / Press Release */
div.featured-media-release{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:8px;
}
@media (max-width: 767.98px) {
    div.featured-media-release { grid-template-columns: 1fr; }
}

div.media-releases-section {padding:20px;}
.sccs-card-h-image-pr
{
    position: relative;
    overflow: hidden;
    margin: 12px;
    border-radius: 12px;    
    width: 290px; /* Responsive width */    
    aspect-ratio: 290/230; /* Maintains your exact proportions */
    flex-shrink: 0;    
}

@media (max-width: 767.98px) {
    .sccs-media-release div.sccs-card-horizontal{flex-direction: column;}
    .sccs-card-h-image-pr {width:auto;}
}

/* Search */
div.sccs-search-box{display:grid;grid-template-columns: 1fr;gap:10px;padding:20px;}

div.sccs-search-box .sccs-search-result {
    /* Ensure cards in the same row have equal height */
    display: flex;
    flex-direction: column;
}
div.sccs-search-box .sccs-search-result .sccs-card-horizontal {
    flex-grow: 1; /* Allow card to grow to fill space */
    height: 100%;
    margin: 0;

}

div.sccs-search-box .sccs-search-result .sccs-card-horizontal .sccs-h-card-content {
    width: 80%;
}

.sccs-card-h-image-search
{
    position: relative;
    overflow: hidden;
    margin: 12px;
    border-radius: 12px;    
    width: 20%;
    aspect-ratio: 290/230; /* Maintains your exact proportions */
    flex-shrink: 0;    
}

/* Past President Messages */
div.sccs-pm-container {} /* Empty rule */
div.sccs-pm-box{display:grid;grid-template-columns: 1fr 1fr;gap:10px;}
@media (max-width: 767.98px) {
    div.sccs-pm-box { grid-template-columns: 1fr; }
}

/* SCCS Card (Vertical) */
.sccs-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    border: 3px solid var(--sccsblack5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.service-card-wrapper {
    text-decoration: none;
    color: inherit;
}
.service-card-wrapper:hover{
    color: inherit;
}

.sccs-card:hover {
    border: 3px solid var(--sccsblack70);
}
.sccs-card.sccs-card-green:hover{
    border: 3px solid var(--sccsgreen);
}
.sccs-card.sccs-card-gold:hover{
    border: 3px solid var(--sccsgold);
}
.sccs-card.sccs-card-red:hover{
    border: 3px solid var(--sccsred);
}
.sccs-card.sccs-card-babyblue:hover{
    border: 3px solid var(--sccsbabyblue);
}
.sccs-card.sccs-card-pink:hover{
    border: 3px solid var(--sccspink);
}


.sccs-card-image {
    width: calc(100% - 48px);
    height: 180px;
    object-fit: cover;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #e9ecef;
    position: relative;
    overflow: hidden;
    margin: 24px;
    border-radius: 12px;
}

.sccs-card-image-inner{
    width: calc(100% - 48px);
    position: relative;
    overflow: hidden;
    margin: 24px;
    border-radius: 12px;    
}

.sccs-card-image-rest{
    width: calc(100% - 48px);
    position: relative;
    overflow: hidden;
    margin: 24px;
    border-radius: 12px;    
}

.sccs-card-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--sccsblack7090);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: white;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.sccs-card-image img,.sccs-card-image-inner img,.sccs-card-image-rest img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease; /* Smooth zoom transition */
}

.sccs-card:hover .sccs-card-image img, .sccs-card:hover .sccs-card-image-inner img, .sccs-card:hover .sccs-card-image-rest img {
    transform: scale(1.1); /* 10% zoom - adjust as needed */
}


.sccs-card.sccs-card-green .sccs-card-image-overlay{
    background-color: var(--sccsgreen90);
}
.sccs-card.sccs-card-gold .sccs-card-image-overlay{
    background-color: var(--sccsgold90);
}
.sccs-card.sccs-card-red .sccs-card-image-overlay{
    background-color: var(--sccsred90);
}
.sccs-card.sccs-card-babyblue .sccs-card-image-overlay{
    background-color: var(--sccsbabyblue90);
}
.sccs-card.sccs-card-pink .sccs-card-image-overlay{
    background-color: var(--sccspink90);
}

.sccs-card:hover .sccs-card-image-overlay {
    opacity: 1;
}

.sccs-card-content {
    padding: 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.sccs-card-title {
    font-size: 24px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 12px;
}

.sccs-card-description {
    color: #6c757d;
    line-height: 1.6;
    font-size: 15px;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {    
    .sccs-card-content {
        padding: 20px;
    }
    
    .sccs-card-title {
        font-size: 20px;
    }
}

/* SCCS Card (Horizontal) */
.sccs-card-horizontal {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    border: 3px solid var(--sccsblack5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: row;
    margin-top:12px;
    margin-bottom:12px;
    flex-grow: 1; /* Allows the button to grow in a flex container */
    height: 100%; /* Ensures the button takes the full height of its parent */    
}

.horizontal-card-wrapper {
    text-decoration: none;
    color: inherit;
    display: flex;
}
.horizontal-card-wrapper:hover{
    color: inherit;
}

.sccs-card-horizontal:hover {
    border: 3px solid var(--sccsblack70);
}
.sccs-card-horizontal.sccs-card-green:hover{
    border: 3px solid var(--sccsgreen);
}
.sccs-card-horizontal.sccs-card-gold:hover{
    border: 3px solid var(--sccsgold);
}
.sccs-card-horizontal.sccs-card-red:hover{
    border: 3px solid var(--sccsred);
}
.sccs-card-horizontal.sccs-card-babyblue:hover{
    border: 3px solid var(--sccsbabyblue);
}
.sccs-card-horizontal.sccs-card-pink:hover{
    border: 3px solid var(--sccspink);
}


.sccs-card-h-image-inner{
    position: relative;
    overflow: hidden;
    margin: 12px;
    border-radius: 12px;    
    width: clamp(145px, 30vw, 290px); /* Responsive width */
    aspect-ratio: 290/230; /* Maintains your exact proportions */
    flex-shrink: 0;    
}
.sccs-card-h-image-resource
{
    position: relative;
    overflow: hidden;
    margin: 12px;
    border-radius: 12px;    
    width: 150px; /* Responsive width */    
    aspect-ratio: 150/150; /* Maintains your exact proportions */
    flex-shrink: 0;    
}
.sccs-card-h-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--sccsblack7090);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: white;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}



.sccs-card-h-image-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease; /* Smooth zoom transition */
}

.sccs-card-h-image-resource img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease; /* Smooth zoom transition */;
}

.sccs-card-horizontal:hover .sccs-card-h-image-inner img {
    transform: scale(1.1); /* 10% zoom - adjust as needed */
}
.sccs-card-horizontal:hover .sccs-card-h-image-resource img{
    transform: scale(1.1); /* 10% zoom - adjust as needed */
}

.sccs-card-horizontal.sccs-card-green .sccs-card-h-image-overlay{
    background-color: var(--sccsgreen90);
}
.sccs-card-horizontal.sccs-card-gold .sccs-card-h-image-overlay{
    background-color: var(--sccsgold90);
}
.sccs-card-horizontal.sccs-card-red .sccs-card-h-image-overlay{
    background-color: var(--sccsred90);
}
.sccs-card-horizontal.sccs-card-babyblue .sccs-card-h-image-overlay{
    background-color: var(--sccsbabyblue90);
}
.sccs-card-horizontal.sccs-card-pink .sccs-card-h-image-overlay{
    background-color: var(--sccspink90);
}

.sccs-card-horizontal:hover .sccs-card-h-image-overlay {
    opacity: 1;
}

.sccs-h-card-content {
    padding: 12px;
    flex-grow: 0;
    display: flex;
    flex-direction: column;
}

@media (max-width: 575.98px) {    
    .sccs-card-horizontal{
        flex-direction: column;
    }
    .sccs-card-h-image-inner{
        width: 100%;
    }
    .sccs-card-h-image-resource{
        width: 100%;
    }
    .sccs-card-h-image-overlay{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
}

/* Resource download */

#downloadsGrid {display: grid;grid-template-columns: 1fr 1fr;gap:12px;}

.sccs-h-dl {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.sccs-h-dl a.sccs-download-button {text-decoration: none;
    border-radius: 50%;
    border:1px solid var(--sccsgold);
    font-size: 14px;
    color:var(--sccsblack70);
    margin:4px;
    /* To create a perfect circle, width and height must be equal. */
    width: 44px; /* Adjust size as needed */
    height: 44px; /* Should be same as width */
    /* Use flexbox to center the content inside the circle. */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0; /* Reset padding to rely on width/height for sizing */
}
.sccs-h-dl a.sccs-download-button:hover {
    background-color: var(--sccsgold);
}

div.filter-controls #categoryFilter{
    display:flex;border:2px solid var(--sccsblack5);border-radius: 22px;background-color: transparent;height:45px;
}
div.filter-controls #categoryFilter button.cat-pill{
    border-radius: 22px;
    height:45px;
    padding-left: 10px;padding-right: 10px;
    border-width:0px;
    background-color: transparent;
    min-width: 80px;
}

div.filter-controls #categoryFilter button.cat-pill:hover{
    background-color: var(--sccsblack5);
}
div.filter-controls #categoryFilter button.cat-pill.active{
    background-color: var(--sccsred);
    color:var(--sccswhite);
}

/* Responsive Resource Grid */
@media (max-width: 1399.98px) {
    .sccs-card-h-image-resource {
        width: 100px;
    }
    div.sccs-resource .sccs-card-title{
        font-size: var(--text-md);
    }
}
@media (max-width: 1199.98px) {
    #downloadsGrid { grid-template-columns:  1fr; }
     .sccs-card-h-image-resource {
        width: 150px;
     }    
     div.filter-controls #categoryFilter button.cat-pill{
        font-size: var(--text-sm);
        min-width:50px;
     }
}
@media (max-width: 767.98px) {

    div.filter-controls #categoryFilter{ 
        font-size: var(--text-sm);
    }
    div.filter-controls #categoryFilter button.cat-pill{
        padding-left:8px;padding-right:8px;min-width:50px;
    }
    #downloadsGrid { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {    
    div.sccs-resource  .sccs-card-horizontal{
        flex-direction: row;
    }
    .sccs-card-h-image-resource{
        width: 100px;
    }
}

@media (max-width: 375.98px) {    
    div.filter-controls #categoryFilter{
        height:auto;display:block;
    }
    div.filter-controls #categoryFilter button.cat-pill{
        border-radius:999px;min-width:20px;
    }    
    div.sccs-resource  .sccs-card-horizontal{
        flex-direction: row;
    }
    .sccs-card-h-image-resource{
        width: 40px;
    }
}

/* SCCS Random Stories Section */
div.sccs-random-story-box{display:grid;grid-template-columns: 1fr 1fr 1fr;gap:10px;}
@media (max-width: 991.98px) {
    div.sccs-random-story-box { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575.98px) {
    div.sccs-random-story-box { grid-template-columns: 1fr; }
}

/* SCCS Inner Pages with Sticky Sidebar */
.sccs-container.sccs-container-breadcrumb{padding-bottom:0px !important;}
div.row.sccs-innerrow {display:flex;flex-direction: row;}
div.sccs-innerrow div.sccs-sidebar{display: flex;flex-direction: column;min-height:400px;position: relative;padding-right:64px;padding-bottom:64px;padding-top:80px;}
div.sccs-innerrow div.sccs-sidebar div.mega-menu-wrap {position:sticky !important;top:200px !important;}
@media (max-width: 991.98px) {
    div.row.sccs-innerrow { flex-direction: column; }
    div.sccs-innerrow div.sccs-sidebar { padding-right: 0; padding-top: 40px; }
}


.sccs-header-container {
    background-size: 130px 130px;
    background-position: center right;
    background-repeat: no-repeat;
    position: relative;
    min-height: 130px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-right: 140px;
}

/* Large screens (lg breakpoint: 992px - 1199px) */
@media (max-width: 1199px) {
    .sccs-header-container {
        background-size: 100px 100px; /* Smaller image */
        padding-right: 110px;
        min-height: 100px;
    }
}

/* Medium screens (md breakpoint: 768px - 991px) */
@media (max-width: 991px) {
    .sccs-header-container {
        background-size: 80px 80px; /* Even smaller */
        padding-right: 90px;
        min-height: 80px;
    }
}

/* Small screens (sm breakpoint: 576px - 767px) */
@media (max-width: 767px) {
    .sccs-header-container {
        background-size: 70px 70px;
        padding-right: 70px;
        min-height: 60px;
    }
}

/* Extra small screens (below 576px) */
@media (max-width: 575px) {
    .sccs-header-container {

    }
}

.sccs-page-title {
    margin: 0;
    padding: 1rem 0;
}


/* Responsive adjustments 
@media (max-width: 1199.98px) {
    .sccs-page-title.with-bg-image,
    .sccs-header-container {
        padding: 40px 15px;
    }
}
@media (max-width: 767.98px) {
    .sccs-page-title.with-bg-image,
    .sccs-header-container {
        padding: 40px 15px;
    }
}*/

/* Curved Underline Component */
        .curved-underline::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            right: 0;
            height: 15px;
            background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 12" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M0 9C19 5 65 -2 100 7" stroke="%23FFC313" stroke-width="4" vector-effect="non-scaling-stroke"/></svg>');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            pointer-events: none;
        }        

/* Donate Button Component */
    .donate-button {
      position: relative;
      display: inline-block;
      padding: 12px 16px;
      background-color: var(--sccsred); 
      color: #fff;
      font-size: var(--text-base);
      font-weight:500;
      border: none;
      border-radius: 999px;
      overflow: hidden;
      cursor: pointer;
      transition: background-color 0.3s ease;
	  line-height: 1;
	  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      text-decoration: none;
    }

    .donate-button.sccs-btn-xl{
      font-size:var(--text-lg);
    }

    .donate-button span {
      position: relative;
      display: block;
      transition: transform 0.6s ease;
    }

    .donate-button .hover-bg {
      content: "";
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      height: 300%;
      background: var(--sccsgold); 
      border-radius: 100%;
      transition: top 0.6s ease;
      z-index: 0;
    }

    .donate-button .text-white {
      z-index: 1;
    }

    .donate-button .text-black {
      color: #000;
      position: absolute;
      top: -100%;
      left: 0;
      width: 100%;
      z-index: 1;
      display: flex;
      justify-content: center;
      transition: top 0.6s ease;
    }

    .donate-button:hover .hover-bg {
      top: -100%;
    }

    .donate-button:hover .text-white {
      transform: translateY(200%);
    }

    .donate-button:hover .text-black {
      top: calc(50% - 10px);
    }

    .donate-button:hover .text-black {
      top: calc(50% - 10px);
    }

    .donate-button.sccs-btn-md:hover .text-black{
      top: calc(50% - 10px);
    }

    .donate-button.sccs-btn-lg:hover .text-black{
      top: calc(50% - 10px);
    }

    .donate-button.sccs-btn-xl:hover .text-black{
      top: calc(50% - 20px);
    }

    .donate-button.sccs-btn-xxl:hover .text-black{
      top: calc(50% - 30px);
    }

    div.sccs-button-wrapper{
      display: block;width: 100%;
    }    

 @media (max-width:1199.98px) {
     .donate-button {
        font-size: var(--text-sm);
     }
 }

    /* SVG Button Component */
	    .svg-button  {
    display:flex;
    align-items:center;
    text-decoration: none;
	color:var(--text);
	cursor: pointer;
	/*margin-top:16px;*/
	font-size: var(--text-base);
    }
	.svg-button span{margin-left:10px;}
    .svg-button:hover {
		color:var(--textred);
    }
    
    @media (max-width:1199.98px) {
        .svg-button  {
            font-size:var(--text-sm);
        }
        .svg-button svg {
            width:20px;
        }
    }

    /* This is where the animation magic happens */
    .heart, .leg-left, .leg-right {
        /* This tells the browser to animate the 'd' attribute over 0.4s */
        transition: d 0.4s cubic-bezier(0.45, 0, 0.55, 1);
    }

    /* === INITIAL STATE (from SVG 1) === */
    .heart {
        d: path("M15.6667 3.54168C15.6666 4.16846 15.4188 4.7698 14.9771 5.2146C13.9605 6.2396 12.974 7.30835 11.9188 8.29585C11.801 8.40317 11.6465 8.46117 11.4872 8.45788C11.3278 8.45458 11.1758 8.39024 11.0626 8.27814L8.02298 5.21564C7.58089 4.77069 7.33276 4.16892 7.33276 3.54168C7.33276 2.91444 7.58089 2.31267 8.02298 1.86772C8.24345 1.64562 8.5057 1.46934 8.79461 1.34905C9.08351 1.22876 9.39337 1.16683 9.70632 1.16683C10.0193 1.16683 10.3291 1.22876 10.618 1.34905C10.9069 1.46934 11.1692 1.64562 11.3896 1.86772L11.5001 1.97918L11.6105 1.86772C11.9414 1.5332 12.3644 1.30473 12.8256 1.21139C13.2868 1.11805 13.7654 1.16406 14.2003 1.34356C14.6353 1.52307 15.007 1.82795 15.2681 2.21939C15.5293 2.61083 15.668 3.07113 15.6667 3.54168Z");
    }

    .leg-right {
        d: path("M17.7501 17.8333L21.7334 13.85C21.8507 13.7329 21.9166 13.574 21.9167 13.4083V7.9375C21.9167 7.5231 21.7521 7.12567 21.4591 6.83265C21.1661 6.53962 20.7686 6.375 20.3542 6.375C19.9398 6.375 19.5424 6.53962 19.2494 6.83265C18.9564 7.12567 18.7917 7.5231 18.7917 7.9375V12.625M17.7501 13.6667L18.6438 12.7729C18.691 12.7262 18.7283 12.6705 18.7537 12.6091C18.7791 12.5478 18.792 12.482 18.7917 12.4156C18.791 12.3221 18.7646 12.2305 18.7154 12.151C18.6661 12.0714 18.596 12.007 18.5126 11.9646L18.0511 11.7344C17.6602 11.5389 17.2176 11.4713 16.7862 11.5413C16.3547 11.6112 15.9562 11.815 15.647 12.124L14.7147 13.0562C14.3239 13.4469 14.1044 13.9767 14.1042 14.5292V17.8333");
    }
    
    .leg-left {
        d: path("M5.25004 17.8333L1.26671 13.85C1.14946 13.7329 1.08352 13.574 1.08337 13.4083V7.9375C1.08337 7.5231 1.24799 7.12567 1.54102 6.83265C1.83405 6.53962 2.23147 6.375 2.64587 6.375C3.06027 6.375 3.4577 6.53962 3.75073 6.83265C4.04375 7.12567 4.20837 7.5231 4.20837 7.9375V12.625M5.25004 13.6667L4.35629 12.7729C4.26296 12.6772 4.21 12.5493 4.20837 12.4156C4.20837 12.225 4.31671 12.051 4.48754 11.9646L4.949 11.7344C5.33995 11.5389 5.78248 11.4713 6.21394 11.5413C6.64541 11.6112 7.04395 11.815 7.35317 12.124L8.28546 13.0563C8.67618 13.4469 8.89576 13.9767 8.89587 14.5292V17.8333");
    }
    
    /* === HOVER STATE (from SVG 2) === */
    .svg-button:hover .heart {
        d: path("M17.8589 3.90569C17.8587 4.67176 17.5558 5.40672 17.016 5.95035C15.7735 7.20312 14.5678 8.50936 13.2781 9.7163C13.1341 9.84747 12.9453 9.91836 12.7505 9.91433C12.5558 9.91031 12.37 9.83167 12.2316 9.69465L8.51657 5.95163C7.97624 5.4078 7.67297 4.67231 7.67297 3.90569C7.67297 3.13907 7.97624 2.40358 8.51657 1.85976C8.78603 1.5883 9.10655 1.37286 9.45966 1.22583C9.81276 1.07881 10.1915 1.00312 10.574 1.00312C10.9565 1.00312 11.3352 1.07881 11.6883 1.22583C12.0414 1.37286 12.3619 1.5883 12.6314 1.85976L12.7663 1.99598L12.9013 1.85976C13.3057 1.45091 13.8227 1.17167 14.3864 1.05758C14.9501 0.9435 15.535 0.999735 16.0666 1.21913C16.5982 1.43852 17.0525 1.81115 17.3717 2.28958C17.6909 2.768 17.8605 3.33058 17.8589 3.90569Z");
    }

    .svg-button:hover .leg-right {
        d: path("M17.5424 20.0687L22.421 17.252C22.5645 17.1693 22.6694 17.0329 22.7124 16.8729L24.1283 11.5884C24.2356 11.1882 24.1794 10.7617 23.9722 10.4028C23.765 10.0439 23.4238 9.78203 23.0235 9.67478C22.6232 9.56752 22.1967 9.62367 21.8378 9.83087C21.479 10.0381 21.2171 10.3794 21.1098 10.7796L19.8966 15.3074M18.6208 16.044L19.7154 15.412C19.7731 15.379 19.8236 15.3349 19.864 15.2823C19.9044 15.2296 19.9339 15.1694 19.9508 15.1052C19.9743 15.0146 19.9725 14.9194 19.9455 14.8298C19.9185 14.7402 19.8675 14.6598 19.7979 14.5972L19.4117 14.2554C19.0847 13.9654 18.6747 13.7857 18.2399 13.7415C17.805 13.6974 17.3673 13.7911 16.9887 14.0095L15.8468 14.6687C15.3683 14.9449 15.0191 15.3998 14.876 15.9335L14.0208 19.1251");
    }

    .svg-button:hover .leg-left {
        d: path("M7.99033 20.0687L3.11176 17.252C2.9682 17.1693 2.86339 17.0329 2.82036 16.8729L1.4044 11.5885C1.29715 11.1882 1.3533 10.7617 1.5605 10.4028C1.7677 10.0439 2.10898 9.78204 2.50926 9.67479C2.90954 9.56753 3.33603 9.62368 3.69491 9.83088C4.0538 10.0381 4.31567 10.3794 4.42292 10.7796L5.63614 15.3074M6.91191 16.044L5.8173 15.412C5.70238 15.3437 5.61811 15.2339 5.58195 15.1052C5.53261 14.921 5.59223 14.725 5.73486 14.5973L6.12102 14.2555C6.44805 13.9655 6.85801 13.7857 7.29287 13.7415C7.72773 13.6974 8.16546 13.7911 8.54409 14.0095L9.68591 14.6687C10.1644 14.9449 10.5136 15.3999 10.6567 15.9335L11.5119 19.1251");
    }


    div.container.pagecontent{
        background-color: var(--sccswhite);
        padding:60px;
    }

.sccs-image-wrapper {
    border-radius: 15px; /* Adjust as needed */
    min-height: 360px; /* Adjust based on container padding */
    background-size: cover; background-position: center; background-repeat: no-repeat;    
    position: relative;
    padding: 60px;
}

.sccs-container .cancer-ribbon {
    position: absolute;
    height: auto;
    z-index: 3;
    pointer-events: none; /* Prevents ribbon from interfering with content */
}

.sccs-container .ribbon-top-right {
    top: var(--ribbon-offset-y, 0px);
    right: var(--ribbon-offset-x, -30px);
}

.sccs-container .ribbon-top-left {
    top: var(--ribbon-offset-y, 0px);
    left: var(--ribbon-offset-x, -30px);
}

.sccs-container .ribbon-bottom-right {
    bottom: var(--ribbon-offset-y, 0px);
    right: var(--ribbon-offset-x, -30px);
}

.sccs-container .ribbon-bottom-left {
    bottom: var(--ribbon-offset-y, 0px);
    left: var(--ribbon-offset-x, -30px);
}    

/* Page Content & Image Wrapper */
div.container.pagecontent{
    background-color: var(--sccswhite);
    padding:60px;
}

.sccs-image-wrapper {
    border-radius: 15px; /* Adjust as needed */
    min-height: 360px; /* Adjust based on container padding */
    background-size: cover; background-position: center; background-repeat: no-repeat;    
    position: relative;
    padding: 60px;
}

.sccs-container .cancer-ribbon {
    position: absolute;
    height: auto;
    z-index: 3;
    pointer-events: none; /* Prevents ribbon from interfering with content */
}

/* Counter homepage */

@media (max-width: 1399.98px) {
    .wp-block-uagb-counter.sccs-counter .wp-block-uagb-counter__number span.uagb-counter-block-number,.wp-block-uagb-counter.sccs-counter .wp-block-uagb-counter__number span.uagb-counter-block-prefix{
        font-size: 40px;
    }
}
@media (max-width: 1199.98px) {
    .wp-block-uagb-counter.sccs-counter .wp-block-uagb-counter__number span.uagb-counter-block-number,.wp-block-uagb-counter.sccs-counter .wp-block-uagb-counter__number span.uagb-counter-block-prefix{
        font-size: 32px;
    }    
}
@media (max-width: 991.98px) {
    .wp-block-uagb-counter.sccs-counter .wp-block-uagb-counter__number span.uagb-counter-block-number,.wp-block-uagb-counter.sccs-counter .wp-block-uagb-counter__number span.uagb-counter-block-prefix{
        font-size: 24px;
    }  
}
@media (max-width: 767.98px) {

}





/* Guttenbee Image Box modification */
.wp-block-gutenbee-imagebox.sccs-image-box{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

/* Gravity Form #24 (Newsletter Signup) */
  #gform_24 {
            width: 100%;
            margin: 0 auto;
            display: flex;
        }
        /* Hide the label visually but keep it for accessibility */
        #gform_24 .gfield_label {
            position: absolute;
            left: -9999px;
            width: 1px;
            height: 1px;
            overflow: hidden;
        }

        /* Form body styling */
        #gform_24 .gform_body {
            margin-bottom: 0;
            width: 100%;
        }

        #gform_24 .gform_fields {
            display: flex;
            align-items: stretch;
            position: relative;
        }

        /* Email field styling */
        #gform_24 .gfield {
            flex: 1;
            margin: 0;
            padding: 0;
            border: none;
            position: relative;
        }

        #gform_24 .ginput_container {
            margin: 0;
        }

        #gform_24 input[type="email"] {
            width: 100%;
            padding: 16px 20px;
            border: none;
            background: var(--sccswhite);
            font-size: 16px;
            color: #666666;
            outline: none;
            border-radius: 25px 0 0 25px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            font-weight: 400;
            height: 52px;
            box-sizing: border-box;
        }

        #gform_24 input[type="email"]::placeholder {
            color: var(--sccsblack70);
            font-weight: 400;
        }

        #gform_24 input[type="email"]:focus {
            outline: none;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
        }

        /* Footer and submit button styling */
        #gform_24 .gform_footer {
            display: inline-block;
            margin: 0;
            padding: 0;
            margin-left: -1px; /* Slight overlap to connect with input */
        }

        #gform_24 .gform_button {
            background: var(--sccsred);
            color: white;
            border: none;
            padding: 0 28px;
            font-size: 16px;
            font-weight: 500;
            border-radius: 0 25px 25px 0;
            cursor: pointer;
            transition: all 0.2s ease;
            text-transform: none;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            white-space: nowrap;
            height: 52px;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 100px;
        }

        #gform_24 .gform_button:hover {
            background: var(--sccsgold);
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
        }

        #gform_24 .gform_button:active {
            background: var(--sccsgold);
            transform: translateY(1px);
        }

        /* Hide all hidden inputs visually */
        #gform_24 .gform_hidden {
            display: none;
        }

        /* Responsive design */
        @media (max-width: 575.98px) {
            #gform_24 {
                max-width: 100%;
                padding: 0px;
            }
            
            #gform_24 input[type="email"] {
                font-size: 14px; /* Prevents zoom on iOS */
                padding: 14px 6px;
                height: 48px;
            }
            
            #gform_24 .gform_button {
                padding: 0 6px;
                font-size: 14px;
                height: 48px;
                min-width: 40px;
            }
        }    

/* Gravity Forms Contact Us */
#gform_1 input[type="text"],
#gform_1 input[type="email"]
{
    width: 100%;
    padding: 16px 20px;
    border-radius: 999px;
    border: 1px solid var(--sccsblack30);
    background: var(--sccswhite);
    font-size: 16px;
    color: #666666;
    outline: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    font-weight: 400;
    height: 52px;
    box-sizing: border-box;
}
#gform_1 textarea {
    width: 100%;
    border: 1px solid var(--sccsblack30);
    padding: 16px 20px;
    border-radius: 20px;
    background: var(--sccswhite);
    font-size: 16px;
    color: #666666;
    outline: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    font-weight: 400;
    box-sizing: border-box;
}

#gform_1 .gform_button {
    background: var(--sccsred);
    color: white;
    border: none;
    padding: 0 28px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 100px;
}

#gform_1 .gform_button:hover {
    background: var(--sccsgold);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

#gform_1 .gform_button:active {
    background: var(--sccsgold);
    transform: translateY(1px);
}

    /* Stories Page Donate Box */
    #sccs-stories-donatebox div.sccs-stories-contentbox{
        display: flex;flex-direction: column;align-items: center;justify-content: center;color:var(--sccswhite);padding:24px;
    }

    img.qr-thumbnail {cursor: pointer;}

/*volunteer page */
h2.volunteer-arrows{position: relative;display: flex;justify-content: center;align-items: center;}
h2.volunteer-arrows::before,
h2.volunteer-arrows::after {
  content: '';
  display: block;
  width: 500px; /* Width of your arrow */
  height: 165px; /* Height of your arrow */
  background-repeat: no-repeat;
  position: absolute;
  top:0.1em;
}

h2.volunteer-arrows::before {
  /* SVG for the left arrow pointing right */
  background-image: url("images/left-arrow.svg");
  background-position: top right;
  left: calc(50% - 500px);
  transform:translateX(-50%);
}

h2.volunteer-arrows::after {
  /* SVG for the right arrow pointing left */
  background-image: url("images/right-arrow.svg");
  background-position: top left;
  right: calc(50% - 500px);
  transform:translateX(50%);  
}
@media (max-width: 1200px) {
    h2.volunteer-arrows::before, h2.volunteer-arrows::after { display: none; }
}

/* Volunteer Table (TablePress) */
#tablepress-2 {
    border-collapse: separate;
    border-spacing: 0;
    border: 2px solid var(--sccsblack30);
    border-radius: 22px; /* A little more than the cells to contain them nicely */
    overflow: hidden;
}
#tablepress-2 thead tr.row1 th {background-color:var(--sccsgold);}
#tablepress-2 th{
    padding:12px;background-color: var(--sccsgold);
}
#tablepress-2 td {
    padding: 12px;
}

#tablepress-2 thead tr.row1 th.column-1 {border-top-left-radius:20px;}
#tablepress-2 thead tr.row1 th.column-6 {border-top-right-radius:20px;}
#tablepress-2 tbody tr:last-child td.column-1 {border-bottom-left-radius:20px;}
#tablepress-2 .column-3{
    width:200px;
}
#tablepress-2 .column-6 {
    width:80px;text-align: center;
}
#tablepress-2 tbody tr:last-child td.column-6 {border-bottom-right-radius:20px;}
#tablepress-2 tbody tr.dtrg-group th{background-color: var(--sccsblue);font-size: 18px;font-weight: 600;}



/* Activities */

div.row.sccs-activities-row{
    padding-top:48px;padding-bottom:48px;
}
div.sccs-activities-row div.featured-image   {
    background-color: var(--sccswhite);
    margin-top:48px;
}

/* Activities Listing */
div.sccs-featured-events-box{display:grid;grid-template-columns: 1fr 1fr;gap:10px;padding:20px;}
div.all-activities-section {padding:20px;}
.sccs-card-h-image-activities
{
    position: relative;
    overflow: hidden;
    margin: 12px;
    border-radius: 12px;    
    width: 290px; /* Responsive width */    
    aspect-ratio: 290/230; /* Maintains your exact proportions */
    flex-shrink: 0;    
}
@media (max-width: 767.98px) {
    div.sccs-featured-events-box { grid-template-columns: 1fr; }
    .sccs-activities div.sccs-card-horizontal{flex-direction: column;}
    .sccs-card-h-image-activities {width:auto;}
}

/* Donation Form */

/* Donation Form */
form.donation-form .xl-font .gform-field-label{font-weight: 600;font-size:18px;}
form.donation-form .gform-field-label {font-weight: 400;font-size: 14px;}
form.donation-form .gform_fields {
    display: grid;
    grid-template-columns: 1fr; /* One column for mobile (default) */
}
@media (min-width: 992px) { /* lg breakpoint and up */
    form.donation-form .gform_fields {
        grid-template-columns: repeat(2, 1fr); /* Two columns for larger screens */
    }
}

form.donation-form .donate_form_section {
    display: flex;
    flex-wrap: wrap;
    gap: 0 2%; /* This creates a gap between the columns */
    align-self: flex-start;
}

form.donation-form  .donate_form_section fieldset, form.donation-form  .donate_form_section .gfield {
    margin-top:8px;margin-bottom:8px;
    width: 98%;
}
form.donation-form .donate_form_section .gfield--width-half {
    width: 49%; /* Adjust width to account for gap */
}
form.donation-form .gsection {
    border-block-end: none;
}
form.donation-form .gfield input[type="text"],
form.donation-form .gfield input[type="email"],
form.donation-form .gfield input[type="tel"] {
    width: 100%;
    border: 1px solid var(--sccsblack5);
    border-radius: 25px;
    padding: 10px 15px;
    box-sizing: border-box;
}
form.donation-form .ginput_container_total input[type="text"] {
    border: none;
    border-radius: 0;
    box-shadow: none;
}
form.donation-form .ginput_container_consent input[type="checkbox"]{
    background-color: var(--sccsred);
    color:var(--sccswhite);}
    
form.donation-form .ginput_container_consent input[type="checkbox"]:checked::after{
    border-color: var(--sccswhite) !important;
}
form.donation-form .gform_footer{
    display: flex;
}
form.donation-form .gform_footer input.gform_button{
    border-radius: 999px !important;
    background-color: var(--sccsred) !important;
}
@media (min-width: 992px) { /* lg breakpoint and up */
    form.donation-form .gform_footer input.gform_button{ 
        position: relative;
        left:50%; 
    }
}
/* Donation Form - Radio Buttons to Actual Buttons */
/* Buttonize Gravity Form Radio/Checkbox Fields */
 .gform_wrapper .gfield.buttonized .gfield_radio .gchoice {
    position: relative;
    text-align: center;
    padding-inline-end: 0px !important;
 }
 .gform_wrapper .gfield.buttonized input[type="radio"] {
    position: absolute;
    left: -9999px;
 }
 .gform_wrapper .gfield.buttonized .gfield_radio label
 {
    display: block !important;
    position: relative;
    max-width: 100%;
    padding: 8px 16px;
    font-size: 16px;
    font-weight:600;
    border: 1px solid var(--sccsblack30);
    background-color: var(--sccscream);
    cursor: pointer;
    min-width: 72px;
    border-radius: 999px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
 }
 .gform_wrapper .gfield.buttonized input[type="radio"]:focus+label,
 .gform_wrapper .gfield.buttonized input[type="radio"]:hover+label,
 .gform_wrapper .gfield.buttonized input[type="radio"]:checked+label {
    background-color: var(--sccsgold);
    border-color: var(--sccsgold);
    overflow: hidden;
 }



 .gform_wrapper .gfield.buttonized .gfield_radio label::before
 {
    display: none;
 }

/* Custom HTML Donation Choice Buttons */
.donate-choice-box {
    margin-top:8px;margin-bottom:8px;
}
.donate-options {
    display: flex;
    gap: 10px; /* Adjust spacing between buttons */
    margin-top: 1rem;
}
.donate-choice-box p {
    font-weight: 600;
    font-size: 18px;
}

.donate-options-buttons {
    display: inline-block;
    position: relative;
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid var(--sccsblack30);
    background-color: var(--sccscream);
    color: var(--text); /* Set initial text color */
    cursor: pointer;
    min-width: 72px;
    border-radius: 999px;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    text-decoration: none;
    text-align: center;
}

.donate-options-buttons:hover,
.donate-options-buttons.active { /* Use an 'active' class for the selected state */
    background-color: var(--sccsgold);
    border-color: var(--sccsgold);
    color: var(--sccsblack); /* Ensure text is readable on active state */
}

/* T&C Link */
a.sccs-scroll-link.sccs-tnc {
    font-size:14px;
    display: inline;
    font-weight: 400;
}

/* Thank You Page */
.sccs-container.sccs-container-thankyou {
    background-image: url('images/thank-you-page.jpg');
    background-position: center center;
    /* The background-size is contain for larger screens, so we need to reset it for smaller screens */
    background-size: auto;
    background-repeat: no-repeat;
    background-color: var(--sccswhite);
}

.sccs-container.sccs-container-thankyou h3.tq-donate-amount span{
    color:var(--sccsred);
}

@media (max-width: 991.98px) {
    .sccs-container.sccs-container-thankyou {
        background-image: url('images/thank-you-page-sm.jpg');
        background-position: top center;
        padding-top: 460px !important; /* Height of the thank-you-page-sm.jpg image */
    }
}

/* Footer */
    #footer{
      background-image: url('images/footer-bg.svg');
      background-repeat: no-repeat;
      background-position: 0% 50%;
      background-color: var(--sccscream);
      color:var(--sccsblack70);
      
      padding:60px 60px 20px 60px;
      min-height: 600px;
      display: flex;
      flex-direction: column;
    }
    @media (max-width: 991.98px) {
        #footer{
            background-position: 60% 50%;
        }
    }
    @media (max-width: 767.98px) {
        #footer{
            background-position: 60% 50%;
        }
    }
    #footertop {
        flex: 1 1 auto; /* grow: 1, shrink: 1, basis: auto */
    }


    #footermid {
        flex: 0 1 auto; /* grow: 0, shrink: 1, basis: auto */
    }

    #footer_one .widgetbox .widgettitle h4 {font-weight: 600;}
    #footer_one .widgetbox ul.menu {list-style-type: none;padding: 0px;}
    #footer_one .widgetbox ul.menu li a {text-decoration: none; color:var(--sccsblack70);}
    #footer_one .widgetbox ul.menu li a:hover {color:var(--sccsred);}

    #footerbot{font-size: var(--text-sm);color:var(--sccsblack);flex: 0 0 auto;}
    #footerbot p {font-size: var(--text-sm);}
    #sccs-policies ul.privacymenu{list-style-type: none;display: flex;justify-content: flex-end;}
    #sccs-policies ul.privacymenu li{margin-left:10px;margin-right: 10px;}
    /* Responsive Footer Links */
    @media (max-width: 991.98px) {
        #sccs-policies ul.privacymenu { justify-content: flex-start; padding-left: 0; }
        #sccs-policies ul.privacymenu li { margin: 5px 10px; }
    }
    #sccs-policies ul.privacymenu li a{color: var(--sccsblack70);}
    #sccs-policies ul.privacymenu li a:hover{color: var(--sccsred);}

    @media (max-width: 767.98px) {
        #sccs-policies ul.privacymenu{justify-content: flex-start;padding-left: 0px;}
        #sccs-policies ul.privacymenu li{margin-left:0px;}
    }

    #footermt{font-size:9px;text-align: right;flex: 0 0 auto;}
    #mtsc a{text-decoration: none;color:var(--sccsblack5);}