@-ms-viewport{width:device-width}body{opacity:1;transition:2s opacity}h1,h2,h3,h4,h5,h6,.mockH1,.mockH2,.mockH3,.mockH4,.mockH5,.mockH6{font-family:"Roboto",sans-serif}h1,.mockH1{font-size:36px;line-height:38px;font-weight:300}h2,.mockH2{font-size:28px;line-height:30px;font-weight:300}h3,.mockH3{font-size:24px;line-height:26px;font-weight:300}p,li{font-family:"Roboto",sans-serif;line-height:1.75}a,button,input{outline:medium none !important;color:#d00000}.white{color:#fff}.redLarge{color:#d00000;font-size:24px}.redMedium{color:#d00000;font-size:18px}.redSmall{color:#d00000;font-size:16px}.darkGreyLarge{color:#92908e;font-size:24px}.darkGreyMedium{color:#92908e;font-size:18px}.darkGreySmall{color:#92908e;font-size:16px}.lightGreyLarge{color:#a5a4a2;font-size:24px}.lightGreyMedium{color:#a5a4a2;font-size:18px}.lightGreySmall{color:#a5a4a2;font-size:16px}.banner_content h2{font-size:70px;font-weight:700;line-height:75px;font-family:'Arial Black', 'Arial Bold', sans-serif}.hoverNone:hover{color:#fff;text-decoration:none}.card-header.active{background:#92908e;color:white}.card-body .card-header{margin-left:10px}.card-body .card-header h6 a{font-size:14px}.card{border:none;border-bottom:2px solid #efefef !important}.card .card{border:none;border-bottom:1px solid #efefef !important}.events .blog_img img{height:250px;width:100%;object-fit:cover}.heading_s6 .sub_title{font-size:40px;color:#000;opacity:0.09;text-transform:uppercase;font-weight:bold;line-height:1;margin-bottom:-20px}.spacer10{clear:both;height:10px;width:100%}.spacer5{clear:both;height:5px;width:100%}.spacer30{clear:both;height:30px;width:100%}.pad20{padding-top:20px;padding-bottom:20px}.pad30{padding-top:30px;padding-bottom:30px}.closer{clear:both}.navbar-expand-lg .navbar-nav>li>.nav-link{font-weight:500}.navbar-expand-lg .navbar-nav li .nav-link{font-family:"Roboto Condensed",sans-serif;font-size:16px}.navbar-expand-lg .navbar-nav li .dropdown-menu li a{font-size:16px;text-transform:uppercase}.blog_thumbs .blog_img{float:left;width:20%}li.portfolio-item{box-shadow:2px 2px #ececec}.work_col3>li{width:32.33%;float:left;margin-right:.95% !important;display:inline-block}h6.blog_title{height:31px}.guts ul{margin:10px 0 10px 40px}.guts ul li{margin-left:0px}.guts p{margin:10px 0}.guts h2,.guts h3,.guts h4,.guts h5,.guts h6{margin:15px 0 10px}.guts h2{font-weight:700;font-size:24px}.guts h3{font-weight:600;font-size:20px}.guts h4{font-weight:500;font-size:18px}.guts h5{font-weight:400;font-size:16px}.guts table tr:nth-child(even){background:#f3f3f3}.guts table td{padding:10px 0}.guts table td:first-child{padding-left:5px}.guts table td:last-child{padding-right:5px}.guts a{color:#000;text-decoration:underline;text-decoration-color:#d00000}.submenu .accordion .card-header.noArrow a:after{content:""}.submenu .accordion .card-body{padding:0}.submenu .accordion .card-header a{padding:10px 20px 10px 10px;display:block;font-family:"Roboto Condensed",sans-serif;text-transform:uppercase;font-size:16px}.submenu .accordion .accordion .card{border:none !important}.submenu .accordion .accordion .card .card-header{border:none !important}.submenu .accordion .accordion .card .card-header a{padding:10px 20px 10px 15px}.submenu .accordion .accordion .card .card-body .card-header{background:#f5f5f5;padding:0 0 0 5px}.submenu .accordion .accordion .card .card-body .card-header h6 a{font-style:italic;font-size:16px;font-weight:400;font-family:"Roboto Condensed",sans-serif;text-transform:uppercase}.team .team_box ul.social_icons{height:40px}.team_img img{height:290px;width:100%;object-fit:contain}.redBacker{background:#d00000}.redBacker a{border-left:2px #380000 solid;border-right:2px #380000 solid;color:#3c0000;color:white !important}.redBacker a:hover{color:#d00000 !important}.redBacker:hover{background:#dadada}.post_date{top:236px;background-color:#f0222c;text-transform:capitalize}.row img{max-width:100%}.section-title:nth-child(odd) .title-effect::before{background:#a5a4a2}.theme-bg{background:#92908e}.mega-menu .menu-links>li>a:hover{color:#1066c6}::selection{background:#2f59a7;color:#fff;text-shadow:none}.button{background:#d00000;padding:12px 20px;font-size:13px;letter-spacing:1px;font-family:'Montserrat', sans-serif;border:0;color:#ffffff;text-transform:uppercase;font-weight:400;display:inline-block;border-radius:30px;text-align:center;border:2px solid #d00000}.cta{background-color:rgba(38,34,98,0.05)}.email2{display:none}input[type="text"],input[type="email"],input[type="url"],input[type="password"],input[type="search"],input[type="tel"],input[type="number"],textarea,select{background:#f2f2f2;border:none;border-bottom:1px solid transparent;border-radius:0;color:rgba(17,17,17,0.5);padding:5px 25px;width:100%;margin-bottom:20px}select{padding:10px 20px}input[type="submit"]{background:#d00000;border:0;border-radius:2px;color:#fff;font-family:Montserrat,"Helvetica Neue",sans-serif;font-weight:700;line-height:1;padding:13.5px 14px 12.5px;text-transform:uppercase}.portfolio_style1 .portfolio_item::before,.portfolio_style2 .portfolio_content,.portfolio_style3 .portfolio_content,.blue_overlay_bg::before,.portfolio_style5 .portfolio_content,.instafeed li a::before,.bg_blue_transparent{background-color:rgba(171,171,171,0.8)}.testimonial .heading_s4 .sub_title{font-size:80px}.blog_img img{transition:all 0.5s ease-in-out;width:49%;float:right;margin-left:1%;margin-bottom:15px}.blog_img a img{height:179px;object-fit:contain}.post_footer .post_img img{width:80px;height:80px;object-fit:contain}.class-detail .owl-item img{height:150px;object-fit:contain}.class-detail .overlay_bg2::before{background:none}.event-detail .overlay_bg2::before{background:none}.sponsors .sponsor_row img{width:100%;height:250px;object-fit:contain}.light_gray_bg{background-color:#fbfbfb}.team_title{min-height:112px;display:block;color:#5f020c}.cl_logo_slider .owl-stage-outer{top:30px}.cl_logo_slider .owl-item img{width:160px;height:160px;object-fit:contain}.accordion .card-header a::after{content:"\f462"}.accordion .card-header a.collapsed:after{content:"\f2c7"}.sumptim{left:-264px;left:-192px}.dropdown-menu{display:block}.blog_meta li{font-size:14px}@media screen and (min-width: 992px){.guts{padding-left:44px !important}}@media screen and (max-width: 1023px){.submenu{display:none}}@media screen and (min-width: 1024px) and (max-width: 1198px){.submenu{min-width:190px;width:190px}.guts{max-width:835px;width:835px;flex:0 0 770px}}@media screen and (min-width: 991px) and (max-width: 1198px){.submenu{min-width:190px;width:190px}.guts{max-width:835px;width:835px;flex:0 0 770px}h6.blog_title{height:51px}}@media screen and (max-width: 767px){.submenu{display:none}body{overflow-x:hidden}.testimonial_slider{max-width:100%}.testimonial .heading_s4 .sub_title{font-size:60px;width:100%;overflow-x:hidden}}
/*# sourceMappingURL=appeal.css.map */
.dtHorizontalWrapper {
  max-width: 1024px;
}
#dtHorizontal th, td {
  white-space: nowrap;
}

