/* The styles are structured in a way that is easy to read and maintain. 
    Below is the structure of the styles in the CSS file. 
    This allows us to easily find the styles we are looking for and 
    add new styles to the respective sections. */
/* Import External Styles */
/* Root Variables */
/* General Body Styles */
/* Button Styles */
/* Header & Navbar Styles */
/* Main Content Styles */
/* Miscellaneous Styles */
/* Media query Styles */

/* Import External Styles */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300..800&display=swap");

/* Root Variables */
:root {
  --primary-color: #CC3D46;
  --secondary-color: #2B5B6C;
  --tertiary-color: #fff;
  --headline-font: "Varisse Sans", sans-serif;
  --body-copy-font: "Varisse Sans", sans-serif;
  --button-corner: 0px;
  
    --cva-blue: #2B5B6C;
    --cva-blue-darker: #194757;
    --cva-tan: #EFE4CE;
    --cva-red: #CC3D46;
    --cva-red-darker: #A1252D;
    --cva-gray: #373A36;
}

/* General Body Styles */
body {
  font-family: "Varisse Sans", sans-serif;
  color: #2B5B6C;
  padding-top: 0px;
}

h1,
h2,
h3,
h4,
h5,
h6,
legend,
.top-priority {
  font-weight: 700;
  font-family: "Varisse Sans", sans-serif;
}

.action-item-headline {
    font-family: "Varisse Sans", sans-serif;
}


a {
  color: #2B5B6C;
  transition: all 0.3s ease-in-out;
}

a:hover {
  color: #CC3D46;
}

/* Button Styles */
.btn:not(.btn-pill),
.btn-primary {
  font-family: "Varisse Sans", sans-serif;
  text-transform: uppercase;
  font-size: 20px;
  border: 3px solid #CC3D46;
  background-color: #CC3D46;
  color: #fff;
  border-radius: 0px;
}

.btn:active,
.btn-primary:active,
.btn:active:focus,
.btn-primary:active:focus,
.btn:focus,
.btn-primary:focus {
  background-color: transparent !important;
  border-color: #fff !important;
}

/* Header & Navbar Styles */
header,
.navbar {
  background-color: #EFE4CE;
  margin: 0;
  border: 0;
}

header .container .i360collapse,
header .container .navbar-collapse,
.navbar .container .i360collapse,
.navbar .container .navbar-collapse {
  background-color: #EFE4CE;
}

header .container .logo-toggle #logo img,
header .container .navbar-header #logo img,
.navbar .container .logo-toggle #logo img,
.navbar .container .navbar-header #logo img {
  width: 200px;
  max-height: unset;
}

header .container .logo-toggle .navbar-toggle,
header .container .navbar-header .navbar-toggle,
.navbar .container .logo-toggle .navbar-toggle,
.navbar .container .navbar-header .navbar-toggle {
  padding-left: 50px;
  border: none;
  height: 50px;
}

header .container .logo-toggle .navbar-toggle .icon-bar,
header .container .navbar-header .navbar-toggle .icon-bar,
.navbar .container .logo-toggle .navbar-toggle .icon-bar,
.navbar .container .navbar-header .navbar-toggle .icon-bar {
  background-color: #2B5B6C;
}

/*controls words in header (i.e. Action Signup Login)*/
.navbar-nav>li>a {
  font-family: Arial, sans-serif !important;
  font-size: 20px !important;
  margin-top: 14px;
  font-weight: 600;
  color: #2B5B6C !important;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 15px !important;
}

header .container ul>li>a:hover,
header .container .navbar-nav>li>a:hover,
.navbar .container ul>li>a:hover,
.navbar .container .navbar-nav>li>a:hover {
  color: #fff;
  background-color: #2B5B6C;
}

header .container .logo-toggle .navbar-toggle:hover,
header .container .logo-toggle .navbar-toggle:focus,
header .container .logo-toggle .navbar-toggle:active,
header .container .navbar-header .navbar-toggle:hover,
header .container .navbar-header .navbar-toggle:focus,
header .container .navbar-header .navbar-toggle:active,
.navbar .container .logo-toggle .navbar-toggle:hover,
.navbar .container .logo-toggle .navbar-toggle:focus,
.navbar .container .logo-toggle .navbar-toggle:active,
.navbar .container .navbar-header .navbar-toggle:hover,
.navbar .container .navbar-header .navbar-toggle:focus,
.navbar .container .navbar-header .navbar-toggle:active {
  background-color: unset;
}

