body {
margin: 0;
font-family: "Poppins",'Roboto', sans-serif;
background: #121212; 
color: #fff;
}
header {
background: linear-gradient(135deg, #00bcd4, #1a73e8);
padding: 1rem 2rem;
position: sticky;
top: 0;
font-family: "Poppins";
z-index: 1000;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
.logo img {
width: 100%;
height: 50px;
cursor: pointer;
margin-top: 10px;
}
.main-nav a,
.navbar-nav a {
text-decoration: none;
margin: 0 1rem;
color: #fff;
font-size: 1rem;
font-weight: 500;
transition: color 0.3s ease;
font-family: "Poppins";
}
.main-nav a:hover,
.navbar-nav a:hover {
color: #ffe135;
}
.cta-btn {
padding: 0.5rem 1.5rem;
background: linear-gradient(90deg, #00bcd4, #1a73e8);
border: none;
border-radius: 20px;
color: #fff;
font-size: 1rem;
font-weight: bold;
cursor: pointer;
font-family: "Poppins";
transition: background 0.3s ease;
}
.cta-btn:hover {
background: linear-gradient(90deg, #1a73e8, #00bcd4);
}
.navbar-toggler {
background: #333;
border: none;
padding: 0.5rem;
border-radius: 5px;
cursor: pointer;
font-family: "Poppins";
}
.navbar-toggler-icon {
width: 25px;
height: 3px;
background-color: #fff;
display: block;
margin: 5px 0;
}
.navbar-collapse {
background: #1a1a1a;
}
.navbar-nav {
display: flex;
flex-direction: column;
padding: 1rem;
}
.navbar-nav a {
margin: 0.5rem 0;
text-align: center;
}
@media (max-width: 768px) {
.main-nav {
display: none;
}
.navbar-collapse {
display: block;
}
}
.hero-section {
position: relative;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
font-family: "Poppins";
}
.hero-image-grid {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
z-index: 0;
opacity: 0.4;
font-family: "Poppins";
}
.grid-item {
position: relative;
background-size: cover;
background-position: center;
filter: brightness(0.7);
font-family: "Poppins";
transition: transform 0.3s ease, filter 0.3s ease;
}
.grid-item:hover {
transform: scale(1.05);
filter: brightness(1);
}
.hero-section-content {
position: relative;
z-index: 1;
color: #fff;
text-align: center;
max-width: 800px;
padding: 2rem;
font-family: "Poppins";
}
.hero-section-text {
background: none;
padding: 10%;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
color: #fff;
backdrop-filter: blur(4px);
text-align: center;
font-family: "Poppins";
}
.hero-section-title {
font-size: 3rem;
font-weight: bold;
margin-bottom: 1rem;
font-family: "Poppins";
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
}
.hero-section-description {
font-size: 1.25rem;
margin-bottom: 2rem;
font-family: "Poppins";
text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.6);
}
.hero-section-cta-btns {
display: flex;
justify-content: center;
gap: 1rem;
font-family: "Poppins";
}
.hero-section-cta-btn {
padding: 0.75rem 1.5rem;
border-radius: 25px;
font-weight: bold;
border: none;
cursor: pointer;
font-family: "Poppins";
transition: transform 0.3s ease, background-color 0.3s ease;
}
.hero-section-primary-btn {
background: linear-gradient(90deg, #00bcd4, #1a73e8);
color: #fff;
}
.hero-section-primary-btn:hover {
transform: translateY(-3px);
}
.hero-section-secondary-btn {
background: transparent;
color: #fff;
border: 2px solid #fff;
}
.hero-section-secondary-btn:hover {
transform: translateY(-3px);
background: #fff;
color: #00bcd4;
}
@media (max-width: 768px) {
.hero-image-grid {
grid-template-columns: repeat(2, 1fr);
}
.hero-section-title {
font-size: 2rem;
}
.hero-section-description {
font-size: 1rem;
}
}
.features-section {
padding: 4rem 2rem;
background: linear-gradient(135deg, #1e1e2f, #27293d);
color: #fff;
text-align: center;
font-family: "Poppins";
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
font-family: "Poppins";
}
.features-section-header {
margin-bottom: 2rem;
}
.features-section-title {
font-weight: 700;
font-size: 2.5rem;
margin-bottom: 0.5rem;
background: linear-gradient(135deg, #00bcd4, #1a73e8);
-webkit-background-clip: text;
color: transparent;
font-family: "Poppins";
}
.features-section-description {
font-size: 1.2rem;
color: #e0e0e0;
}
.features-section-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 2rem;
justify-content: center;
font-family: "Poppins";
}
.feature-card {
background: #2a2d3e;
border-radius: 15px;
padding: 2rem;
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
text-align: center;
font-family: "Poppins";
}
.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.8);
}
.feature-icon {
font-size: 2.5rem;
color: #00bcd4;
margin-bottom: 1rem;
}
.feature-title {
font-weight: 600;
font-size: 1.5rem;
margin-bottom: 0.5rem;
background: linear-gradient(135deg, #00bcd4, #1a73e8);
-webkit-background-clip: text;
color: transparent;
font-family: "Poppins";
}
.feature-description {
font-size: 1rem;
color: #d6d6d6;
line-height: 1.6;
font-family: "Poppins";
}
@media (max-width: 768px) {
.features-section-title {
font-size: 2rem;
}
.features-section-description {
font-size: 1rem;
}
.feature-card {
padding: 1.5rem;
}
}
.how-it-works-section {
padding: 4rem 2rem;
background: linear-gradient(135deg, #1a1a2e, #16213e);
color: #fff;
text-align: center;
font-family: "Poppins";
}
.how-it-works-header {
margin-bottom: 3rem;
}
.how-it-works-title {
font-weight: 700;
margin-bottom: 1rem;
font-size: 2.5rem;
background: linear-gradient(135deg, #00bcd4, #1a73e8);
-webkit-background-clip: text;
color: transparent;
font-family: "Poppins";
}
.how-it-works-description {
font-size: 1.2rem;
color: #e0e0e0;
font-family: "Poppins";
}
.how-it-works-steps {
display: flex;
flex-wrap: wrap;
gap: 2rem;
font-family: "Poppins";
justify-content: center;
}
.how-it-works-step {
background: #243044;
border-radius: 15px;
padding: 2rem;
text-align: center;
max-width: 300px;
font-family: "Poppins";
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
.how-it-works-step:hover {
transform: translateY(-10px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.8);
}
.how-it-works-step-icon{
width: 80px;
height: 80px;
font-size: 2em;
border-radius: 50%;
background: linear-gradient(135deg, #00bcd4, #1a73e8);
padding: 10px;
margin: auto;
font-family: "Poppins";
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
.how-it-works-step-icon i{
margin-top: 10px;
text-align: center;
}
.how-it-works-step-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: #fff;
font-family: "Poppins";
}
.how-it-works-step-description {
font-size: 1rem;
color: #d6d6d6;
line-height: 1.6;
font-family: "Poppins";
}
@media (max-width: 768px) {
.how-it-works-steps {
flex-direction: column;
gap: 1.5rem;
}
.how-it-works-step {
max-width: 100%;
}
}
.testimonials-section {
padding: 4rem 2rem;
background: linear-gradient(135deg, #1a1a2e, #16213e);
color: #fff;
font-family: "Poppins";
}
.testimonials-section-header {
margin-bottom: 3rem;
}
.testimonials-section-title {
font-weight: 700;
font-size: 2.5rem;
margin-bottom: 0.5rem;
background: linear-gradient(135deg, #00bcd4, #1a73e8);
-webkit-background-clip: text;
color: transparent;
font-family: "Poppins";
}
.testimonials-section-description {
font-size: 1.2rem;
color: #e0e0e0;
font-family: "Poppins";
}
.testimonials-section-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
font-family: "Poppins";
justify-content: center;
}
.testimonial-card {
background: #243044;
border-radius: 15px;
padding: 2rem;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
text-align: center;
font-family: "Poppins";
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-card:hover {
transform: translateY(-10px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.8);
}
.testimonial-text {
font-size: 1rem;
color: #d6d6d6;
margin-bottom: 1.5rem;
font-style: italic;
font-family: "Poppins";
}
.testimonial-user {
display: flex;
align-items: center;
gap: 1rem;
margin-top: 1rem;
font-family: "Poppins";
}
.testimonial-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
border: 2px solid #00bcd4;
}
.testimonial-user-info {
text-align: left;
}
.testimonial-user-name {
font-size: 1.2rem;
font-weight: 600;
color: #fff;
font-family: "Poppins";
}
.testimonial-user-role {
font-size: 0.9rem;
color: #d6d6d6;
}
@media (max-width: 768px) {
.testimonials-section-title {
font-size: 2rem;
}
.testimonials-section-description {
font-size: 1rem;
}
.testimonial-card {
padding: 1.5rem;
}
}
.cta-section {
padding: 4rem 2rem;
background: linear-gradient(135deg, #1a1a2e, #0f3460);
text-align: center;
color: #fff;
font-family: "Poppins";
}
.cta-section-title {
font-weight: 700;
margin-bottom: 1rem;
font-size: 2.5rem;
background: linear-gradient(135deg, #00bcd4, #1a73e8);
-webkit-background-clip: text;
color: transparent;
font-family: "Poppins";
}
.cta-section-description {
font-size: 1.2rem;
color: #e0e0e0;
margin-bottom: 2rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
font-family: "Poppins";
}
.cta-section-buttons {
display: flex;
justify-content: center;
gap: 1rem;
}
.cta-section-primary-btn {
background: linear-gradient(135deg, #00bcd4, #1a73e8);
border: none;
color: #fff;
padding: 0.8rem 2rem;
font-size: 1rem;
font-weight: 600;
border-radius: 30px;
cursor: pointer;
font-family: "Poppins";
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cta-section-primary-btn:hover {
transform: translateY(-5px);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}
.cta-section-secondary-btn {
background: transparent;
border: 2px solid #00bcd4;
color: #00bcd4;
padding: 0.8rem 2rem;
font-size: 1rem;
font-weight: 600;
border-radius: 30px;
cursor: pointer;
font-family: "Poppins";
transition: background 0.3s ease, color 0.3s ease;
}
.cta-section-secondary-btn:hover {
background: #00bcd4;
color: #fff;
}
@media (max-width: 768px) {
.cta-section-title {
font-size: 2rem;
}
.cta-section-description {
font-size: 1rem;
}
.cta-section-buttons {
flex-direction: column;
gap: 1rem;
}
}
.faq-section {
padding: 4rem 2rem;
background: linear-gradient(135deg, #1a1a2e, #0f3460);
color: #fff;
font-family: "Poppins";
}
.faq-header {
margin-bottom: 3rem;
}
.faq-title {
font-weight: 700;
font-size: 2.5rem;
margin-bottom: 0.5rem;
background: linear-gradient(135deg, #00bcd4, #1a73e8);
-webkit-background-clip: text;
color: transparent;
font-family: "Poppins";
}
.faq-description {
font-size: 1.2rem;
color: #e0e0e0;
font-family: "Poppins";
}
.faq-container {
max-width: 800px;
margin: 0 auto;
font-family: "Poppins";
}
.faq-item {
margin-bottom: 1.5rem;
border: 1px solid #243044;
border-radius: 10px;
overflow: hidden;
background: #1e293b;
font-family: "Poppins";
transition: transform 0.3s ease;
}
.faq-item:hover {
transform: translateY(-5px);
}
.faq-question {
width: 100%;
text-align: left;
font-size: 1.2rem;
font-weight: 600;
padding: 1rem 1.5rem;
background: transparent;
border: none;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
outline: none;
margin-bottom: 0.5rem;
background: linear-gradient(135deg, #00bcd4, #1a73e8);
-webkit-background-clip: text;
color: transparent;
font-family: "Poppins";
}
.faq-icon {
font-size: 1.5rem;
transition: transform 0.3s ease;
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
padding: 0 1.5rem;
background: #243044;
font-family: "Poppins";
}
.faq-answer p {
font-size: 1rem;
color: #d6d6d6;
padding: 1rem 0;
line-height: 1.6;
font-family: "Poppins";
}
.faq-item.open .faq-icon {
transform: rotate(45deg);
}
.faq-item.open .faq-answer {
max-height: 200px;
padding: 1rem 1.5rem;
}
@media (max-width: 768px) {
.faq-title {
font-size: 2rem;
}
.faq-description {
font-size: 1rem;
}
.faq-question {
font-size: 1.1rem;
}
.faq-answer p {
font-size: 0.9rem;
}
}
.trusted-brands-section {
background: linear-gradient(to right, #2c2c2c, #1e1e1e);
color: #ffffff;
padding: 50px 20px;
border-radius: 8px;
font-family: "Poppins";
}
.section-title {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 20px;
background: linear-gradient(135deg, #00bcd4, #1a73e8);
-webkit-background-clip: text;
color: transparent;
font-family: "Poppins";
}
.trusted-logo {
max-height: 50px;
max-width: 100%;
object-fit: contain;
filter: grayscale(100%);
transition: filter 0.3s ease-in-out;
margin-top: 10px;
}
.trusted-logo:hover {
filter: grayscale(0%);
}
.row {
margin: 0;
}
.donation-section {
padding: 4rem 2rem;
background: linear-gradient(135deg, #00bcd4, #1a73e8);
color: #fff;
text-align: center;
font-family: "Poppins";
}
.donation-title {
font-weight: 700;
margin-bottom: 1rem;
font-size: 2.5rem;
color: #fff;
font-family: "Poppins";
}
.donation-description {
font-size: 1.2rem;
color: #e0e0e0;
margin-bottom: 1.5rem;
font-family: "Poppins";
}
.donation-note {
font-size: 1rem;
color: #d6d6d6;
margin-bottom: 2rem;
font-family: "Poppins";
}
.donation-btn-container {
display: flex;
justify-content: center;
font-family: "Poppins";
}
.donation-btn {
display: inline-flex;
align-items: center;
padding: 0.8rem 1.5rem;
font-size: 1.2rem;
font-weight: 600;
background: linear-gradient(135deg, #00bcd4, #1a73e8);
color: #fff;
border: none;
border-radius: 8px;
font-family: "Poppins";
text-decoration: none;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
.donation-btn i {
margin-right: 0.5rem;
font-size: 1.5rem;
}
.donation-btn:hover {
background: linear-gradient(135deg, #1a73e8, #00bcd4);
transform: translateY(-3px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}
@media (max-width: 768px) {
.donation-title {
font-size: 2rem;
}
.donation-description {
font-size: 1rem;
}
.donation-btn {
font-size: 1rem;
padding: 0.7rem 1.2rem;
}
}
.services-section {
padding: 4rem 2rem;
background: #111827;
color: #fff;
font-family: "Poppins";
}
.services-header {
margin-bottom: 3rem;
}
.services-title {
font-weight: 700;
margin-bottom: 1rem;
font-size: 2.5rem;
margin-bottom: 0.5rem;
background: linear-gradient(135deg, #00bcd4, #1a73e8);
-webkit-background-clip: text;
color: transparent;
font-family: "Poppins";
}
.services-description {
font-size: 1.2rem;
color: #d1d5db;
max-width: 800px;
margin: 0 auto 3rem;
font-family: "Poppins";
}
.services-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
max-width: 1200px; 
margin: 0 auto; 
padding: 0 2rem; 
font-family: "Poppins";
}
.service-card {
background-color: #1f2937;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
text-align: center;
font-family: "Poppins";
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
font-family: "Poppins";
}
.service-btn {
display: inline-block;
padding: 12px 30px;
font-size: 1rem;
font-weight: 600;
text-align: center;
text-decoration: none;
color: #fff;
background: linear-gradient(45deg, #00bcd4, #1a73e8);
border: none;
border-radius: 50px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease-in-out;
font-family: "Poppins";
}
.service-btn:hover {
background: linear-gradient(45deg, #1a73e8, #00bcd4);
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
transform: translateY(-3px);
}
.service-btn:active {
transform: translateY(0);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}
.service-icon {
font-size: 3rem;
color: #00bcd4;
margin-bottom: 1.5rem;
}
.service-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1rem;
background: linear-gradient(135deg, #00bcd4, #1a73e8);
-webkit-background-clip: text;
color: transparent;
font-family: "Poppins";
}
.service-description {
font-size: 1rem;
color: #d1d5db;
font-family: "Poppins";
}
.footer-section {
background: #1f2937;
color: #fff;
padding: 4rem 2rem;
font-family: "Poppins", sans-serif;
}
.footer-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
font-family: "Poppins";
}
.footer-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1rem;
background: linear-gradient(135deg, #00bcd4, #1a73e8);
-webkit-background-clip: text;
color: transparent;
font-family: "Poppins";
}
.footer-description {
font-size: 1rem;
color: #d1d5db;
max-width: 300px;
font-family: "Poppins";
}
.footer-list {
list-style-type: none;
padding: 0;
font-family: "Poppins";
}
.footer-list li {
margin: 0.5rem 0;
}
.footer-list li a {
text-decoration: none;
color: #d1d5db;
font-size: 1rem;
transition: color 0.3s ease;
}
.footer-list li a:hover {
color: #feca57;
}
.footer-newsletter-form {
display: flex;
gap: 0.5rem;
font-family: "Poppins";
}
.footer-newsletter-input {
padding: 0.8rem;
border: none;
border-radius: 5px;
width: 250px;
font-family: "Poppins";
}
.footer-newsletter-btn {
padding: 0.8rem 1.5rem;
background: linear-gradient(135deg, #00bcd4, #1a73e8);
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-family: "Poppins";
transition: background-color 0.3s ease;
}
.footer-newsletter-btn:hover {
background: linear-gradient(135deg, #1a73e8, #00bcd4);
}
.footer-social-icons {
display: flex;
gap: 1rem;
}
.social-icon {
font-size: 1.5rem;
color: #d1d5db;
transition: color 0.3s ease;
}
.social-icon:hover {
color: #feca57; 
}
.footer-bottom {
text-align: center;
margin-top: 3rem;
padding-top: 2rem;
font-family: "Poppins";
border-top: 1px solid #333;
}
.footer-bottom p {
font-size: 1rem;
color: #d1d5db;
font-family: "Poppins";
}
.card {width: 70%;margin: auto; background-color: #333; margin-top: 20px; border: none; 
box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);font-family: "Poppins";
}
.form-label { color: #ffffff; }
.output-image img { max-width: 100%; height: auto; border-radius: 5px; }
.output-image { position: relative; margin-top: 10px; }
.output-image button { 
margin-top: 5px; 
font-family: "Poppins";
}
canvas { display: none; }
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.75);
color: #ffffff;
display: none;
justify-content: center;
align-items: center;
font-size: 1.5rem;
z-index: 1000;
font-family: "Poppins";
}
.apply-watermark-btn{
width: 100%;
height: 40px;
border: none;
outline: none;
font-family: "Poppins";
font-size: 1em;
background: linear-gradient(135deg, #00bcd4, #1a73e8);
cursor: pointer;
margin-top: 10px;
color: #fff;
border-radius: 5px;
font-family: "Poppins";
box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
.apply-watermark-btn:hover{
background: linear-gradient(135deg, #1a73e8, #00bcd4);
}
.w3-b-a, .w3-b-a:hover{
text-decoration: none;
}
.contact-form {
background: rgba(255, 255, 255, 0.1);
padding: 5%;
border-radius: 10px;
font-family: "Poppins";
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
font-size: 1em;
margin-bottom: 15px;
}
.form-group input,
.form-group textarea {
width: 98%;
padding: 10px;
font-size: 1em;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 5px;
background: rgba(255, 255, 255, 0.2);
color: #fff;
font-family: "Poppins";
}
.form-group textarea {
resize: none;
height: 120px;
font-family: "Poppins";
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.form-group button {
background: #ff5722;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 1em;
cursor: pointer;
border-radius: 5px;
font-family: "Poppins";
transition: background 0.3s;
}
.form-group button:hover {
background: #e64a19;
}