@charset "UTF-8";
/*!
 * Bootstrap  v5.3.6 (https://getbootstrap.com/)
 * Copyright 2011-2025 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
.header_row {
	display: flex;
	justify-content: space-between;
}
.col1_site_branding .site-title {
	display: none; 
}
.col1_site_branding .site-slogan {
	display: none; 
}

.navbar-brand a.site-title {
	background-color: transparent;
	border-radius: 0; 
	color: #F0F0F0;
	cursor: pointer;
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.2;
	padding: 0;
	text-decoration: none;
	text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.6);
}
.navbar-brand .site-slogan {
	background-color: transparent;
	border-radius: 0;
	color: #F0F0F0;
	cursor: pointer;
	font-size: 1.8rem;
	font-weight: bold;
	padding: 0;
	text-decoration: none;
	text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.6);
}
.col2_site_branding .site-logo img {
	display: none;
}
.col3_site_branding .nav-link {
	background-color: transparent;
	border-radius: 0;
	color: #F0F0F0;
	cursor: pointer;
	display: inline-block;
	font-size: 1.2rem;
	font-weight: 500;
	padding: 0;
	text-decoration: none;
	text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.6);
}
.col3_site_branding {
	display: flex;
	flex-direction: row; /* Stack items vertically */
	justify-content: center; /* Center items vertically within the column */
	height: 100%; /* Ensure the column takes full height of its parent row for centering */
}
.col3_site_branding .navbar-nav {
    align-items: center;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column ;
    height: fit-content;
    justify-content: center;
    padding: 0.3em 0.6em;
    white-space: nowrap;
    width: fit-content;
}
#drupal-off-canvas .layout-builder-configure-section .bs-group-title,
#drupal-off-canvas .layout-builder-configure-section .card-header {
  color: #333333; /* Use a dark color for readability on the light summary background */
}

/* Color for specific group titles */
#drupal-off-canvas .bs-group-title {
    color: #333333;
}

.container {
    padding: 0;
}
.region-content {
	padding: 0;
}

/* 1. Overall Header Container (header role="banner") */
header[role="banner"] {
/*
  --bs-gutter-x: 1.5rem;
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    padding-right: calc(var(--bs-gutter-x) * 0.5);
*/
    background-image: url(/sites/default/files/2025-06/MarsSunsetCut.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #F0F0F0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%; /* Full width by default */
    margin-right: auto; /* Center the header */
    margin-left: auto; /* Center the header */
    max-width: 1320px;
}

/* Ensure the region-header inherits the same layout constraints */
.region-header {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    width: 100%; /* Full width within the header */
    gap: 15px;
/*
    margin-right: calc(var(--bs-gutter-x) * 0.5);
    margin-left: calc(var(--bs-gutter-x) * 0.5);
    
*/
}

/* 3. General "Button" Styling for ALL Blocks directly inside the Header Region */
/* This gives all your header blocks the dark background, rounded corners, and padding */
.region-header > .block {
    align-items: center; /* Horizontally center content inside the block */
    background-color: rgba(0, 0, 0, 0.4); /* Dark transparent background */
    border-radius: 5px; /* Rounded corners */
    box-sizing: border-box; /* Ensures padding is included in the element's total size */
    display: flex; /* Make each block a flex container for its own internal content */
    flex-direction: column; /* Stack internal content vertically (e.g., site title & slogan) */
    flex: auto; /* Blocks will size based on their content, no fixed width */
    justify-content: center; /* Vertically center content inside the block */
    padding: 0.3em 0.6em; /* Internal padding for the "button" effect */
}

.navbar-brand img {
    max-width: 100%;
    height: auto;
    width: auto;
    display: block;
    max-height: 140px;
}
.col2_site_branding .navbar-brand {
    justify-content: center ;
    display: flex ;
    align-items: center ;
}
.col2_site_branding .navbar-brand > div {
    flex-direction: column ;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    padding: 0.3em 0.6em;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    height: fit-content;
    white-space: nowrap;
}









/* 4. Specific Adjustments for Site Branding Block 1 (Logo Block) */
/* This hides the logo image if you prefer text branding like the middle section 
#block-tristatewebhosting-b5-3-0-10-sitebranding {
    display: none;
}
*/







/* 5. Adjustments for Site Branding Block 2 (Site Title/Slogan Block) */
/* This styles "TRISTATE WEB HOSTING" and "Hosting with a Personal Touch" */
#block-tristatewebhosting-b5-3-0-10-sitebranding-2 .navbar-brand {
    display: flex; /* Make the inner navbar-brand content flex */
    flex-direction: column; /* Stack title and slogan vertically within the block */
    align-items: center; /* Center title/slogan horizontally within the block */
    justify-content: center;
}


