/*
Theme Name: MayaTheme
Description: Universal WP theme
Version: 10/11.2024
Author: Maya
Author URI: https://portalmaya.com/
*/


/* BLUE COLOR VERSION */
/* Hobo Std FONT */
/* 9px for colored topbar menu */ 
/* 8px for white-colored topbar menu */


/* *************************************** */
/* *************************************** */
/* *************************************** */
/* *************************************** */
/* *************************************** */


/* SCROLLBARS */

/* For Chrome, Edge, and Safari */
::-webkit-scrollbar {
width: 30px; /* Wide scrollbar */
}

::-webkit-scrollbar-track {
background: #666666; /* Track background color */
}

::-webkit-scrollbar-thumb {
background: #1E1E1E; /* Thumb (scroll handle) color */
border-radius: 15px; /* Rounded thumb */
border: 5px solid #FFFFFF; /* Optional: Add border for better contrast */
}

::-webkit-scrollbar-thumb:hover {
background: #1E1E1E; /* Thumb hover color */
}

/* For Firefox */
* {
scrollbar-width: 30px; /* Wide scrollbar */
scrollbar-color: #1E1E1E #666666; /* Thumb and track colors */
}

/* For other browsers (fallback) */
html {
scrollbar-face-color: #1E1E1E; /* Thumb color */
scrollbar-track-color: #666666;  /* Track color */
}


/* RESETS*/

* {
word-wrap: break-word; /* Wrap long words */
overflow-wrap: break-word; /* Add compatibility for various browsers */
}

* {
margin: 0;
padding: 0;
}

/* Headings Reset 

img {
max-width: 100%;
height: auto;
}

table {
border-collapse: collapse;
width: 100%; 
}

button {
padding: 0; 
border: none;
background: none;
cursor: pointer;
}

.clearfix::after {
content: "";
display: table;
clear: both;
}
*/


/* FONTS*/

html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
 
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
font-size: 1rem;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}

@media (max-width: 650px) {
html {
font-size: 105%;
-webkit-text-size-adjust: 105%;
-ms-text-size-adjust: 105%;
}
}

a {
color: #2D77AC;
font-weight: normal;
background-color: transparent; /* For IE 10 */
text-decoration: none !important;
-webkit-text-decoration-skip: objects; /* For iOS 8+ and Safari 8+ */
-moz-text-decoration-skip: objects; /* Firefox */
text-decoration-skip-ink: auto; /* Modern browsers like Firefox */
}

h1 { font-size: 1.5rem; } /* 24px */
h2 { font-size: 1.45rem; } /* 23.2px */
h3 { font-size: 1.2rem; } /* 20.8px */
h4 { font-size: 1rem; } /* 16px */
h5 { font-size: 0.875rem; } /* 14px */
h6 { font-size: 0.75rem; } /* 12px */

h1, h2, h3, h4, h5, h6 {
margin: 15px 0px;
padding: 0;
}

h1 {
color: #1F6AA4;
line-height: 1.4;
}

p {
margin: 15px 0px;
padding: 0;
}

strong {
font-weight: 500;
color: #000;
}

/* strong {
font-weight: normal;
color: #000;
text-shadow: -1px 0px 0px rgb(0, 0, 0);
letter-spacing: 0.6px;
}
*/

ul, ol {
padding-left: 2rem;
margin: 15px 0px;
}

blockquote {
margin: 15px 0px;
padding: 0px 30px 0px 35px;
font-style: italic;
color: #333;
position: relative;
}

blockquote::before {
content: "\201C"; /* opening quotation mark */
font-size: 60px;
color: #333;
position: absolute;
top: -20px;
left: -5px;
}

blockquote::after {
content: "\201D"; /* closing quotation mark */
font-size: 60px;
color: #333;
position: absolute;
bottom: -50px;
right: 10px;
}


/* INTEGRATED FONTS */

