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

:root{

    --primary:#2563EB;
    --primary-dark:#1D4ED8;

    --text:#0F172A;
    --text-light:#64748B;

    --background:#F8FAFC;
    --white:#FFFFFF;

    --border:#E2E8F0;

    --shadow:0 10px 30px rgba(15,23,42,.08);
    --shadow-hover:0 25px 60px rgba(37,99,235,.12);

    --transition:.35s;

    --radius:12px;

    --container:1200px;

}


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

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Inter',sans-serif;

    background:var(--background);

    color:var(--text);

    overflow-x:hidden;

    line-height:1.7;

    opacity:0;

    animation:fadePage .6s forwards;

}

img{

    display:block;

    max-width:100%;

    height:auto;

}

a{

    text-decoration:none;

    color:inherit;

}

ul{

    list-style:none;

}

button{

    border:none;

    outline:none;

    cursor:pointer;

    font-family:inherit;

}


/* ==========================================
   TYPOGRAPHY
========================================== */

h1,
h2,
h3,
h4,
h5,
h6{

    font-family:'Geist',sans-serif;

    font-weight:700;

    color:var(--text);

}

p{

    color:var(--text-light);

}


/* ==========================================
   LAYOUT
========================================== */

.container{

    width:min(var(--container),90%);

    margin:0 auto;

}

section{

    padding:100px 0;

}


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

.hidden{

    opacity:0;

    transform:translateY(60px);

    transition:1s;

}

.show{

    opacity:1;

    transform:translateY(0);

}


/* ==========================================
   CARD HOVER
========================================== */

.service-card,
.project-card,
.portfolio-card,
.workflow-card,
.vision-card{

    transition:var(--transition);

}

.service-card:hover,
.project-card:hover,
.portfolio-card:hover,
.workflow-card:hover,
.vision-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-hover);

}


/* ==========================================
   PAGE FADE
========================================== */

@keyframes fadePage{

    to{

        opacity:1;

    }

}