/*
Theme Name: Streamnow
*/

:root {
    --primary-font: 'Poppins';
    --primary-color: #161B0E;
    --button-color: #2D440B;
    --accent-color: #84BF31;
    --light-gray-color: #D9D9D9;
    --gray-color: #B9B9B9;
    --dark-text-color: #232421;
}

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

body * {
    font: var(--primary-font);
}

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

.container {
    max-width: 1208px;
}

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

.title {
    font-weight: 700;
    font-size: 24px;
    line-height: 1.5;
}

.description {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.5;
}

.logo-wrapper {
    width: 230px;
    height: 30px;
}

.logo-wrapper img {
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.navbar-nav {
    padding-top: 43px;
    padding-bottom: 43px;
}

.products {
    padding-top: 30px;
}

.img-wrapper {
    overflow: hidden;
}

.products .img-wrapper {
    aspect-ratio: 1 / 1;
}

.img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .6s ease-in-out;
}

.templates .img-wrapper {
    aspect-ratio: 1 / 1.12;
}

.templates .img-wrapper {
    border: 2px solid var(--light-gray-color);
    border-radius: 4px;
}

.templates-no-filter .img-wrapper {
    border: none;
    border-radius: 0;
    background-color: #232421;
}

.img-wrapper:hover img {
    transform: scale(1.1);
}

.img-wrapper, .img-wrapper:hover {
    color: #ffffff;
}

.product-description {
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.overlay.img-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #0000004D;
}

.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    background: var(--button-color);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    text-transform: uppercase;
    color: white;
    border-radius: 0;
    padding: 12px;
}

.btn:hover, .btn:active, .btn:focus-visible, :not(.btn-check)+.btn:active {
    background: rgba(45, 68, 11, 0.8);
    color: white!important;
}

.img-wrapper .pill, .gallery .pill {
    background: var(--light-gray-color);
    font-size: 14px;
    line-height: 1.35;
    color: var(--dark-text-color);
    border: 1px solid var(--gray-color);
    border-radius: 44px;
    width: fit-content;
    height: fit-content;
    padding: 8px 16px;
}

.filters .nav-link {
    font-size: 16px;
    line-height: 1.5;
    font-weight: 700;
    padding: 7px 17px;
    color: var(--light-gray-color);
    border: 1px solid var(--light-gray-color);
    text-decoration: none;
    border-radius: 0;
}

.filters .nav-link:hover, .filters .nav-link.active {
    color: var(--accent-color);
    background: transparent;
    border: 1px solid var(--accent-color);
}

.breadcrumb {
    --bs-breadcrumb-divider: '>';
}

.breadcrumb-item+.breadcrumb-item::before {
    color: white;
}

.arrow-left {
    width: 32px;
    height: 16px;
}

.breadcrumb-item a, .breadcrumb-item.active, .breadcrumb-item {
    font-size: 12px;
    text-transform: uppercase;
    text-decoration: none;
    color: white;
}

.gallery .pill {
    font-size: 7px;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(auto-fill, 120px);
    grid-template-areas:
        "img1 img2"
        "img1 img2"
        "img3 img4"
        "img5 img4"
        "img5 img6";
    column-gap: 14px;
    row-gap: 16px;
}

.img1 { grid-area: img1; }
.img2 { grid-area: img2; }
.img3 { grid-area: img3; }
.img4 { grid-area: img4; }
.img5 { grid-area: img5; }
.img6 { grid-area: img6; }

.grid-container > div {
    background: lightgray;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

#lightbox {
    position: fixed;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
}

.editor, .editor p {
	color: var(--light-gray-color);
	font-size: 16px;
}

.editor h1, .editor h2, .editor h3, .editor h4, .editor h5, .editor h6 {
	font-size: 24px;
	color: var(--light-gray-color);
	font-weight: 700;
}

.editor a, .editor a:hover, .editor a u {
	color: var(--accent-color);
	line-break: anywhere;
}

@media only screen and (min-width: 768px) {
    .grid-container {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: repeat(auto-fill, 120px);
        grid-template-areas:
        "img1 img1 img1 img1 img1 img1 img2 img2 img2 img2 img2 img2"
        "img1 img1 img1 img1 img1 img1 img2 img2 img2 img2 img2 img2"
        "img1 img1 img1 img1 img1 img1 img2 img2 img2 img2 img2 img2"
        "img3 img3 img3 img3 img3 img4 img4 img4 img4 img4 img4 img4"
        "img3 img3 img3 img3 img3 img4 img4 img4 img4 img4 img4 img4"
        "img5 img5 img5 img5 img5 img4 img4 img4 img4 img4 img4 img4"
        "img5 img5 img5 img5 img5 img4 img4 img4 img4 img4 img4 img4"
        "img5 img5 img5 img5 img5 img6 img6 img6 img6 img6 img7 img7"
        "img5 img5 img5 img5 img5 img6 img6 img6 img6 img6 img7 img7";
        column-gap: 14px;
        row-gap: 16px;
    }
}

@media only screen and (min-width: 992px) {
    .title {
        font-size: 36px;
    }

    .description {
        font-size: 20px;
    }

    .logo-wrapper {
        width: 345px;
        height: 49px;
    }

    .products {
        padding-top: 60px;
    }

    .filters .nav-link {
        font-size: 20px;
    }

    .gallery .pill {
        font-size: 14px;
    }


    .breadcrumb-item a, .breadcrumb-item.active, .breadcrumb-item {
        font-size: 16px;
    }

    .filter .nav-link {
        padding: 10px 24px;
    }
}

@media only screen and (min-width: 1700px) {
    .container {
        max-width: 1600px;
    }
}