/*---
* 
* Primary Stylesheet for The Spencer Davis Foundation
* Author: Matthew Boyles
* Author URL: https://www.embeemedialab.com
* 
---*/

@font-face {
  font-family: 'ClashDisplay-Semibold';
  font-weight: 600;
  src: url("/assets/fonts/ClashDisplay-Semibold.woff") format("woff");
}



/*-----
** home.hero.area **
-----*/
.home-display{
  background: rgba(0, 0, 0, 00.7);
  position: relative;
  z-index: 1;
  padding: 95px 0px 170px; 
}
@media only screen and (max-width: 576px) {
  .home-display {
    padding-top: 100px; 
  }
}
.home-display:before{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(/assets/img/home/hearts.pattern.one.svg) repeat;  
  
  opacity: 0.06;
  z-index: -1;
}
.home-banner-content h2{
  font-size: 4rem;  
  color: #fff;
  font-family: 'ClashDisplay-Semibold';
  font-weight: 600;
  line-height: 80px; 
  letter-spacing: -1px;
  margin-bottom: 28px;
}
@media only screen and (max-width: 576px) {
  .home-banner-content h2 {
    font-size: 3rem; 
    line-height: 1;
  }
}
.home-banner-content p{
  color: #FFF;
  font-family:'Inter', serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  opacity: 0.8;
  margin-bottom: 40px;
}
@media only screen and (max-width: 576px){
  .home-banner-content p{
    display: none;
  }
}
.home-banner-content .theme_btn {
  display: inline-block;
  border-radius: 4px;
  background: #990000; 
  padding: 16px 32px;
  font-family:'Inter', serif;
  color: white;
}
.home-banner-content .theme_btn i{
  transform: rotate(-45deg);
}
.banner-img{
  border-radius: 20px;
  background: transparent;
  padding: 98px 76px 98px 76px; 
  position: relative;
  margin-left: 100px;
}
@media only screen and (max-width: 576px){
  .banner-img {
    padding: 0;
    margin-left: 0;
    justify-content: center;
    display: flex; 
  }
}
.home-display .img{
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px; 
}
@media only screen and (max-width: 576px) {
  .home-display .img {
    display: none; 
    border-radius: 16px;  
  }
}
.home-display .mob {
  display: none;
  border-radius: 16px;
}
@media only screen and (max-width: 576px) {
  .home-display .mob {
    display: flex;
    padding: 25px 0;   
  }
}
.banner-img .shap{
  position: absolute;
}
@media only screen and (max-width: 576px) {
  .banner-img .shap {
    display: none;
  }
}
.banner-img .shap.one{
  top: 0; 
  left: -100px; 
}
.banner-img .shap.one{
  top: 50px;
  left: 400px;   
}
.banner-img .shap.two{
  bottom: -20px;
  left: 0px; 
}
.note{
  font-size: 10px;
  font-style: italic;
} 
/*-----
*** intro-section ***
-----*/
.intro-area{
  padding: 120px 0;
}
@media (max-width: 576px) {
  .intro-area {
    padding: 25px 0;
  }
}
.intro-area.section-bg{
  background: #F7F8FC;
}
.intro-img{
  position: relative;
}
.intro-img .shape{
  position: absolute;
  left: -38px;
  top: -53px;
}
.intro-img .shape.left{
  left: 40px;
  bottom: 100px;
  border-radius: 26px;
  top: auto;
  box-shadow: 0px 100px 170px 40px rgba(90, 82, 128, 0.28);
}
.intro-img .shape.right{
  right: 40px;
  top: 0px;
  z-index: -1;
  left: auto;
}
.into-text{
  font-size: 1.2rem;
  line-height: 1.5; 
}
/*-----
** marque-slider **
-----*/
.marque-slider{
  padding-top: 120px;
  overflow: hidden;
}
@media (max-width:576px){
  .marque-slider {
    padding-top: 125px;  
  }
}
.marquee {
  width: 111%; 
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  left: -12px;
}
.marquee.red{
  background: #990000;
  transform: rotate(4deg);
  z-index: 1;
}
@media (max-width:576px){
  .marquee.red{
    transform: rotate(11deg); 
  }
}
.marquee.black{
  background: #121212;
  transform: rotate(-5deg);
  z-index: 0; 
  bottom: 100px;
}
@media (max-width:576px){
  .marquee.black{
    transform: rotate(-11deg);   
  }
}
.marquee .slide{
  width: auto;
  display: inline-block;
  padding: 1rem;
}
.marquee .slide h2{
  font-weight: 600;
  font-size: 42px;
  line-height: 48px;
  color: #fff;
  font-family: 'ClashDisplay-Semibold';
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
  padding-top: 0;
}
.marquee .slide img {
  vertical-align: bottom;
  margin-right: 30px;
}
/*-----
** link-box-section **
-----*/
.link-box-area{
  padding: 120px 0px 90px;
}
@media (max-width:576px){
  .link-box-area{
    padding: 25px 0 50px; 
  }
}
.link-box-item {
  border-radius: 8px; 
  background: #f3f3f3;
  padding: 35px;
  transition: all 0.25s linear;  
  margin-bottom: 30px;
  transition: box-shadow 0.2s ease-in-out;
}
.link-box-item h3{
  color: #121212; 
  font-size: 26.462px;
  font-weight: 800;
  line-height: 37.487px;
  margin-bottom: 18px;
  margin-top: 22px;
}
.link-box-item p{
  color: #121212;
  font-size: 17.641px;
  font-weight: 400;
  line-height: 30.872px
}
.link-box-btn{
  color: #900; 
  font-size: 17.641px;
  font-weight: 600;
  line-height: 33.077px;
  margin-top: 30px;
  display: inline-block;
  transition: all 0.3s linear;
}
.link-box-btn i{
  transition: margin 0.2s linear;
}
.link-box-btn:hover{
  color: #121212;
}
.link-box-btn:hover i{
  margin-left: 5px;
}
.link-box-item:hover {
  background:#990000;
}
.link-box-item:hover h3,.link-box-item:hover p,.link-box-item:hover .link-box-btn{
  color:#fff;
}
.link-box-item:hover {
  box-shadow: rgba(0, 0, 0, 0.4) 0px 20px 30px;  
}
.link-box-item:hover svg path,.link-box-item:hover svg circle{
  stroke: #fff;
}
/* fact-area  */
.fact-area{
  background: #900;
  padding: 105px 0px;
  position: relative;
  z-index: 1;
}
@media (max-width:576px) {
  .fact-area{
    display: none;
  }
}
.fact-area::before{
  content: "";
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
.fact-area h2 {
  font-family: 'ClashDisplay-Semibold';
  line-height: 1.1;
  font-size: 3.3rem;
  text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);
}
/*-----
** features.section **
-----*/
.features-area{
	padding:40px 0 70px;
}
.features-item-three.numbers .features_list .f_list_item {
  counter-increment: css-counter 1;
}
.features-item-three.numbers .features_list .f_list_item h4:before{
  content: "0" counter(css-counter)". "; 
  color: #900;
}
.features-item-three .features-content .f_list_item h4{
  font-family: 'ClashDisplay-Semibold';
  font-size: 30px;
  padding-bottom: 10px; 
}
.features-item-three .features-content .f_list_item p{
  color: #121212;
  font-size: 20px;
  font-weight: 400; 
  line-height: 32px;
  opacity: 1;
  padding-bottom: 15px; 
}
/*-----
** about.page **
-----*/
.about-us {
	padding: 70px 0 100px;
}
.about-us .modern-img-feature,
.about-us .about-content{
	margin-top:30px;
}
.about-content h1 {
  font-family: 'ClashDisplay-Semibold';
  font-size: 32px;
  position: relative;
  text-align: left;
  display: inline-block;
  text-transform: capitalize;
  color: #121212;
  line-height: initial;
  line-height: 42px;
  margin-bottom: 25px; 
}
.about-content p{
	margin-bottom:20px;
}
@media (maxwidth:576px){
  .about-content p{
    margin-bottom: 10px; 
  }
}
.about-content p:last-child{
	margin:0;
}
.about-content .button{
	margin-top:20px;
}
.about-img-feature {
  position: relative;
  display: inline-block;
  margin-bottom: 20px;
}
.about-img-feature:before {
  content: "";
  position: absolute;
  left: -20px;
  top: 20px;
  width: 100%;
  height: 100%;
  background: #900;
  border-radius: 16px; 
}
.about-img-feature img{
z-index:400;
position:relative;
  border-radius: 16px; 
}
.about-img-feature .video-play a {
position: absolute;
top: 50%;
left: 50%;
width: 80px;
z-index: 333;
height: 80px;
color: #900;
font-size: 30px;
text-align: center;
line-height: 80px;
background: #fff;
margin: -40px 0 0 -40px;
z-index: 2500;
border-radius: 100%;
}
.about-img-feature .video-play:hover a{
background:#900;
color:#fff;
}
.side.overlay:before {
  width: 80%;
  background: #900;
  transform: rotate(74deg);
  left: -403px;
  z-index: 0;
  opacity: 1;
}
.break-img-box{  
  padding: 30px;
  max-height: 500px; 
}
@media (max-width:576px){
  .break-img-box{
    padding: 0; 
  }
}
.break-img {
  border-radius: 16px;
  display: inline-block; 
  transition: all 0.3s ease;
  animation: fadeInUp 1s both0.2s;
  box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}
