/* =========================
   VARIABLES
========================= */

:root {

    --primary:#73B843;
    --primary-dark:#4E8D2D;

    --background:#fafaf8;
    --background-soft:#f2f8ea;

    --card:rgba(255,255,255,.60);
    --navbar:rgba(255,255,255,.55);

    --text:#333;
    --text-light:#666;

    --footer:#263238;

    --border:rgba(255,255,255,.35);

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

}



body.dark {


    --background:#181818;
    --background-soft:#222;

    --card:rgba(45,45,45,.65);

    --navbar:rgba(30,30,30,.75);

    --text:#f5f5f5;
    --text-light:#cccccc;

    --footer:#101010;

    --border:rgba(255,255,255,.1);

}



/* =========================
   RESET
========================= */


* {

    margin:0;
    padding:0;
    box-sizing:border-box;

}



html {

    scroll-behavior:smooth;

}



body {

    font-family:"Manrope",sans-serif;

    background:

    radial-gradient(
    circle at top left,
    #e8f7d7,
    transparent 35%
    ),

    radial-gradient(
    circle at bottom right,
    #fff3d8,
    transparent 35%
    ),

    var(--background);


    color:var(--text);

    transition:
    background .4s,
    color .4s;

    overflow-x:hidden;

}



img {

    max-width:100%;
    display:block;

}



a {

    color:inherit;

}



/* =========================
   NAVIGATION
========================= */


.navbar {

    position:fixed;

    top:20px;

    left:50%;

    transform:translateX(-50%);

    width:min(92%,1300px);


    display:flex;

    justify-content:space-between;

    align-items:center;


    padding:18px 35px;


    background:var(--navbar);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);


    border:1px solid var(--border);

    border-radius:25px;


    box-shadow:var(--shadow);


    z-index:1000;

}



.logo {

    font-size:26px;

    font-weight:800;

    color:var(--primary-dark);

}



.navbar ul {

    display:flex;

    gap:30px;

    list-style:none;

}



.navbar a {

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}



.navbar a:hover {

    color:var(--primary);

}



.nav-actions {

    display:flex;

    align-items:center;

    gap:15px;

}



#themeButton {

    background:none;

    border:0;

    font-size:22px;

    cursor:pointer;

}



.hamburger {

    display:none;

    background:none;

    border:0;

    cursor:pointer;

}



.hamburger span {

    display:block;

    width:27px;

    height:3px;

    margin:5px;

    background:var(--text);

    border-radius:10px;

}





/* =========================
   GENERAL
========================= */


section {

    padding:120px 8%;

}



.subtitle {

    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

    background:#dcedc8;

    color:#4e8d2d;

    font-weight:700;

    margin-bottom:20px;

}



.section-title {

    text-align:center;

    max-width:700px;

    margin:auto;

    margin-bottom:70px;

}



.section-title h2 {

    font-size:42px;

    margin-bottom:20px;

}



.section-title p {

    color:var(--text-light);

}



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


.btn {

    display:inline-block;

    padding:16px 38px;

    background:var(--primary);

    color:white;

    border-radius:40px;

    text-decoration:none;

    border:0;

    cursor:pointer;

    font-weight:700;

    transition:.3s;

}



.btn:hover {

    background:var(--primary-dark);

    transform:translateY(-3px);

}





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


.hero {

    min-height:100vh;

    display:flex;

    align-items:center;

    gap:70px;

}



.hero-text {

    flex:1;

}



.hero-text h1 {

    font-size:64px;

    line-height:1.1;

    margin-bottom:25px;

}



.hero-text p {

    font-size:20px;

    color:var(--text-light);

    max-width:550px;

    margin-bottom:35px;

}



.hero-image {

    flex:1;

}



.hero-image img {

    border-radius:35px;

    box-shadow:var(--shadow);

}





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


.about {

    display:flex;

    gap:80px;

    align-items:center;

}



