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

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-5dot5 {width: 43%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

/* z {
  [class*="col-"] {
    width: 100%;
  }
} */

body {
    font-family: 'Merriweather', serif;
    color: #333; 
}

/* grid test start */

.brand_page_container {
    display: grid; /* Use a grid layout for consistent alignment */
    grid-template-columns: repeat(3, 1fr); /* Three equal columns */
    gap: 35px; /* Space between the items */
    max-width: 1200px; /* Optional: Limit the container width */
    margin: 0 auto; /* Center the grid */
}

.brand_container {
    position: relative; /* Positioning context for overlay */
    width: 100%; 
    aspect-ratio: 3 / 4;
    overflow: hidden; 
}

.brand_container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images fit nicely without distortion */
    display: block; /* Ensures no inline spacing issues */
}

.overlay {
    position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: end;
        align-items: center;
        padding-bottom: 20px;
        /* background: rgba(0, 0, 0, 0.25); */
        background: linear-gradient(
        to bottom, 
        rgba(0, 0, 0, 0.05), 
        rgba(0, 0, 0, 0.55)  
        );
        color: white;
        text-align: center;
}

.overlay #featured_product_overlay {
    position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: end;
        align-items: center;
        padding-bottom: 20px;
        /* background: rgba(0, 0, 0, 0.25); */
        background: linear-gradient(
        to bottom, 
        rgba(0, 0, 0, 0.05), 
        rgba(0, 0, 0, 0.55)  
        );
        color: white;
        text-align: center;
}


.overlay h1 {
    font-size: 2rem;
    margin-bottom: 20px;
    font-weight: bold;
    text-transform: uppercase;
}

.overlay a {
    background: white;
    color: black;
    border: none;
    padding: 10px 25px;
    font-size: 14px;
    font-weight: lighter;
    cursor: pointer;
    text-transform: uppercase;
    text-decoration: none;
}

.overlay a:hover {
    background: #ccc;
}
/* grid test end */


.article_title_container {
    display: flex;
    justify-content: center;
    margin-bottom: 60px;
}

.article_title h1 {
    font-size: 48px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.article_thumbnail_container {
    display: flex;
    justify-content: center;
    margin-bottom: 60px;
}

.article_content h2 {
    font-size: 2rem;
    margin-top: 20px;
    margin-bottom: 20px;
}

.article_content h3 {
    margin-top: 20px;
    margin-bottom: 20px;
}



.article_content p {
    line-height: 1.6;
    font-size: 20px;
    margin-bottom: 30px;
}

.article_content blockquote {
    border-left: 4px solid red; /* Vertical red line */
    padding-left: 20px;        /* Space between the line and the text */
    margin: 20px 0;            /* Add spacing around the blockquote */ 
    color: #333;               /* Adjust text color */
    background-color: #f9f9f9; /* Optional: Light background for emphasis */
    font-size: 1.1rem;         /* Slightly larger font size for readability */
    line-height: 1.6;
}


#article_thumbnail {
    width: 100%;
    object-fit: cover;
}


.banner_container {
    display: flex;
    flex-direction: column;
}
.banner_container h1{
    padding-right: 12px;
    font-size: 48px;
    /* margin-bottom: 10px; */
}

.banner_container h2{
    font-size: 24px;
    color: white;
    margin-top: 30px;
}

/* Burger Menu Styling */
.burger {
    display: none;
    cursor: pointer;
}

.burger div {
    width: 25px;
    height: 1px;
    background-color: #F3EEDD;
    margin: 5px;
}

.container {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    /* padding: 20px; */
    height: 80vh;  /* Full viewport height */
    width: 100vw;   /* Full viewport width */
}

.footer {
    padding: 300px 0;      /* Vertical spacing instead of fixed height */
    background-color: black;
    color: #f9f9f9;
    text-align: center;   
    /* position: relative;    */
    border-top: solid 2px red ;
}

.footer h1 {
    font-size: 3rem;
}

.footer p {
    font-size: 1.5rem;
}

.full_article {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#headline_info {
    background-color: white;
}

.hero_container {
    width: 80%;
    /* width: 40%; */
}

.inline_image_container {
    display: flex;
    justify-content: center;
    margin: 20px 0;
    flex-direction: column;
}

.inline_image {
    width: 100%;
    object-fit: cover;
}

