* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {

    font-family: 'Noto Sans Tamil', sans-serif;

    background: #f7fff9;

    color: #222;

    padding-top: 75px;

}

/* HEADER */

.header {

    position: fixed;

    top: 0;

    width: 100%;

    background: #fff;

    box-shadow: 0 5px 20px rgba(0, 0, 0, .08);

    z-index: 999;

}

.header-box {

    height: 75px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.logo {

    font-size: 26px;

    font-weight: 800;

    color: #09a548;

}

.header-btn {

    background: #09a548;

    color: #fff;

    padding: 11px 18px;

    border-radius: 40px;

    text-decoration: none;

    font-weight: 700;

}

/*==========================
HERO
==========================*/

.hero {

    padding: 25px 0 45px;

    background:
        radial-gradient(circle at top right, #c8f5d9 0%, transparent 40%),
        linear-gradient(180deg, #effdf3, #ffffff);

    overflow: hidden;

    position: relative;

}

.hero::before {

    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    border-radius: 50%;

    background: rgba(14, 168, 75, .08);

    right: -120px;
    top: -120px;

}

.hero::after {

    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    background: rgba(14, 168, 75, .05);

    border-radius: 50%;

    left: -80px;
    bottom: -80px;

}

.hero .container {

    padding: 0 18px;

}

/* Badge */

.hero-badge {

    display: flex;

    align-items: center;

    justify-content: center;

    background: #10b34d;

    color: #fff;

    font-size: 14px;

    font-weight: 700;

    padding: 10px 10px;

    border-radius: 50px;

    margin-bottom: 22px;

}

/* Title */

.hero-title {

    font-size: 34px;

    font-weight: 800;

    line-height: 1.25;

    text-align: center;

    color: #222;

    margin-bottom: 15px;

    overflow-wrap: anywhere;

}

.hero-title span {

    display: block;

    color: #0ea84b;

}

/* Description */

.hero-desc {

    font-size: 17px;

    line-height: 1.8;

    text-align: center;

    color: #555;

    margin-bottom: 25px;

}

/*==================================
Hero Image
==================================*/

.hero-image {

    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    margin: 15px auto 10px;

    width: 100%;
    overflow: visible;

}

/* Main Green Glow */

.hero-image::before {

    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(34, 197, 94, .35) 0%,
            rgba(34, 197, 94, .18) 45%,
            transparent 75%);

    filter: blur(25px);

    z-index: 0;

}

/* Soft White Glow */

.hero-image::after {

    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    left: 50%;
    top: 45%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(255, 255, 255, .9) 0%,
            transparent 70%);

    z-index: 1;

}

/* PNG */

.hero-image img {

    position: relative;

    z-index: 2;

    max-width: 390px;
    width: 110%;

    height: auto;

    animation: heroFloat 4s ease-in-out infinite;

    filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .18));

}

/* Floating Animation */

@keyframes heroFloat {

    0% {

        transform: translateY(0px);

    }

    50% {

        transform: translateY(-10px);

    }

    100% {

        transform: translateY(0px);

    }

}

/* Small Mobile */

@media (max-width:390px) {

    .hero-image {

        margin: 25px auto;

    }

    .hero-image img {

        max-width: 300px;

    }

    .hero-image::before {

        width: 230px;
        height: 230px;

    }

    .hero-image::after {

        width: 150px;
        height: 150px;

    }

}

/* Large Mobile */

@media (min-width:391px) and (max-width:480px) {

    .hero-image img {

        max-width: 330px;

    }

}

/* Features */

.hero-features {

    display: flex;

    flex-direction: column;

    gap: 12px;

    margin-bottom: 25px;

}

.hero-feature {

    background: #fff;

    padding: 15px 18px;

    border-radius: 15px;

    border-left: 4px solid #10b34d;

    font-weight: 700;

    box-shadow: 0 10px 22px rgba(0, 0, 0, .06);

}

/* Price */

