* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background: #fff;
    color: #333;
}
.container {
    width: 90%;
    max-width: 81.25rem;
    margin: 0 auto;
    padding-right: 1rem;
    padding-left: 1rem;
}
/* Header */
.site-header {
    background: #fff;
    padding: 1rem 0;
    border-bottom: 1px solid #ccc;
}
.logo {
    font-size: 1.8rem;
    color: #0abde3;
    font-weight: bold;
}
.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav-links {
    list-style: none;
    display: flex;
    gap: 1.5rem;
}
.nav-links a {
    text-decoration: none;
    color: #2F334A;
    font-weight: 500;
    font-size: 1.25rem;
}
.nav-links a:hover {
    color: #307EF3;
}
/* Hero */
.hero {
    background: url('../images/Bg.webp') no-repeat center center/cover;
    height: 46.25rem;
    position: relative;
}
.hero .overlay {
    background-color: rgba(0, 0, 0, 0.15);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.hero-content {
    text-align: center;
}
.hero-content h1 {
    font-size: 3.5rem;
    color: #14D18C;
}
.hero-content h2 {
    font-size: 2.5rem;
}
.hero-content p {
    font-size: 1.5rem;
    color: #ffffff;
}
.hero-content span {
    color: #14D18C;
}
.btn-primary {
    background: #307EF3;
    color: #fff;
    padding: 0.5rem 4.5rem;
    text-decoration: none;
    margin-top: 2rem;
    display: inline-block;
    border-radius: 5px;
    font-size: 1.25rem;
}
/* About */
.about {
    padding: 3rem 0 0;

}
.about .about-title {
    width: 90%;
    max-width: 81.25rem;
    margin: 0 auto;
    height: 18.75rem;
}
.about .about-title h2{
    font-size: 2.5rem;
    color: #32364C;
    font-weight: 600;
}
.about-container{
    background-color: #EDF1F8;
}
.about-content {
    width: 100%;
    display: flex;
    gap: 4rem;
    align-items: center;
    padding-bottom: 4.375rem;
}
.about-img img{
    margin-top: -12.5rem;
}
.about-text h3{
    font-size: 2rem;
    color: #307EF3;
}
.about-text p{
    margin-top: 1rem;
    color: #32364C;
    font-size: 1.2rem;
}
.about-text ul {
    margin-top: 1rem;
    padding-left: 1.2rem;
    font-size: 1.2rem;
}
.about-text ul li {
    list-style: disc;
}
.about-textul li::marker {
    color: #307EF3;
}
/* Features */
.features {
    background: #fff;
    padding: 3rem 0;
}
.feature-grid {
    display: flex;
    gap: 1.5rem;
}
.feature-box {
    background: #FFFFFF;
    padding: 2rem;
    border-radius: 10px;
    flex: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    text-align: center;
}

/* How it works */

.how-it-works {
    background: #ffffff;
    padding: 3rem 0;
    text-align: center;
}
.how-it-works h2{
    font-size: 2.5rem;
    color: #32364C;
}
.how-it-works .subtext {
    max-width: 50rem;
    margin: 0 auto 2rem;
}
.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 1.875rem;
}
.card {
    background: #fff;
    padding: 1.5rem;
    text-align: left;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.card img{
    width: 35%;
}
.card h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}
.card p {
    font-size: 0.95rem;
}
.card.image {
    padding: 0;
}
.card.image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.card.blue {
    background: #2f80ed;
}
.card.green {
    background: #27ae60;
}
/* Services */
.services {
    background-color: #F6F6F6;
    padding: 3.75rem 0;
    text-align: center;
}
.services h2 {
    font-size: 2.5rem;
    margin-bottom: 0.625rem;
    color: #32364C;
}
.services h3 {
    font-size: 1.5rem;
    margin-bottom: 0.625rem;
    color: #32364C;
}
.services p {
    font-size: 1.2rem;
    color: #64697E;
}
.services .intro {
    font-size: 1.125rem;
    color: #555;
    margin-bottom: 2.5rem;
}
.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.875rem;
    align-items: center;
    text-align: left;
}
.service-text {
    padding: 1.25rem;
}
.service-text ul.features {
    padding-left: 1.25rem;
    list-style: disc;
    color: #555;
}
.service-image img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}
.service-card {
    display: flex;
    padding: 1.25rem;
    border-radius: 1.25rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    margin: 1.25rem 0;
}
.white{
    color: white;
}
.card-image {
    width: 18%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1.25rem 0 0;
}
.card-image img {
    width: 70%;
}
.card-text{
    width: 80%;
}
.card-text h5{
    font-size: 1.1rem;
    color: #32364C;
}
.card-text p {
    font-size: 0.8rem;
    color: #64697E;
}
.service-card.blue {
    background: linear-gradient(to bottom, #00E18B, #0CD8D4);
}
.service-card.blue h5 {
    color: #ffffff;
}
.service-card.blue p {
    color: #ffffff;
}

/* Footer */
.footer {
    background-color: #1D1D1D;
    padding: 2.5rem 1.25rem;
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 0.875rem;
    color: #333;
    border-top: 1px solid #e0e0e0;
}
.footer-container {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding:2.5rem 0;
}
.footer-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 30%;
}
.footer-left p{
    color: #ffffff;
}
.footer-logo {
    margin-bottom: 1.25rem;
}
.footer-center {
    width: 50%;
    color: #ffffff;
    text-align: left;
    padding-left: 8rem;
}
.footer-center h5 {
    font-size: 1.1rem;
    margin-bottom: 2rem;
}
.footer-center ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-right{
    width: 20%;
}
.footer-right h5{
    font-size: 1.1rem;
    text-align: right;
    color: #ffffff;
    margin: -1.2rem 0 2rem 0;
}
.footer-social {
    display: flex;
    justify-content: flex-end;
    gap: 1.875rem;

}
.social-icon {
    width: 1.875rem;
    height: 1.875rem;
    transition: opacity 0.3s ease;
}

.social-icon:hover {
    opacity: 0.7;
}
.footer-privacy {
    text-align: right;
    margin-top: 1rem;
}
.footer-privacy a {
   color: #ffffff;
}
@media (max-width: 768px) {
    .nav-container{
        display: block;
    }
    .nav-links{
        gap: 1rem;
    }
    .nav-links a{
        font-size: 1rem;
    }
    .about-content{
        display: block;
    }
    .about-img img{
        width: 100%;
    }
    .feature-grid{
        display: block;
    }
    .feature-box{
        margin-top: 1rem;
    }
    .grid{
        display: block;
    }
    .service-grid{
        display: block;
    }
    .footer-container{
        display: block;
    }
    .footer-left{
        width: 100%;
    }
    .footer-center{
        width: 100%;
        padding-left: 0;
    }
    .footer-center h5{
        margin: 1.5rem 0;
    }
    .footer-right{
        width: 100%;
    }
    .footer-right h5{
        text-align: left;
        margin: 1.5rem 0;
    }
    .footer-social{
        justify-content: left;
        margin: 1.5rem 0;
    }
    .footer-privacy{
        text-align: left;
    }
}