header .container ul>li.donate-nav-item,
header .container .navbar-nav>li.donate-nav-item {
  display: none;
  padding: 0 20px;
  color: #ffff20;
}

header .container ul>li.donate-nav-item a,
header .container .navbar-nav>li.donate-nav-item a,
.navbar .container ul>li.donate-nav-item a,
.navbar .container .navbar-nav>li.donate-nav-item a {
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  text-transform: uppercase;
  text-align: center;
  font-size: 16px;
  line-height: 24px;
  border-radius: 0;
  padding: 6px 24px;
  color: #fff;
}

header .container ul>li.donate-nav-item a::after,
header .container .navbar-nav>li.donate-nav-item a::after,
.navbar .container ul>li.donate-nav-item a::after,
.navbar .container .navbar-nav>li.donate-nav-item a::after {
  content: unset;
}

header .container ul>li.donate-nav-item a:hover,
header .container .navbar-nav>li.donate-nav-item a:hover,
.navbar .container ul>li.donate-nav-item a:hover,
.navbar .container .navbar-nav>li.donate-nav-item a:hover,
header .container ul>li .dropdown-menu,
header .container .navbar-nav>li .dropdown-menu,
.navbar .container ul>li .dropdown-menu,
.navbar .container .navbar-nav>li .dropdown-menu {
  background-color: #2B5B6C;
}

header .container ul>li .dropdown-menu li a,
header .container .navbar-nav>li .dropdown-menu li a,
.navbar .container ul>li .dropdown-menu li a,
.navbar .container .navbar-nav>li .dropdown-menu li a {
  transition: color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
  color: #fff;
  font-size: 18px;
  text-transform: none;
  font-family: "Varisse Sans", sans-serif;
}

header .container ul>li .dropdown-menu li a:hover,
header .container .navbar-nav>li .dropdown-menu li a:hover,
.navbar .container ul>li .dropdown-menu li a:hover,
.navbar .container .navbar-nav>li .dropdown-menu li a:hover {
  color: #94a3aa;
}

nav.navbar {
  height: auto;
}

.navbar {
  background-color: #EFE4CE;
}

.navbar-toggler {
	--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32px'%3e%3cpath d='M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z'/%3e%3c/svg%3e");
	--bs-border-width: 0;
	--bs-navbar-toggler-focus-width: 0;
}

.navbar-toggler-icon {
	width: 32px;
	height: 32px;
}

/*Sign Up Page Header*/
.navbar-nav {
  color: #2B5B6C;
  font-size: 20px;
}

.nav-item>a {
  color: #2B5B6C;
}

/*controls logo on action page*/
.navbar-header>#logo img {
  transform: scale(1.5);
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 50px;
}

/* Main Content Styles */
main.button-set-primary {
  padding-top: 0;
}

main .section-navigation .rounded-circle,
main .card-section .badge {
  background-color: #CC3D46;
}

main .card-section .section-title .fa {
  color: #CC3D46 !important;
}

main .card-section .button-nav-container button svg {
  border-color: #CC3D46;
  fill: #CC3D46;
}

main .form-section>div,
main .form-section>div form,
main .action-section {
  background-color: #2B5B6C;
}

main .form-section>div .new-user {
  color: #fff;
}

main .action-section .action-buttons a {
  border-color: #CC3D46;
  background-color: #CC3D46;
  border: 3px solid #CC3D46;
  color: #fff !important;
}

main .action-section .action-buttons a:hover {
  border-color: #fff;
  background-color: transparent;
}

main .action-section #toggleButtonViewAll,
.petition-imagery h1,
.petition-imagery h2,
.petition-imagery h3,
.petition-imagery h4,
.petition-imagery h5 {
  color: #fff;
}