#block-tristatewebhosting-b5-3-0-10-sitebranding-2 .site-title,
#block-tristatewebhosting-b5-3-0-10-sitebranding-2 .site-slogan {
    background-color: transparent;
	border-radius: 0; 
    color: #F0F0F0;
    cursor: pointer;
    display: inline-block;
    line-height: 1.2;
    padding: 0;
    text-decoration: none;
    text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.6);
}

#block-tristatewebhosting-b5-3-0-10-sitebranding-2 .site-title {
    font-size: 2rem; /* Larger font size for the main title */
    font-weight: bold;
}
#block-tristatewebhosting-b5-3-0-10-sitebranding-2 .site-slogan {
    font-size: 1.3rem; /* Smaller font size for the slogan */
    margin-top: 0.2rem; /* Small space between title and slogan */
    font-weight: 500;
	text-align: center;
}

/* Remove default paragraph margins if title/slogan are wrapped in p tags within this block */
#block-tristatewebhosting-b5-3-0-10-sitebranding-2 p {
    margin: 0;
}

















/* 6. Styling for Main Navigation Block (Home, Privacy Policy, Terms of Service links) */
#block-tristatewebhosting-b5-3-0-10-mainnavigation .navbar-nav {
    display: flex;
    flex-direction: column; /* Make navigation items horizontal */
    list-style: none; /* Remove bullet points */
    padding: 0;
    margin: 0;
    justify-content: center; /* Center nav items if they don't fill the block */
    align-items: center; /* Vertically align nav items */
    flex-wrap: wrap; /* Allow nav items to wrap if needed */
    gap: 3px; /* Space between individual nav links */
}

/* Style for individual navigation links */
#block-tristatewebhosting-b5-3-0-10-mainnavigation .nav-link {
    color: #FFFFFF; /* White text */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); /* Text shadow */
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 500;
    background-color: transparent; /* Background is on the parent block */
    padding: 0; /* Padding is on the parent block */
    border-radius: 0; /* Border-radius is on the parent block */
    display: inline-block;
}

#block-tristatewebhosting-b5-3-0-10-mainnavigation .nav-link:hover,
#block-tristatewebhosting-b5-3-0-10-mainnavigation .nav-link:focus {
    text-decoration: underline;
    background-color: transparent;
}




.frontpage-articles-view {
    background-color:rgb(154 153 158);
}
.frontpage-articles-view .views-field-title {
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    padding: 0.3em 0.6em;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: auto;
    height: fit-content;
    white-space: nowrap;
    justify-content: center;
    align-items: center;
}

.frontpage-articles-view .views-field-title a {
    background-color: transparent;
    border-radius: 0;
    color: #F0F0F0;
    cursor: pointer;
    display: inline-block;
    font-size: 1.1rem;
    font-weight: 500;
    padding: 0;
    text-decoration: none;
    text-shadow: 1px 2px 3px rgba(0,0,0,0.6);
    transition: all 0.3s ease;
}
.frontpage-articles-view p {
    font-size: 2rem;
    font-family: sans-serif;
    font-variant-caps: petite-caps;
}

.front_page_colomn {
    padding: 20px;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}






/* --- Footer Links Styling --- */