.price-card {

    background: #fff;

    border-radius: 22px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 22px;

    margin-bottom: 25px;

    box-shadow: 0 15px 35px rgba(0, 0, 0, .08);

}

.divider {

    width: 1px;

    height: 55px;

    background: #ddd;

}

.price-left {

    text-align: center;

}

.price-right {

    text-align: center;

}

.old-price {

    display: block;

    color: #999;

    text-decoration: line-through;

    font-size: 22px;

    font-weight: 700;

}

.price-label {

    font-size: 14px;

    color: #777;

}

.new-price {

    display: block;

    color: #10b34d;

    font-size: 42px;

    font-weight: 800;

    line-height: 1;

}

.save-badge {

    display: inline-block;

    margin-top: 10px;

    background: #10b34d;

    color: #fff;

    padding: 6px 14px;

    border-radius: 40px;

    font-size: 13px;

    font-weight: 700;

}

/* Buttons */

.hero-btn {

    display: block;

    width: 100%;

    text-align: center;

    text-decoration: none;

    background: #10b34d;

    color: #fff;

    font-size: 20px;

    font-weight: 700;

    padding: 18px;

    border-radius: 50px;

    margin-bottom: 15px;

    box-shadow: 0 12px 28px rgba(16, 179, 77, .35);

}

.hero-call {

    display: block;

    width: 100%;

    text-align: center;

    text-decoration: none;

    border: 2px solid #10b34d;

    color: #10b34d;

    font-size: 19px;

    font-weight: 700;

    padding: 17px;

    border-radius: 50px;

    background: #fff;

}

/* Mobile */

@media(max-width:390px) {

    .hero-title {

        font-size: 30px;

    }

    .hero-desc {

        font-size: 16px;

    }

    .new-price {

        font-size: 36px;

    }

}

/*==========================
SECTION TITLE
==========================*/

.section-title {

    text-align: center;

    margin-bottom: 30px;

}

.section-title h2 {

    font-size: 30px;

    font-weight: 800;

    color: #08773a;

    margin-bottom: 10px;

}

.section-title p {

    font-size: 16px;

    color: #666;

    line-height: 1.8;

}

/*==========================
ABOUT
==========================*/

.about-section {

    padding: 60px 20px;

}

.about-card {

    background: #fff;

    border-radius: 25px;

    padding: 25px;

    box-shadow: 0 15px 40px rgba(0, 0, 0, .08);

    text-align: center;

}

.about-card img {

    width: 180px;

    margin-bottom: 20px;

    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, .18));

}

.about-content h3 {

    font-size: 26px;

    font-weight: 700;

    margin-bottom: 15px;

    color: #0c8d45;

}

.about-content p {

    line-height: 1.8;

    font-size: 16px;

    color: #555;

}

/*==========================
FEATURES
==========================*/

.feature-section {

    padding: 60px 15px;

    background: #eefcf4;

}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
    width: 100%;
}

.feature-box {
    background: #fff;
    border-radius: 20px;
    padding: 20px 15px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .08);

    width: 100%;
    min-width: 0;
}

.feature-box:hover {

    transform: translateY(-5px);

}

.icon {

    width: 60px;

    height: 60px;

    margin: auto;

    margin-bottom: 15px;

    background: #0ca84a;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 24px;

    color: #fff;

}

.feature-box h4 {

    font-size: 17px;

    font-weight: 700;

    margin-bottom: 10px;

}

.feature-box p {

    font-size: 14px;

    color: #666;

    line-height: 1.7;

}

@media(max-width:400px) {

    .feature-grid {

        grid-template-columns: 1fr 1fr;
        gap: 12px;

    }

    .feature-box {

        padding: 18px 12px;

    }

    .feature-box h4 {

        font-size: 16px;

    }

    .feature-box p {

        font-size: 13px;

    }

}

/*==========================
WHY CHOOSE
==========================*/

.choose-section {

    padding: 60px 20px;

}

.choose-card {

    display: flex;

    flex-direction: column;

    gap: 18px;

}