@font-face {
font-family: 'Angel Fortune';
src: url('./fonts/angel-fortune/angel-fortune.woff2') format('woff2'),
     url('./fonts/angel-fortune/angel-fortune.woff') format('woff'),
     url('./fonts/angel-fortune/angel-fortune.ttf') format('truetype'); 
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Bainley Regular';
src: url('./fonts/bainley-regular/bainley.woff2') format('woff2'),
     url('./fonts/candy-pop/bainley.woff') format('woff'),
     url('./fonts/candy-pop/bainley.ttf') format('truetype'); 
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Balkiez Hellenistic';
src: url('./fonts/balkiez-hellenistic/balkiez-hellenistic.woff2') format('woff2'),
     url('./fonts/balkiez-hellenistic/balkiez-hellenistic.woff') format('woff'),
     url('./fonts/balkiez-hellenistic/balkiez-hellenistic.ttf') format('truetype'); 
     url('./fonts/balkiez-hellenistic/balkiez-hellenistic.otf') format('opentype');	 
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Candy Pop';
src: url('./fonts/candy-pop/candy-pop-webfont.woff2') format('woff2'),
     url('./fonts/candy-pop/candy-pop-webfont.woff') format('woff'),
     url('./fonts/candy-pop/candy-pop.ttf') format('truetype'); 
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Canterbury';
src: url('./fonts/canterbury/canterbury-webfont.woff2') format('woff2'),
     url('./fonts/canterbury/canterbury-webfont.woff') format('woff'),
     url('./fonts/canterbury/canterbury.ttf') format('truetype'); 
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Dopestyle';
src: url('./fonts/dopestyle/dopestyle.woff2') format('woff2'),
     url('./fonts/dopestyle/dopestyle.woff') format('woff'),
     url('./fonts/dopestyle/dopestyle.ttf') format('truetype'); 
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Greconian';
src: url('./fonts/greconian/greconian-regular.woff2') format('woff2'),
     url('./fonts/greconian/greconian-regular.woff') format('woff'),
     url('./fonts/greconian/greconian.ttf') format('truetype'); 
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Guava Candy';
src: url('./fonts/guava-candy/guava-candy-webfont.woff2') format('woff2'),
     url('./fonts/guava-candy/guava-candy-webfont.woff') format('woff'),
     url('./fonts/guava-candy/guava-candy.ttf') format('truetype'); 
	 url('./fonts/guava-candy/guava-candy.otf') format('opentype'); 
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Hidayatullah';
src: url('./fonts/hidayatullah/hidayatullah-webfont.woff2') format('woff2'),
     url('./fonts/hidayatullah/hidayatullah-webfont.woff') format('woff'),
     url('./fonts/hidayatullah/hidayatullah.ttf') format('truetype'); 
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Hobo Std';
src: url('./fonts/hobo-std/hobo-std-webfont.woff2') format('woff2'),
     url('./fonts/hobo-std/hobo-std-webfont.woff') format('woff'),
     url('./fonts/hobo-std/hobo-std.otf') format('opentype'); 
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Malvie Regular';
src: url('./fonts/malvie/malvie-regular.woff2') format('woff2'),
     url('./fonts/malvie/malvie-regular.woff') format('woff'),
     url('./fonts/malvie/malvie.otf') format('opentype'); 
font-weight: normal;
font-style: normal;
font-display: swap;
}


@font-face {
font-family: 'Monas Regular';
src: url('./fonts/monas/monas-regular.woff2') format('woff2'),
     url('./fonts/monas/monas-regular.woff') format('woff'),
     url('./fonts/monas/monas.otf') format('truetype'); 
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Open Sans';
src: url('./fonts/open-sans/open-sans-variable-webfont.woff2') format('woff2'),
	 url('./fonts/open-sans/open-sans-variable-webfont.woff') format('woff'),
     url('./fonts/open-sans/open-sans-variable.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Open Sans';
src: url('./fonts/open-sans/open-sans-italic-variable-webfont.woff2') format('woff2'),
     url('./fonts/open-sans/open-sans-italic-variable-webfont.woff') format('woff'),
     url('./fonts/open-sans/open-sans-italic-variable.ttf') format('truetype');
font-weight: normal;
font-style: italic;
font-display: swap;
}

@font-face {
font-family: 'Ravie';
src: url('./fonts/ravie/ravie-webfont.woff2') format('woff2'),
     url('./fonts/ravie/ravie-webfont.woff') format('woff'),
     url('./fonts/ravie/ravie.ttf') format('truetype'); 
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Outright';
src: url('./fonts/outright/outright.woff2') format('woff2'),
     url('./fonts/outright/outright.woff') format('woff'),
     url('./fonts/outright/outright.ttf') format('opentype');
font-weight: normal;
font-style: italic;
font-display: swap;
}

@font-face {
font-family: 'Ravie Color';
src: url('./fonts/ravie-color/ravie-color-webfont.woff2') format('woff2'),
     url('./fonts/ravie-color/ravie-color-webfont.woff') format('woff'),
     url('./fonts/ravie-color/ravie-color.ttf') format('truetype'); 
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Retrock';
src: url('./fonts/retrock/retrock.woff2') format('woff2'),
     url('./fonts/retrock/retrock.woff') format('woff'),
     url('./fonts/retrock/retrock.ttf') format('truetype'); 
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Retrofunk Script';
src: url('./fonts/retrofunk-script/retrofunk-script.woff2') format('woff2'),
     url('./fonts/retrofunk-script/retrofunk-script.woff') format('woff'),
     url('./fonts/retrofunk-script/retrofunk-script.ttf') format('opentype'); 
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Retro Swirl';
src: url('./fonts/retro-swirl/retro-swirl-webfont.woff2') format('woff2'),
     url('./fonts/retro-swirl/retro-swirl-webfont.woff') format('woff'),
     url('./fonts/retro-swirl/retro-swirl.otf') format('opentype'); 
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Roboto Regular';
src: url('./fonts/roboto/roboto-regular-webfont.woff2') format('woff2'),
     url('./fonts/roboto/roboto-regular-webfont.woff') format('woff'),
     url('./fonts/roboto/roboto-regular.ttf') format('truetype'); 
font-weight: normal;
font-style: normal;
font-display: swap;
}


/* HEADER.PHP */

#header {
height: 65px;	
margin: 0;
background-color: #1F6AA4;
padding: 0px;
margin: 0;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.51);
}