/*-----
** mission.page **
-----*/
.mission-statement{
  padding: 25px;

}
.mission-heading{
  padding: 20px;
  color: #121212;
  font-size: 30px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
}
.mission{
  color: #990000; 
  font-weight: 700;
}
.mission-img-box{  
  padding: 30px;
  max-height: 500px; 
}
@media (max-width:576px){
  .mission-img-box{
    padding: 10; 
  }
}
.mission-img {
  border-radius: 16px;
  display: inline-block; 
  transition: all 0.3s ease;
  animation: fadeInUp 1s both0.2s;
  box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
} 
.counterup{
	padding:50px 0 80px;
	background:#121212;
}
.counterup .title-bg {
	opacity: 0.2;
	color: #fff;
}
.single-counter {
	margin-top:30px;
    position: relative;
    padding-left: 90px;
}
.single-counter .conter-content {
    border-left: 1px solid #ffffff36;
    padding-left: 20px;
}
.single-counter .icon {
    position: absolute;
    left: 0;
}
.single-counter .icon:before {
    content: "";
    position: absolute;
    width: 70px;
    height: 70px;
    background: #fff;
    z-index: 3;
    border-radius: 100%;
    opacity: 0.3;
    top: 4px;
    left: -7px;
	-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	transition:all 0.3s ease;
}
.single-counter:hover .icon:before{
	background:#121212; 
	left:0;
	top:0;
	opacity:0;
	visibility:hidden;
}
.single-counter .icon i {
    color: #ff0000;
    width: 70px;
    height: 70px;
    background: #fff;
    text-align: center;
    line-height: 70px;
    border-radius: 100%; 
    z-index: 33;
    font-size: 25px;
    position: relative;
	-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	transition:all 0.3s ease;
}
.single-counter:hover .icon i{
	background:#990000;
	color:#fff;
}
.single-counter h3 {
    font-size: 30px;
    font-weight: 500;
    color: #fff;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.single-counter h3 span {
    display: inline-block;
    color: #ff0000;
    margin-left: 5px;
}
.single-counter p {
    color: #eee;
    font-size: 15px;
    text-transform: capitalize;
    font-weight: 500;
    margin-top: 2px;
}
/*-----
**contact.page **
-----*/
.contact-us{
	padding:70px 0 100px;
}
.contact-form-area {
	background: #fff;
	padding: 40px;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; 
	border-top: 4px solid #900; 
}
.contact-form-area h4 {
	font-size: 22px;
	font-weight: 600;
}
.contact-form-area .form-group{
	margin:0;
	margin-top:20px;
}
.contact-form-area .form-group input {
    height: 50px;
    border: 1px solid rgba(204, 204, 204, 0.58);
    width: 100%;
    display: block;
    border-radius: 0px;
    padding: 0px 40px 0 15px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
    font-size: 14px;
	font-weight:normal;
}
.contact-form-area .form-group input:focus{
	border-color:#7e868f;
}
.contact-form-area .form-group input:hover{
	border-color:#7e868f;
}
.contact-form-area .form-group textarea {
    height: 170px;
    border: 1px solid #dfdfdf;
    width: 100%;
    display: block;
    border-radius: 5px;
    padding: 15px;
    resize: none;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
    border-radius: 0px;
    padding-right: 40px;
	font-weight:normal;
}
.contact-form-area .form-group{
	position:relative;
}
.contact-form-area .form-group .icon {
    position: absolute;
    right: 15px;
    z-index: 33;
    color: #990000;
    top: 12px;
}
.contact-form-area .form-group.button {
    text-align: center;
    margin: 10px 0 0 !important;
}
.contact-form-area .form-group.textarea .icon {
    top: 15px;
    right: 15px;
}
.form-btn{
  text-align: center;
	margin: 0;
	padding: 13px 32px;
	background: #900;
	color: #fff; 
	font-size: 20px;
  display: inline-block;
  border-radius: 8px;
  border: solid 2px #FFFFFF;
  cursor: pointer; 
}
/* Mail Success CSS */
.success .mail h2 {
	font-size: 30px;
	margin-bottom: 10px;
}
.success .mail h2 span {
	color: #F3A712;
}
.success .mail .bizwheel-btn {
	margin-top: 20px;
}
.success .mail .bizwheel-btn i{
	margin-right:10px;
}
.contact-box-main .contact-title h2 {
	font-size: 1.8rem;
	margin-bottom: 10px;

}
.contact-box-main .contact-title{
	margin-bottom: 20px;
} 
/*-----
** donate.page **
-----*/
.donate-section {
  padding:70px 0 100px;
}
.donate-content h1 {
  font-family: 'ClashDisplay-Semibold';
  font-size: 42px; 
  position: relative;
  text-align: left;
  display: inline-block;
  text-transform: capitalize;
  color: #121212;
  line-height: initial;
  line-height: 42px;
  margin-bottom: 25px; 
}
.donate-content p {
  font-size: 16px;
  color: #121212;
}
.donate-img{
  z-index:400;
  position:relative;
  border-radius: 16px;
  max-height: 400px;   
}
.donate-btn {
  background-color: #008CFF; /* Venmo blue */
  color: white;
  padding: 12px 20px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 5px;
  display: inline-block;
  transition: background 0.3s ease;
}

.donate-btn:hover {
  background-color: #0072cc; /* Darker Venmo blue */
}
.venmo-qr {
  width: 200px;
  margin-top: 15px;
}
.venmo-mobile-quick{
  display: none;
}
@media (max-width:576) {
  .venmo-mobile-quick {
    display: contents;
  }
}