.left_column {
    background: #050203;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    /* overflow: hidden; */
}

.left_column img{
    width: 100%;       /* Control the width of the image as a percentage */
    height: 100%; /* Maintain aspect ratio, adjust height automatically */
    object-fit: cover; /* Optional: Crop the image to fit the container if necessary */
    /* object-position: top left; */
}

#mini_banner {
    display: none;
}

.multi_hero_container {
    width: 75%;
    /* width: 40%; */
}

.multi-article-grid {
    max-width: 1200px; /* Align container width */
    margin: 0 auto; /* Center the grid */
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    gap: 20px;
}

.multi-article-item {
    display: flex;
    gap: 15px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
    margin-left: 20px;
}

.multi-article-thumbnail img {
    width: 120px; /* Consistent width for smaller thumbnails */
    height: auto;
    /* border-radius: 8px; */
}

.multi-article-content h3 a {
    text-decoration: none;
    color: #333;
    font-size: 1.25rem;
}

.multi-article-content p {
    font-size: 0.875rem;
    color: #666;
}

.navbar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #050203;
    padding: 15px;
    color: #F3EEDD;
}

.navbar .logo a {
    font-family: 'Merriweather', serif;
    color: white;
    font-size: 1.75rem;
    text-decoration: none;
}

.navbar .nav_links {
    display: flex;
    list-style: none;
    margin-right: 50px;    
}

.navbar .nav_links li {
    /* margin-left: 20px; */
    padding: 0 10px;
}

.navbar .nav_links a {
    /* color: #F3EEDD; */
    color: white;
    list-style: none;
    font-size: 18px;
    text-decoration: none;
}

.nav_links .dropdown {
    position: relative;
}

.nav_links .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    background-color: white;
    border: .5px solid #050203;
    list-style: none;
    /* padding: 10px 0; */
    /* border-radius: 5px; */
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */
    z-index: 1000;
    width: 145px;
}

.nav_links .dropdown-menu li a {
    color: #050203;
    padding:10px 0px;
    display: block;
    text-decoration: none;
    font-size: 16px;
    text-align: left;
    border-bottom: .5px solid black;
}

.nav_links .dropdown-menu li a:hover {
    /* background-color: #d9d9d9; */
    color: #C32F2F;
}

/* Show Dropdown on Hover */
.nav_links .dropdown:hover .dropdown-menu {
    display: block; /* Show dropdown when hovering */
}

.post {
    display: flex;
    gap: 20px; /* Add spacing between thumbnail and content */
    align-items: flex-start;
    border-bottom: 1px solid #ddd; /* Optional: Add separator for structure */
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.post_container {
    max-width: 1200px; /* Align container width */
    margin: 0 auto; /* Center the container */
    padding: 0 20px; /* Add some horizontal padding */
}

.post-content {
    flex: 1; /* Take up remaining space */
}

.post-excerpt {
    color: #667;
    margin: 15px 0 15px 10px;
    font-size: 1.15rem;
    line-height: 1.6;
}

.post-info {
    font-size: 0.875rem;
    color: #999;
}

.post-title a {
    text-decoration: none;
    color: #050203;
    font-size: 2rem;
    margin: 0 0 10px 10px;
    display: block;
}


.post-thumbnail img {
    width: 600px; /* Set a consistent width for the thumbnail */
    height: auto; /* Maintain aspect ratio */
   
}

.right_column {
    background-color: black;
    /* height: 100vh; */
    flex: 1;
    padding-left: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}



.right_column h1{
    color: white;
}

.right_column.post_headline{
    background-color: white;
}



.search_bar_container {
    position: absolute;
    top: 50%; /* centers bar vertically */
    left: 50%; /* centers bar horizontally */
    transform: translate(-50%, -50%); /*corrects the centering offset*/
    width: 30%;
    display: flex;
    justify-content: center;
    z-index: 10;
}

.search_bar {
    width: 100%;
    padding: 15px;
    border-radius: 25px; /* Makes the edges round */
    border: none;
    outline: none;
    font-size: 18px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);  /* Adds subtle shadow */
}

.subscribe_button {
    margin: 30px 0px;
    background-color: #ff4c4c;
    color: #fff;
    padding: 18px 36px;
    border: none;
    border-radius: 18px;
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
    cursor: pointer;
    transition: background-color .3s ease, transform 0.2s ease;
}