/* HOMEPAGE SLIDER */

.homepage-slider-container {
overflow: hidden;
width: 100%;
margin: 20px auto;
}

.homepage-slider-track {
display: flex;
animation: scroll 12s linear infinite; /* Adjust duration for speed */
}

.homepage-slider-slide {
flex: 0 0 100%; /* Only show one slide at a time */
display: flex;
justify-content: center;
}

.homepage-slider-slide img {
width: 100%; 
height: auto;
}

/* Continuous scroll animation */
@keyframes scroll {
0% { transform: translateX(0); }
20% { transform: translateX(0); }    /* Pause for the first image */
25% { transform: translateX(-100%); } /* Transition to the second image */
45% { transform: translateX(-100%); } /* Pause for the second image */
50% { transform: translateX(-200%); } /* Transition to the third image */
70% { transform: translateX(-200%); } /* Pause for the third image */
75% { transform: translateX(-300%); } /* Transition back to the first image (repeat) */
100% { transform: translateX(-300%); }/* Ensure the last image stays in view */
}

/* Responsive adjustments */
@media (max-width: 1100px) {
.homepage-slider-slide img {
width: 100%;
}
}

@media (max-width: 800px) {
.homepage-slider-slide img {
width: 100%;
}
}

@media (max-width: 600px) {
.homepage-slider-slide img {
width: 100%;
}
}

/* BIG SEARCH - HERO SLIDER */

#hero-slider {
width: 100%;
max-width: 1400px;
height: 400px;
background-image: url('images/big-search.jpg');
background-color: #87AECE; 
background-position: center center; 
background-repeat: no-repeat; 
margin: 0 auto; 
text-align: center; 
position: relative; /* Allow positioning of child elements */
display: flex; /* Use Flexbox to center contents */
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
}

#hero-slider h1 {
font-size: 2rem;
color: #FFFFFF;
}

#hero-slider .hero-search-box {
position: absolute; /* Position the search box */
top: 20%; /* Adjust vertical position */
left: 50%; /* Center horizontally */
transform: translateX(-50%); /* Offset by half its width */
z-index: 10; /* Ensure it is above the background */
color: white; 
padding: 5px;
font-size: 13px;
text-align: center; /* Center text */
width: 90%; 
}

#hero-slider .hero-search-box select, 
#hero-slider .hero-search-box input, 
#hero-slider .hero-search-box button {
padding: 10px 15px;
margin: 5px 0; /* Add some spacing between elements */
border-radius: 0px;
border: 1px solid white;
}


.portfolio,
.portfolio a {
font-size: 16px;
padding: 15px 0;
color: #FFF;
font-weight: 500;
}


/* CAROUSEL */

.carousel-container {
overflow: hidden;
width: 100%; /* Set the container width */
margin: 20px auto;
}

.carousel-track {
display: flex;
flex-wrap: nowrap;
transition: transform 0.5s ease;
animation: scrollLeft 15s linear infinite;
}

.carousel-slide {
flex: 1 0 auto; /* slides per row */
width: calc(100% / 5); 
display: flex;
justify-content: center;
padding: 10px 5px;
background-color: #83b6f7;
}

.carousel-slide img {
width: 100%; 
height: auto;
}


/* HEADER CAROUSEL */

.header-carousel-container {
overflow: hidden;
width: 100%; /* Set the container width */
margin: 20px auto;
}

.header-carousel-track {
display: flex; /* arrange slides in a row */
flex-wrap: nowrap; /* not wrap onto a new line */
transition: transform 0.5s ease; /* moving the carousel transition */
animation: scrollLeft 15s linear infinite; /* continuous leftward scrolling */
}

.header-carousel-slide {
flex: 0 0 auto; /* slides per row */
width: 50%;  /* width of each slide in a row, means 2 in a row */
display: flex;
justify-content: center;
padding: 0px 5px;
background-color: none;
}

.header-carousel-slide img {
width: 100%; 
height: auto;
}


/* Continuous scroll animation */
@keyframes scrollLeft {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); } /* Scroll halfway to account for the duplicate images */
}

/* Responsive adjustment */
@media (max-width: 1100px) {
.carousel-slide {
width: calc(100% / 3); /* 3 slides in a row */
}
}

@media (max-width: 800px) {
.carousel-slide {
width: calc(100% / 2); /* 2 slides in a row */
}
}

@media (max-width: 600px) {
.carousel-slide {
width: calc(100% / 1); /* 1 slides in a row */
}
}

