.why-c-food-distribution{background:white;padding:20px;text-align:center;border-radius:10px;position:relative;overflow:hidden;transition:all 0.3s ease-in-out}.why-c-food-distribution::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(6,174,2,0.8);opacity:0;transition:opacity 0.3s ease-in-out;z-index:1}.why-c-food-distribution:hover::before{opacity:1}.why-c-food-distribution:hover{background:url('http://changingcarefoundation.org/wp-content/uploads/2025/02/diverse-people-refugee-camps-2.jpg') center/cover no-repeat}.why-c-food-content{position:relative;z-index:2}.why-c-food-icon{font-size:50px;color:#9a18d2;margin-bottom:10px;transition:color 0.3s ease-in-out}.why-c-food-distribution:hover .why-c-food-icon{color:white}.why-c-food-title{font-size:24px;color:#06ae01;transition:color 0.3s ease-in-out}.why-c-food-distribution:hover .why-c-food-title{color:white}.why-c-food-text{font-size:16px;color:#222;transition:color 0.3s ease-in-out}.why-c-food-distribution:hover .why-c-food-text{color:white}.why-c-food-button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:#FECA28;border-radius:50%;border:none;cursor:pointer;transition:background 0.3s ease-in-out}.why-c-food-button i{font-size:20px;color:white;transition:color 0.3s ease-in-out}.why-c-food-button:hover{background:white}.why-c-food-button:hover i{color:#29126d}.image-area{display:flex;justify-content:center;align-items:center;min-height:30vh;background:#f1f2f6}.image-area .img-wrapper{width:250px;height:250px;position:relative;overflow:hidden}.image-area .img-wrapper:before{content:'';position:absolute;top:0;left:180%;height:100%;width:100%;background:rgba(255,255,255,0.3);z-index:1;transform:skew(45deg);transition:0.5s}.image-area .img-wrapper:hover:before{left:-180%}.image-area .img-wrapper img{height:100%;width:100%;filter:grayscale(10%);transition:2s}.image-area .img-wrapper:hover img{filter:grayscale(0%);transform:scale(1.1)}.image-area .img-wrapper h2{background:#930eb7;font-family:Poppins,sans-serif;font-size:20px;color:#fff;text-align:center;text-transform:uppercase;margin:0px;padding:10px 0;position:absolute;bottom:20px;width:100%;transform:perspective(400px) rotateY(90deg);transform-origin:right;transition:1s}.image-area .img-wrapper:hover h2{transform:perspective(400px) rotateY(0deg)}.image-area .img-wrapper h3{background:#930eb7;font-family:Poppins,sans-serif;font-size:16px;color:#fff;text-align:center;text-transform:uppercase;margin-top:0;padding:5px 0;position:absolute;bottom:0;width:100%;transform:perspective(400px) rotateY(90deg);transform-origin:right;transition:1s}.image-area .img-wrapper:hover h3{transform:perspective(400px) rotateY(0deg)}.image-area .img-wrapper ul{position:absolute;top:0;left:0;margin:0;padding:0;list-style:none}.image-area .img-wrapper ul li{background:#333;height:40px;width:40px;text-align:center;line-height:40px;transform:perspective(800px) rotateY(90deg);transition:0.5s;transform-origin:left}.image-area .img-wrapper:hover ul li{transform:perspective(800px) rotateY(0deg)}.image-area .img-wrapper:hover ul li:nth-child(1){transition-delay:0.2s}.image-area .img-wrapper:hover ul li:nth-child(2){transition-delay:0.6s}.image-area .img-wrapper:hover ul li:nth-child(3){transition-delay:0.8s}.image-area .img-wrapper:hover ul li:nth-child(4){transition-delay:1s}.image-area .img-wrapper ul li a{color:#04aa02}.image-area .img-wrapper ul li i{color:#04aa02}.image-area .img-wrapper ul li i:hover{color:#fff}.image-card{position:relative;width:100%;max-width:450px;overflow:hidden;text-align:center;margin:20px auto}.image-card img{width:100%;height:300px;object-fit:cover;border-radius:25px}.image-card .content{position:absolute;bottom:0;left:0;right:0;background:rgba(255,255,255,7);color:#fff;padding:20px;text-align:center;transform:translateY(100%);transition:transform 0.5s ease}.image-card .content .title{font-size:18px;color:black;font-weight:bold;margin:0 0 10px}.image-card .content .description{font-size:14px;color:black}.image-card:hover .content{transform:translateY(0)}@media (max-width:768px){.image-card{width:100%;margin:10px auto}.image-card img{height:180px}.image-card .content{padding:15px}.image-card .content .title{font-size:16px}.image-card .content .description{font-size:12px}}@media (max-width:480px){.image-card img{height:200px}.image-card .content .title{font-size:14px}.image-card .content .description{font-size:11px}}.donation-container{background-color:#fff;padding:12px;border-radius:8px;box-shadow:0 4px 8px rgba(0,0,0,0.1);text-align:center;width:100%}.donation-header{margin-bottom:20px}.donation-header h1{font-size:24px;font-weight:bold;color:#333}.donation-header p{font-size:14px;color:#777}.selected-amount{margin-bottom:20px}.donation-buttons{display:flex;justify-content:space-between;gap:10px;margin-bottom:20px}.donation-btn{background-color:#88d65c;color:white;border:none;padding:10px 25px;font-size:16px;cursor:pointer;border-radius:5px;transition:background-color 0.3s;width:100px}.donation-btn:hover{background-color:#9315c1}.custom-donation{margin-top:10px}input[type="number"]{padding:10px;font-size:16px;border:1px solid #ccc;border-radius:5px;width:100%;margin-top:10px}.submit-btn{margin-top:20px}.submit-btn a{display:inline-block;background-color:#2f106d;color:white;padding:10px 20px;font-size:16px;text-decoration:none;border-radius:5px;transition:background-color 0.3s}.submit-btn a:hover{background-color:#118f12}@media (max-width:600px){.donation-header h1{font-size:20px}.donation-header p{font-size:12px}.donation-buttons{display:flex;justify-content:space-between;gap:5px;margin-bottom:20px}.donation-btn{padding:10px;font-size:14px}.submit-btn a{padding:10px;font-size:14px}.hide-on-mobile{display:none!important}}.hover-box-effect{position:relative;overflow:hidden}.hover-box-effect img{display:block;width:100%;height:200px;transition:transform 0.3s ease-in-out}.hover-box-effect::before,.hover-box-effect::after{content:'';position:absolute;background-color:rgba(147,14,183,0.3);width:100%;height:100%;opacity:0;transition:opacity 0.8s ease-in-out;z-index:10}.hover-box-effect::before{top:10%;left:10%}.hover-box-effect::after{bottom:10%;right:10%}.hover-box-effect:hover img{transform:scale(1.1)}.hover-box-effect:hover::before,.hover-box-effect:hover::after{opacity:1}.hover-box-effect a{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:20;font-size:24px;color:white;background:rgba(0,0,0,0.7);border-radius:50%;padding:10px;opacity:0;transition:opacity 0.3s ease-in-out;text-decoration:none}.hover-box-effect:hover a{opacity:1}.hover-box-effect .hover-title{position:absolute;bottom:0px;left:0px;background:rgba(17,143,18,0.6);color:white;padding:5px 10px;font-size:16px;font-weight:bold;border-radius:3px}