:root {

          --card-w: 300px;
          --card-h: 440px;
          --card-gap: 30px;
        }


        .vl-title.text-anime-style-3 {
          display: flex !important;
          flex-wrap: wrap !important;
          max-width: 500px;

        }

        .vl-title.text-anime-style-3 .split-line {
          display: inline-block !important;
          white-space: nowrap !important;
          margin-right: 15px;
        }

        @font-face {
          font-family: poppin_normal;
          src: url(../fonts/poppin/Poppins-Black.ttf);
        }

        @font-face {
          font-family: poppin_light;
          src: url(../fonts/poppin/Poppins-Light.ttf);
        }

        @font-face {
          font-family: monserat;
          src: url(../fonts/Montserrat_Alternates/MontserratAlternates-Regular.ttf);
        }

        @font-face {
          font-family: monserat_extrabold;
          src: url(../fonts/Montserrat_Alternates/MontserratAlternates-ExtraBold.ttf);
        }

        @font-face {
          font-family: inter;
          src: url(../fonts/Inter_18pt-Regular.ttf);
        }


        @font-face {
          font-family: mea;
          src: url(../fonts/MeaCulpa-Regular.ttf);
        }



        .vl-hero-section-title p {
          font-family: 'monserat', sans-serif;
          font-weight: 500 !important;
          font-size: 1rem;
          letter-spacing: normal;
        }

        .vl-section-title4 .title {
          /* font-family: 'poppin_normal',sans-serif; */
          font-weight: 500 !important;
        }

        .vl-section-title4 .para,
        .vl-about-icon-box .vl-icon-content p,
        .vl-single-cause-box .vl-cause-content p,
        .vl-section-title-1 p {
          font-weight: 100 !important;
          /* font-family: sans-serif !important; */
          font-family: 'inter', sans-serif;
          font-size: clamp(1rem, 2vw, 16px);
          color: #555353cf;
        }

        .vl-single-cause-box .vl-cause-content p,
        .vl-section-title-1 p {
          line-height: 1.5;
        }

        .vl-causes-area.sp2 {
          padding: 30px 0 70px;
        }

        .vl-single-cause-box .vl-cause-content {

          padding-top: 5px;
          padding-bottom: 5px;
          margin-bottom: -35px;
        }

        .vl-single-cause-box .vl-cause-thumb {

          margin-bottom: 3px;
        }

        .casue-btnfooter {
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 10px 30px;
        }

        .vl-footer-widget-1 .vl-footer-content {
          font-weight: 100 !important;
          font-family: Arial, Helvetica, sans-serif !important;
          font-size: clamp(.5rem, 2vw, 14px);
          line-height: 1.5;
        }


        .hero-text {
          font-size: 22px;
          font-weight: 700 !important;
          font-style: italic;
          line-height: 50px;
        }


        .vl-about4 {
          background-image: url(assets/images/sylvia_website_bg.webp);
        }


        .row {
          display: flex;
          flex-wrap: wrap;
          gap: 30px 0
        }


        .vl-single-cause-box {
          display: flex;
          flex-direction: column;
          height: 100%;
          font-family: 'inter', sans-serif !important;
        }


        .vl-cause-content {
          flex-grow: 1;
          display: flex;
          flex-direction: column;
        }


        .casue-btnfooter {
          margin-top: auto;
          padding-top: 20px;
        }

        .vl-cause-thumb img {
          height: 250px;
          object-fit: cover;
          width: 100%;
        }




        .vl-cause-content p.cause-highlight {
          display: block;
          margin-top: 20px;
          font-weight: 900 !important;
          font-size: 1rem;
          color: #000;
          font-style: italic;
        }



        .vl-about4.sp2 {
          position: relative;
          overflow: hidden;
          background-color: #fff;
        }

        .vl-about4.sp2::before {
          content: "";
          position: absolute;
          top: -400px;
          left: -20%;
          width: 60%;
          height: 150%;
          background-image: url(../images/ig.png);
          background-size: cover;
          background-position: center;
          opacity: 0.15;
          z-index: 0;
          transform: rotate(216deg);
          animation: smoothFloat 8s ease-in-out infinite;
          pointer-events: none;

        }


        .vl-about4.sp2 .container {
          position: relative;
          z-index: 1;
        }


        @media (max-width: 1024px) {
          .vl-about4.sp2::before {
            width: 80%;
            left: -30%;
            top: -300px;
          }
        }


        @media (max-width: 767px) {
          .vl-about4.sp2::before {
            width: 150%;
            height: 120%;
            left: -50%;
            top: -100px;
            opacity: 0.1;
          }
        }


        @keyframes smoothFloat {

          0%,
          100% {
            transform: rotate(216deg);
          }

          50% {
            transform: rotate(215deg);
          }
        }

        .section-subtitle {
          font-family: 'cursive', sans-serif;
          color: #662583;
          font-weight: 600;
          font-size: 1.1rem;
          /* margin-bottom: 15px; */
          text-align: center;
        }



        .cwd.section-subtitle{
          font-family: 'mea', sans-serif;
             /* font-size: 3rem; */
              font-size: clamp(1.3rem, 5vw, 2.5rem);
        }

        .section-title {
          font-weight: 800;
          color: #0d2119;
          font-size: clamp(1.8rem, 5vw, 3rem);
          font-family: 'arial',sans-serif;
          /* margin-bottom: 25px; */
          text-align: center;
        }

        .section-desc {
          color: #6c757d;
          font-size: 0.95rem;
          line-height: 1.6;
          max-width: 650px;
          text-align: center;
          margin: 0 auto;
          padding: 0 15px;
          font-family: 'inter',sans-serif;
        }


        .scroll-container {
          overflow: hidden;
          width: 100%;
          padding: 40px 0;
          position: relative;
          mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
          -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
        }

        .scroll-track {
          display: flex;
          width: max-content;
          animation: infiniteScroll 25s linear infinite;
          gap: var(--card-gap);
        }

        @keyframes infiniteScroll {
          0% {
            transform: translateX(0);
          }

          100% {
            transform: translateX(calc(-50% - (var(--card-gap) / 2)));
          }
        }

        .scroll-container:hover .scroll-track {
          animation-play-state: paused;
        }


        .difference-card {
          width: var(--card-w);
          flex-shrink: 0;
        }

        .card-inner {
          width: 100%;
          height: var(--card-h);
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
          text-align: center;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: 60px 40px;
        }

        .bg-medical {
          background-image: url('../images/bg-one.png');
        }

        .bg-education {
          background-image: url('../images/bg-three.png');
        }

        .bg-food {
          background-image: url('../images/bg-two.png');
        }

        .icon-thumb {
          width: 75px;
          height: 75px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 20px;
        }

        .icon-medical {
          background: #ffb600;
        }

        .icon-education {
          background: #025829;
        }

        .icon-food {
          background: #000;
        }

        .icon-thumb img {
          width: 45%;
          filter: brightness(0) invert(1);
        }

        .card-inner h5 {
          font-weight: 800;
          color: #0d2119;
          font-size: 1.4rem;
          margin-bottom: 15px;
          white-space: normal;
        }

        .card-inner p {
          color: #5c6260;
          font-size: 0.95rem;
          line-height: 1.5;
          white-space: normal;
        }




















