*{
    box-sizing:border-box;
}

body{
    margin:0;
    font-family:"Arial",sans-serif;
    color:#20251f;

    background:
    radial-gradient(circle at top left,#e7f4d5 0%,transparent 35%),
    radial-gradient(circle at bottom right,#dceecb 0%,transparent 40%),
    linear-gradient(
        180deg,
        #ffffff 0%,
        #f5f9f0 50%,
        #edf5e4 100%
    );
}


a{
    text-decoration:none;
    color:inherit;
}


.container{
    width:min(1180px,92%);
    margin:auto;
}



/* HEADER */

.header{

    position:sticky;
    top:0;

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

    backdrop-filter:blur(15px);

    border-bottom:1px solid #dce8d0;

    z-index:50;

}


.nav{

    height:80px;

    display:flex;

    align-items:center;

}


.logo{

    flex:1;

    font-size:20px;

    font-weight:900;

    letter-spacing:1px;

    color:#315b25;

}



.menu{

    display:flex;

    gap:25px;

    font-size:12px;

    font-weight:bold;

    text-transform:uppercase;

}


.menu a{

    transition:.3s;

}


.menu a:hover{

    color:#75b52b;

}





/* BUTTON */

.btn{

    display:inline-block;

    padding:14px 32px;

    border-radius:40px;

    color:white;

    font-weight:bold;

    background:

    linear-gradient(
        135deg,
        #91d43b,
        #579b18
    );


    box-shadow:

    0 10px 25px rgba(80,140,20,.35);

    transition:.35s;

}



.btn:hover{

    transform:translateY(-4px);

    box-shadow:

    0 15px 35px rgba(80,140,20,.45);

}





/* HERO */

.hero{

    min-height:560px;

    color:white;


    background:

    linear-gradient(
        90deg,
        rgba(15,25,10,.75),
        rgba(15,25,10,.25)
    ),

    url('https://images.unsplash.com/photo-1558904541-efa843a96f01?auto=format&fit=crop&w=1800&q=85')

    center/cover;


}



.hero .container{

    padding:130px 0;

}


.hero h1{

    font-size:60px;

    max-width:750px;

    line-height:1.05;

    font-weight:900;

}





/* SECTIONS */


.section{

    padding:80px 0;

}



.section h2{

    color:#315b25;

    font-size:38px;

    font-weight:900;

    margin-bottom:40px;

}



.section h2:after{

    content:"";

    display:block;

    width:80px;

    height:5px;

    margin-top:15px;

    background:#7fc32c;

    border-radius:10px;

}




/* GRID */

.grid{

    display:grid;

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

    gap:30px;

}




/* PRODUCT CARD */

.product{

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

    border-radius:30px;

    padding:22px;

    border:1px solid #e0ebd4;


    box-shadow:

    0 15px 45px rgba(35,70,15,.12);


    transition:.35s;

}



.product:hover{

    transform:translateY(-8px);


    box-shadow:

    0 25px 60px rgba(35,70,15,.18);

}




/* IMAGE */


.product-img{

    height:280px;

    border-radius:22px;

    overflow:hidden;


    background:

    linear-gradient(
        135deg,
        #f8fcf3,
        #e5f1d8
    );


    display:flex;

    align-items:center;

    justify-content:center;

}



.product-img img{

    width:100%;

    height:100%;

    object-fit:contain;

    padding:15px;

}




.product h3{

    color:#315b25;

    font-size:21px;

}



.price{

    font-size:22px;

    font-weight:900;

    color:#609b22;

    margin:15px 0;

}





/* FORM */

input,
select,
textarea{


    width:100%;

    padding:15px;

    border-radius:15px;

    border:1px solid #d6e4c8;

    background:white;

    font-size:15px;

}




.form{

    display:grid;

    gap:15px;

    max-width:700px;

}




/* CART */

.cart-row{

    background:white;

    padding:20px;

    border-radius:18px;

    margin-bottom:15px;

    box-shadow:

    0 10px 30px rgba(0,0,0,.06);

}





/* FOOTER */


.footer{

    background:

    linear-gradient(
        135deg,
        #173015,
        #294d20
    );


    color:white;

    padding:60px 0;

}





/* ADMIN */

.admin{

    min-height:100vh;


    background:

    radial-gradient(
        circle at top,
        #e5f4d2,
        transparent 40%
    ),

    #f5f8f0;

}



.admin-nav{

    background:#182515;

    color:white;

    padding:20px;

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

}


.admin-nav a{

    margin-left:20px;

}




.table{

    width:100%;

    background:white;

    border-radius:20px;

    overflow:hidden;

    border-collapse:collapse;

    box-shadow:

    0 15px 40px rgba(0,0,0,.08);

}



.table th{

    background:#315b25;

    color:white;

}


.table td,
.table th{

    padding:15px;

    border-bottom:1px solid #eee;

}





/* LAVORI */

.lavori .product-img{

    height:300px;

    padding:0;

}


.lavori .product-img img{

    object-fit:cover;

    padding:0;

    transition:.4s;

}



.lavori .product-img:hover img{

    transform:scale(1.08);

}




/* LIGHTBOX */


#lightbox{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.85);

    align-items:center;

    justify-content:center;

    z-index:999;

}


#lightbox img{

    max-width:90%;

    max-height:90%;

    border-radius:25px;

}





