body {
      font-family: 'Poppins', sans-serif;
    }

    .navbar {
      padding: 0.6rem;
    }
    .navbar-brand {
      font-weight: 700;
      font-size: 1.5rem;
    }
    .btn-join {
      background: #f97316;
      color: #fff;
      padding: 8px 20px;
      border-radius: 25px;
      font-weight: 600;
    }
    .btn-join:hover {
      background: #ea580c;
    }
    .text-orange{
        color: #f97316;
    }
    .hero-section {
      position: relative;
      background: #111827;
      color: #fff;
      overflow: hidden;
      z-index: 1;
    }
    .hero-content {
      padding: 150px 0 80px 0;
    }
    .hero-content h1 {
      font-size: 3rem;
      font-weight: 700;
      line-height: 1.2;
    }
    .hero-content p {
      font-size: 1rem;
      color: #ddd;
      margin-top: 20px;
      max-width: 500px;
    }
    .btn-donate {
      background: #f97316;
      color: #fff;
      padding: 12px 25px;
      border-radius: 30px;
      font-weight: 600;
    }
    .btn-donate:hover {
      background: #ea580c;
    }

    .donors-row {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-top: 25px;
      flex-wrap: wrap;
    }
    .donors-badge {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .donors-badge img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 2px solid #fff;
      margin-left: -5%;
    }
    .donors-badge span {
      font-weight: bold;
      color: #f97316;
    }
    
    .hero-img img {
      width: 100%;
      height: 100%;
      z-index: 1;
    }
    .hero-img {
      background: linear-gradient(180deg, #eb5310 0%, rgba(235, 83, 16, 0) 51%, #eb5310 100%);
      padding-left: 10px !important;
      clip-path: polygon(20.444% 6.836%, 20.444% 6.836%, 21.079% 1.445%, 21.969% -3.298%, 23.149% -7.442%, 24.655% -11.037%, 26.521% -14.129%, 28.783% -16.769%, 31.475% -19.005%, 34.633% -20.885%, 38.291% -22.458%, 42.485% -23.773%, 42.485% -23.773%, 51.821% -25.092%, 61.13% -24.265%, 70.354% -21.642%, 79.44% -17.571%, 88.329% -12.403%, 96.968% -6.486%, 105.299% -0.169%, 113.267% 6.199%, 120.817% 12.269%, 127.892% 17.691%, 127.892% 17.691%, 133.187% 21.665%, 138.424% 25.901%, 143.431% 30.413%, 148.036% 35.215%, 152.067% 40.322%, 155.351% 45.748%, 157.717% 51.507%, 158.992% 57.614%, 159.004% 64.083%, 157.581% 70.928%, 157.581% 70.928%, 154.251% 78.396%, 149.391% 84.901%, 143.283% 90.358%, 136.208% 94.679%, 128.447% 97.778%, 120.283% 99.568%, 111.997% 99.963%, 103.871% 98.874%, 96.186% 96.217%, 89.224% 91.904%, 89.224% 91.904%, 84.824% 88.551%, 80.861% 85.901%, 77.197% 83.943%, 73.692% 82.666%, 70.205% 82.06%, 66.599% 82.113%, 62.733% 82.815%, 58.469% 84.155%, 53.665% 86.122%, 48.184% 88.705%, 48.184% 88.705%, 41.958% 91.563%, 36.284% 93.719%, 31.115% 95.169%, 26.403% 95.908%, 22.102% 95.934%, 18.165% 95.243%, 14.544% 93.83%, 11.192% 91.692%, 8.062% 88.825%, 5.108% 85.226%, 5.108% 85.226%, 3.102% 82.034%, 1.619% 78.74%, 0.63% 75.368%, 0.106% 71.943%, 0.017% 68.487%, 0.333% 65.024%, 1.025% 61.58%, 2.062% 58.177%, 3.417% 54.84%, 5.058% 51.592%, 5.058% 51.592%, 8.7% 45.01%, 11.636% 39.594%, 13.954% 35.08%, 15.745% 31.209%, 17.099% 27.718%, 18.105% 24.347%, 18.852% 20.834%, 19.431% 16.919%, 19.932% 12.34%, 20.444% 6.836%);
    }

    .herobottomimge{
      width: 70%;
      margin-top: 10%;
      margin-bottom: -15%;
    }

    .heart-bg {
      max-width: 100%;
      height: auto;
      position: relative;
      z-index: 1;
    }

    .inside-img {
      width: 40%;
      border-radius: 20px;
    }


    .cause-card {
      border-radius: 18px;
      background: #fff;
      transition: all 0.3s ease;
    }
    .cause-card:hover {
      transform: translateY(-5px);
    }
    .donor-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 2px solid #fff;
      margin-left: -10px;
    }
    .arrow-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: none;
      background: #fff;
      box-shadow: 0px 2px 6px rgba(0,0,0,0.1);
      font-size: 20px;
    }
    .arrow-btn:hover {
      background: #f97316;
      color: #fff;
    }

    .bg-orange {
      background: #f15927; /* Orange shade */
    }
    .btn-amount.active {
      background: #f15927 !important;
      color: #fff !important;
    }
    

    .stats-section {
      background: #0d1721; /* dark bg */
    }

    .stat-circle {
      width: 220px;
      height: 220px;
      border-radius: 50%;
      background: #121e2b;
      color: #fff;
      border: 1px solid rgba(255,255,255,0.2);
      transition: all 0.3s ease;
    }

    .stat-circle:hover {
      border-color: #f15927; /* orange border on hover */
      transform: translateY(-5px);
    }
    .stat-circle i {
      color: #fff;
    }
    .stat-circle h3 {
      margin: 0;
    }
    .stat-circle p {
      margin: 0;
      font-size: 14px;
      color: #ccc;
    }

    
    .event-card {
      border-radius: 15px;
      overflow: hidden;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: row;
      align-content: center;
      justify-content: space-between;
      align-items: center;
      padding: 0% 3%;
    }

    .event-image {
      object-fit: cover;
      border-radius: 10px;
      height: 200px;
      min-width: 200px;
    }

    .event-header {
      font-weight: bold;
    }

    .event-date {
      font-size: 0.8rem;
      color: #d9534f;
      /* margin-bottom: 1%; */
      position: absolute;
      margin: 2%;
      padding: 1% 2%;
      background: #fff;
      text-align: center;
      border-radius: 7px;
    }

    .event-location {
      font-size: 0.7rem;
      color: #555;
    }




    .bg-wrapper {
      background-image: url("https://charitics.temptics.com/assets/img/stats-events-bg-shape.svg");
      background-size: cover;
      background-position: center;
      position: relative;
      z-index: 1;
    }

    .bg-wrapper::after {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(255, 255, 255, 0.7); /* white overlay with low opacity */
      z-index: -1;
    }

    /* Image with border and offset box effect */
    .image-box {
      position: relative;
      display: inline-block;
    }

    .image-box img {
      border-radius: 10px;
      position: relative;
      width: 85%;
    }

    .image-box::before {
      content: "";
      position: absolute;
      top: 20px;
      left: 20px;
      width: 80%;
      height: 100%;
      border: 3px solid #dc3545;
      border-radius: 10px;
      z-index: 3;
    }

     .custom-accordion {
      border: 1px solid #dcdcdc;
      border-radius: 5px;
      background: #fff;
      overflow: hidden;
    }

    .accordion-button {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #fff;
      color: #000;
      font-weight: 600;
      border: none;
      box-shadow: none;
      border-radius: 10px !important;
    }

    .accordion-button:focus {
      box-shadow: none;
    }

    .accordion-button:not(.collapsed) {
      background: #f8f9fa;
    }

    .accordion-body {
      padding: 15px 20px;
      font-size: 15px;
      line-height: 1.6;
    }

    .testimonialSwiper .swiper-slide {
      display: flex;
      height: auto;
    }

    .testimonialSwiper .card {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
      border: 1px solid #dcdcdc;
      border-radius: 5px;
      padding: 20px;
    }

    /* Add spacing between slides */
    .testimonialSwiper .swiper-slide {
      padding: 10px;
      box-sizing: border-box;
    }

    /* Ensure text spacing looks balanced */
    .testimonialSwiper .card p {
      flex-grow: 1;
      margin: 10px 0;
    }

    
    .contact-info {
      display: flex;
      justify-content: center;
      gap: 30px;
      margin: 60px auto;
      max-width: 1000px;
      flex-wrap: wrap;
    }
    
    .contact-card {
      flex: 1 1 250px;
      background: #fff;
      border-radius: 12px;
      padding: 30px 20px;
      text-align: center;
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .contact-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    }
    
    .contact-card .icon {
      font-size: 40px;
      color: #ff6600;
      margin-bottom: 15px;
    }
    
    .contact-card .label {
      font-weight: bold;
      font-size: 16px;
      margin-bottom: 8px;
      color: #333;
    }
    
    .contact-card .value {
      font-size: 15px;
      color: #666;
    }
    
        .map-container {
        width: 100%;
        height: 500px;
        margin-top: 20px;
    }
    
    .map-container iframe {
        border: 0;
        width: 100%;
        height: 100%;
    }
    
    .contact-section {
      max-width: 850px;
      margin: 70px auto 40px;
      text-align: center;
      padding: 0 15px;
    }
    .contact-label {
      color: #f45023;
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 12px;
    }
    .contact-section h2 {
      font-size: 2.3rem;
      font-weight: bold;
      margin-bottom: 35px;
      color: #1a1a1a;
    }
    form {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .input-row {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
    }
    input, textarea {
      padding: 15px;
      border: none;
      border-radius: 8px;
      background: #f5f5f5;
      font-size: 15px;
      width: 100%;
    }
    .input-row input {
      flex: 1;
    }
    textarea {
      min-height: 160px;
      resize: vertical;
    }
    .submit-button {
      background: #1a1a1a;
      color: #fff;
      padding: 14px 32px;
      border: none;
      border-radius: 999px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin: 25px auto 0;
      transition: background 0.3s ease;
    }
    .submit-button:hover {
      background: #333;
    }
    .icon-circle {
      background: #fff;
      color: #1a1a1a;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
    }
    
     .hero-section2 {
            background-image: url('https://charitics.temptics.com/assets/img/breadcrumb-bg.jpg');
            background-size: cover;
            background-position: center;
            height: 60vh;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
        }
        .hero-section3 {
            background-image: url('../images/contact-1.jpg');
            background-size: cover;
            background-position: center;
            height: 60vh;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
        }
        
        .hero-section4 {
            background-image: url('../images/events-2.jpg');
            background-size: cover;
            background-position: center;
            height: 60vh;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
        }
        
        .hero-section5 {
            background-image: url('../images/about-3.jpg');
            background-size: cover;
            background-position: center;
            height: 60vh;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
        }
        .hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }
        .hero-content {
            position: relative;
            z-index: 10;
        }
      .breadcrumb-icon {
        width: 12px;
        height: 12px;
        margin: 0 5px;
      }
        .btn-shadow {
            box-shadow: 0 4px 6px -1px rgba(255, 128, 0, 0.4), 0 2px 4px -1px rgba(255, 128, 0, 0.2);
        }

        .card-shadow {
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }

        .custom-card {
            border-radius: 2rem;
            overflow: hidden;
            background-color: #fff;
        }

        /*.card-img-top {*/
        /*    border-top-left-radius: 2rem;*/
        /*    border-top-right-radius: 2rem;*/
        /*}*/

        .card-footer-orange {
            background-color: #f97316;
            color: white;
            padding-top: 3rem;
            padding-bottom: 2rem;
            position: relative;
            margin-top: -3rem;
            z-index: 10;
        }

        .card-footer-orange .card-body {
            padding-top: 1rem;
        }

    /* Contact Info Banner */
    .contact-banner {
      display: flex;
      justify-content: center;
      gap: 30px;
      background: #f45023;
      color: #fff;
      padding: 30px;
      border-radius: 15px;
      margin: 30px auto;
      width: 80%;
      margin-bottom: -4%;
      position: relative;
    }
    .contact-banner .box {
      display: flex;
      align-items: center;
      gap: 15px;
    }
    .contact-banner .box i {
      font-size: 20px;
    }
    .contact-banner .text {
      line-height: 1.4;
    }
    .contact-banner .text strong {
      font-size: 16px;
      display: block;
    }

    /* Footer */
    footer {
      background: #1d222b;
      color: #fff;
      padding: 50px 80px 20px;
    }
    .footer-top {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 40px;
      margin-top:3%;
    }
    .footer-top h3 {
      margin-bottom: 20px;
      font-size: 18px;
      position: relative;
    }
    .footer-top h3::after {
      content: "";
      width: 40px;
      height: 2px;
      background: #f45023;
      position: absolute;
      left: 0;
      bottom: -8px;
    }
    .footer-top ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .footer-top ul li {
      margin-bottom: 10px;
    }
    .footer-top ul li a {
      text-decoration: none;
      color: #bbb;
      font-size: 14px;
    }
    .footer-top .recent-posts {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }
    .recent-posts .post {
      display: flex;
      gap: 10px;
      align-items: center;
    }
    .recent-posts img {
      width: 50px;
      height: 50px;
      border-radius: 5px;
      object-fit: cover;
    }
    .footer-bottom {
      margin-top: 40px;
      border-top: 1px solid rgba(255,255,255,0.2);
      padding-top: 15px;
      display: flex;
      justify-content: space-between;
      font-size: 13px;
      color: #bbb;
    }
    .footer-top input[type=email] {
      padding: 10px;
      border: none;
      border-radius: 4px 0 0 4px;
      outline: none;
    }
    .footer-top button {
      padding: 10px 15px;
      border: none;
      background: #f45023;
      color: #fff;
      border-radius: 0 4px 4px 0;
      cursor: pointer;
    }

    .donation-banner {
      position: relative;
      width: 100%;
      height: 60vh; 
      background: url('../images/cta-bg-1.jpg') no-repeat center center/cover;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      overflow: hidden; 
    }
    
    .wave {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      display: block;
    }
    .abcd{
            z-index: 1;
    text-align: center;
    }
    .abcd::before {
        content: "";
        position: absolute;
        inset: 0;
        top: auto;
        bottom: -1px;
        background-color: #fff;
        height: clamp(18px, 1.26vw, 24px);
        clip-path: polygon(2.072% 58.88%, 0.663% 8.583%, 0.663% 8.583%, 0.599% 6.547%, 0.532% 4.961%, 0.464% 3.824%, 0.395% 3.138%, 0.326% 2.901%, 0.256% 3.115%, 0.187% 3.779%, 0.119% 4.894%, 0.052% 6.459%, -0.012% 8.474%, -0.012% 8.474%, -0.186% 16.768%, -0.307% 27.049%, -0.377% 38.645%, -0.4% 50.88%, -0.378% 63.081%, -0.313% 74.575%, -0.208% 84.688%, -0.065% 92.745%, 0.113% 98.074%, 0.324% 100%, 99.958% 100%, 99.958% 100%, 100.041% 99.172%, 100.107% 96.909%, 100.157% 93.544%, 100.189% 89.411%, 100.204% 84.843%, 100.201% 80.173%, 100.179% 75.734%, 100.139% 71.859%, 100.079% 68.881%, 100% 67.134%, 100% 67.134%, 99.992% 67.05%, 99.984% 66.985%, 99.975% 66.938%, 99.967% 66.909%, 99.959% 66.899%, 99.951% 66.907%, 99.943% 66.934%, 99.934% 66.979%, 99.926% 67.042%, 99.918% 67.124%, 97.8% 90.796%, 97.8% 90.796%, 97.64% 92.232%, 97.479% 92.959%, 97.318% 92.983%, 97.158% 92.31%, 96.999% 90.945%, 96.841% 88.893%, 96.686% 86.16%, 96.534% 82.751%, 96.384% 78.672%, 96.239% 73.928%, 95.2% 37.278%, 95.2% 37.278%, 94.979% 30.391%, 94.752% 25.034%, 94.519% 21.208%, 94.283% 18.913%, 94.045% 18.147%, 93.808% 18.913%, 93.572% 21.208%, 93.339% 25.034%, 93.112% 30.391%, 92.891% 37.278%, 92.261% 59.493%, 92.261% 59.493%, 92.042% 66.349%, 91.815% 71.69%, 91.584% 75.516%, 91.349% 77.827%, 91.113% 78.623%, 90.876% 77.903%, 90.641% 75.666%, 90.409% 71.914%, 90.183% 66.645%, 89.963% 59.859%, 89.319% 37.402%, 89.319% 37.402%, 89.095% 30.521%, 88.865% 25.206%, 88.629% 21.456%, 88.391% 19.269%, 88.15% 18.646%, 87.911% 19.584%, 87.673% 22.083%, 87.438% 26.14%, 87.21% 31.756%, 86.988% 38.93%, 86.47% 57.845%, 86.47% 57.845%, 86.25% 64.986%, 86.022% 70.586%, 85.789% 74.644%, 85.553% 77.157%, 85.314% 78.124%, 85.075% 77.544%, 84.837% 75.417%, 84.603% 71.739%, 84.373% 66.51%, 84.15% 59.728%, 83.465% 36.091%, 83.465% 36.091%, 83.245% 29.404%, 83.019% 24.221%, 82.789% 20.54%, 82.555% 18.362%, 82.319% 17.685%, 82.084% 18.51%, 81.85% 20.836%, 81.62% 24.662%, 81.395% 29.988%, 81.177% 36.814%, 80.541% 59.258%, 80.541% 59.258%, 80.32% 66.145%, 80.092% 71.502%, 79.86% 75.328%, 79.624% 77.624%, 79.386% 78.389%, 79.148% 77.624%, 78.912% 75.328%, 78.68% 71.502%, 78.452% 66.145%, 78.231% 59.258%, 77.622% 37.762%, 77.622% 37.762%, 77.399% 30.811%, 77.169% 25.423%, 76.934% 21.598%, 76.695% 19.335%, 76.455% 18.633%, 76.216% 19.492%, 75.978% 21.912%, 75.743% 25.89%, 75.514% 31.428%, 75.292% 38.525%, 74.746% 58.251%, 74.746% 58.251%, 74.525% 65.316%, 74.297% 70.838%, 74.063% 74.817%, 73.827% 77.251%, 73.588% 78.141%, 73.349% 77.484%, 73.112% 75.28%, 72.877% 71.529%, 72.648% 66.23%, 72.426% 59.381%, 71.782% 36.914%, 71.782% 36.914%, 71.561% 30.097%, 71.333% 24.813%, 71.1% 21.061%, 70.864% 18.84%, 70.626% 18.151%, 70.388% 18.993%, 70.152% 21.365%, 69.92% 25.267%, 69.693% 30.697%, 69.472% 37.656%, 68.878% 58.88%, 68.878% 58.88%, 68.658% 65.839%, 68.431% 71.27%, 68.198% 75.171%, 67.962% 77.543%, 67.725% 78.385%, 67.487% 77.696%, 67.251% 75.476%, 67.018% 71.724%, 66.79% 66.439%, 66.569% 59.622%, 65.904% 36.446%, 65.904% 36.446%, 65.685% 29.691%, 65.46% 24.436%, 65.229% 20.684%, 64.995% 18.432%, 64.76% 17.681%, 64.525% 18.432%, 64.291% 20.684%, 64.061% 24.436%, 63.835% 29.69%, 63.616% 36.446%, 62.949% 59.722%, 62.949% 59.722%, 62.728% 66.526%, 62.501% 71.804%, 62.268% 75.556%, 62.033% 77.783%, 61.795% 78.485%, 61.558% 77.663%, 61.323% 75.317%, 61.091% 71.447%, 60.864% 66.054%, 60.644% 59.138%, 60.023% 37.07%, 60.023% 37.07%, 59.801% 30.104%, 59.572% 24.687%, 59.339% 20.817%, 59.101% 18.495%, 58.862% 17.722%, 58.623% 18.495%, 58.386% 20.817%, 58.152% 24.687%, 57.923% 30.104%, 57.702% 37.07%, 57.091% 58.763%, 57.091% 58.763%, 56.869% 65.728%, 56.64% 71.146%, 56.407% 75.015%, 56.169% 77.337%, 55.93% 78.111%, 55.691% 77.337%, 55.454% 75.015%, 55.22% 71.146%, 54.992% 65.728%, 54.77% 58.763%, 54.166% 37.312%, 54.166% 37.312%, 53.943% 30.315%, 53.713% 24.882%, 53.478% 21.012%, 53.239% 18.707%, 52.999% 17.964%, 52.759% 18.785%, 52.521% 21.168%, 52.286% 25.114%, 52.056% 30.622%, 51.834% 37.692%, 51.265% 58.141%, 51.265% 58.141%, 51.043% 65.211%, 50.813% 70.719%, 50.578% 74.664%, 50.34% 77.048%, 50.1% 77.868%, 49.86% 77.126%, 49.621% 74.82%, 49.386% 70.951%, 49.156% 65.518%, 48.933% 58.521%, 48.323% 36.832%, 48.323% 36.832%, 48.102% 29.898%, 47.874% 24.496%, 47.642% 20.627%, 47.406% 18.289%, 47.168% 17.485%, 46.93% 18.213%, 46.694% 20.475%, 46.461% 24.27%, 46.233% 29.599%, 46.012% 36.463%, 45.362% 59.269%, 45.362% 59.269%, 45.141% 66.146%, 44.912% 71.481%, 44.679% 75.276%, 44.442% 77.532%, 44.204% 78.247%, 43.965% 77.423%, 43.729% 75.06%, 43.496% 71.158%, 43.268% 65.718%, 43.047% 58.741%, 42.456% 37.657%, 42.456% 37.657%, 42.236% 30.697%, 42.009% 25.267%, 41.777% 21.365%, 41.541% 18.993%, 41.303% 18.152%, 41.065% 18.84%, 40.829% 21.061%, 40.596% 24.813%, 40.369% 30.097%, 40.147% 36.914%, 39.489% 59.859%, 39.489% 59.859%, 39.269% 66.645%, 39.043% 71.914%, 38.811% 75.666%, 38.576% 77.903%, 38.339% 78.623%, 38.103% 77.827%, 37.868% 75.516%, 37.637% 71.69%, 37.41% 66.349%, 37.191% 59.493%, 36.568% 37.517%, 36.568% 37.517%, 36.346% 30.599%, 36.117% 25.227%, 35.884% 21.401%, 35.646% 19.121%, 35.408% 18.387%, 35.169% 19.199%, 34.932% 21.555%, 34.698% 25.457%, 34.47% 30.903%, 34.248% 37.894%, 33.654% 59.112%, 33.654% 59.112%, 33.435% 66.04%, 33.209% 71.456%, 32.978% 75.357%, 32.743% 77.744%, 32.507% 78.615%, 32.27% 77.97%, 32.035% 75.808%, 31.803% 72.128%, 31.576% 66.929%, 31.355% 60.211%, 30.67% 36.564%, 30.67% 36.564%, 30.448% 29.815%, 30.219% 24.601%, 29.986% 20.922%, 29.75% 18.777%, 29.512% 18.164%, 29.274% 19.082%, 29.039% 21.531%, 28.807% 25.51%, 28.58% 31.016%, 28.36% 38.05%, 27.807% 58.011%, 27.807% 58.011%, 27.585% 65.108%, 27.356% 70.646%, 27.122% 74.625%, 26.883% 77.044%, 26.643% 77.903%, 26.403% 77.201%, 26.165% 74.938%, 25.93% 71.113%, 25.7% 65.725%, 25.477% 58.775%, 24.874% 37.517%, 24.874% 37.517%, 24.653% 30.599%, 24.424% 25.227%, 24.19% 21.401%, 23.953% 19.121%, 23.714% 18.387%, 23.475% 19.199%, 23.238% 21.555%, 23.005% 25.457%, 22.776% 30.903%, 22.555% 37.894%, 21.954% 59.34%, 21.954% 59.34%, 21.736% 66.238%, 21.511% 71.638%, 21.281% 75.539%, 21.048% 77.94%, 20.812% 78.839%, 20.577% 78.237%, 20.343% 76.132%, 20.112% 72.522%, 19.885% 67.407%, 19.665% 60.786%, 18.931% 35.751%, 18.931% 35.751%, 18.711% 29.129%, 18.485% 24.014%, 18.254% 20.405%, 18.02% 18.299%, 17.784% 17.697%, 17.549% 18.597%, 17.315% 20.998%, 17.085% 24.899%, 16.86% 30.299%, 16.642% 37.197%, 16.042% 58.643%, 16.042% 58.643%, 15.82% 65.633%, 15.592% 71.079%, 15.358% 74.981%, 15.121% 77.338%, 14.883% 78.149%, 14.644% 77.415%, 14.406% 75.135%, 14.173% 71.31%, 13.944% 65.938%, 13.722% 59.019%, 13.127% 38.011%, 13.127% 38.011%, 12.902% 31.028%, 12.671% 25.624%, 12.435% 21.8%, 12.195% 19.554%, 11.954% 18.885%, 11.713% 19.793%, 11.474% 22.277%, 11.238% 26.335%, 11.008% 31.967%, 10.785% 39.172%, 10.288% 57.364%, 10.288% 57.364%, 10.065% 64.569%, 9.835% 70.201%, 9.6% 74.259%, 9.36% 76.743%, 9.119% 77.651%, 8.878% 76.982%, 8.638% 74.736%, 8.402% 70.912%, 8.171% 65.508%, 7.946% 58.525%, 7.338% 37.044%, 7.338% 37.044%, 7.118% 30.188%, 6.892% 24.846%, 6.66% 21.02%, 6.426% 18.709%, 6.189% 17.913%, 5.952% 18.634%, 5.718% 20.87%, 5.486% 24.622%, 5.259% 29.891%, 5.039% 36.677%, 4.381% 59.622%, 4.381% 59.622%, 4.16% 66.439%, 3.932% 71.724%, 3.699% 75.476%, 3.463% 77.696%, 3.225% 78.385%, 2.988% 77.543%, 2.752% 75.171%, 2.52% 71.27%, 2.292% 65.839%, 2.072% 58.88%);
    }
    
    
    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5); 
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 20px;
      text-align: center;
    }

    .overlay p {
      color: #FF6A00;
      font-size: 1rem;
      margin-bottom: 10px;
    }

    .overlay h1 {
      color: #fff;
      font-size: 3rem;
      font-weight: 700;
      margin-bottom: 30px;
      line-height: 1.3;
    }

    .btn {
      background-color: #FF4500;
      color: #fff;
      padding: 14px 28px;
      text-decoration: none;
      font-size: 1rem;
      border-radius: 50px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      transition: background-color 0.3s ease;
    }

    .btn:hover {
      background-color: #e03e00;
    }

    .about-people-imge-circle{
        width:45px; height:45px; border-radius:50%; margin-right:-10px; border:2px solid #fff;
    }
    
    .team-card {
      border-radius: 1rem;
      overflow: hidden;
      transition: transform 0.3s, box-shadow 0.3s;
      position: relative;
    }
    .team-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    }
    .team-card img {
      width: 100%;
      height: 280px;
      object-fit: cover;
    }
    .team-info {
      background: #f8f9fa;
      text-align: center;
      padding: 15px;
    }
    .team-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(255,102,0,0.95), rgba(255,102,0,0));
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      opacity: 0;
      transition: opacity 0.3s;
      padding: 20px;
      text-align: center;
      cursor:pointer;
    }
    .team-card:hover .team-overlay {
      opacity: 1;
    }
    .team-overlay .social-icons a {
      color: #fff;
      margin: 0 8px;
      font-size: 18px;
      transition: color 0.2s;
    }
    .team-overlay .social-icons a:hover {
      color: #000;
    }
    
    @media (max-width: 768px) {
      .overlay h1 {
        font-size: 2rem;
      }

      .btn {
        font-size: 0.9rem;
        padding: 12px 24px;
      }

      .event-card {
        flex-direction: column;
      }
      
      .footer-top {
        grid-template-columns: none;
      }
      
      .contact-banner {
          flex-direction: column;
          margin-bottom:-10%;
      }
      
      footer {
        padding: 50px 20px 20px;
     }
     .mb-max-width{
        max-width: 190px;
     }
     .image-box {
         margin-bottom: 10%;
     }
     .hero-content h1 {
        font-size: 2rem;
     }
     .hero-content {
        padding: 40px 0 80px 0;
     }
     
     .stat-circle p {
         font-size: 10px;
     }
     
     .stat-circle {
        width: 160px;
        height: 160px;
     }
     .hero-section5, .hero-section4, .hero-section3 {
        background-position: right; 
     }
    }
    
    
    /* Gradient Button */