.vl-cta-form-wrapper {
    max-width: 600px;
    margin: 30px auto 0;
}

.cta-flex-form {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 8px;
    border-radius: 50px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.cta-flex-form input {
    flex: 1;
    border: none;
    padding: 10px 25px;
    outline: none;
    background: transparent;
}

.cta-flex-form .header-btn1 {
    white-space: nowrap;
    border-radius: 50px;
    padding: 12px 25px;
    display: inline-block;
}



.impact-header {
    color: var(--brand-purple);
    font-size: 2.5rem;
}

.impact-header img.hdlogo {
    height: 1.1em;
    width: auto;
}

.impact-subheading {
    max-width: 800px;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
}







        @media (max-width: 768px) {
          :root {

            --card-w: 240px;
            --card-h: 300px;
            --card-gap: 15px;
          }

          .icon-thumb {
            width: 55px;
            height: 55px;
            margin-bottom: 10px;
          }

          .card-inner {
            padding: 40px 25px;
          }

          .card-inner h5 {
            font-size: 1.1rem;
            margin-bottom: 8px;
          }

          .card-inner p {
            font-size: 0.8rem;
            line-height: 1.4;
          }

          .scroll-track {
            animation-duration: 18s;
          }
        }




      @media(max-width:767px){
          .flinks, #paymentMethods .col-4{
            flex: 0 0 auto;
           width: 50%;
          }
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
          
              .vl-section-title-1 .title {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }

  
    .date-event1 ul li .date {
      
    }

  
    .date-event1 ul li .year {
        font-size: 12px !important;
        line-height: 1.2 !important;
    }

   


   
    .sm-thumb img {
        max-height: 80px;
        object-fit: cover;
    }
    
    .vl-single-blog-box-content .title a, .vl-single-blog-box-content .details{
        font-size: 16px !important;
        margin-bottom: 5px !important;
    }
    
    .vl-single-cause-box .vl-cause-content{
    padding: 15px;
        
        
    }
    
    .vl-blog .vl-section-title-1 {
    padding: 4px;
}

.vl-blog-lar-thumb-bg{
    padding: 20px 15px;
}



    .gallery-grid-wrapper {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr); 
        gap: 15px !important;
        margin: 0 !important;
    }

  
    .gallery-grid-wrapper > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        margin-bottom: 0 !important; 
        padding: 0 !important;
    }

 
    .gallery-item-lg {
        grid-column: span 2;
    }


    .vl-single-box img {
        height: 200px;
        object-fit: cover;
        border-radius: 10px;
    }

    .gallery-item-lg .vl-single-box img {
        height: 250px; 
    }
    
    
    
    
    
    
        .vl-cta-bg {
        padding: 50px 20px !important;
        border-radius: 20px;
    }

    .vl-cta-content .title {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }

   
    .cta-flex-form {
        display: block; 
        background: transparent;
        padding: 0;
        box-shadow: none;
    }

    .cta-flex-form input {
        width: 100%;
        background: #fff;
        margin-bottom: 15px;
        border-radius: 10px;
        height: 55px;
        
    }

    .cta-flex-form .btn-area, 
    .cta-flex-form .header-btn1 {
        width: 100%;
        display: block;
        text-align: center;
    }
    
 
    .vl-cta-shap {
        display: none;
    }
    
    
    
    
    