/* ELEMENTS FROM PARTS FOLDER */

#weather-widget {
margin-top: -20px;
}


/* Full-width top bar with max-width */
.top-bar {
height: 65px;	
width: 90%;
max-width: 1400px;
margin: 0 auto;
background-color: #1F6AA4;
padding: 0px;
display: flex;
position: relative; /* Added to position elements correctly */
}

/* Site title styles -------------------------------------------------HERE---------- */
.site-title {
flex: 0 0 33%;
font-family: 'Hobo Std', Arial, sans-serif;
font-size: 1.4rem;
padding: 0px;
display: flex;
align-items: center;
}

.site-title a {
text-decoration: none;
color: #FFFFFF;
font-weight: 400;
display: inline-block;
margin: 0 !important;
padding: 0 !important;
line-height: 1 !important;
}

/* .site-title a {
text-decoration: none;
color: transparent;
background: linear-gradient(to right, #006B00, #FF8600, #006C92, #E50101, #498F05, #0380FF, #B303B3, #FF8500, #006B00, #E50101, #02688C, #AA00AA );
-webkit-background-clip: text;
}
*/

/* MAIN NAV BAR (MENU) */

.main-navigation {
flex: 0 0 67%;
display: flex;
justify-content: flex-end;
}


@media only screen and (max-width: 815px) {
.site-title {
flex: 0 0 85%;
}

.main-navigation {
flex: 0 0 15%;
}
}


/* Menu list styles */
.menu-bar {
list-style: none;
margin: 0;
padding: 0;
display: flex;
list-style: none;
align-items: center !important;
gap: 0px;
}

.menu-bar li {
position: relative; 
margin-left: 17px;
}

.menu-bar li a {
text-decoration: none;
color: #FFF;
font-size: 1rem;
}

/* Submenu styles */
.menu-bar li ul {
list-style: none;
position: absolute; 
top: 100%; 
left: 0;
margin: 0px 0px 0px -30px;
padding: 0;
background-color: none; /* Submenu bg color */
display: none; /* Hide submenu by default */ 
z-index: 9999; 
min-width: 250px;
}

.menu-bar li ul li {
margin: 0;
padding: 0;
}

.menu-bar li ul li a {
display: block;
padding: 15px 30px;
color: #FFF;
font-size: 1rem;
text-decoration: none;
background-color: #0280BC;
white-space: nowrap;
top: 20px; 
position: relative;
border-top: white 1px solid;
}

.menu-bar li ul li a:hover {
background-color: #1F6AA4;
}

.menu-bar li:hover ul {
display: block;
}


/* SPECIAL 2 LEVEL MENU --------------------START------------------------ ATTENTION ---------- */

@media screen and (min-width: 816px) and (max-width: 1100px) {
#header {
height: auto;
}	
	
.top-bar {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0px;
height: auto;
}

.site-title {
padding: 10px 0px;
display: block;
}

.main-navigation {
width: 100%;
display: block;
padding: 10px 0px;
border-top: 1px dashed gray;
}

.main-navigation .menu-bar {
justify-content: center;
flex-wrap: wrap;
}

/* SPECIAL 2 LEVEL MENU ---------------------END------------------------- ATTENTION ---------- */



/* sub-menu items */
.menu-bar li ul li a {
top: 10px !important;
}
}

/* SPECIAL 2 LEVEL MENU --- END ---- */



/* Mobile Toggle Button */
.menu-toggle {
display: none; /* Hidden by default */
}

/* Sidebar styles */
.sidebar {
position: fixed;
top: 0;
left: 0; /* Keep left at 0 for the display logic */
width: 70%; /* Width of sidebar */
height: 100%;
background-color: #113653; 
border-right: #000 1px solid;
box-shadow: 5px 0px 10px rgba(6, 6, 6, 0.65);
transition: left 0.3s ease; /* Animation */
z-index: 999; 
display: none; /* Initially hidden */
outline: 2px #FFFFFF24 solid;
outline-offset: -15px;
overflow-y: auto; /* Enable vertical scrolling */
-webkit-overflow-scrolling: touch; /* Smooth touch scrolling */
scrollbar-width: none; /* Hide scrollbar for Firefox */
}

.sidebar::-webkit-scrollbar {
display: none; /* Hide scrollbar for WebKit browsers */
}

.sidebar.active {
display: block; /* Show sidebar when active */
left: 0; /* Show sidebar */
}

/* Responsive Styles */
@media (max-width: 815px) {
.menu-toggle {
display: block; /* Show mobile toggle button */
background: none;
border: none;
color: #FFFFFF; /* Color for the menu icon */
font-size: 1.875rem; /* Size of the icon */
margin-right: 0px; /* Spacing from the right */
}

.menu-bar {
display: none; /* Hide menu on mobile */
}
}

.sidebar-menu {
list-style: none;
padding: 10%; /* Padding for sidebar */
margin-top: 50px;
text-align: center;
}