.choose-item {
    display: flex;
    align-items: center;
    gap: 18px;

    background: #fff;
    border-radius: 20px;
    padding: 22px;

    box-shadow: 0 12px 25px rgba(0, 0, 0, .08);
}

.number {

    width: 64px;
    height: 64px;
    flex: 0 0 64px;

    background: linear-gradient(180deg, #16c45d, #0b8d43);

    border-radius: 50%;

    color: #fff;

    font-size: 24px;
    font-weight: 800;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 10px 20px rgba(12, 168, 74, .35);

}

.choose-content {
    flex: 1;
    min-width: 0;
}

.choose-item h5 {

    font-size: 20px;

    font-weight: 700;

    margin-bottom: 8px;

    color: #08773a;

}

.choose-item p {

    margin: 0;

    font-size: 15px;

    color: #666;

    line-height: 1.6;

}

/*==========================
OFFER
==========================*/

.offer-section {

    padding: 60px 20px;

}

.offer-card {

    background: linear-gradient(135deg, #0ca84a, #08773a);

    padding: 35px;

    border-radius: 30px;

    text-align: center;

    color: #fff;

    box-shadow: 0 20px 40px rgba(12, 168, 74, .35);

}

.offer-card h2 {

    font-size: 30px;

    font-weight: 800;

    margin-bottom: 20px;

}

.offer-price {

    margin: 20px 0;

}

.offer-price .old {

    display: block;

    font-size: 24px;

    text-decoration: line-through;

    opacity: .7;

}

.offer-price .new {

    display: block;

    font-size: 52px;

    font-weight: 800;

}

.offer-card p {

    font-size: 17px;

    margin-bottom: 25px;

    line-height: 1.8;

}

.offer-btn {

    display: block;

    background: #fff;

    color: #0ca84a;

    font-weight: 800;

    text-decoration: none;

    padding: 18px;

    border-radius: 60px;

    font-size: 20px;

}

.problem-section {

    padding: 60px 20px;

    background: linear-gradient(180deg, #10b34d, #08773a);

    border-radius: 35px;

    color: #fff;

}

.problem-card {

    background: rgba(255, 255, 255, .10);

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, .25);

    padding: 18px;

    border-radius: 18px;

    margin-top: 18px;

    font-weight: 600;

    line-height: 1.8;

    box-shadow: 0 10px 25px rgba(0, 0, 0, .12);

}

/*==================================
CONFIDENCE SECTION
==================================*/

.confidence-section{

    padding:70px 20px;

    background:#ffffff;

    position:relative;

    overflow:hidden;

}

.confidence-section::before{

    content:"";

    position:absolute;

    width:250px;
    height:250px;

    background:#dff8e8;

    border-radius:50%;

    top:-120px;
    right:-120px;

}

.confidence-section::after{

    content:"";

    position:absolute;

    width:180px;
    height:180px;

    background:#eefcf4;

    border-radius:50%;

    bottom:-80px;
    left:-80px;

}

.confidence-image{

    position:relative;

    text-align:center;

    margin-bottom:25px;

    z-index:2;

}

.confidence-image img{

    width:100%;

    max-width:320px;

    filter:drop-shadow(0 25px 35px rgba(0,0,0,.18));

}

.confidence-card{

    position:relative;

    z-index:2;

    background:#fff;

    border-radius:25px;

    padding:28px;

    box-shadow:0 18px 35px rgba(0,0,0,.08);

    margin-bottom:30px;

}

.confidence-badge{

    display:inline-block;

    background:#10b34d;

    color:#fff;

    padding:8px 18px;

    border-radius:40px;

    font-size:14px;

    font-weight:700;

    margin-bottom:18px;

}

.confidence-card h2{

    font-size:32px;

    font-weight:800;

    line-height:1.25;

    margin-bottom:18px;

    color:#222;

}

.confidence-card h2 span{

    color:#10b34d;

    display:block;

}

.confidence-card p{

    font-size:17px;

    line-height:1.9;

    color:#666;

}

.confidence-features{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.confidence-item{

    background:#fff;

    border-radius:20px;

    padding:20px;

    display:flex;

    align-items:center;

    gap:18px;

    box-shadow:0 10px 25px rgba(0,0,0,.06);

}

.confidence-icon{

    width:60px;

    height:60px;

    flex:0 0 60px;

    border-radius:50%;

    background:#10b34d;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:26px;

}

.confidence-item h4{

    font-size:18px;

    font-weight:700;

    color:#08773a;

    margin-bottom:6px;

}

.confidence-item p{

    margin:0;

    color:#666;

    font-size:15px;

    line-height:1.6;

}

/*==========================
REVIEWS
==========================*/

.review-section {

    padding: 60px 20px;

    background: #eefcf4;

}

.review-card {

    background: #fff;

    padding: 22px;

    border-radius: 20px;

    margin-bottom: 20px;

    box-shadow: 0 10px 25px rgba(0, 0, 0, .08);

}

.review-top {

    display: flex;

    align-items: center;

    margin-bottom: 15px;

}

.avatar {

    width: 55px;

    height: 55px;

    background: #0ca84a;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-size: 22px;

    font-weight: 700;

    margin-right: 15px;

    flex-shrink: 0;

}

.stars {

    color: #ffb400;

    font-size: 18px;

}



/*==========================
ORDER
==========================*/

.order-section {

    padding: 60px 20px;

}

.order-card {

    background: #fff;

    padding: 30px;

    border-radius: 25px;

    box-shadow: 0 15px 35px rgba(0, 0, 0, .08);

}

.order-card h2 {

    text-align: center;

    margin-bottom: 25px;

    font-weight: 800;

    color: #08773a;

}

.order-card input,

.order-card textarea {

    width: 100%;

    padding: 16px;

    border-radius: 15px;

    border: 1px solid #ddd;

    margin-bottom: 15px;

    outline: none;

}

.order-card textarea {

    height: 110px;

    resize: none;

}

.order-card button {

    width: 100%;

    padding: 18px;

    background: #0ca84a;

    border: none;

    border-radius: 50px;

    color: #fff;

    font-size: 20px;

    font-weight: 700;

}



/*==========================
FAQ
==========================*/

.faq-section {

    padding: 60px 20px;

    background: #f6fff9;

}

.faq-item {

    background: #fff;

    border-radius: 18px;

    margin-bottom: 15px;

    overflow: hidden;

    box-shadow: 0 8px 20px rgba(0, 0, 0, .08);

}

.faq-question {

    width: 100%;

    background: none;

    border: none;

    padding: 18px;

    display: flex;

    justify-content: space-between;

    font-weight: 700;

    font-size: 17px;

    cursor: pointer;

}

.faq-answer {

    display: none;

    padding: 18px;

    border-top: 1px solid #eee;

    color: #666;

    line-height: 1.8;

}



/*==========================
FOOTER
==========================*/

.footer {

    background: #08773a;

    padding: 30px 20px 100px;

    text-align: center;

    color: #fff;

    font-size: 14px;

}



/*==========================
STICKY BUTTON
==========================*/

.sticky-order {

    position: fixed;

    left: 15px;

    right: 15px;

    bottom: 15px;

    background: #0ca84a;

    padding: 18px;

    border-radius: 50px;

    text-align: center;

    text-decoration: none;

    color: #fff;

    font-size: 20px;

    font-weight: 700;

    box-shadow: 0 12px 30px rgba(12, 168, 74, .4);

    z-index: 999;

}



/*==========================
WHATSAPP
==========================*/

.whatsapp {

    position: fixed;

    bottom: 95px;

    right: 18px;

    width: 58px;

    height: 58px;

    background: #25D366;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-size: 28px;

    text-decoration: none;

    box-shadow: 0 8px 20px rgba(0, 0, 0, .2);

    z-index: 999;

}