/* =====================================
   NEWLOGIC WEBSITE
   Version 1.0
===================================== */

/* Google Fonts
-------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

/* Variables
-------------------------------------*/
:root{

    --primary:#B8894E;
    --primary-dark:#9E6F39;

    --text:#2F2F2F;
    --light-text:#666;

    --bg:#FFFFFF;
    --section:#F8F7F5;

    --radius:14px;

    --shadow:0 12px 35px rgba(0,0,0,.08);

    --transition:.3s ease;

    --container:1200px;

}

/* Reset
-------------------------------------*/

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

html{
    scroll-behavior:smooth;
}

body{

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

    background:var(--bg);

    color:var(--text);

    line-height:1.7;

}

/* Typography
-------------------------------------*/

h1,h2,h3,h4{

    font-family:'Playfair Display',serif;

    color:var(--text);

    line-height:1.2;

}

h1{

    font-size:3.3rem;

    margin-bottom:25px;

}

p{

    color:var(--light-text);

}

/* Layout
-------------------------------------*/

.container{

    width:92%;

    max-width:var(--container);

    margin:auto;

}

/* Header
-------------------------------------*/

header{

    width:100%;

    padding:28px 0;

    background:#fff;

    border-bottom:1px solid #eee;

}

.logo h2{

    font-size:32px;

    letter-spacing:2px;

}

.logo span{

    display:block;

    margin-top:5px;

    color:var(--primary);

    font-size:14px;

    font-weight:600;

    letter-spacing:1px;

}

/* Hero Layout
-------------------------------------*/

.hero{

    padding:80px 0;

}

.hero-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}

.hero-content{

    animation:fadeUp .8s ease;

}

.eyebrow{

    display:inline-block;

    margin-bottom:18px;

    padding:8px 16px;

    border-radius:50px;

    background:#f2ece5;

    color:var(--primary-dark);

    font-size:14px;

    font-weight:600;

}

.description{

    font-size:18px;

    margin-bottom:30px;

}

.highlight{

    margin-bottom:35px;

    font-size:20px;

    font-weight:600;

    color:var(--text);

    line-height:1.8;

}
/* =====================================
   HERO IMAGE
===================================== */

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

.hero-image img{
    width:100%;
    max-width:560px;
    border-radius:18px;
    box-shadow:var(--shadow);
    display:block;
}

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

.buttons{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:35px;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:14px 28px;
    border-radius:10px;
    text-decoration:none;
    font-weight:600;
    transition:var(--transition);
}

.btn-primary{
    background:var(--primary);
    color:#fff;
}

.btn-primary:hover{
    background:var(--primary-dark);
    transform:translateY(-2px);
}

.btn-outline{
    border:2px solid var(--primary);
    color:var(--primary);
    background:#fff;
}

.btn-outline:hover{
    background:var(--primary);
    color:#fff;
}

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

.contact{
    margin-top:20px;
}

.contact p{
    margin-bottom:12px;
    color:var(--text);
    font-size:15px;
}

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

footer{
    margin-top:60px;
    padding:30px 0;
    background:var(--section);
    border-top:1px solid #ececec;
    text-align:center;
}

footer p{
    color:#777;
    font-size:14px;
}

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

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(30px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

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

@media (max-width:992px){

    h1{
        font-size:2.5rem;
    }

    .hero-grid{
        grid-template-columns:1fr;
        gap:40px;
    }

    .hero-image{
        order:-1;
    }

}

@media (max-width:768px){

    header{
        padding:20px 0;
    }

    .logo h2{
        font-size:26px;
    }

    h1{
        font-size:2rem;
    }

    .description{
        font-size:16px;
    }

    .highlight{
        font-size:18px;
    }

    .buttons{
        flex-direction:column;
    }

    .btn{
        width:100%;
    }

    .hero{
        padding:50px 0;
    }

}

@media (max-width:480px){

    .container{
        width:90%;
    }

    .eyebrow{
        font-size:12px;
    }

    h1{
        font-size:1.8rem;
    }

    .description{
        font-size:15px;
    }

    footer p{
        font-size:13px;
    }

}