* {
    margin: 0;
    padding: 0;
}

/* STYLES */

:root {
    --color-black-primary: #161616;
    --color-black-secondary: #313131;
    --color-grey-primary: #73737a;
    --color-grey-secondary: #efefef;
    --color-white: #ffffff;
    --color-white-90: #ffffffef;
    --color-white-60: #ffffff93;
    --color-white-30: #ffffff42;

    --border-radius: 8px;
    --border-radius-full: 999px;
    --border-grey: 1px solid var(var(--color-grey-secondary));
    --border-white: 1px solid var(var(--color-white-30));


    --input-height: 48px;

    --spacing-1: 8px;
    --spacing-2: 16px;
    --spacing-3: 24px;
    --spacing-4: 32px;
    --spacing-5: 40px;
    --spacing-6: 48px;
    --spacing-7: 80px;
    --spacing-8: 120px;
}

body {
    background-color: var(--color-white);
    font-family: "Instrument Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-weight: 500;
}

h6,
.h6 {
    line-height: 1.6;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
    color: var(--color-black-primary);
}

.section-padding {
    padding-top: var(--spacing-8);
    padding-bottom: var(--spacing-8);
}

input {
    height: var(--input-height);

}

.container {
    max-width: 1400px;
}

/* Navigation */

/* light */

.navbar {
    background-color: var(--color-white-90);
}

.navbar-light {
    background-color: #5a5a5a68;
    margin: 16px;
    border-radius: 24px;
    border: 1px solid #ffffff0e;
    backdrop-filter: blur(4px);
    box-shadow: 2px 2px 8px rgba(28, 28, 28, 0.086);

}

li.nav-item a {
    color: var(--color-white);

}

li a.selected {
    color: var(--color-white);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 12px;
}


a.nav-link {
    color: var(--color-grey-primary);
}

a.nav-link:hover {
    color: var(--color-white-60);
}

.navbar-brand {
    font-size: 20px;
}

.navbar-brand-light {
    color: var(--color-white);
}

.navbar-brand:hover {
    color: var(--color-white-60);
}

.nav-link.active:hover,
.nav-link:hover {
    color: var(--color-white-60);
}

.nav-right .btn-outline-secondary {
    padding: 8px 16px;
}

.nav-right {
    display: flex;
    align-items: center;
}

.nav-right ul {
    margin: 0;
    padding-left: 0;
}

.nav-right li {
    list-style: none;
}

.nav-right a.nav-link {
    padding: var(--spacing-2);
}

/* dark */
.navbar-dark {
    background-color: var(--color-white-90);
}

.navbar-brand-dark {
    color: var(--color-black-primary);
}

.navbar-brand-dark:hover {
    color: var(--color-grey-primary);
}

li.nav-item a.dark {
    color: var(--color-black-primary);
}

li a.selected-dark {
    color: var(--color-black-primary);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 12px;
}

.navbar-brand-dark {
    color: rgb(8, 8, 8);
}

/* .navbar-collapse {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  height: 100vh;
  background-color: #fff;
} */

/* Buttons */


.btn-primary {
    background-color: var(--color-black-primary);
    color: var(--color-white);
    padding: var(--spacing-2);
    border: none;
}

.btn-primary:hover {
    background-color: var(--color-black-secondary);
    border: none;
}

.btn-primary:active:focus {
    background-color: var(--color-black-secondary);
    border: none;
}

/* btn-outline-primary */

.btn-outline-primary-hero {
    color: var(--color-white);
    border-color: var(--color-white-30);
    padding: var(--spacing-2);
    border-radius: var(--border-radius-full);
}

.btn-outline-primary-hero:hover {
    background-color: var(--color-white-30);
    border-color: var(--color-white-30);
    color: var(--color-white);
}

.btn-outline-primary-hero:active:focus {
    background-color: var(--color-white);
    color: var(--color-black-primary);
    border-color: var(--color-white);
}

/* btn-outline-secondary */

.btn-outline-secondary {
    color: var(--color-black-primary);
    border-color: var(--color-grey-primary);
    border-radius: var(--border-radiud-full);
    padding: var(--spacing-1);
}

.btn-outline-secondary:hover {
    background-color: var(--color-black-primary);
    color: var(--color-white);
    border-color: var(--color-black-primary);
}

.btn-outline-secondary:hover:focus {
    background-color: var(--color-black-primary);
    color: var(--color-white);
    border-color: var(--color-black-primary);
}

.btn-outline-secondary-light {
    color: var(--color-white);
    border: 1px solid var(--color-white-30);
    border-radius: var(--border-radius-full);
}

.btn-outline-secondary-light:hover {
    background-color: var(--color-white);
    color: var(--color-black-primary);
    border: 1px solid var(--color-white);
}

.btn-outline-secondary-light:active:focus {
    background-color: var(--color-white-60);
    color: var(--color-black-primary);
    border: 1px solid var(--color-white-30);
}

.btn-outline-secondary-dark {
    color: var(--color-black-primary);
    border: 1px solid var(--color-grey-primary);
    border-radius: var(--border-radius-full);
}

.btn-outline-secondary-dark:hover {
    background-color: var(--color-black-primary);
    color: var(--color-white);
    border: 1px solid var(--color-black-primary);
}

.btn-outline-secondary-dark:active:focus {
    background-color: var(--color-black-secondary);
    color: var(--color-white);
    border: 1px solid var(--color-white-30);
}

/* btn-tertiary */

.btn-outline-tertiary {
    color: var(--color-black-primary);
    padding: 0;
}

a .btn-outline-tertiary:hover {
    color: var(--color-black-secondary);
}

a .btn-outline-tertiary:hover:focus {
    border-color: var(--color-white);
}

