/*
==================================================
EKOCAD GLOBAL CSS
One Page Website
==================================================
*/


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

:root {

    --color-primary: #0F172A;
    --color-secondary: #1E40AF;
    --color-accent: #F59E0B;

    --color-text: #334155;
    --color-muted: #64748B;

    --color-light: #F8FAFC;
    --color-white: #FFFFFF;
    --color-border: #E2E8F0;

    --container-width: 1200px;

    --radius: 10px;

    --shadow:
    0 10px 30px rgba(15,23,42,0.08);

    --transition:
    all .3s ease;

}



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

* {

    box-sizing:border-box;

}


html {

    scroll-behavior:smooth;

}


body {

    margin:0;

    padding-top:80px;

    font-family:
    "Segoe UI",
    Arial,
    sans-serif;

    color:var(--color-text);

    line-height:1.7;

}



img {

    max-width:100%;

}



/* ==============================================
   CONTAINER
================================================ */

.container {

    width:100%;

    max-width:var(--container-width);

    margin:auto;

    padding-left:2rem;

    padding-right:2rem;

}



/* ==============================================
   FIXED HEADER
================================================ */

.site-header {

    position:fixed !important;

    top:0;

    left:0;

    right:0;

    width:100%;

    z-index:99999;

    background:
    rgba(255,255,255,0.97);

    backdrop-filter:blur(10px);

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

}



.ekocad-header-container {

    max-width:var(--container-width);

    margin:auto;

    padding:1rem 2rem;

    display:flex;

    flex-direction:row;

    justify-content:space-between;

    align-items:center;

}



.site-title {

    margin:0;

    line-height:1;

    font-size:1.5rem;

    font-weight:800;

}



.site-title a {

    color:var(--color-primary);

}



/* Navigation */

.main-navigation {

    display:flex;

    align-items:center;

}



.main-navigation ul {

    display:flex;

    flex-direction:row;

    align-items:center;

    gap:2rem;

    list-style:none;

    padding:0;

    margin:0;

}



.main-navigation li {

    display:flex;

    align-items:center;

}



.main-navigation a {

    color:var(--color-primary);

    font-size:.95rem;

    font-weight:500;

}



.main-navigation a:hover {

    color:var(--color-secondary);

}



/* ==============================================
   SECTIONS
================================================ */

section {

    scroll-margin-top:100px;

}



.section {

    padding:90px 0;

}



.section-light {

    background:var(--color-light);

}



h1,
h2,
h3 {

    color:var(--color-primary);

    line-height:1.2;

}



h1 {

    font-size:
    clamp(2.2rem,5vw,3.5rem);

}



h2 {

    text-align:center;

    font-size:2.2rem;

    margin-bottom:1rem;

}



h3 {

    font-size:1.25rem;

}



.section-intro {

    max-width:750px;

    margin:
    0 auto 3rem;

    text-align:center;

    color:var(--color-muted);

}



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

.hero-section {

    min-height:90vh;

    display:flex;

    align-items:center;

}



.hero-content {

    max-width:850px;

}



.hero-content p {

    font-size:1.15rem;

    color:var(--color-muted);

}



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

.hero-buttons {

    display:flex;

    gap:1rem;

    margin-top:2rem;

}



.btn {

    display:inline-block;

    padding:.8rem 1.8rem;

    border-radius:6px;

    font-weight:600;

}



.btn-primary {

    background:var(--color-secondary);

    color:white;

}



.btn-primary:hover {

    background:var(--color-primary);

}



.btn-secondary {

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

    color:var(--color-secondary);

}



.btn-secondary:hover {

    background:var(--color-secondary);

    color:white;

}



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

.cards {

    display:grid;

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

    gap:2rem;

}



.card {

    background:white;

    padding:2rem;

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

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    transition:var(--transition);

}



.card:hover {

    transform:translateY(-5px);

}



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

.about-content {

    max-width:850px;

    margin:auto;

}



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

.site-footer {

    background:var(--color-primary);

    color:white;

    padding:2rem 0;

}



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

@media(max-width:900px){


    .ekocad-header-container {

        flex-direction:column;

        gap:1rem;

    }


    .main-navigation ul {

        flex-wrap:wrap;

        justify-content:center;

        gap:1rem;

    }


    .cards {

        grid-template-columns:
        1fr;

    }


    .hero-buttons {

        flex-direction:column;

    }

}