.vl-footer-content p {
       font-size: .7rem !important;
        line-height: 1.6;
        color: #55534f !important;
        font-weight: 600;
    }

  
    .vl-footer-widget-2 .title, 
    .vl-footer-widget-3 .title {
        font-size: 18px !important;
        margin-bottom: 15px !important;
        margin-top: 10px;
    }

 
    .vl-footer-menu ul li a {
        font-size: 14px !important;
        padding: 5px 0;
        display: block;
    }

  
    .vl-footer-text a {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }


    .vl-footer-widget-2.pl-90, 
    .vl-footer-widget-2.pl-30 {
        padding-left: 0 !important;
    }

  
    .vl-copyright-text {
        font-size: 13px !important;
        text-align: center;
        margin-bottom: 10px;
    }

    .vl-copyright-menu ul {
        justify-content: center;
        display: flex;
        gap: 15px;
    }

    .vl-copyright-menu ul li a {
        font-size: 12px !important;
    }

   
    .vl-footer-social-1 ul li a {
        width: 35px;
        height: 35px;
        line-height: 35px;
        font-size: 14px;
    }
    
    /*footer.vl-footer-bg-1 .vl-footer-widget-1 .vl-footer-content{*/
    /*    color: #232220 !important;*/
    /*    font-weight:900;*/
    /*}*/
    
    .vl-footer-bg-1{
        /*padding: 15px;*/
    }
    
    
    .impact-header {
        font-size: 1.6rem !important; 
        gap: 8px;
    }

    .impact-header img.hdlogo {
        height: 2.3rem; 
        margin: 0 !important; 
    }

    .impact-subheading {
        font-size: 0.9rem !important;
        line-height: 1.5;
        padding: 0 10px;
    }
    
    .vl-footer-bg-1 .container{
        padding-left:30px;
        padding-right:30px;
    }
          
        }