/* MOBILE */


@media(max-width:800px){


.menu{

    display:none;

}


.grid{

    grid-template-columns:1fr 1fr;

}


.hero h1{

    font-size:38px;

}

}



@media(max-width:550px){


.grid{

    grid-template-columns:1fr;

}


.hero h1{

    font-size:32px;

}


.product-img{

    height:230px;

}

}
/* PREMIUM BLOCKS */

.info-card{
background:white;
padding:30px;
border-radius:25px;
text-align:center;
box-shadow:0 15px 40px rgba(0,0,0,.08);
transition:.3s;
}

.info-card:hover{
transform:translateY(-8px);
}


.info-card h3{
color:#315b25;
}


.icon{
font-size:45px;
margin-bottom:15px;
}



.services-box{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:15px;
}


.services-box div{
background:white;
padding:25px;
border-radius:20px;
text-align:center;
font-weight:bold;
color:#315b25;
box-shadow:0 10px 30px rgba(0,0,0,.08);
}




.whatsapp{

position:fixed;
right:25px;
bottom:25px;

width:65px;
height:65px;

border-radius:50%;

background:#25D366;

color:white;

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

font-size:32px;

z-index:999;

box-shadow:0 10px 30px rgba(0,0,0,.3);

}



.whatsapp:hover{

transform:scale(1.1);

}



@media(max-width:900px){

.services-box{
grid-template-columns:1fr 1fr;
}

}



@media(max-width:550px){

.services-box{
grid-template-columns:1fr;
}

}
/* =========================
   SERVICES PREMIUM
========================= */

.services-box{

display:grid;
grid-template-columns:repeat(5,1fr);
gap:15px;
margin-top:30px;

}


.services-box div{

background:white;

padding:25px 15px;

border-radius:20px;

text-align:center;

font-weight:bold;

color:#315b25;

box-shadow:
0 10px 30px rgba(40,70,20,.10);

transition:.3s;

border:1px solid #e1ebd8;

}



.services-box div:hover{

transform:translateY(-5px);

background:#f5faef;

}





/* =========================
   WHATSAPP FLOAT BUTTON
========================= */


.whatsapp{

position:fixed;

right:25px;

bottom:25px;

width:65px;

height:65px;

border-radius:50%;

background:#25D366;

color:white;

display:flex;

align-items:center;

justify-content:center;

font-size:32px;

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

z-index:999;

animation:pulse 2s infinite;

}



.whatsapp:hover{

transform:scale(1.1);

}





@keyframes pulse{


0%{

box-shadow:
0 0 0 0 rgba(37,211,102,.6);

}


70%{

box-shadow:
0 0 0 20px rgba(37,211,102,0);

}


100%{

box-shadow:
0 0 0 0 rgba(37,211,102,0);

}


}






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


.product h2{

color:#5c8f20;

}





/* =========================
   ADMIN НЕ ЧІПАЄМО
========================= */





/* MOBILE */

