/* ===========================
   GLOBAL STYLES
=========================== */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins', sans-serif;
    background:#f8fafc;
    color:#222;
}

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

nav{
    transition:0.3s ease;
}

nav a{
    transition:.3s;
}

nav a:hover{
    color:#16a34a;
}

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

#home img{
    width:100%;
    height:420px;
    object-fit:cover;
    border-radius:20px;
    transition:.4s;
}

#home img:hover{
    transform:scale(1.02);
}

/* ===========================
   BUTTONS
=========================== */

button,
a{
    transition:.3s ease;
}

button:hover{
    transform:translateY(-2px);
}

button:active{
    transform:scale(.98);
}

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

.service-card{
    background:white;
    border-radius:18px;
    padding:35px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:.35s;
    cursor:pointer;
}

.service-card:hover{

    transform:translateY(-8px);

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

.service-card h3{

    font-size:24px;

    color:#15803d;

    margin-bottom:15px;
}

.service-card p{

    color:#555;

    line-height:1.7;
}

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

#about .bg-white{

    transition:.35s;
}

#about .bg-white:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 40px rgba(0,0,0,.12);
}

/* ===========================
   PROCESS
=========================== */

.step{

    background:white;

    border-radius:18px;

    text-align:center;

    padding:35px;

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

    transition:.35s;
}

.step:hover{

    transform:translateY(-8px);
}

.step h3{

    width:70px;

    height:70px;

    margin:auto;

    border-radius:50%;

    background:#16a34a;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:30px;

    margin-bottom:18px;
}

.step p{

    font-weight:500;
}

/* ===========================
   BOOKING FORM
=========================== */

form{

    animation:fadeUp .8s ease;
}

input,
textarea,
select{

    width:100%;

    border:1px solid #d4d4d4;

    border-radius:10px;

    padding:15px;

    outline:none;

    transition:.3s;
}

input:focus,
textarea:focus,
select:focus{

    border-color:#16a34a;

    box-shadow:0 0 10px rgba(22,163,74,.2);
}

textarea{

    resize:vertical;
}

button{

    cursor:pointer;
}

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

#contact div div{

    transition:.35s;
}

#contact div div:hover{

    transform:translateY(-8px);
}

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

footer{

    letter-spacing:.5px;
}

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

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(35px);
    }

    to{

        opacity:1;

        transform:translateY(0);
    }
}

.service-card,
.step,
#about .bg-white{

    animation:fadeUp .8s ease;
}

/* ===========================
   SCROLLBAR
=========================== */

::-webkit-scrollbar{

    width:10px;
}

::-webkit-scrollbar-thumb{

    background:#16a34a;

    border-radius:20px;
}

::-webkit-scrollbar-track{

    background:#e5e7eb;
}

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

@media(max-width:768px){

#home h1{

    font-size:38px;
}

#home{

    text-align:center;
}

.service-card{

    padding:28px;
}

.step{

    padding:28px;
}

form{

    padding:25px !important;
}

}