body {
    background: url("images/Home-LapDesk.png") 80% no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.navbar .navbar-brand{
    color: #FFDECC;
    font-family: 'Inria Serif';
    font-size: 1.5rem;
    position: sticky;
    top: 0;
    }

.navbar-brand:hover {
    --bs-navbar-brand-hover-color: #41171A;
    font-weight: 700;
    font-style: italic;
}

.navbar-brand img{
    width: 4.375rem;
    margin-top: 1.5%;
    margin-left: 5%;
    --bs-navbar-brand-margin-end: 0;
}

.navbar-toggler {
    --bs-navbar-toggler-border-color: #FFDECC;
    --bs-border-width: .1875rem;
    --bs-font-color: #FFDECC;
}

.navbar-toggler-icon {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 222, 204, 100%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    padding: 0.25rem;
}

.nav-link, .shopify-buy__cart-toggle {
    line-height: .875rem;
    --bs-nav-link-color: #FFDECC;
    --bs-nav-link-font-size: 1rem;
    font-family: 'Inria Serif';
    font-weight: 300;
    letter-spacing: .0625rem;
}

.nav-link:hover {
    --bs-nav-link-hover-color: #FFDECC;
    font-weight: 700;
}

.navbar-collapse {
    display: flex;
    align-items: end;
    flex-direction: row;
    justify-content: space-evenly;
}

.navbar-collapse a.active {
    color: #41171A;
    font-style: italic;
    font-weight: 700;
}

.bi-bag-heart {
    font-size: 1.25rem !important;
}

.shopify-buy__cart-toggle {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 5px;
    max-height: 1.5rem;
    cursor: pointer;
    padding: 0;
}

.shopify-buy-frame--toggle {
    padding: 0;
}

.shopify-buy--visually-hidden {
    display: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Inria Serif';
    font-weight: 700 !important;
}

.infopage {
    background: url("images/lghtWall.png") left bottom 30% no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.infopage .navbar .navbar-brand {
    color:#41171A;
}

.infopage .nav-link {
    --bs-nav-link-color: #41171A;
}

.infopage .nav-link:hover {
    --bs-nav-link-hover-color: #41171a;
    font-weight: 700;
}

.faq {
    margin-top: 2.5%;
    margin-left: 10%;
    max-width: 72%;
}

.faq h1, .faq h2{
    color:#822E22;
}

.faq h4 {
    color:#3E4B5A;
}

.faq h1 {
    font-size: 2rem;
}

.faq p {
    font-family: 'Sofia Sans';
    color:#41171A;
    line-height: 22px;
}

.faq .credits p {
    font-family: 'Sofia Sans';
    line-height: 12px;
}

.rounded {
    border-top: 2px solid #41171A;
    border-radius: 5px;
}

.welhome {
    position: relative;
    z-index: 1;
    width: 60%;
    margin-left: 10%;
    margin-top: 1.5%;
}

.welhome h4 {
    color:#FFDECC;
    font-style: italic;
    text-align: center;
}

.welhome p {
    color: #fff;
    font-size: 1em;
    font-family: 'Inria Serif';
    font-weight: 400;
    font-style: italic;
    text-align: center;
    text-shadow: -2px 2px 2px rgba(78, 56, 48, 0.70);
}

/* ---- Single background + floating TV overlay ---- */

.scene-bg {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tv-wrapper {
    position: relative;
    width: 35%;
    max-width: 400px;
    margin-top: -5%;
}

.tv-frame {
    width: 100%;
    display: block;
    box-shadow: -9px 7px 4px rgba(78, 56, 48, 0.60);
}

.tv-content {
    position: absolute;
    top: 8%;
    left: 2.5%;
    right: 2.5%;
    bottom: 2.5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #FFDECC;
    font-family: 'Sofia Sans';
    font-weight: 400;
    padding: 3%;
    overflow: hidden;
}

.tv-content h5 {
    font-size: 1.05rem;
    margin-bottom: 0.25em;
}

.tv-content p {
    font-size: 1em;
    margin-bottom: 0.25em;
}

.carousel-control-prev, .carousel-control-next {
    width: 2.5rem !important;
    opacity: .75 !important;
}

.carousel-control-prev {
    left: 0;
}

.carousel-control-next {
    right: 0;
}


.carousel-control-prev-icon,
.carousel-control-next-icon{
    background-color: #822E22;
    box-shadow: -5px 5px 4px rgba(78, 56, 48, 0.70);
    border-radius: 10%;
    width: 2rem;
    height: 2rem;
}

.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
    background-color: #cfa170;
}

.carouselcontainer {
    position: relative;
    z-index: 1;
    margin-left: 10.5%;
    margin-top: 2.5%;
    width: 60%;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    box-sizing: border-box;
}

.footer {
    background-color: #41171A;
    width: auto;
    height: auto;
}

.footer p {
    color: #fff;
    font-family: 'Inria Serif';
    font-weight: 700;
    font-size: 1rem;
    margin-top: 0;
    margin-bottom: 0;
    padding: .3125rem;
    text-align: center;
}




/* MEDIA QUERIES */

@media (min-width: 50px) and (max-width: 576px) {

    body {
        background: url("images/Home-Mobile.png") center bottom no-repeat;
        background-attachment: fixed;
        background-size: cover;
    }

    .mainHeader {
        height: fit-content;
        width: auto;
    }

    .navbar-brand img{
        width: 3.5rem;
        margin-left: 2.5%;
        margin-top: 1.5%;
    }

    .navbar-toggler {
        float: right;
        margin-right: 10%;
        margin-top: 5%;
        --bs-navbar-toggler-padding-x: .25rem;
    }

    .navbar-toggler .navbar-toggler-icon {
        width: 1em;
        height: 1em;
        vertical-align: baseline;
    }

    .navbar .navbar-brand{
        color: #FFDECC;
        font-family: 'Inria Serif';
        font-size: 1rem;
    }

    .navbar-collapse {
        display: flex;
        align-items: center;
        flex-direction: column;
        flex-wrap: wrap;
        line-height: 1rem;
    }

    .bi-bag-heart {
        font-size: 1rem !important;
    }

    .nav-link {
        --bs-nav-link-font-size: 1rem;
    }

    .welhome {
        width: 80%;
        margin-top: 2.5%;
        margin-left: 10%;
    }

    .welhome p {
        font-size: .85em;
    }

    .carouselcontainer {
        margin-left: 10%;
        width: 80%;
        padding: .5rem;
    }

    .footer p {
        font-size: .875rem;
        margin-top: 0;
        margin-bottom: 0;
    }

    .tv-wrapper {
        margin-top: 10px;
        width: 90%;
    }

    .tv-content p {
        font-size: .75em;
        margin-bottom: 0.25em;
    }

}

@media (min-width: 577px) and (max-width: 768px) {

    body {
        background: url("images/Home-TabNote.png") 60% no-repeat;
        background-attachment: fixed;
        background-size: cover;
    }

    .mainHeader {
        height: fit-content;
        width: auto;
    }

    .navbar-brand img {
        width: 3.75rem;
        top: 15%;
        left: 15%;
    }

    .navbar .navbar-brand {
        color: rgba(255, 222, 204);
        font-family: 'Inria Serif';
        font-size: 1.25rem;
    }

    .navbar-collapse {
        align-items: center;
        flex-direction: column;
        flex-wrap: wrap;
    }

    .nav-link{
        align-items: center;
        line-height: .875rem;
        --bs-nav-link-font-size: .875rem;
    }

    .navbar-toggler {
        float: right;
        margin-right: 10%;
        margin-top: 5%;
        --bs-navbar-toggler-padding-x: .75rem;
    }

    .bi-bag-heart {
        font-size: 1.15rem !important;
    }

    .welhome {
        width: 80%;
        margin-left: 12%;
        }

    .welhome p {
        font-size: .85em;
    }

    .carouselcontainer {
        margin-left: 12.5%;
        width: 75%;
    }

    .footer p {
        font-size: 1rem;
        margin-top: 0;
        margin-bottom: 0;
    }

    .tv-wrapper {
        margin-top: 10px;
        width: 75%;
    }

    .tv-content p {
        font-size: .75em;
        margin-bottom: 0.25em;
    }

}

@media (min-width: 769px) and (max-width: 992px) {

    body {
        background: url("images/Home-TabNote.png") center center no-repeat;
        background-attachment: fixed;
        background-size: cover;
    }

    .navbar-brand {
        width: 4.375rem;
        top: 5%;
    }

    .welhome {
        width: 80%;
        margin-left: 10%;
    }

    .welhome p {
        font-size: .85em;
    }

    .carouselcontainer {
        margin-left: 8.5%;
        width: 80%;
    }

    .footer p {
        font-size: 1rem;
        margin-top: 0;
        margin-bottom: 0;
    }

    .tv-wrapper {
        margin-top: 10px;
        width: 52.5%;
    }

    .tv-content p {
    font-size: .75em;
    margin-bottom: 0.25em;
    }

}

@media (min-width: 993px) and (max-width: 1199px) {

    body {
        background: url("images/Home-LapDesk.png") center bottom 15% no-repeat;
        background-attachment: fixed;
        background-size: cover;
    }

    .navbar-expand-lg .navbar-collapse {
        align-items: center;
        flex-direction: row;
        justify-content: space-around;
    }

    .welhome {
        max-width: 55%;
        margin-left: 10%;
    }

    .welhome p {
        font-size: .85em;
    }

    .carouselcontainer {
        margin-left: 5%;
        width: 72%;
    }

    .scene-bg {
        width: 75%;
    }

    .tv-wrapper {
        margin-top: 10px;
        width: 55%;
    }

    .tv-content p {
        font-size: .75em;
        margin-bottom: 0.25em;
    }

}

@media (min-width: 1200px) {

     body {
        background: url("images/Home-LapDesk.png") center bottom 25% no-repeat;
        background-attachment: fixed;
        background-size: cover;
    }

    .welhome {
        max-width: 50%;
        margin-left: 12.5%; 
    }

    .welhome p {
        font-size: .85em;
    }

    .carouselcontainer {
        margin-left: 3.5%;
        width: 72%;
    }

    .scene-bg {
        width: 75%;
    }

    .tv-wrapper {
        margin-top: 10px;
        width: 52.5%;
    }

    .tv-content p {
        font-size: .75em;
        margin-bottom: 0.25em;
    }


}