/* ================================================= */
/* Base */
/* ================================================= */

:root {
    --primary: #072f27;
    --primary-rgb:  rgb(var--(--primary));
    --primary-hover: #af8440;

    --text-body: #1f3735;
    --text-accent: #af8440;
    --text-light: #eee9e3;

    --background: #eee9e3;
    --surface: #C7DFC5;

    --border-radius: 8px;

    --shadow-sm: 0 2px 8px rgba(0,0,0,0.5);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.8);

    --transition: 0.25s ease;

    --about-image: url("img/camille-brodard-vc1fE6QrYlE-unsplash.jpg");
    --services-image: url("img/kateryna-hliznitsova-23AaleTpDz0-unsplash.jpg");
    --contact-image: url("img/nataliya-melnychuk-q0FlOZfz6HE-unsplash.jpg");

    /* --- Font Choices --- */

    --display-font: "Corinthia", cursive;
    --font-heading: "Lora", serif;
    --font-body: "Manrope", sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--text) ;
    background: var(--background) ;
    line-height: 1.6;
/* --- Background Pattern --- */
    background-color: #eee9e3;
    background-image: url("data:image/svg+xml,%3Csvg width='80' height='88' viewBox='0 0 80 88' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 21.91V26h-2c-9.94 0-18 8.06-18 18 0 9.943 8.058 18 18 18h2v4.09c8.012.722 14.785 5.738 18 12.73 3.212-6.99 9.983-12.008 18-12.73V62h2c9.94 0 18-8.06 18-18 0-9.943-8.058-18-18-18h-2v-4.09c-8.012-.722-14.785-5.738-18-12.73-3.212 6.99-9.983 12.008-18 12.73zM54 58v4.696c-5.574 1.316-10.455 4.428-14 8.69-3.545-4.262-8.426-7.374-14-8.69V58h-5.993C12.27 58 6 51.734 6 44c0-7.732 6.275-14 14.007-14H26v-4.696c5.574-1.316 10.455-4.428 14-8.69 3.545 4.262 8.426 7.374 14 8.69V30h5.993C67.73 30 74 36.266 74 44c0 7.732-6.275 14-14.007 14H54zM42 88c0-9.94 8.06-18 18-18h2v-4.09c8.016-.722 14.787-5.738 18-12.73v7.434c-3.545 4.262-8.426 7.374-14 8.69V74h-5.993C52.275 74 46 80.268 46 88h-4zm-4 0c0-9.943-8.058-18-18-18h-2v-4.09c-8.012-.722-14.785-5.738-18-12.73v7.434c3.545 4.262 8.426 7.374 14 8.69V74h5.993C27.73 74 34 80.266 34 88h4zm4-88c0 9.943 8.058 18 18 18h2v4.09c8.012.722 14.785 5.738 18 12.73v-7.434c-3.545-4.262-8.426-7.374-14-8.69V14h-5.993C52.27 14 46 7.734 46 0h-4zM0 34.82c3.213-6.992 9.984-12.008 18-12.73V18h2c9.94 0 18-8.06 18-18h-4c0 7.732-6.275 14-14.007 14H14v4.696c-5.574 1.316-10.455 4.428-14 8.69v7.433z' fill='%23af8440' fill-opacity='0.06' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.accent {
    font-family: var(--display-font);
    font-size: 5rem;
    line-height: 20%;
    color: var(--text-accent);
}

.callout-left {
    font-size: 20rem;
    opacity: 0.3;
    position: relative;
    top: 20px;
    left: 10px;
}

.callout-right {
    text-align: right;
    font-size: 20rem;
    opacity: 0.3;
    position: absolute;
    top: 30px;
}

.light {
    color: var(--text-light);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading) ;
}

.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
    font-family: var(--font-heading) ;
}

input,
textarea,
select,
button {
    font-family: inherit ;
}

img {
    max-width: 100%;
    display: block;
}

section {
    padding: 5rem 1.5rem;
}

/* ================================================= */
/* Layout */
/* ================================================= */

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

.two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