#dtHorizontal th{color:red;}

table.dataTable thead .sorting:after,
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc_disabled:after,
table.dataTable thead .sorting_desc_disabled:before {
 bottom: .5em;
}
.top-menu{max-width:1340px;}
#accordion{width:100%;border:1px solid #D8D8D8;border-bottom:none;}
#accordion h5{color:#d00000;}
#accordion ul{margin-bottom:1rem;}
#accordion .card .card-header h5:after {
  content: "\f107";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  float: right;
}
#accordion .card .collapsed h5:after {
  content: "\f106";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  float: right;
}
#accordion .form-check-label{cursor:pointer;}
.ul-styling{list-style-position:inside;}
#more {display: none;}
.card-header{cursor:pointer;}
.checkbox-header{background-color:#d00000; color:#fff;padding:10px;font-size:20px;}
.checkbox-header > .form-check-label{color:#fff;}
.card-body ul{list-style-position:inside;}
.bottom-buttons{position:fixed;right:12%;bottom:0px;z-index:20; white-space:nowrap;display:none;}
#initial-bottom-button{margin-top:20px;}
.submit-sponsorship{float:right;}
.total-pledged{width:200px;background-color:#92908E;border-radius:15px 15px 0px 0px;color:#fff;text-align:center;font-size:30px;float:left;margin-right:50px;}
.form-check-input-width{width:15px;height:15px;}
.clear{clear:both;}
#dataTable_length{display:none !important;}
#dataTable_filter > label > span{margin-right:10px;margin-top:-20px;}

/*2026 Member Benefits page*/
.benefits-section {
	padding: 20px;
	max-width: 900px;
	margin: auto;
}

.slice-hit {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    top: 0;
    left: 0;
    cursor: pointer;
    transition: transform 0.25s ease;
    z-index: 3;
    background: transparent;
}

.slice-hit.pop {
    transform: translate(var(--tx), var(--ty));
}

.pie-chart {
  position: relative;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: white;
  --inner-size: 70px;
}

.slice-tn-main,
.slice-wcar-main,
.slice-nar-main {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  clip-path: circle(50% at 50% 50%);
  transform-origin: 50% 50%;
  cursor: pointer;
  color: white;

  --angle: 0deg;

  transition:
    background 1.5s ease-out,
    transform .3s ease,
    filter .3s ease;
}

.slice-wcar {
  background: conic-gradient(
    #D00000 0deg,
    #D00000 var(--angle),
    transparent var(--angle),
    transparent 360deg
  );
  transform: rotate(-90deg);
}

.slice-nar {
  background: conic-gradient(
    #000 0deg,
    #000 var(--angle),
    transparent var(--angle),
    transparent 360deg
  );
  transform: rotate(80deg);
}

.slice-tn-realtors {
  background: conic-gradient(
    #92908E 0deg,
    #92908E var(--angle),
    transparent var(--angle),
    transparent 360deg
  );
  transform: rotate(200deg);
}

.pie-chart.animate .slice-wcar-main {
  --angle: 165deg;
}

.pie-chart.animate .slice-nar-main {
  --angle: 115deg;
  transition-delay: .3s;
}

.pie-chart.animate .slice-tn-main {
  --angle: 65deg;
  transition-delay: .6s;
}

.pie-center {
  position: absolute;
  inset: var(--inner-size);;
  background: #fff;
  border-radius: 50%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: inset 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pie-chart:hover {
  --inner-size: 80px;
  transition: --inner-size 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wcar-text,
.nar-text,
.tn-text {
  position: absolute;
  color: #fff;
  text-align: center;
  font-size: 18px;
  font-weight:600;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8), 0 2px 4px rgba(0,0,0,0.6);
}

.wcar-text { top: 20px; left: 140px; }
.nar-text  { top: 220px; left: 235px; }
.tn-text   { top: 220px; }

.annual-dues{color:#7f8c8d;font-weight:600;}
.annual-dues-amount{color:#000;font-size:32px;font-weight:800;}

.pie-center,
.wcar-text,
.nar-text,
.tn-text {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity .6s ease, transform .6s ease;
}

.pie-chart.animate .pie-center {
  opacity: 1;
  transform: scale(1);
  transition-delay: 1.2s;
}

.pie-chart.animate .wcar-text {
  opacity: 1;
  transform: scale(1);
  transition-delay: 1.4s;
}

.pie-chart.animate .nar-text {
  opacity: 1;
  transform: scale(1);
  transition-delay: 1.6s;
}

.pie-chart.animate .tn-text {
  opacity: 1;
  transform: scale(1);
  transition-delay: 1.8s;
}

/*RIGHT HAND DIV*/
/* Base styles - unchanged from your original code */
.dues-calc.overlap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.step {
  position: relative;
  margin-top: -30px;
}

.step:first-child {
  margin-top: 0;
}

.dues-circle {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 8px solid #D00000;
  background: #cfcfcf;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 16px;
  z-index: 1;
  
  /* Animation properties */
  opacity: 0;
  transform: scale(0.5) rotate(-180deg);
  animation: circleAppear 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  
  /* Add transition for hover effects */
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dues-circle .amount {
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 6px;
  color:#212529;
  
  /* Animation properties */
  opacity: 0;
  transform: translateY(20px);
  animation: amountAppear 0.6s 0.8s ease-out forwards;
  
  /* Transition for hover */
  transition: all 0.4s ease;
}

.dues-circle .label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: #212529;
  
  /* Animation properties */
  opacity: 0;
  transform: translateY(20px);
  animation: labelAppear 0.6s 1s ease-out forwards;
  
  /* Transition for hover */
  transition: all 0.4s ease;
}

.operator {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #000;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 42px;
  font-weight: 800;
  margin: -21px 0;
  z-index: 5;
  
  /* Animation properties */
  opacity: 0;
  transform: scale(0);
  animation: operatorAppear 0.5s 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
  
  /* Add transition for hover effects */
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.first-plus {
  margin-top: -60px;
  margin-right: -150px;
  
  /* Staggered animation */
  animation-delay: 1.2s;
}

.second-plus {
  margin-top: -100px;
  
  /* Staggered animation */
  animation-delay: 2.2s;
}

.operator.equals-circle {
  font-size: 42px;
  margin-top: -60px;
  
  /* Staggered animation */
  animation-delay: 3.2s;
}

.tn-realtors-circle {
  margin-right: -200px;
  
  /* Staggered animation */
  animation-delay: 0.3s;
}

.nar-circle {
  margin-top: -50px;
  margin-left: -170px;
  
  /* Staggered animation */
  animation-delay: 1.7s;
}

.step.total-circle .dues-circle {
  background: #bfbfbf;
  animation-delay: 2.7s;
}

.step.total-circle .dues-circle .amount {
  animation-delay: 3.5s;
}

.step.total-circle .dues-circle .label {
  animation-delay: 3.7s;
}

.step.total-circle .amount {
  font-size: 46px;
}

.total-circle {
  margin-right: -150px;
  margin-top: -50px;
}

/* Animation keyframes */
@keyframes circleAppear {
  0% {
    opacity: 0;
    transform: scale(0.5) rotate(-180deg);
  }
  70% {
    opacity: 1;
    transform: scale(1.05) rotate(10deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes amountAppear {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes labelAppear {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes operatorAppear {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  70% {
    opacity: 1;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* SIZE ENLARGEMENT HOVER EFFECTS - COLORS UNCHANGED */
.dues-circle:hover {
  transform: scale(1.15) translateY(-5px);
  box-shadow: 0 15px 30px rgba(208, 0, 0, 0.4);
  cursor: pointer;
  z-index: 10;
  border-width: 8px; /* Keep original border width */
}

.dues-circle:hover .amount {
  font-size: 46px;
  /* Keep original color - removed color property */
}

.dues-circle:hover .label {
  font-size: 14px;
  font-weight: 600; /* Keep original weight */
  /* Keep original color - removed color property */
}

.operator:hover {
  transform: scale(1.25);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  z-index: 10;
  /* Keep original background and color */
  font-size: 46px;
}

.operator.equals-circle:hover {
  /* Keep original background and color */
  font-size: 48px;
}

/* Special hover effect for total circle - size only */
.step.total-circle .dues-circle:hover {
  transform: scale(1.2) translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  /* Keep original background and border colors */
}

.step.total-circle .dues-circle:hover .amount {
  font-size: 52px;
  /* Keep original color */
}

/* Continuous subtle animation for the total circle */
.step.total-circle .dues-circle {
  position: relative;
}

.step.total-circle .dues-circle::after {
  content: '';
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  border-radius: 50%;
  border: 2px solid transparent;
  animation: totalGlow 4s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: -1;
}

@keyframes totalGlow {
  0% {
    box-shadow: 0 0 5px rgba(191, 191, 191, 0.5);
    border-color: rgba(191, 191, 191, 0.3);
  }
  100% {
    box-shadow: 0 0 20px rgba(191, 191, 191, 0.8);
    border-color: rgba(191, 191, 191, 0.6);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .dues-circle {
    width: 150px;
    height: 150px;
  }
  
  .dues-circle .amount {
    font-size: 36px;
  }
  
  .dues-circle:hover {
    transform: scale(1.12) translateY(-3px);
  }
  
  .dues-circle:hover .amount {
    font-size: 40px;
  }
  
  .operator {
    width: 60px;
    height: 60px;
    font-size: 36px;
  }
  
  .operator:hover {
    transform: scale(1.2);
    font-size: 40px;
  }
}

.benfits-accordion-item {
	border-bottom: 1px solid #ddd;
}
.benefits-accordion-title {
	cursor: pointer;
	padding: 16px 0;
	font-size: 18px;
	font-weight: 600;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.benefits-accordion-title:after {
	content: "+";
	font-weight: 700;
	font-size: 22px;
}
.benefits-accordion-title.active:after {
	content: "−";
}

.benefits-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.3s ease;
    padding: 0 0; /* will expand when open */
}

.benefits-accordion-title.active + .benefits-accordion-content {
    padding: 15px 0;
}

/* Benefit list formatting */
.benefits-accordion-content ul {
	padding-left: 20px;
}

.benefits-accordion-content ul li{padding-bottom:20px;}
.benefits-accordion-content ul li ul li{padding-bottom:inherit;}

/* CSS */
.button-custom-red {
  align-items: center;
  background-clip: padding-box;
  background-color: #d00000;
  border: 1px solid transparent;
  border-radius: .25rem;
  box-shadow: rgba(208, 0, 0, 0.1) 0 2px 4px 0; /* Slight red tint */
  box-sizing: border-box;
  color: #fff !important;
  cursor: pointer;
  display: inline-flex;
  font-size: 16px;
  font-weight: 600;
  justify-content: center;
  line-height: 1.25;
  margin: 0;
  min-height: 3rem;
  padding: calc(.875rem - 1px) calc(1.5rem - 1px);
  position: relative;
  text-decoration: none;
  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1); /* Smoother easing */
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: baseline;
  width: auto;
}

.button-custom-red:hover,
.button-custom-red:focus {
  background-color: #b30000; /* Slightly lighter darkening */
  box-shadow: rgba(208, 0, 0, 0.25) 0 6px 16px; /* More pronounced red shadow */
  transform: translateY(-2px); /* Slightly more lift */
}

.button-custom-red:active {
  background-color: #8a0000; /* Deeper dark red */
  box-shadow: rgba(208, 0, 0, 0.2) 0 1px 3px;
  transform: translateY(0);
}