.sidebar-menu li {
margin: 10px 0; /* Spacing between items */
border-bottom: 1px solid #FFFFFF4D;
}

.sidebar-menu li a {
text-decoration: none;
color: white; /* Text color for sidebar */
font-size: 1rem; /* Text size */
border-bottom: 1px solid #FFFFFF4D;
padding: 10px 0px 20px;
display: block; /* Ensures the link fills the entire li element */
}

/* Close button for sidebar */
.close-sidebar {
position: absolute;
top: 20px;
right: 30px;
background: none;
border: none;
color: white;
font-size: 1.875rem; /* Close icon size */
}


/* HEADER SEARCH BAR */

#search-bar {	
display: none;	
width: 90%;	
max-width: 1400px;
background: #036899;
margin: 0 auto;	
padding: 20px 0px;
}

.search-form {
width: 95%;
margin: 0px auto;		
display: flex;
justify-content: center;
align-items: center;
gap: 0px;
}

.search-field {
padding: 8px 12px;
font-size: 1rem;
border: 1px solid #ccc;
width: 100%;
outline: none;
box-shadow: none;
}

.search-submit {
background: none;
border: none;
font-size: 1rem;
cursor: pointer;
color: #fff;
background-color: #0E2335;
padding: 9px 15px;
}


/* BREADCRUMBS */

.breadcrumbs {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 1400px;
width: 90%;
margin: 7px auto -15px;
font-size: 1rem;
display: flex; /* Align items in one line */
align-items: center; 
gap: 0.5rem;
}

@media (max-width: 750px) {
.breadcrumbs {
width: 88%;
margin: 15px auto -5px;
}
}

@media (max-width: 600px) {
.breadcrumbs {
width: 88%;
margin: 10px auto -10px;
}
}

.breadcrumbs a {
color: #0073aa;
text-decoration: none;
padding: 10px 0px;
display: inline-block; /* Ensure links are aligned correctly */
}

.breadcrumbs a:hover {
text-decoration: underline;
}

.breadcrumbs span {
color: #333;
padding: 10px 0px;
display: inline-block; /* Consistent spacing */
}



/* MAIN WRAPPER */

#main-wrapper {
max-width: 1400px;
width: 90%;
margin: 20px auto 20px;
background-color: none;
}

/* LISTING CATEGORIES */

#listing-categories {
padding: 10px 0;
}

.listing-title i {
margin-right: 10px;
color: #1F6AA4;
}

.listing-item p {
font-size: 1rem;
color: #333;
line-height: 1.4;
margin: 5px 0 0 0;
}

@media (max-width: 600px) {
.listing-item p {
display: none;
}	
}


/* GOOGLE MAPS */

#google-maps-container {
width: 100%;
margin: 0px;
padding: 0px;
}

#google-maps {
margin: 20px 0px;
}



/* INCREASE SPACE BETWEEN TITLE AND CONTENT- */
.post-content {
margin-top: 22px !important;
}


/* GRID CONTAINER FOR HOMEPAGE POSTS */

.grid-container {
margin: 20px 0 20px;
display: grid;
grid-template-columns: repeat(4, 1fr); 
gap: 20px; 
}

@media (max-width: 1100px) {
.grid-container {
grid-template-columns: repeat(3, 1fr); 
}
}
    
@media (max-width: 850px) {
.grid-container {
grid-template-columns: repeat(2, 1fr);
}
}
    
@media (max-width: 600px) {
.grid-container {
grid-template-columns: repeat(1, 1fr); 
}
}

/* GRID 4 IN A ROW - EXTRA */

.grid-container-4-in-row-extra {
margin: 20px 0 20px;
display: grid;
grid-template-columns: repeat(4, 1fr); 
gap: 20px; 
}
    
@media (max-width: 950px) {
.grid-container-4-in-row-extra {
grid-template-columns: repeat(2, 1fr);
}
}


	
	
/* GRID 3 IN A ROW */

.grid-container-3-in-row {
margin: 20px 0 20px;
display: grid;
grid-template-columns: repeat(3, 1fr); 
gap: 20px; 
}

    
@media (max-width: 850px) {
.grid-container-3-in-row {
grid-template-columns: repeat(2, 1fr);
}
}
    
@media (max-width: 600px) {
.grid-container-3-in-row {
grid-template-columns: repeat(1, 1fr); 
}
}


/* GRID 2 IN A ROW */

.grid-container-2-in-row {
margin: 20px 0 20px;
display: grid;
grid-template-columns: repeat(2, 1fr); 
gap: 20px; 
}

    
@media (max-width: 600px) {
.grid-container-2-in-row {
grid-template-columns: repeat(1, 1fr); 
}
}


.grid-item {
padding: 0px;
background-color: none; 
}


/* FEATURE IMAGE & 3D FLIP + GRAYSCALE EFFECT 

.featured-image {
width: 100%; 
height: auto;
transition: transform 0.6s ease;
filter: grayscale(0%);
}

.featured-image:hover {
transform: scaleX(-1); 
filter: grayscale(100%);
}
*/