/* ================================================= */
/* Header */
/* ================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;

    background: var(--primary);
    backdrop-filter: blur(8px);

    padding: 1.25rem 0;

    transition: all var(--transition);

    box-shadow: var(--shadow-sm);
    background-color: #072f27;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='24' viewBox='0 0 88 24'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='autumn' fill='%23c7dfc5' fill-opacity='0.03'%3E%3Cpath d='M10 0l30 15 2 1V2.18A10 10 0 0 0 41.76 0H39.7a8 8 0 0 1 .3 2.18v10.58L14.47 0H10zm31.76 24a10 10 0 0 0-5.29-6.76L4 1 2 0v13.82a10 10 0 0 0 5.53 8.94L10 24h4.47l-6.05-3.02A8 8 0 0 1 4 13.82V3.24l31.58 15.78A8 8 0 0 1 39.7 24h2.06zM78 24l2.47-1.24A10 10 0 0 0 86 13.82V0l-2 1-32.47 16.24A10 10 0 0 0 46.24 24h2.06a8 8 0 0 1 4.12-4.98L84 3.24v10.58a8 8 0 0 1-4.42 7.16L73.53 24H78zm0-24L48 15l-2 1V2.18A10 10 0 0 1 46.24 0h2.06a8 8 0 0 0-.3 2.18v10.58L73.53 0H78z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");  
}

.site-header.scrolled {
    padding: 0.75rem 0;
}

.site-header nav {
    background-color: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar-brand {
    color: var(--text-light) ;
    padding-bottom: 1rem;
}

.nav-link {
    color: var(--text-light) ;
    display: flex;
    gap: 1.5rem;
}

.nav-link a {
    color: var(--text-light) ;
    text-decoration: none;

    transition: all var(--transition);

    position: relative;
}


/* Active nav highlighting */

.nav-link a.active {
    color: var(--surface) ;
    font-weight: 600;
}

/* Animated underline */

.nav-link a::after {
    content: "";
    color: var(--text-light) ;

    position: absolute;
    left: 0;
    bottom: -4px;

    width: 0;
    height: 2px;

    background: var(--primary);

    transition: width var(--transition);
}

.nav-link a:hover,
.nav-link a.active {
    color: var(--text-accent);
    width: 100%;
}


/* ================================================= */
/* Buttons */
/* ================================================= */

.btn {
    display: inline-block;

    padding: 0.75rem 1.5rem;

    border-radius: var(--border-radius);

    text-decoration: none;

    transition: all var(--transition);
}

.btn-primary {
    background: var(--primary) ;
    border: none ;
    color: var(--text-light) ;
    box-shadow: var(--shadow-sm);
}

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

/* ================================================= */
/* Cards */
/* ================================================= */

.card {
    /*background: white;*/
    padding: 2rem;

    /* default BootStrap card border causes artifacts from bg image  */
    border: none ;

    border-color: transparent ;

    border-radius: var(--border-radius);

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

    transition: all var(--transition);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

/* ================================================= */
/* Fade */
/* ================================================= */


#about {
    --section-image: var(--about-image);
}

#services {
    --section-image: var(--services-image);
}

#contact {
    --section-image: var(--contact-image);
}

.bg-right-fade {
    background-color: var(--primary);

    background-image:
        linear-gradient(
            to right,
            var(--primary) 0%,
            var(--primary) 25%,
            transparent 100%

        ),
        var(--section-image);

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    color: var(--text-light);

    min-height: 500px;
}

/* ================================================= */
/* Image Hover Zoom */
/* ================================================= */

.image-hover {
    overflow: hidden;
    border-radius: var(--border-radius);
}

.image-hover img {
    transition: transform 0.4s ease;
}

.image-hover:hover img {
    transform: scale(1.05);
}

/* ================================================= */
/* Fade In Animation */
/* ================================================= */

.fade-in {
    opacity: 0;
    transform: translateY(25px);
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}

/* ================================================= */
/* Footer */
/* ================================================= */

footer {
    padding: 3rem 1.5rem;
    background: var(--primary);
    background-color: #072f27;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='24' viewBox='0 0 88 24'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='autumn' fill='%23c7dfc5' fill-opacity='0.03'%3E%3Cpath d='M10 0l30 15 2 1V2.18A10 10 0 0 0 41.76 0H39.7a8 8 0 0 1 .3 2.18v10.58L14.47 0H10zm31.76 24a10 10 0 0 0-5.29-6.76L4 1 2 0v13.82a10 10 0 0 0 5.53 8.94L10 24h4.47l-6.05-3.02A8 8 0 0 1 4 13.82V3.24l31.58 15.78A8 8 0 0 1 39.7 24h2.06zM78 24l2.47-1.24A10 10 0 0 0 86 13.82V0l-2 1-32.47 16.24A10 10 0 0 0 46.24 24h2.06a8 8 0 0 1 4.12-4.98L84 3.24v10.58a8 8 0 0 1-4.42 7.16L73.53 24H78zm0-24L48 15l-2 1V2.18A10 10 0 0 1 46.24 0h2.06a8 8 0 0 0-.3 2.18v10.58L73.53 0H78z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

footer a {
    color: var(--text-light) ;
    text-decoration: none;
    color: var(--text-light);

    transition: all var(--transition);

    position: relative;
}

/*
div {
    border: 1px solid magenta;
}
*/