/* Target the footer region where you place your blocks */
footer .region-footer { /* Adjust '.region-footer' to your actual footer region class */
    display: flex; /* Use flexbox to arrange items horizontally */
	flex-direction: row;
    justify-content: center; /* Center the links in the footer */
/*    align-items: center;  Vertically align them if they have different heights */
	align-items: flex-end; /* <-- Change this line to push items to the bottom */
    flex-wrap: wrap; /* Allow links to wrap to the next line on smaller screens */
/*    padding: 1.5rem 0;  Add some vertical padding to the footer area */
    background-color: #333; /* Example: A dark background for the footer */
    color: #F0F0F0; /* Example: Light text color for general footer text */
	background-image: url(/sites/default/files/2025-06/Internet_map_1024_%28crop%29.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	min-height: 140px;
}

/* Style the individual custom block elements within the footer */
footer .region-footer .block-block-content { /* Targets all custom blocks in the footer */
    margin: 0 15px; /* Add horizontal spacing between your link blocks */
}
/* Remove default top/bottom margins from paragraph tags within footer blocks */
footer .region-footer .block-block-content p {
    margin-top: 0;
    margin-bottom: 0;
}



/* Make the blocks in the footer lay out horizontally and behave as button-like containers */
footer .region-footer .block-block-content,
footer .region-footer .block-system-powered-by-block {
    /* --- Layout for horizontal arrangement (like columns) --- */
    flex: 0 0 calc(25% - 30px); /* Distribute into roughly 4 columns, accounting for horizontal margins */
    max-width: calc(25% - 30px); /* Prevent them from becoming too wide */
    margin: 0 15px 15px; /* 15px horizontal margin, 15px bottom margin for wrapping rows */
    box-sizing: border-box; /* Ensures padding and border are included in the width */

    /* --- Visual styling (moved from <a> to the block) --- */
    background-color: rgba(0, 0, 0, 0.4); /* Dark background */
    border-radius: 5px; /* Rounded corners */
    padding: 0.3em 0.6em; /* Padding for the entire "button" area */

    /* --- Center content within each block --- */
    display: flex; /* Make the block itself a flex container */
    flex-direction: row; /* Stack its own content vertically if needed (e.g., if there's text + image) */
    justify-content: center; /* Vertically center content inside the block */
    align-items: center; /* Horizontally center content inside the block */
	gap: 5px;
	white-space: nowrap;
	height: fit-content;
}
/* Style the 'Drupal' link within this block to be white with background */
footer .region-footer .block-system-powered-by-block a {
    color: #FFFFFF; /* Link text white */
    text-decoration: none;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
    font-weight: 500;
    /* Background color and padding are on the block itself, but for the link part
       of "Powered by Drupal", it's applied here for distinct background */
    background-color: transparent; /* Ensure no conflicting background on the span */
    padding: 0.3em 0.6em; /* Padding for the "Drupal" part */
    border-radius: 5px; /* Rounded corners for the "Drupal" part */
}
/* Style the 'Powered by' text within this block to be a lighter gray */
footer .region-footer .block-system-powered-by-block span {
    color: #CCCCCC; /* Changed to a lighter gray for "Powered by" text */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
    /* Background color is on the parent block, not the span itself */
    background-color: transparent; /* Ensure no conflicting background on the span */
}



/* Style the actual links (<a> tags) inside your custom blocks */
footer .region-footer .block-block-content a {
    color: #FFFFFF; /* Light color for the links */
    text-decoration: none; /* Remove default underline */
    font-size: 1rem; /* Adjust font size as needed */
    font-weight: 500;
    padding: 0; /* Remove padding, now handled by parent block */
    border-radius: 0; /* Remove border-radius, now handled by parent block */
    background-color: transparent; /* Remove background, now handled by parent block */
    display: inline; /* Keep as inline to flow naturally, or block if you prefer */
    transition: all 0.3s ease; /* Keep transition for hover effects */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); /* Keep text shadow */
}

footer .region-footer .block-block-content a:hover,
footer .region-footer .block-block-content a:focus {
    color: #FFFFFF; /* Keep hover color */
    text-decoration: underline; /* Keep underline on hover */
    background-color: transparent; /* Keep transparent hover background */
}






/* Ensure the "Powered by Drupal" block contents stay on one line and are styled correctly */
.block-system-powered-by-block {
    /* Inherits layout and visual styling from .region-footer .block-system-powered-by-block rule above */
    white-space: nowrap; /* Prevent "Powered by Drupal" from wrapping to multiple lines */
    display: flex; /* Make it a flex container for its own span and a */
    justify-content: center; /* Center "Powered by Drupal" horizontally within its block */
    align-items: center; /* Vertically align "Powered by" and "Drupal" */
    gap: 5px; /* Add a small space between "Powered by" and "Drupal" */
}

/* Style the 'Powered by' text within this block */
.block-system-powered-by-block span {
    color: #FFFFFF; /* Make it white for good contrast */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); /* Add text shadow */
	background-color: rgb(0 0 0 / 40%)
}

/* Style the 'Drupal' link within this block */
.block-system-powered-by-block a {
    color: #FFFFFF; /* Make the link text white */
    text-decoration: none;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
    font-weight: 500;
    /* Remove padding/background/border-radius from the <a> tag as it's on the parent block */
    background-color: rgb(0 0 0 / 40%);
    padding: 0;
    border-radius: 0;
}