/* FEATURE IMAGE & 3D FLIP EFFECT 

.featured-image {
width: 100%; 
height: auto;
transition: transform 0.9s ease;
transform-style: preserve-3d;
}

.featured-image:hover {
transform: rotateY(360deg);
}
*/

/* FEATURE IMAGE & FLIP EFFECT  

.featured-image {
width: 100%; 
height: auto;
transition: transform 0.5s ease;
}

.featured-image:hover {
transform: scaleX(-1); 
}
*/

/* FEATURE IMAGE & GRAY SCALE EFFECT */

.featured-image {
width: 100%; 
height: auto;
outline: 3px #FFFFFF7D solid;
outline-offset: -10px;
transition: transform 0.5s ease;
filter: grayscale(0%);
}

.featured-image:hover {
filter: grayscale(100%); 
}



/* for Blog grid item*/ 

.post-title { 
font-size: 1rem
text-align: left; 
margin: 3px auto 0px; 
}

/* Archive Grid excerpt style */

.post-excerpt {
padding: 0px;
margin: 5px 0; /* Was -10px 0 20px */
font-size: 1rem;
}


/* for homepage grid item */

.homepage-grid-title {
position: absolute;
top: 5%;
left: 0;
right: 0;
z-index: 10;
font-size: 1.125rem;
text-align: center;
background-color: #036899;
padding: 5%;
}

.homepage-grid-title a {
color: #FFFFFF;
}	

    

/* NEWS HOMEPAGE CATEGORY TEXT-OVER */    

.image-wrapper {
display: block;
position: relative;
}

.category-name {
position: absolute;
bottom: 7px;
left: 0px;
background-color: #960000;
color: #fff;
padding: 5px 10px;
font-size: 0.9rem;
}	
	




/* TITLE WITH CROSS-LINE */

.cross-line {
display: flex;
align-items: center;
justify-content: center;
position: relative;
font-size: 16px;
color: #000;
text-transform: uppercase;
max-width: 1400px;
margin: 10px auto; /* Centers within container */
text-transform: uppercase;
}

.cross-line::before,
.cross-line::after {
content: "";
flex: 1;
border-top: 2px dashed #C4C4C4;
margin: 0 15px; /* Space on each side of the text */
}
	
	

	
/* PAGINATION */

.pagination-wrapper {
display: flex;
justify-content: center;
margin: 20px auto 30px;
width: 90%;
}

.pagination-wrapper .screen-reader-text {
display: none;
  }

 .pagination-wrapper .page-numbers {
display: inline-block;
padding: 8px 20px;
margin: 4px 2px;
background-color: #A3C7E2;
color: #000;
border-radius: 3px;
text-decoration: none;
font-weight: 300;
transition: background-color 0.3s, color 0.3s;
}

.pagination-wrapper .page-numbers:hover {
background-color: #0073aa;
color: #fff; 
}

.pagination-wrapper .current {
background-color: #0073aa; 
color: #fff; 
cursor: default;
}

.pagination-wrapper .prev, 
.pagination-wrapper .next {
background-color: #A3C7E2; 
}	
		
	
/* -POST TAGS nad POST CLOUD- */

.post-tags,
.tag-cloud {
margin: 25px 0;
border-top: 1px dashed #1F6AA4;
border-bottom: 1px dashed #1F6AA4;
padding: 5px 0px 25px;
}

.post-tags h6,
.tag-cloud h6 {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
margin: 20px 0 10px;
}

.post-tags p,
.tag-cloud p {
font-size: 1rem;
color: red;
margin: 0;
}

.post-tags a,
.tag-cloud a { 
background: #1F6AA4; 
display: inline-block; 
line-height: 25px; 
white-space: nowrap; 
font-size: 0.95625rem; 
color: #FFF; 
padding: 5px 13px 7px; 
margin: 5px 7px 5px 0;
-webkit-border-radius: 2px; border-radius: 2px; 
font-weight: 500;
}

.post-tags a:hover,
.tag-cloud a:hover { 
background-color: #142E42; 
color: #fff; 
}





.image-container {
position: relative; /* Necessary to position the overlay */
display: inline-block; /* Optional depending on layout needs */
}


.overlay-text {
position: absolute;
top: 58%;
left: 23%;
right: 0;
z-index: 10;
color: #1F6AA4;
padding: 5px;
font-size: 0.9375rem;
text-align: center;
width: 50%;
}

.grid-item {
position: relative; /* Ensure the container holds the position for the overlay */
}


/* CONTACT FORM */


.contact-form-container {
width: 100%;
margin: 0 auto 20px;
padding: 0%;
background-color: transparent;
}

.contact-form-container form p {
margin-bottom: 15px;
}

.contact-form-container label {
display: block;
font-weight: normal;
color: #555;
margin-bottom: 5px;
}