.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff' class='bi bi-list' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5'/%3E%3C/svg%3E");
    /* https://bloggerpilot.com/en/tools/svg-to-css/ */
}

.navbar-light .navbar-toggler {
    border-color: var(--color-white-30);
}

/* Hero */
#home {
    background: linear-gradient(180deg, #1a1a1a90, #131219d5), url(assets/homepage/cover-01.jpg);
    background-position: center;
    background-size: cover;
    /* filter: grayscale(100%); */
}

.hero {
    padding-top: 140px;
    margin-bottom: var(--spacing-5);
}

.hero-padding {
    padding-top: 140px;
}

.h1-home {
    color: var(--color-white);
    text-shadow: 0px 2px 8px #2a2a2c07;
    line-height: 110%;

}

.subheadline {
    color: var(--color-white-90);
    text-shadow: 0px 2px 8px #2f2e375e;
}


.section-title p,
.subheadline {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

h6.breadcrumb:after {
    content: "•";
    font-size: 120%;
    margin: 0 8px;
    line-height: 1.3;
}


/* Preview Card */
.preview-card {
    /* padding: 2px; */
}

.preview-card:hover {
    cursor: pointer;
}

.preview-card h5 {
    margin-bottom: 0;
}


/* Image-Zoom */

/* .image-zoom {
    position: relative;
    overflow: hidden;
} */

.image-zoom-wrapper {
    overflow: hidden;
    position: relative;
}

.image-zoom-wrapper img {
    /* transition: filter .5s ease-in-out; */
    -webkit-filter: grayscale(0%);
    /* Ch 23+, Saf 6.0+, BB 10.0+ */
    filter: grayscale(0%);
    /* FF 35+ */
}

.image-zoom-wrapper img:hover {
    transition: .3s ease-in-out;
    transform: scale(1.1);
    cursor: pointer;
    -webkit-filter: grayscale(100%);
    /* Ch 23+, Saf 6.0+, BB 10.0+ */
    filter: grayscale(100%);
    /* FF 35+ */
}

/* Footer */
footer {
    background-color: var(--color-black-primary);
    margin-top: auto;
}

footer li,
footer p,
footer a {
    color: var(--color-white-90);
}

footer li {
    margin-bottom: 8px;
}

footer a:hover {
    color: var(--color-white-60);
}

footer h6 {
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

footer ul {
    list-style: none;
    padding: 0;
}

footer .line {
    width: 40px;
    height: 2px;
    background-color: var(--color-white-30);
    margin-top: 12px;
    margin-bottom: 18px;
}

.footer-top {
    padding: 80px 0 40px 0;
}

.footer-bottom {
    padding-top: 40px;
    padding-bottom: 40px;
}

.social-icon a {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, .2);
    border-radius: 100px;
    font-size: 24px;
    margin-right: 8px;
}

.social-icon a:hover {
    background-color: var(--color-white);
    color: var(--color-black-primary);
}


/* Contact Form */
.contact-form {
    padding: 24px;
}

textarea {
    height: 120px;
}


/* About */

.about img {
    box-shadow: 1px 2px 8px #e7e7e7;

}

.stack {
    padding: 16px;
    border-radius: 16px;
    box-shadow: 1px 2px 8px #e7e7e7;
}

.about img {
    max-height: 250px;
    border-radius: 16px;
    /* border: 12px solid rgb(255, 255, 255);
    border-bottom: 36px solid rgb(255, 255, 255);
    box-shadow: 0px 4px 5px rgba(94, 94, 94, 0.2); */
}

.stack-icon {
    width: 48px;
    height: 48px;
    background-color: rgb(219, 248, 255);
    border-radius: 8px;
    margin-right: 12px;
}

.stack-icon i {
    font-size: 28px;
    padding: 8px;
    color: rgb(5, 5, 55);
}

.about h5 {
    margin-bottom: 0;
}


/* Testimonials */

.single-item {
    background-color: #ffffff;
    border-radius: 8px;
    padding: var(--spacing-1);
    border: 1px solid #ebebeb
}


.single-item .content {
    display: flex;
    flex-direction: column;

}

.card-top {
    margin-top: 16px;
}

.profile .img-area {
    border-radius: 4px;
    overflow: hidden;
}

.img-area {
    width: 100%;
    height: 300px;
}

.img-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: black;
    padding: 16px;
    border-radius: 8px;
}

/* Mobile */

@media (max-width: 992px) {

    .nav-link {
        padding-top: 16px;
        font-size: 1.3em;
    }

    .nav-right {
        display: flex;
        flex-direction: column;
        align-items: start;
    }

    .nav-right .btn-outline-secondary-light {
        margin-top: 16px;
        width: 100%;
        background-color: var(--color-white);
        color: var(--color-black-primary);
    }

    .nav-right .btn-outline-secondary-dark {
        width: 100%;
        background-color: var(--color-black-primary);
        color: var(--color-white);
    }

    .nav-right a.nav-link {
        padding-left: 0;
    }

    .hero {
        padding-top: 100px;
        margin-bottom: var(--spacing-3);
    }

    .hero-padding {
        padding-top: 100px;
    }

    .img-area {
        width: 100%;
        height: 100%;
    }

}

/* Animation */
/* .autoShow {
    animation: text-appear both;
    animation-timeline: view();
    animation-range: entry 20% cover 100vh;
}

@keyframes textAppear {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

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

.imageReveal {
    animation: imageReveal both;
    animation-timeline: view(10% 5%);
}

@keyframes imageReveal {
    from {
        opacity: 0;
        scale: .5;
        translate: 0 4rem;
    }

    to {
        opacity: 1;
        scale: 1;
        translate: 0, 0;

    }
}

.fadeUp {
    animation: fadeUp both;
    animation-timeline: view();
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.5);
    }

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