.about-image,
.about-text {

    flex:1;

}



.about-image img {

    border-radius:30px;

    box-shadow:var(--shadow);

}



.about h2 {

    font-size:42px;

    margin-bottom:25px;

}



.about p {

    color:var(--text-light);

    margin-bottom:20px;

}



.stats {

    display:flex;

    gap:20px;

    margin-top:40px;

}



.stat {

    flex:1;

    padding:25px;

    background:var(--card);

    backdrop-filter:blur(15px);

    border-radius:20px;

    border:1px solid var(--border);

    text-align:center;

}



.stat h3 {

    font-size:36px;

    color:var(--primary);

}





/* =========================
   SERVICES
========================= */


.services {

    background:var(--background-soft);

}



.service-grid {

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}



.service-card,
.price-card {

    background:var(--card);

    backdrop-filter:blur(15px);

    border-radius:25px;

    border:1px solid var(--border);

    padding:35px;

    box-shadow:var(--shadow);

    transition:.35s;

}



.service-card:hover,
.price-card:hover {

    transform:translateY(-10px);

}



.icon {

    font-size:50px;

    margin-bottom:20px;

}



/* =========================
   PRICING
========================= */


.price-grid {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}



.price {

    font-size:45px;

    font-weight:800;

    margin:25px 0;

}



.price-card ul {

    list-style:none;

    margin-bottom:30px;

}



.price-card li {

    margin:12px;

}



.featured {

    background:var(--primary);

    color:white;

    transform:scale(1.05);

}



.badge {

    background:#ff9800;

    padding:7px 15px;

    border-radius:20px;

    display:inline-block;

}





/* =========================
   REVIEWS BLOG FAQ
========================= */


.review-box,
.blog-placeholder,
.faq-item {

    max-width:800px;

    margin:auto;

    padding:35px;

    background:var(--card);

    border-radius:25px;

    box-shadow:var(--shadow);

}





/* =========================
   CONTACT
========================= */


form {

    max-width:600px;

    margin:auto;

    display:flex;

    flex-direction:column;

    gap:18px;

}



input,
textarea,
select {

    padding:15px;

    border-radius:12px;

    border:1px solid #ccc;

    font-size:16px;

    background:transparent;

    color:var(--text);

}



textarea {

    min-height:150px;

}



#success {

    text-align:center;

}





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


footer {

    padding:40px;

    text-align:center;

    background:var(--footer);

    color:white;

}





/* =========================
   ANIMATIONS
========================= */


.reveal {

    opacity:0;

    transform:translateY(40px);

    transition:.8s;

}



.reveal.active {

    opacity:1;

    transform:none;

}





.mobile-contact {

    display:none;

}






/* =========================
   MOBILE
========================= */


@media(max-width:1000px){


.hero,
.about {

    flex-direction:column;

    text-align:center;

}



.hero-text h1 {

    font-size:42px;

}



.service-grid {

    grid-template-columns:repeat(2,1fr);

}



.price-grid {

    grid-template-columns:1fr;

}



.featured {

    transform:none;

}


}



@media(max-width:700px){



.navbar {

    top:10px;

    padding:15px 20px;

}



.navbar ul {

    display:none;

    position:absolute;

    top:80px;

    left:0;

    width:100%;

    flex-direction:column;

    background:var(--navbar);

    backdrop-filter:blur(20px);

    padding:30px;

    border-radius:20px;

}



.navbar ul.active {

    display:flex;

}



.hamburger {

    display:block;

}



section {

    padding:90px 5%;

}



.service-grid {

    grid-template-columns:1fr;

}



.stats {

    flex-direction:column;

}



.mobile-contact {

    display:block;

    position:fixed;

    bottom:15px;

    left:15px;

    right:15px;

    background:var(--primary);

    color:white;

    padding:16px;

    border-radius:30px;

    text-align:center;

    z-index:999;

}



}

.hidden {

position:absolute;

left:-9999px;

}