/* ========================================
   EASY SHINE CLEANING
   GLOBAL CSS
======================================== */

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

/* ROOT VARIABLES */
:root{

    --primary:#2563eb;
    --secondary:#0ea5e9;

    --dark:#0f172a;
    --light:#ffffff;

    --gray:#64748b;
    --border:#e2e8f0;

    --radius:16px;

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

}

/* HTML */
html{
    scroll-behavior:smooth;
}

/* BODY */
body{
    font-family:
    'Inter',
    sans-serif;

    background:#fff;
    color:#111827;

    overflow-x:hidden;
}

/* IMAGES */
img{
    max-width:100%;
    height:auto;
    display:block;
}

/* LINKS */
a{
    text-decoration:none;
    color:inherit;
}

/* BUTTONS */
button{
    border:none;
    outline:none;
    cursor:pointer;
    font-family:inherit;
}

/* INPUTS */
input,
textarea,
select{
    font-family:inherit;
    outline:none;
}

/* CONTAINER */
.container{
    width:min(1200px,90%);
    margin:auto;
}

/* SECTION SPACING */
section{
    padding:80px 0;
}

/* RESPONSIVE TYPOGRAPHY */
h1{
    font-size:clamp(2.5rem,5vw,5rem);
    line-height:1.1;
}

h2{
    font-size:clamp(2rem,4vw,3.5rem);
}

h3{
    font-size:clamp(1.5rem,3vw,2rem);
}

p{
    font-size:clamp(1rem,2vw,1.1rem);
    line-height:1.7;
}

/* FLEX UTILITIES */
.flex{
    display:flex;
}

.flex-center{
    display:flex;
    justify-content:center;
    align-items:center;
}

/* GRID */
.grid{
    display:grid;
}

/* RESPONSIVE */
@media (max-width:768px){

    section{
        padding:60px 0;
    }

    .container{
        width:92%;
    }

}

/* ========================================
   SPACING SYSTEM
======================================== */

:root{

    --space-xs:8px;
    --space-sm:16px;
    --space-md:24px;
    --space-lg:40px;
    --space-xl:80px;

}

/* ========================================
   RESPONSIVE HELPERS
======================================== */

.hide-mobile{
    display:block;
}

.show-mobile{
    display:none;
}

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

@media (max-width:768px){

    .hide-mobile{
        display:none;
    }

    .show-mobile{
        display:block;
    }

    h1{
        line-height:1.2;
    }

    h2{
        line-height:1.2;
    }

    p{
        line-height:1.6;
    }

}