.subscribe_button:hover {
    background-color: #e03b3b;
    transform: translateY(-1px);
}

.subscribe_button:active {
    background-color: #C32F2F; /* Even darker red when clicked */
    transform: translateY(0); /* Reset lift effect */
}

.subscribe_button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 76, 76, .4s);
}

.subscriber-form {
    max-width: 400px; /* Limit the width */
    margin: 50px auto; /* Center the form */
    padding: 20px;
    background-color: #f9f9f9; /* Light background */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    font-family: 'Arial', sans-serif; /* Modern font */
}

.subscriber-form .subscriber-input,
.subscriber-form .subscriber-button {
    width: 100%; /* Full width */
    margin-bottom: 15px; /* Spacing between elements */
    padding: 12px;
    border: 1px solid #ccc; /* Light border */
    border-radius: 5px; /* Rounded corners */
    font-size: 16px;
    font-family: inherit;
    box-sizing: border-box; /* Ensure padding doesn’t affect width */
}

.subscriber-form .subscriber-input:focus {
    outline: none; /* Remove blue outline */
    border-color: #007bff; /* Highlight border */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Subtle glow */
}

.subscriber-form .subscriber-button {
    background-color: #007bff; /* Primary color */
    color: white;
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease; /* Smooth transition */
}

.subscriber-form .subscriber-button:hover {
    background-color: #0056b3; /* Darker blue */
}

.subscriber-form .subscriber-button:active {
    background-color: #003f7f; /* Even darker blue */
}

.test {
    display: flex;
    
}

#topnav {
    padding-bottom: 20px;
}

.thumbnail {
    background-color: white;
}


.thumbnail img {
    width: 100%;  
    height: auto;
    border-radius: 8px;
}

#title {
    font-size: 2rem;
    margin-bottom: 30px;
}

/* video test */
.video-player-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px auto;
    max-width: 100%; /* Ensure it adapts to the screen size */
}

.video-wrapper {
    width: 100%; /* Take full width of parent */
    max-width: 900px; /* Match YouTube's standard max width */
    aspect-ratio: 16 / 9; /* Automatically maintain 16:9 aspect ratio */
    background-color: black; /* Optional: Black background for aesthetics */
}

.video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure video covers the space */
    display: block;
}

.video-info {
    margin-top: 10px;
    text-align: center;
}

.video-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin: 5px 0;
}

.video-description {
    font-size: 1rem;
    color: #555;
}

/* end video test */