@media(max-width:900px){


.services-box{

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

}


.whatsapp{

width:58px;

height:58px;

right:15px;

bottom:15px;

}


}



@media(max-width:550px){


.services-box{

grid-template-columns:1fr;

}


}
/* =========================
   PROMO BANNER
========================= */


.promo{

padding:40px 0;

}


.promo-box{

background:
linear-gradient(
135deg,
#315b25,
#6fae27
);

color:white;

padding:45px;

border-radius:30px;

text-align:center;

box-shadow:
0 20px 50px rgba(40,70,20,.25);

}


.promo-box h2{

color:white;

font-size:35px;

margin-bottom:15px;

}


.promo-box p{

font-size:18px;

margin-bottom:25px;

}





/* =========================
   FIXED CTA
========================= */


.cta-bottom{

position:fixed;

left:50%;

bottom:25px;

transform:translateX(-50%);

z-index:998;

}



.cta-bottom a{

background:#315b25;

color:white;

padding:15px 35px;

border-radius:40px;

font-weight:bold;

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

transition:.3s;

}



.cta-bottom a:hover{

background:#6fae27;

transform:translateY(-3px);

}






/* =========================
   SCROLL ANIMATION
========================= */


.section{

animation:showSection .8s ease;

}



@keyframes showSection{


from{

opacity:0;

transform:translateY(30px);

}


to{

opacity:1;

transform:translateY(0);

}


}






@media(max-width:600px){


.promo-box{

padding:30px 20px;

}


.promo-box h2{

font-size:25px;

}


.cta-bottom a{

padding:12px 20px;

font-size:14px;

}


}
/* =========================
   PREMIUM HOME BLOCKS
========================= */


/* SERVICES */

.services-box{

display:grid;
grid-template-columns:repeat(5,1fr);
gap:18px;
margin-top:30px;

}


.services-box div{

background:white;
padding:25px 15px;

border-radius:20px;

text-align:center;

font-weight:bold;

color:#315b25;

box-shadow:
0 10px 30px rgba(40,70,20,.10);

transition:.3s;

}


.services-box div:hover{

transform:translateY(-6px);

box-shadow:
0 15px 40px rgba(40,70,20,.18);

}




/* CTA BOX */


.cta-box{

background:
linear-gradient(
135deg,
#315b25,
#6fae27
);

color:white;

padding:55px;

border-radius:35px;

text-align:center;

box-shadow:
0 20px 50px rgba(40,70,20,.25);

}



.cta-box h2{

color:white;

font-size:38px;

margin-bottom:15px;

}


.cta-box p{

font-size:18px;

margin-bottom:30px;

}




.cta-buttons{

display:flex;

justify-content:center;

gap:20px;

}




.call{

background:white;

color:#315b25;

}


.call:hover{

background:#edf5e6;

}




/* WHATSAPP FLOAT */


.whatsapp{

position:fixed;

right:25px;

bottom:25px;

width:60px;

height:60px;

background:#25D366;

color:white;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

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

z-index:100;

transition:.3s;

}



.whatsapp:hover{

transform:scale(1.1);

}




/* MOBILE */


@media(max-width:900px){


.services-box{

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

}


.cta-box{

padding:35px 20px;

}


.cta-box h2{

font-size:28px;

}


.cta-buttons{

flex-direction:column;

}



}


@media(max-width:550px){


.services-box{

grid-template-columns:1fr;

}


.whatsapp{

width:55px;

height:55px;

right:15px;

bottom:15px;

}


}
/* PRODUCT PAGE */

.product-page{

display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
align-items:center;

}


.product-big-image{

background:white;

border-radius:30px;

padding:30px;

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

height:500px;

}


.product-big-image img{

width:100%;
height:100%;
object-fit:contain;

}



.product-info h1{

font-size:42px;

color:#315b25;

}



.category{

color:#6fae27;

font-weight:bold;

margin:15px 0;

}



.price.big{

font-size:35px;

}



.qty{

width:80px;

padding:12px;

margin-right:15px;

}



@media(max-width:800px){

.product-page{

grid-template-columns:1fr;

}


.product-big-image{

height:350px;

}


.product-info h1{

font-size:30px;

}

}