.btn-gradient {
  background: linear-gradient(45deg, #007bff, #00c6ff);
  color: #fff !important;
  border: none;
  transition: all 0.3s ease;
      width: fit-content;
}
.btn-gradient:hover {
  background: linear-gradient(45deg, #0056b3, #0099cc);
  transform: translateY(-2px);
}

/* Glassmorphism card style */
.joinus-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-radius: 1rem;
}

/* Thank You Card */
.thankyou-card {
  background: linear-gradient(135deg, #e6ffe6, #ffffff);
  box-shadow: 0px 10px 30px rgba(0,0,0,0.1);
}

/* Bounce animation for success icon */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.animate-bounce {
  animation: bounce 1s infinite;
}


.ul-about-imgs-vectors .vector-1 {
    position: absolute;
    bottom: 0;
    left: calc(0% - clamp(151px, 10.56vw, 201px));
    z-index: -1;
    width:100%;
}
.ul-about-imgs-vectors .vector-2 {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    max-width: clamp(0px, 34.21vw, 651px);
}

.ul-about-vectors .vector-1 {
    position: absolute;
    right: 0;
    bottom: auto;
    max-width: clamp(75px, 11.82vw, 225px);
    animation: slide-top 12s ease infinite alternate;
}
@keyframes slide-top {
    0% {
        transform: translateY(-200px);
    }

    100% {
        transform: translateY(300px);
    }
}