/* responsive styling for mobile */ 
@media screen and (max-width: 768px) {

    [class*="col-"] {
        width: 100%;
      }

    .article_title_container {
        margin-bottom: 30px;
    }

    .article_title h1 {
        /* font-size: 28px;  */
        font-size: 3rem; /* Further adjust font size for small screens */
    }

    .article_content h2 {
        font-size: 1.5rem; /* Adjust headers for better scaling */
    }

    .article_content h3 {
        font-size: 1.1rem;
    }

    .article_content p {
        /* font-size: 18px;  */
        font-size: 1.25rem; 
    }

    .full_article {
        margin: 0 25px;
    }

    #big_banner {
        display: none;
    }

    .brand_page_container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .brand_container {
        position: relative;
        width: 90%;
        height: auto;
        margin-bottom: 25px;        
    }

    .brand_container img {
        width: 100%;
        height: auto;
        display: block;
    }

    .burger {
        display: block;
    }

    .container {
        flex-direction: column; /* Stack the columns vertically */
        height: auto; /* Let height expand based on content */

    }

    .dropdown-menu {
        position: static; /* Default positioning for easier stacking */
        display: none; /* Hidden by default */
        width: 100%; /* Full width for mobile */
    }

    .dropdown-menu li a {
        padding: 10px;
        text-align: center;
    }

    .dropdown.active .dropdown-menu {
        display: block; /* Show dropdown when active */
    }

    .footer {
        width: 100vw;
        padding: 10px 0; /* Reduce padding for smaller screens */
    }

    .inline_image_container {
        display: flex;
        justify-content: center;
        margin: 20px 0;
        flex-direction: column;
    }
    
    .inline_image {
        width: 100%;
        object-fit: cover;
    }

    .left_column, .right_column {
        width: 100%;
        height: 50vh; /* Each section takes half of the viewport height */
    }

    .left_column {
        display: none;
        order: 2;
    }

    .left_column img {
        width: 100%;   /* Image fills the width */
        height: auto;  /* Maintain aspect ratio */
        object-fit: cover;  /* Crops to fit container */
    }

    #mini_banner {
        display: flex;
        padding: 0 0 10px 15px;
    }

 

    .multi-article-grid {
        grid-template-columns: 1fr; /* Single column on smaller screens */
    }
    

    .nav_links {
        display: none;
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: -100%;
        background-color: #050203;
        transition: all .1s ease;
    }

    .navbar .nav_links li {
        margin-top: 5px;
    }

    .nav_links.active {
        left: 0;
        top: 50px;
    }

    .nav_links li{
        text-align: center;
        padding: 10px 0;
    }

    .nav_links .dropdown-menu {
        width: 100%;
        left: 0;
    }

    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: end;
        align-items: center;
        padding-bottom: 20px;
        /* background: rgba(0, 0, 0, 0.25); */
        background: linear-gradient(
        to bottom, 
        rgba(0, 0, 0, 0.05), 
        rgba(0, 0, 0, 0.55)  
        );
        color: white;
        text-align: center;
    }

    .overlay h1 {
        font-size: 2rem;
        margin-bottom: 20px;
        font-weight: bold;
        text-transform: uppercase;
    }

    .overlay a {
        background: white;
        color: black;
        border: none;
        padding: 10px 25px;
        font-size: 14px;
        font-weight: lighter;
        cursor: pointer;
        text-transform: uppercase;
    }

    .overlay a:hover {
        background: #ccc; /* Optional hover effect */
    }

    .post {
        display: flex;
        flex-direction: column;
    }

    .post-excerpt {
        display: none;
    }

    .post-title a{
        margin: 0px;
    }

    .post-thumbnail img {
        width: 100%; 
        height: auto;
    }

    .product_page_header {
        display: flex;
        justify-content: center;
        margin: 30px 0;
    }

    .right_column {
        order: 1;
    }

    .search_bar_container {
        width: 70%;
    }

    #title {
        padding-left: 20px;
        padding-bottom: 20px;
        padding: 20px 0 20px 0;
        font-size: 2rem;
    }
    
}



/* @media screen 
and (max-width: 1024px)

{

    [class*="col-"] {
        width: 100%;
      }

    .article_title_container {
        margin-bottom: 30px;
    }

    .article_title h1 {    
        font-size: 3rem;
    }

    .article_content h2 {
        font-size: 1.5rem;
    }

    .article_content h3 {
        font-size: 1.1rem;
    }

    .article_content p {        
        font-size: 1.25rem; 
    }

    .full_article {
        margin: 0 25px;
    }

    .banner_container h2 {
        font-size: 3rem;
    }

    .burger {
        display: block;
    }

    .container {
        flex-direction: column; 
        height: auto;

    }

    .footer {
        padding: 10px 0; 
    }

    .left_column, .right_column {
        width: 100%;
        height: 50vh;
    }

    .left_column {
        order: 2;
    }

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

    .navbar a {
        font-size: 2rem;
    }

    .right_column {
        order: 1;
        justify-content: left;
    }
    
    .multi-article-content h3 a{
        font-size: 2.25rem;
    }
    
    .multi-article-content p{
        font-size: 1.25rem;
    }

    .multi-article-grid {
        grid-template-columns: 1fr;
    }

    .multi-article-thumbnail img {
        width: 240px; 
        height: auto;        
    }
    

    .nav_links {
        display: none;
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: -100%;
        background-color: #050203;
        transition: all .1s ease;
    }

    .nav_links.active {
        left: 0;
        top: 50px;
    }

    .nav_links li{
        text-align: center;
        padding: 10px 0;
    }

    .post {
        display: flex;
        flex-direction: column;
    }

    .post-excerpt {
        display: none;
    }

    .post-thumbnail img {
        width: 100%; 
        height: auto;
    }

    .post-title a{
        margin: 0px;
        font-size: 3rem;
    }

    .search_bar_container {
        width: 70%;
    }


    #title {
        padding-left: 20px;
        padding-bottom: 20px;
        padding: 20px 0 20px 0;
        font-size: 4rem;
    }
    
} */