.contact-form-container input[type="text"],
.contact-form-container input[type="email"],
.contact-form-container textarea {
width: 100%;
padding: 10px;
font-size: 1rem;
border: 1px solid #BDBBBB;
border-radius: 0px;
box-sizing: border-box;
background-color: #F5F5F5;
color: #000;
}


.contact-form-container input[type="text"]:focus,
.contact-form-container input[type="email"]:focus,
.contact-form-container textarea:focus {
border-color: #7E7D7D;
outline: none;
}

.contact-form-container textarea {
resize: vertical;
}

.contact-form-container input[type="submit"] {
background-color: #0073aa;
color: #fff;
padding: 10px 20px;
font-size: 14px;
border: none;
border-radius: 3px;
cursor: pointer;
transition: background-color 0.3s ease;
}

.contact-form-container input[type="submit"]:hover {
background-color: #005a87;
}

.contact-form-container p {
font-size: 14px;
color: #000;
}



/* FOOTER.PHP */

#footer {
background-color: #142E42;
padding: 20px;
color: #6287A4;
font-size: 1rem;
border-top: 40px solid #0E2335;
}

.footer-title {
color: #0280BC;
font-weight: normal;
padding-bottom: 10px;
border-bottom: 1px dashed #0280BC;
/* text-transform: uppercase; */
font-size: 1rem;
}

.footer-widgets {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px; 
width: 90%;
max-width: 1400px;
margin: 0 auto;
}

.footer-column {
/* Any additional styling for each column */
}

/* For screens 600px to 1000px, show two columns */
@media (max-width: 1000px) {
.footer-widgets {
grid-template-columns: repeat(2, 1fr); 
}
}

/* For screens less than 600px, show one column */
@media (max-width: 600px) {
.footer-widgets {
grid-template-columns: 1fr; 
}
}

.bottom-bar {
width: 100%;
padding: 5px 0px;
background-color: #0E2335;
color: #0280BC;
text-align: center;
margin: 20px 0 0;
}


/* SCROLL TO TOP BUTTON */

#scrollToTop {
position: fixed; 
bottom: 30px; 
right: 30px; 
background-color: #8C0000; 
color: white;
border: none; 
padding: 10px 15px;
border-radius: 3px; 
font-size: 18px; 
cursor: pointer;
z-index: 1000; 
transition: opacity 0.5s ease; 
}

#scrollToTop:hover {
background-color: #81121B; 
}


/* SINGLE.PHP */

/* Post title over feature image */

.post-thumbnail-container {
position: relative;
display: inline-block;
}

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

.post-title-overlay {
position: absolute;
padding: 10px;
font-size: 1.75rem;
text-align: center;
z-index: 10;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
color: #1F6AA4;
}


/* POST IMAGE */

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



/* Default for larger screens (min-width: 1101px) */
#post-wrapper,
#page-wrapper,
#listing-wrapper {
display: flex;
justify-content: space-between;
width: 90%;
max-width: 1400px;
margin: 20px auto;
}

/* To adjust the space between breadcrumbs and the content */
@media (max-width: 750px) {
#post-wrapper,
#page-wrapper,
#listing-wrapper {
margin: 15px auto;
}	
}

.container {
width: 52%;
padding: 0% 2%;
}


/* SIDEBARS */

.sidebar-left .sidebar-top,
.sidebar-right .sidebar-top,
.sidebar-left-2 .sidebar-top,
.sidebar-right-2 .sidebar-top,
.sidebar-big .sidebar-top {
display: none;
}

.sidebar-left, .sidebar-right, 
.sidebar-left-2, .sidebar-right-2, 
.sidebar-big {
width: 21%;
padding: 0%;
margin-top: -15px;
}

.sidebar-left img, .sidebar-right img, 
.sidebar-left-2 img, .sidebar-right-2 img, 
.sidebar-big img {
width: 100%;
height: auto;
outline: 3px #FFFFFF7D solid;
outline-offset: -10px;
}



.sidebar-left p, .sidebar-right p, 
.sidebar-left-2 p, .sidebar-right-2 p, 
.sidebar-big p {
font-size: 1rem;
padding: 0px;
margin: 0px;
}

.sidebar-left ul, .sidebar-right ul, 
.sidebar-left-2 ul, .sidebar-right-2 ul, 
.sidebar-big ul {
list-style-type: none;
padding: 0;
margin: 0;
}

.sidebar-left li, .sidebar-right li, 
.sidebar-left-2 li, .sidebar-right-2 li, 
.sidebar-big li {
list-style-type: none;
padding: 0;
margin: 0 0 20px;
}

.sidebar-left li a, .sidebar-right li a, 
.sidebar-left-2 li a, .sidebar-right-2 li a, 
.sidebar-big li a {
color: #1F6AA4;
font-size: 1rem;
line-height: 20px;
}