/* Miscellaneous Styles */
.lead {
  font-family: "Varisse Sans", sans-serif;
  font-weight: 800;
  color: #CC3D46;
  font-style: italic;
}

.image-tag span {
  background-color: #2B5B6C;
}

.nav-tabs .active a {
  color: #2B5B6C !important;
  border-bottom-color: #2B5B6C !important;
}

.thumbnail {
  margin-top: 20px;
}

.fb-btn-unlinked,
.tw-btn-unlinked {
  font-size: 13px;
}

#bs-example-navbar-collapse-1 {
  background-color: #EFE4CE;
}

.special-selector-fill-viewport.themed-content-page-container {
  flex-direction: column;
}

/* Volunteer Styles */
.volunteer-stats strong {
  color: #2B5B6C;
}

.volunteer-panel .btn:hover {
  color: #2B5B6C !important;
  border-color: #2B5B6C !important;
}

.volunteer-panel .volunteer-name {
  margin-top: 20px;
  padding: 50px;
}

/* Footer Styles */
       footer .footer-top {
                padding-top: 2em;
                padding-bottom: 3.5em;
            }
footer {
            background: var(--cva-tan);
            font-family: Arial;
            opacity: 1; /* temporary for old home page only */
        }
        
.footer-top {
    padding: 50px 0;
}

.container {
    max-width: 1352px;
    margin-left: auto;
    margin-right: auto;
}

.footer-top__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 35px;
}

.footer-top__branding {
    width: 231px;
}

.footer-top__social {
    padding-top: 38px;
}

.social-menu {
    width: 47px;
    margin: 24px;
    color: #365a6a;
    transition: all .3s;
}
.social-menu--mini {
    width: 42px;
    color: #365a6a;
}