/* Optional: If you want copyright text or other static text in the footer */
footer .region-footer .copyright-text {
    font-size: 0.9rem;
    color: #CCCCCC;
    margin-top: 1rem;
    width: 100%; /* Ensure copyright text takes full width */
    text-align: center;
}

/* Footer main container */
.home_footer {
    min-height: 140px;
    background-color: #333; /* fallback if image fails */
    background-image: url(/sites/default/files/2025-06/MarsSunsetCut.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #F0F0F0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
}

/* Row of columns */
.footer_row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; /* Prevent wrapping, always 4 columns */
    width: 100%;
    margin: 0;
    padding: 0;
    gap: 0; /* Remove gap if you want columns flush, or set to e.g. 10px for spacing */
}

.footer_row p {
	margin-bottom: 0
}
.col4_footer span {
	color: #1addff;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}
/* Each column */
.footer_row > [class*="col"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 0.5em 0.3em;
    min-width: 0;
    /* Let Bootstrap grid handle width, but you can force equal width if needed: */
    /* flex: 1 1 0; */
}

/* Block styling inside each column */
.footer_row .block-block-content,
.footer_row .block-system-powered-by-block {
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    padding: 0.3em 0.6em;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    height: fit-content;
    white-space: nowrap;
}

/* Footer links inside the blocks */
.footer_row .block-block-content a,
.footer_row .block-system-powered-by-block a {
    background-color: transparent;
    border-radius: 0;
    color: #F0F0F0;
    cursor: pointer;
    display: inline-block;
    font-size: 1.1rem;
    font-weight: 500;
    padding: 0;
    text-decoration: none;
    text-shadow: 1px 2px 3px rgba(0,0,0,0.6);
    transition: all 0.3s ease;
}

.footer_row .block-block-content a:hover,
.footer_row .block-block-content a:focus,
.footer_row .block-system-powered-by-block a:hover,
.footer_row .block-system-powered-by-block a:focus {
    color: #1addff;
    text-decoration: underline;
}





/* Powered by Drupal styling */
.footer_row .block-system-powered-by-block span {
    color: #CCCCCC;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
    background-color: transparent;
}

.footer_row .block-system-powered-by-block a {
    color: #FFFFFF;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
    background-color: transparent;
    padding: 0;
    border-radius: 0;
}

/* Responsive: always 4 columns, so allow horizontal scrolling on small screens */
@media (max-width: 991.98px) {
    .footer_row {
        overflow-x: auto;
    }
    .footer_row > [class*="col"] {
        min-width: 180px; /* Adjust as needed for readability */
        flex: 0 0 auto;
    }
}

/* Optional: hide scroll bar for a cleaner look */
.footer_row {
    scrollbar-width: none; /* Firefox */
}
.footer_row::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}












/* Match the container's max-width breakpoints — reordered for max-width (mobile down) */
@media (max-width: 1399.98px) {
    header[role="banner"],
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 1140px;
    }
}
@media (max-width: 1199.98px) {
    header[role="banner"],
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 960px;
    }
}
@media (max-width: 991.98px) {
    header[role="banner"],
    .container-md,
    .container-sm,
    .container {
        max-width: 720px;
    }
    #block-tristatewebhosting-b5-3-0-10-sitebranding {
        max-width: 25%
    }
    .col2_site_branding .navbar-brand .site-title,
    #block-tristatewebhosting-b5-3-0-10-sitebranding-2 .site-title {
       font-size: 1rem; 
    }
    #block-tristatewebhosting-b5-3-0-10-sitebranding-2 .site-slogan,
    .col2_site_branding .site-slogan {
       display: block;
       font-size: 1rem;
    }
    .col3_site_branding,
    .col2_site_branding {
        width:auto
    }
}
@media (max-width: 767.98px) {
    header[role="banner"],
    .container-sm,
    .container {
        max-width: 540px;
    }
    #block-tristatewebhosting-b5-3-0-10-sitebranding {
        display: none;
    }
    #block-tristatewebhosting-b5-3-0-10-sitebranding-2 {
        margin-top: auto;
        margin-bottom: auto;
    }
    .col1_site_branding .navbar-brand img {
        display: none;
    }
    header[role="banner"] {
        min-height: max-content;
    }
}
@media (max-width: 430.02px) {
    .header_row,
    .region-header {
        flex-direction: column;
        flex-wrap: nowrap; /* Optional: ensures all items stack vertically */
        align-items: stretch; /* Makes each block take full width */
    }
    .region-header > .block {
        width: 100%; /* Each block takes up one line */
    }
}