.sidebar-left h3, .sidebar-right h3, 
.sidebar-left-2 h3, .sidebar-right-2 h3, 
.sidebar-big h3 {
font-size: 1rem;
font-weight: normal;
color: white;
padding: 15px;
text-align: center;
/* text-transform: uppercase; */
outline: 1px #FFFFFF7D solid;
outline-offset: -8px;
background-color: #1F6AA4;
margin-bottom: 25px;
}


/* SEARCHFORM WIDGET */

.searchform {
margin: 30px auto;
}

.searchform label {
display: none;
}

.searchform #s {
width: 93%;
padding: 3%;
border: 1px solid #B4B3B3;
font-size: 1rem;
background: #fff;
margin-bottom: 10px;
outline: none;
}

#s {
font-size: 1rem;
outline: none;
box-shadow: none; 
}

.hero-search-box button {
font-size: 1rem;
}

.searchform #searchsubmit {
width: 100%;
padding: 4%;
background: #226395;
border: #226395;
color: white;
cursor: pointer;
font-size: 1rem;
}

.searchform #searchsubmit:hover {
background: #142E42;
}


/* DROPDOWN MENU */

/* for example, select of the hero-slider */
select {	
background: #f8f8f8;
border-radius: 3px;
padding: 15px;
border: 1px solid #B4B3B3;
font-size: 1rem;
}

/* for example, select of the sidebar */
.sidebar-left select,
.sidebar-right select,
.sidebar-left-2 select,
.sidebar-right-2 select,
.sidebar-big select {
width: 100%;	
margin-bottom: 10px;
}


.screen-reader-text {
display: none;
}

/* CALENDAR WIDGET */

#wp-calendar {
width: 100%;
margin: 15px auto;
background: #f8f8f8;
border-radius: 3px;
padding: 15px;
border: 1px solid #B4B3B3;
text-align: center;
border-collapse: collapse;
}

#wp-calendar th, #wp-calendar td {
border: 1px solid #B4B3B3;
padding: 10px 0px;
text-align: center;
width: 14.28%; /* 7 columns */
}

#wp-calendar th {
background: #D4D3D3;
font-size: 0.8rem;
font-weight: normal;
text-transform: uppercase;
}

#wp-calendar caption {
padding: 10px;
background-color: #226395;
color: #FFFFFF;
}



/* For screens between 751px and 1100px */

@media only screen and (max-width: 1100px) and (min-width: 751px) {
#post-wrapper,
#page-wrapper,
#listing-wrapper {
display: flex;
flex-wrap: wrap;
}
  
.sidebar-left,
.sidebar-left-2{
width: 34%;
padding: 0% 2% 0% 0%;
}
  
.container {
width: 62%;
padding: 0% 0% 0% 2%;
}
  
.sidebar-right,
.sidebar-right-2 {
width: 98%;
padding: 0% 1%;
}

 /* Sidebar-right Recent Posts grid effect */
 
.sidebar-right ul,
.sidebar-right-2 ul {
display: grid;
gap: 20px;
grid-template-columns: repeat(2, 1fr); 
}

}

/* For screens between 601px and 750px */

@media only screen and (max-width: 750px) and (min-width: 601px) {
#post-wrapper,
#page-wrapper,
#listing-wrapper {
display: flex;
flex-wrap: wrap;
flex-direction: column; /* Stack elements vertically */
}

.container {
width: 98%;
padding: 0% 1%;
}

.sidebar-left,
.sidebar-left-2 {
width: 98%;
padding: 1%;
order: 1; /* Move the left sidebar below the container */
}

.sidebar-right,
.sidebar-right-2 {
width: 98%;
padding: 1%;
order: 2; /* Keep the right sidebar above the left sidebar */
}

 /* Sidebar-left Recent Posts grid effect */
.sidebar-left ul,
.sidebar-left-2 ul {
display: grid;
gap: 20px;
grid-template-columns: repeat(2, 1fr); 
}

 /* Sidebar-right Recent Posts grid effect */
.sidebar-right ul,
.sidebar-right-2 ul {
display: grid;
gap: 20px;
grid-template-columns: repeat(2, 1fr); 
}
}

/* For screens 600px and below */

@media only screen and (max-width: 600px) {
#post-wrapper,
#page-wrapper,
#listing-wrapper {
display: flex;
flex-wrap: wrap;
flex-direction: column; /* Stack elements vertically */
}

.container {
width: 98%;
padding: 1%;
}

.sidebar-left, .sidebar-right,
.sidebar-left-2, .sidebar-right-2,
.sidebar-big {
width: 98%;
padding: 1%;
order: 2; /* Ensure both sidebars come after the container */
}



	








.say-thanks-container input[type="submit"] {
background-color: #0073aa;
color: #fff;
padding: 10px 20px;
font-size: 14px;
border: none;
border-radius: 3px;
cursor: pointer;
transition: background-color 0.3s ease;
}

.say-thanks-container input[type="submit"]:hover {
background-color: #005f8a;
}