.social-menu__list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 1rem; /* Adds spacing between icons */
  }
  .social-menu__list a {
    display: inline-block;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .social-menu__list a:hover {
    transform: scale(1.1); /* Subtle zoom on hover */
    opacity: 0.8;
  }
  .social-menu__list svg {
    width: 42px;
    height: 42px;
    color: #365a6a; /* Default color; override per icon if desired */
  }
  /* Optional: Brand-specific colors */
  .facebook-icon { color: #1877f2; }
  .x-icon { color: #000000; }
  .instagram-icon { color: #e1306c; } /* Or use a gradient via CSS for full effect */
  .linkedin-icon { color: #0077b5; }

.screen-reader-text {
    border: 0;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal;
}

.footer-top__content {
    width: 40%;
    text-align: left;
}

.footer-heading {
    font-family: var(--serif-font);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.33333;
    margin: 0;
    padding-bottom: 20px;
    text-align: left;
}

.the-content {
    font-family: var(--sans-serif-font);
    font-size: 18px;
    line-height: 1.8;
}

.footer-top__cta {
    padding-top: 25px;
}

.arrow-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: #365a6a; /* Matches social icons' default color */
    font-weight: 500;
    transition: color 0.2s ease, transform 0.2s ease;
  }
  .arrow-link:hover {
    color: #2a4552; /* Slightly darker on hover */
    transform: translateX(5px); /* Subtle slide effect*/
  }
  .arrow-link__text {
    margin-right: 0.1rem; /* Space between text and icon */
    color: #e82a2a;
    font-size: 20px;
  }
  .arrow-link__icon svg {
    width: 24px; /* Smaller than social icons for balance */
    height: 24px;
    fill: currentColor; /* Inherits link color */
  }

.footer-top__links
 {
    width: 22%;
}

.link-list
 {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding-left: 0;
    text-align: left;
}
.button {
    font-family: "Liberator", sans-serif;
    text-transform: uppercase;
    font-weight: 500;
    border-radius: 10px;
    color: #041f3a;
    display: inline-block;
    font-size: 20px;
    letter-spacing: .05;
    line-height: 1;
    text-decoration: none;
    transition: all .3s;
}
.button--big {
    padding: 22px;
    margin-bottom: 20px;
}

.button--red {
    background: var(--cva-red);
    color: rgb(255, 236, 237);
}

.button:hover {
    background: #a1252d;  /*dark red*/
    color: #ffeced;
}

        footer .cva-bottom-footer {
            background: var(--cva-blue);    
        }

        footer .cva-bottom-footer * {
            color: #fff;
        }

        footer .cva-bottom-footer p {
            font-size: 15px;
                width: 100%;
                padding-top: 16px;
                padding-bottom: 16px;
                margin-top: auto;
        }
        
        .footer-content-bottom {
            flex: 1 0 auto
        }

        @media (max-width: 480px) {
            
            footer .footer-top {
                margin: 0;
                padding: 0;
            }

            footer .cva-bottom-footer p {
                margin: 0;
                padding: 0;
                line-height: 16px;
            }

            .privacy-policy-ct {
                margin-bottom: 5px;
                margin-top: 5px;
            }
        }

@media (max-width: 768px) {
  .footer-top__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-top__branding,
  .footer-top__content,
  .footer-top__links {
    width: 100%;
    max-width: 500px;
    margin-bottom: 20px;
  }

  /* Bigger centered logo */
  .footer-top__logo img {
    width: 150px;
    height: auto;
    margin: 0 auto 20px;
    display: block;
  }

  /* Social icons layout (horizontal & centered) */
  .footer-top__social {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
  }

  .social-menu__list {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 12px; /* spacing between icons */
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .social-menu__list li {
    display: inline-block;
  }

  .social-menu__list svg {
    width: 40px;
    height: 40px;
    color: #1e1e1e; /* icon color - adjust if needed */
  }

  .footer-top__content h3.footer-heading {
    font-size: 20px;
    margin-bottom: 10px;
  }

  .footer-top__copy {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 20px;
    padding: 0 10px;
  }

  .footer-top__cta {
    margin-bottom: 30px;
  }

  .arrow-link {
    font-size: 16px;
    font-weight: bold;
    color: #c00;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
  }

  .arrow-link__icon {
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
  }

  .footer-top__links {
    margin-bottom: 40px;
  }

  .link-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
    list-style: none;
    align-items: center;
  }

  .link-list__item {
    width: 100%;
    max-width: 280px;
  }

  .link-list__item .button {
    width: 100%;
    padding: 14px 20px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
  }

  /* Bottom footer adjustments */
  .footer-content-bottom .container-md {
    text-align: center;
  }

  .footer-content-bottom .row > div {
    margin-bottom: 10px;
  }

  .privacy-policy-ct a {
    margin: 0 8px;
  }
}



/* Media query Styles */
@media (max-width: 767px) {
  footer .small-only-text-center {
    text-align: center;
  }

  header .container ul>li>a,
  header .container .navbar-nav>li>a,
  .navbar .container ul>li>a,
  .navbar .container .navbar-nav>li>a,
  header .container ul>li>a:hover,
  header .container .navbar-nav>li>a:hover,
  .navbar .container ul>li>a:hover,
  .navbar .container .navbar-nav>li>a:hover,
  header .container ul>li .dropdown-menu li a,
  header .container .navbar-nav>li .dropdown-menu li a,
  .navbar .container ul>li .dropdown-menu li a,
  .navbar .container .navbar-nav>li .dropdown-menu li a {
    color: #fff;
  }

  header .container::before,
  header .container::after,
  .navbar .container::before,
  .navbar .container::after {
    content: "";
  }

  header .container .logo-toggle,
  header .container .navbar-header,
  .navbar .container .logo-toggle,
  .navbar .container .navbar-header {
    padding: 0 5px;
    height: auto;
  }

  .volunteer-name {
    margin-top: 50px;
  }

  .navbar-toggle .collapsed {
    margin-bottom: -25px;
  }
}

/* https://cv4a.actcentr.com/indexnew. For hidding the 'Attend Events' using the href Id unique . */
#actions-section-nav > div > a[href="#actiontab_2558-section"] {
  display: none;
}

/* https://cv4a.actcentr.com/indexnew . For hidding the 'Attend Events' section. */
#actiontab_2558-section {
  display: none;
}

.event-title-container h1, .event-subheader {
    font-family: "Varisse Sans", sans-serif;
    color: var(--secondary-color) !important;
}

 /*# sourceMappingURL=style.css.map */