// Link Styles
body, html {
overflow-x: hidden;
.container {
max-width: 1120px;
}
}
a {
color: #007bff; /* Replace with your desired link color */
}
.header-image-wrapper{
.header-image{
height: 220px;
max-width: 100%;
width: 100%;
}
}
// Header Styles
header#masthead {
margin-bottom: 2rem;
background:#ffffff;
.header-main{
padding: 10px;
margin: 0;
align-items: center;
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}
// Site Branding (Logo and Title)
.site-branding {
h1{
margin: 0;
}
// Site Title Link
.site-title a {
font-size: 1.75rem;
text-transform: none;
margin-right: 7px;
}
// Logo Image Styling
img.custom-logo {
width: 150px;
height: auto;
}
a{
color: #000;
text-decoration: none;
}
}
// Main Menu Styling
.menu {
a {
padding: 13px 13px;
font-size: 16px;
color: #000;
margin-right: 3px;
text-transform: capitalize;
&:hover {
color: #5f5f5f;
}
}
// Dropdown Symbol for Submenus
.menu-item-has-children::after,
.page_item_has_children::after {
content: '⮟';
position: absolute;
top: 50%;
right: 5px;
transform: translateY(-50%);
font-size: 12px;
}
}
// Current Menu Item Styling
.current-menu-item {
border-bottom: 2px solid grey;
color: #000;
}
// Submenu Styles
.main-navigation {
width: 100%;
justify-items: end;
ul {
flex-wrap: wrap;
justify-content: lefts;
ul {
display: inline-block;
position: absolute;
background: #fff;
// Submenu Link Styling
a {
display: inline-flex;
padding: 0.75rem 1rem;
// Responsive Styles for Submenu Links
@media (max-width: 968px) {
display: block;
padding: 0.5rem 0.75rem;
font-size: 1rem;
}
}
// Dropdown Symbol Rotation for Submenus
.menu-item-has-children::after,
.page_item_has_children::after {
content: '⮟';
position: absolute;
top: 50%;
transform: rotate(270deg) translateY(-50%);
right: 8px;
font-size: 12px;
}
}
}
}
// Menu Toggle Button for Mobile
.menu-toggle {
background: none;
border: none;
width: 60px;
img {
width: 1.5rem;
height: auto;
}
}
}
.featured-posts {
position: relative;
overflow: hidden;
}
.featured-posts figure {
margin: 0;
position: relative;
}
.featured-posts img {
width: 100%;
height: 100%; /* Ensures the image covers the container */
object-fit: cover; /* Maintains aspect ratio and fills the container */
aspect-ratio: 4/3;
display: block;
}
.col-md-6.featured-posts {
padding: 5px;
}
.featured-posts .info {
position: absolute;
bottom: 0;
left: 0;
z-index: 99;
width: 100%;
color: #fff; /* White text color */
background: linear-gradient(175deg, #000, transparent);
padding: 10px;
transition: transform 0.3s ease-in-out;
transform: translateY(100%); /* Hidden initially */
a{
font-size: 20px;
color: #f1f1f1 !important;
font-weight: 400;
text-decoration: none;
}
}
.flex-wrap {
flex-wrap: wrap !important;
padding: 0 !important;
}
.featured-posts .info {
transform: translateY(0); /* Slide up on hover */
}
.box-shadow{
position: absolute;
left: 5px;
right: 5px;
top: 5px;
bottom: 5px;
display: -webkit-box;
display: -ms-flexbox;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: center;
-ms-flex-align: center;
}
.row.custom-loop{
padding: 20px 0 25px 0;
}
h2.category-title {
position: relative;
padding-bottom:5px;
margin: 0;
&::before {
content: "";
background: #676767;
position: absolute;
top: 42px;
width: 100px;
height: 4px;
}
&::after {
content: "";
background: #dedede;
position: absolute;
top: 46px;
left: 0;
width: 100%;
height: 1px;
}
}
.col-md-5.post-thumbnail {
padding: 0px;
}
.search-field {
padding: 5px 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
}
.search-submit {
background: none;
border: none;
cursor: pointer;
margin-left: 5px;
}
.search-submit img {
width: 16px; /* Adjust as needed */
height: 16px;
}
button.wp-block-search__button.wp-element-button {
width: 80px;
}