/*!
Theme Name: Empire Contracting
Theme URI: http://underscores.me/
Author: Zal Digital Solutions
Author URI: https://zaldigitalsolutions.com/
Description: A personal portfolio website for a contracting firm to showcase their work and gather more clients digitally. 
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: empire_contracting
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Empire Contracting is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Header
	- Navigation
    - Cover Banner
    - About Us
    - Services
    - Projects
    - Contact Us
    - Testimonials
    - Blogs
    - Galleries
    - Footer
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
    - Footer
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

     @import url('https://cdn.jsdelivr.net/npm/glightbox@3.2.0/dist/css/glightbox.min.css');

/**
  * Fonts import
  */
  @import url('https://fonts.googleapis.com/css2?family=Port+Lligat+Sans&family=Roboto:wght@300;400;700&display=swap');

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	padding-top: 0px;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

h1.entry-title {
    display: none;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: none;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #000;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
	font-family: 'Roboto', sans-serif; /* Updated font */
	font-weight: 400;
    color: #000;
    text-align: justify;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
	color: #EBB922; 
    font-style: italic;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	font-family: 'Roboto', sans-serif;
    color: #000;
    background-color: #f5f5f5;
}

h1, h2 {
	font-family: 'Port Lligat Sans', sans-serif; 
    color: #EBB922; 
    text-align: center;
}

h3 {
    font-family: 'Port Lligat Sans', sans-serif; 
    color: #25231f; 
    text-align: center;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

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

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: #25231f;
    text-decoration: none;
}

a:hover,
a:focus,
a:active {
	color: #EBB922;
}

a:focus {
	outline: none;
}

a:hover,
a:active {
	outline: none;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid #EBB922;
	border-radius: 12px;
	background: #FFD700;
	color: #000; 
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #FFD700;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #FFD700;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	font-family: 'Roboto', sans-serif; /* Updated font */
    color: #000;
    border: 1px solid #EBB922; 
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #000;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Header
--------------------------------------------- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    height: auto;
    width: 100%;
    background: #000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 999;
    transition: all 0.3s ease-in-out;
}

/* Header Container */
.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;  
    width: 90%;
    margin: 0 auto;
    padding: 5px 0;
}

/* Logo */
.site-branding {
    display: flex;
    align-items: center;  
    padding: 0;
    margin: 0;
}

.site-branding img {
    max-height: 150px;
    width: auto;
    height: auto;
    display: block;
    padding-top: 32px;
    margin: 0;
}

/* CTA Button */
.cta-button {
    display: flex;
    align-items: center;
}

.cta-button .quote-btn {
    background: #FFD700;
    color: #000;
    padding: 10px 20px;  
    border: 3px solid #EBB922;
    border-radius: 12px;
    text-decoration: none;
    font-weight: bold;
    white-space: nowrap;  
    display: inline-block;
    text-align: center;
    margin-top: 25px;
}

.quote-btn:hover {
    background: #EDEDED;
    color: #000;
    border: 3px solid #EBB922;
    border-radius: 12px;
}

/* Sticky Header Effect */
.site-header.sticky-header {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Hamburger Menu */
.menu-toggle {
    display: none; /* Hidden by default on larger screens */
    background-color: transparent;
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
}

/* Navigation Menu */
.nav-menu {
    display: flex;
    gap: 15px; /* Flex layout for larger screens */
}

/* For small and medium screens (600px and below) */
@media only screen and (max-width: 600px) {
    .header-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
    }

    .site-branding img {
        width: 70px;
        height: auto;
        margin: 0 auto; /* Centers the logo */
    }

    .menu-toggle {
        display: block; /* Show hamburger on small screens */
        order: -1; /* Moves hamburger to the left */
    }

    /* Initially hide the menu on mobile */
    .nav-menu {
        display: none; /* Keep menu hidden by default */
    }

    .nav-menu.active {
        display: block; /* Show menu when toggled */
        background-color: #000;
        color: #fff;
        padding: 10px 0;
        text-align: center;
    }

    /* CTA button for mobile */
    .cta-button a {
        color: #fff;
        background-color: #FFD700;
        padding: 8px 16px;
        border-radius: 5px;
        text-align: center;
        order: 1; /* Moves CTA to the right */
    }
    .cta-button .quote-btn {
        font-size: 12px;
    }
}

/* For medium devices (600px to 768px) */
@media only screen and (min-width: 600px) and (max-width: 768px) {
    .header-container {
        flex-direction: row;
        justify-content: space-between;
    }

    .menu-toggle {
        display: block; /* Show hamburger on medium screens */
    }

    .nav-menu {
        display: none; /* Hide menu on medium screens */
    }

    .nav-menu.active {
        display: block; /* Show menu when toggled */
        background-color: #000;
        color: #fff;
        padding: 10px 0;
        text-align: center;
    }
    .cta-button .quote-btn {
        font-size: 10px;
    }
}

/* For large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .menu-toggle {
        display: none; /* Hide hamburger on larger screens */
    }

    .nav-menu {
        display: flex; /* Show navigation menu for larger screens */
        gap: 15px;
    }
}

/* For extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .homepage-banner .banner-content h1 {
        font-size: 60px;
        margin-top: 0px;
    }
    .banner-buttons {
        margin-bottom: 15px;
    }
}

/* Navigation
--------------------------------------------- */
.main-navigation {
    display: flex;
    justify-content: center;
    flex-grow: 1;
}

.main-navigation ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding-left: 0;
    justify-content: center;
    margin-top: 25px;
    gap: 20px; /* Increased gap to add space between menu items */
}

/* Menu items */
.main-navigation li {
    position: relative;
    text-align: center;
}

.main-navigation a {
    display: block;
    text-decoration: none;
}

/* Navigation Menu */
.nav-menu {
    display: flex; /* Default for desktop */
    gap: 20px; /* Increased gap for desktop */
    font-family: 'Port Lligat Sans', sans-serif;
    font-weight: bolder;
    font-size: 20px;
}

/* Child Menus */
.main-navigation ul ul {
    display: none; /* Hide child menus */
    position: absolute;
    left: 0;
    top: 50%;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    background-color: #333;
    z-index: 99999;
}

.main-navigation ul ul a {
    width: 200px;
    padding: 10px 15px;
    color: #FFD700;
    font-size: 18px;
    background-color: #000;
}

.main-navigation ul ul a:hover {
    background-color: #000;
    color: #EBB922;
}

.main-navigation ul li.active > ul {
    display: block;
    visibility: visible;
    opacity: 1;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li:focus-within > ul {
    display: block;
    visibility: visible;
    opacity: 1;
}

/* Links & Hover Effects */
.main-navigation li a {
    padding: 10px 15px;
    color: #FFD700;
    transition: color 0.3s ease;
}

.main-navigation li a:hover {
    color: #EBB922;
}

/* Quote Button */
.main-navigation .quote-button {
    position: absolute;
    right: 0;
    top: 0;
    padding: 10px 20px;
    background-color: #FFD700;
    color: #FFF;
    text-decoration: none;
    border-radius: 5px;
}

.main-navigation .quote-button:hover {
    background-color: #EBB922;
}

/* Mobile and Small to Medium Screens Adjustments */
@media only screen and (max-width: 768px) {
    /* Center the logo on small screens */
    .site-branding {
        justify-content: center; /* Center the logo horizontally on small screens */
        width: 100%;
    }

    .logo-container {
        display: flex;
        justify-content: center;  /* Center logo inside its container */
        width: 100%;
        margin: 0 auto;
    }

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

    /* Mobile Navigation Menu: Hide by default */
    .nav-menu {
        display: none;  /* Hide navigation menu */
        position: absolute;  /* Position the menu below the hamburger */
        top: 60px;  /* Increase this value to move the menu further down */
        left: 0;
        right: 0;
        background-color: #000;  /* Add background color to the menu */
        text-align: center;
        padding: 10px 0;
        z-index: 999;  /* Ensure the menu appears above other content */
        width: auto;  /* Make the dropdown width auto to fit the label */
        max-width: 200px;  /* Set a max-width to avoid too wide of a menu */
        margin: 0 auto; /* Center the dropdown */
    }

    /* When the menu is active (toggled on), display it */
    .nav-menu.active {
        display: block;
    }

    /* Styling for menu items */
    .nav-menu li {
        list-style: none;
        padding: 10px 0;
    }

    .nav-menu a {
        color: #FFD700;  /* Text color */
        text-decoration: none;
        display: block;  /* Ensure links fill the width of the menu */
        text-align: center;
    }

    .nav-menu a:hover {
        color: #EBB922;  /* Hover effect color */
    }

    /* Hamburger icon */
    .menu-toggle {
        display: block; 
        background-color: transparent;
        border: none;
        color: #FFD700;
        font-size: 24px;
        cursor: pointer;
        order: -1; /* Move hamburger to the left */
    }

    /* Change hamburger icon to X when menu is active */
    .menu-toggle i {
        font-size: 28px;
    }

    .main-navigation ul {
        display: none; /* Hide default navigation menu for mobile */
    }

    .main-navigation ul.active {
        display: block;
        background-color: #000;
        padding: 10px 0;
        text-align: center;
        top: 80px;
        left: 37px;
    }
}


/* General Child Menu Visibility */
.main-navigation ul ul {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.5s ease;
}

/* Keep child menu open when clicked */
.main-navigation ul li.active > ul {
    visibility: visible;
    opacity: 1;
}

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
    margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
    display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
    flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
    text-align: end;
    flex: 1 0 50%;
}

/* Cover Banner
--------------------------------------------- */
.homepage-banner {
    position: relative;
    width: 100%;
    height: 600px; /* Adjust as needed */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    padding: 0 20px;
    margin-top: 110px;
}

.banner-content {
    max-width: 650px;
    color: #000;
    background: #fff;
    padding: 5px 25px;
    border-radius: 10px;
}

.banner-content h1 {
    font-size: 2.5rem;
    margin-bottom: 5px;
    margin-top: 0;
    color: #25231f;
}
.banner-buttons {
    margin-bottom: 5px;
}

.banner-content p {
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.banner-buttons .btn {
    display: inline-block;
    padding: 10px 20px;
    margin-right: 10px;
    border: none;
    border-radius: 12px;
    border: 3px solid #EBB922;
    text-decoration: none;
}

.btn-primary {
    background-color: #FFD700;;
    color: #000;
}

.btn-secondary {
    background-color: #EDEDED;
    color: #000;
}

div#cover-img {
	min-height: 600px;
}

p#banner-anchor {
    align-content: baseline;
}

/* For small devices (mobile), 600px and below */
@media only screen and (max-width: 600px) {
    .homepage-banner {
        height: 60vh; /* Adjust height for smaller screens */
        background-size: cover; /* Ensure the image still covers the banner */
        padding: 20px;
        top: -45px;
    }

    .banner-content h1 {
        font-size: 2.5rem; /* Reduce font size */
        margin-top: 0;
    }

    .cta-button a {
        font-size: 1.2rem;
        padding: 12px 25px; /* Smaller CTA button */
    }
    .banner-buttons {
        margin-bottom: 15px;
    }
}

a.wp-block-button__link.wp-element-button {
	display: flex;
    align-items: center;
	background: #FFD700;
    color: #000;
    padding: 10px 20px; /* Adjust padding */
	border: 3px solid #EBB922;
    border-radius: 12px;
    text-decoration: none;
    font-weight: bold;
    white-space: nowrap; /* Prevent text wrapping */
	display: inline-block;
    text-align: center;
	margin-top: 25px;
    margin-bottom: 40px;
}

a.wp-block-button__link.wp-element-bu  tton:hover {
	background: #EDEDED;
    color: #000;
	border: 3px solid #EBB922;
    border-radius: 12px;
}

/* About Us Section
-------------------------------------------- */
.about-us {
    text-align: center;
    padding: 50px 0;
    background-color: #fff;
}

.section-title {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 30px;
}

.about-us-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: auto;
    gap: 20px;
}

.about-us-left {
    flex: 1;
    text-align: left;
}

.about-us-left h3 {
    font-size: 24px;
    color: #25231f;
}

.about-us-left p {
    font-size: 16px;
    color: #000;
    margin-bottom: 20px;
}

.about-us-right {
    flex: 1;
    text-align: center;
}

.about-us-right h3 {
    color: #25231f;
}

.about-us-right img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    margin-right: 10px;
    text-decoration: none;
    font-size: 16px;
    border-radius: 12px;
}

.btn-primary {
    background-color: #FFD700;
    color: #000;
    border: 3px solid #EBB922;
    border-radius: 12px;
}
.btn-primary:hover {
    background-color: #EDEDED;
    color: #000;
}

.btn-secondary {
    background-color: #EDEDED;
    color: #000;
    border: 3px solid #EBB922;
    border-radius: 12px;
}
.btn-secondary:hover {
    background-color: #FFD700;
    color: #000;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .about-us {
        padding: 10px 15px;
        margin-top: -45px;
    }
    
    .section-title {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .about-us-content {
        flex-direction: column;
        align-items: center;
        text-align: justify;
    }

    .about-us-left,
    .about-us-right {
        text-align: center;
        padding: 0 14px;
        flex: 1;
    }

    .about-us-left h3,
    .about-us-left p {
        font-size: 14px;
    }

    .about-us-right h3 {
        font-size: 18px;
        color: #25231f;
    }

    .about-us-left p {
        margin-bottom: 15px;
    }

    .about-us-right img {
        max-width: 80%;
        height: auto;
    }

    .btn {
        padding: 8px 15px;
        font-size: 14px;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .about-us {
        padding: 20px 20px;
    }

    .section-title {
        font-size: 28px;
        margin-bottom: 25px;
    }

    .about-us-content {
        flex-direction: column;
        align-items: center;
    }

    .about-us-left h3,
    .about-us-left p {
        font-size: 16px;
    }

    .about-us-right h3 {
        font-size: 20px;
        color: #25231f;
    }

    .about-us-left p {
        margin-bottom: 15px;
    }

    .about-us-right img {
        max-width: 85%;
        height: auto;
    }

    .btn {
        padding: 10px 18px;
        font-size: 15px;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .about-us-content {
        flex-direction: row;
        justify-content: space-between;
    }

    .about-us-left h3 {
        font-size: 20px;
    }

    .about-us-left p {
        font-size: 18px;
    }

    .about-us-right h3 {
        font-size: 24px;
        color: #25231f;
    }

    .about-us-left p {
        margin-bottom: 20px;
    }

    .about-us-right img {
        max-width: 90%;
    }

    .btn {
        padding: 12px 25px;
        font-size: 16px;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .about-us {
        padding: 50px 40px;
    }

    .section-title {
        font-size: 32px;
        margin-bottom: 30px;
    }

    .about-us-content {
        justify-content: space-between;
    }

    .about-us-left h3 {
        font-size: 24px;
    }

    .about-us-left p {
        font-size: 16px;
    }

    .about-us-right h3 {
        font-size: 26px;
        color: #25231f;
    }

    .about-us-left p {
        margin-bottom: 25px;
    }

    .about-us-right img {
        max-width: 100%;
    }

    .btn {
        padding: 14px 30px;
        font-size: 18px;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .about-us {
        padding: 45px 50px;
    }

    .section-title {
        font-size: 36px;
        margin-bottom: 40px;
    }

    .about-us-content {
        max-width: 1200px;
        margin: auto;
        justify-content: space-between;
    }

    .about-us-left h3 {
        font-size: 28px;
    }

    .about-us-left p {
        font-size: 18px;
    }

    .about-us-right h3 {
        font-size: 30px;
        color: #25231f;
    }

    .about-us-left p {
        margin-bottom: 30px;
    }

    .about-us-right img {
        max-width: 100%;
    }

    .btn {
        padding: 15px 35px;
        font-size: 20px;
    }
}


 /* Services Section
-------------------------------------------- */
/* Banner Section */
.services-banner {
    background-color: #fff;
    padding: 40px 0;
    text-align: center;
}

/* Featured Image Section */
.featured-image .container {
    max-width: 100%; /* Ensures the featured image container spans full width */
    padding: 0;      /* Removes any padding around the image */
}

.featured-image img {
    width: 100%;     /* Ensures the image itself stretches fully across the viewport */
    height: auto;    /* Maintains the image's aspect ratio */
    display: block;  /* Prevents extra space below the image */
}

/* Services Grid Layout */
.services-list {
    padding: 60px 0;
    text-align: center;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid */
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.service-box {
    background: white;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.service-box:hover {
    transform: translateY(-5px);
}

.service-box img {
    width: 100%;
    max-width: 550px;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
}

.service-box h3 {
    font-size: 20px;
    margin: 15px 0 10px;
    color: #25231f;;
}

.service-box p {
    font-size: 16px;
    color: #000;
    margin-bottom: 15px;
}

.service-box .btn {
    display: inline-block;
    padding: 10px 15px;
    background-color: #EBB922;
    color: #000;
    text-decoration: none;
    border-radius: 12px;
    font-weight: bold;
    border: 3px solid #FFD700;
    transition: background 0.3s ease, border 0.3s ease;
}

.service-box .btn:hover {
    background-color: #EDEDED;
    border: 3px solid #FFD700;
    color: #000;
}

/* Homepage service layout */
.services-section {
    text-align: center;
    padding: 50px 0;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 30px;
}

.service-item {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    transition: 0.3s ease-in-out;
}

.service-item:hover {
    transform: translateY(-5px);
}

.service-image {
    width: 350px;
    height: 250px;
    object-fit: cover; /* Ensures the image fills the dimensions without distortion */
    border-radius: 10px;
}

.service-title {
    font-size: 24px;
    margin: 15px 0 10px;
    color: #25231f;
}

.service-description {
    font-size: 16px;
    color: #000;
}

.service-btn {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 15px;
    background: #FFD700;
    color: #000;
    border: 3px solid #EBB922;
    border-radius: 12px;
    text-decoration: none;
    font-family: 'Port Lligat sans', sans-serif;
    font-weight: 700;
    font-size:16px;
}

.service-btn:hover {
    background: #EDEDED;
    color:#000;
}
/* Small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    /* Services Grid Layout */
    .services-grid {
        grid-template-columns: 1fr; /* One column for mobile */
        gap: 15px;
    }

    /* Service Box Adjustments */
    .service-box {
        padding: 15px;
    }

    .service-box img {
        height: 200px;
    }

    .service-box h3 {
        font-size: 18px;
        color: #25231f;
    }

    .service-box p {
        font-size: 14px;
    }

    .service-box .btn {
        padding: 8px 12px;
        font-size: 14px;
    }
}

/* Medium devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) and (max-width: 768px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr); /* Two columns for small tablets */
        gap: 20px;
    }

    /* Service Box Adjustments */
    .service-box {
        padding: 18px;
    }

    .service-box h3 {
        font-size: 20px;
        color: #25231f;
    }

    .service-box p {
        font-size: 15px;
    }

    .service-box .btn {
        padding: 9px 14px;
        font-size: 15px;
    }
}

/* Large devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr); /* Two columns for medium-sized devices */
    }

    .service-box h3 {
        font-size: 22px;
        color: #25231f;
    }

    .service-box p {
        font-size: 16px;
    }

    .service-box .btn {
        padding: 10px 15px;
        font-size: 16px;
    }
}

/* Very large screens (laptops/desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    /* Services Grid Layout */
    .services-grid {
        grid-template-columns: repeat(2, 1fr); /* Keep three columns for large screens */
    }

    /* Service Box Adjustments */
    .service-box {
        padding: 25px;
    }

    .service-box h3 {
        font-size: 24px;
        color: #25231f;
    }

    .service-box p {
        font-size: 18px;
    }

    .service-box .btn {
        padding: 12px 18px;
        font-size: 18px;
    }
}
/* Projects Section
-------------------------------------------- */
/* Ensure the section uses the same padding and centers content */
.projects-section {
    text-align: center;
    padding: 30px 0;
    background-color: #fff;
}

/* Use a fixed-width container to constrain the grid */
.projects-section .container {
    max-width: 1140px; /* Adjust based on your homepage layout */
    margin: 0 auto;
    padding: 0 15px;
}
.featured-image .container {
    max-width: 100%; /* Ensures the featured image container spans full width */
    padding: 0;      /* Removes any padding around the image */
}

.featured-image img {
    width: 100%;     /* Ensures the image itself stretches fully across the viewport */
    height: auto;    /* Maintains the image's aspect ratio */
    display: block;  /* Prevents extra space below the image */
}

/* Projects grid: 2 columns with gap */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 30px;
}

/* Each grid item styled similarly to service items */
.project-item {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    transition: 0.3s ease-in-out;
}

.project-item:hover {
    transform: translateY(-5px);
}

/* Project thumbnail styling with fixed dimensions */
.project-thumb {
    width: 350px;
    height: 250px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    margin: 0 auto;
}

/* Title, description, and button styling */
.project-title {
    font-size: 20px;
    margin: 15px 0 10px;
}

h1.project-title-page {
    color: #25231f;
}

.project-description {
    font-size: 16px;
    color: #000;
}

.project-btn {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 15px;
    background: #FFD700;
    color: #000;
    border:3px solid #EBB922;
    text-decoration: none;
    border-radius: 12px;
    font-family: 'Port Lligat Sans', sans-serif;
    Font-weight: 700;
    font-size: 16px;
}

.project-btn:hover {
    background: #EDEDED;
    color: #000 !important;
}

.project-banner img {
    width: 100%;
    height: auto;
    display: block;
}

.project-content {
    padding: 50px 15px;
    max-width: 1140px;
    margin: 0 auto;
    text-align: left;
}

/* Media Queries */

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .projects-grid {
        grid-template-columns: 1fr; /* Stack projects in 1 column */
    }

    .project-thumb {
        width: 100%; /* Make thumbnail responsive */
        height: auto;
    }

    .project-title {
        font-size: 18px; /* Slightly smaller title */
    }

    .project-description {
        font-size: 14px; /* Smaller description font */
    }

    .project-btn {
        font-size: 14px; /* Smaller button text */
        padding: 8px 12px; /* Smaller button size */
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .projects-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on small devices */
    }

    .project-thumb {
        width: 100%;
        height: auto;
    }

    .project-title {
        font-size: 18px;
    }

    .project-description {
        font-size: 15px;
    }

    .project-btn {
        font-size: 15px;
        padding: 9px 14px;
    }
    .project-title {
        font-size: 20px;
    }

    .project-description {
        font-size: 16px;
    }

    .project-page-content {
        padding: 0 10px;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .projects-grid {
        grid-template-columns: repeat(2, 1fr); /* 3 columns for medium devices */
    }

    .project-thumb {
        width: 100%;
        height: auto;
    }

    .project-title {
        font-size: 20px;
    }

    .project-description {
        font-size: 16px;
    }

    .project-btn {
        font-size: 16px;
        padding: 10px 15px;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .projects-grid {
        grid-template-columns: repeat(2, 1fr); /* 3 columns for larger devices */
    }

    .project-title {
        font-size: 20px;
    }

    .project-description {
        font-size: 17px;
    }

    .project-btn {
        font-size: 17px;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .projects-grid {
        grid-template-columns: repeat(2, 1fr); /* 3 columns for large devices */
    }

    .projects-section .container {
        max-width: 1200px; /* Expand container width for large screens */
    }

    .project-title {
        font-size: 20px;
    }

    .project-description {
        font-size: 18px;
    }

    .project-btn {
        font-size: 18px;
        padding: 12px 18px;
    }
}

/*child page */
/* Featured Image Banner */
.project-featured-banner {
    width: 100%;
    height: auto;
}

.project-featured-banner img {
    width: 100%;
    height: auto;
    display: block;
}

/* Project Details Section */
.project-page-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px; 
    text-align: center; 
    margin-bottom: 60px;
}

.project-title {
    font-size: 24px;
    margin-top: 30px;
    margin-bottom: 20px;
}

.project-description {
    text-align: center; 
    font-size: 18px;
    line-height: 1.6;
}

/* Contact Us Section
-------------------------------------------- */
/* Ensure the contact section styles apply globally */
.contactus-section {
    padding: 50px 0;
    background-color: #F5F5F5;
}

.contact-form-section {
    max-width: 1200px; /* Set max width to 1200px */
    margin: 0 auto; /* Center the container */
    padding: 0 20px; /* Add horizontal padding */
    text-align: left; /* Left justify the form */
    background-color: #fff; /* White background for the form container */
    border-radius: 10px; /* Rounded corners for the form */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Light shadow for the form container */
}

/* Ensure the form inside the section takes full width */
.wpcf7 form {
    width: 100%; /* Full width of the container */
    display: flex;
    flex-direction: column; /* Stack form fields vertically */
}

.wpcf7 label {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #000; /* Dark text color */
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
    width: 100%; /* Full width input fields */
    padding: 10px;
    margin-bottom: 15px; /* Space between fields */
    border-radius: 5px;
    border: 1px solid #ddd; /* Light border */
    font-size: 16px;
    box-sizing: border-box; /* Include padding in the width calculation */
}

.wpcf7 textarea {
    min-height: 150px; /* Minimum height for the textarea */
    resize: vertical; /* Allow vertical resizing */
}

.wpcf7 input[type="submit"] {
    background-color: #FFD700; /* Button color */
    color: #000; 
    padding: 10px 20px;
    border: 3px solid #EBB922;
    border-radius: 12px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s; /* Smooth color transition */
	width: 100%;
}

.wpcf7 input[type="submit"]:hover {
    background-color: #EDEDED; /* Darker color on hover */
	width: 100%;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .contactus-section {
        padding: 30px 15px; /* Reduce padding for small devices */
    }
    
    .contact-form-section {
        padding: 10px; /* Reduce padding inside the form container */
    }

    .wpcf7 input[type="submit"] {
        width: 100%; /* Make submit button full width */
        padding: 12px 0; /* Adjust padding */
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .contactus-section {
        padding: 40px 20px; /* Slightly smaller padding for portrait tablets */
    }

    .contact-form-section {
        padding: 20px; /* Maintain padding inside the form container */
    }

    .wpcf7 input[type="submit"] {
        width: 100%; /* Full width for submit button */
        padding: 12px 0; /* Padding adjustment */
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .contactus-section {
        padding: 50px 30px; /* Standard padding */
    }

    .contact-form-section {
        max-width: 700px; /* Limit width for medium devices */
    }

    .wpcf7 input[type="submit"] {
        width: auto; /* Button returns to its original size */
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .contactus-section {
        padding: 50px 40px; /* Ensure large padding on larger devices */
    }

    .contact-form-section {
        max-width: 900px; /* Wider container for larger screens */
    }

    .wpcf7 input[type="submit"] {
        padding: 12px 30px; /* Maintain larger button size */
		width: 100%;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .contactus-section {
        padding: 50px 50px; /* Maintain standard padding */
    }

    .contact-form-section {
        max-width: 1200px; /* Full-width container for large screens */
    }

    .wpcf7 input[type="submit"] {
        padding: 12px 40px; /* Adjust padding for large devices */
		width: 100%;
    }
}


/* Testimonial Section
--------------------------------------------- */
/* Section styling */
.testimonial-section {
    text-align: center;
    padding: 30px 0;
    background-color: #fff;
}

/* Container for the testimonial section with max-width and padding */
.testimonial-section .container {
    max-width: 1200px; /* Maximum width of 1200px */
    margin: 0 auto; /* Center the container */
    padding: 0 20px; /* Add padding on the left and right */
}

/* Wrapper for the grid layout */
.testimonial-carousel-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    gap: 20px; /* Spacing between items */
    margin-top: 30px;
}

/* Styling for each testimonial item */
.testimonial-item {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    transition: 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%; /* Ensure equal height for all items */
}

/* Hover effect */
.testimonial-item:hover {
    transform: translateY(-5px);
}
.testimonial-row:hover {
    transform: translateY(-5px);
}

/* Avatar icon styling */
.testimonial-avatar {
    font-size: 50px;
    margin-bottom: 10px;
}

/* Content styling */
.testimonial-content {
    text-align: center;
    padding: 0 15px;
}

.testimonial-name {
    font-weight: bold;
    margin-top: 10px;
}

.testimonial-rating {
    color: #FFD700;
    font-size: 20px;
}

.testimonial-text {
    margin-top: 10px;
    font-size: 16px;
}

/* Parent Page Testimonial */
/* Container holding the entire testimonials page */
.testimonials-container {
    padding: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Form styling */
.testimonial-form {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 40px;
}

.testimonial-form h2 {
    text-align: center;
    margin-bottom: 20px;
}

/* Form layout */
.testimonial-form .form-group,
.testimonial-form .form-row {
    margin-bottom: 20px;
}

.testimonial-form label {
    display: inline-block;
    margin-bottom: 5px;
    width: 150px;  /* Adjust width as necessary */
}

.testimonial-form input[type="text"],
.testimonial-form textarea {
    width: calc(100% - 160px); /* Adjust width to fit inline */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: inline-block;
}

.testimonial-form textarea {
    height: 150px;
    resize: vertical; /* Allow vertical resizing of the textarea */
}

/* Make the button full width */
.testimonial-form button[type="submit"] {
    padding: 10px 20px;
    background-color: #FFD700;
    color: #000;
    border: 3px solid #EBB922;
    border-radius: 12px;
    cursor: pointer;
    width: 100%;
}

.testimonial-form button[type="submit"]:hover {
    background-color: #EDEDED;
}

/* Testimonial list styling */
.testimonial-list {
    max-width: 100%;
    margin-top: 40px;
}

.testimonial-list .section-title {
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
}

.testimonial-list .testimonial-table {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}

.testimonial-list .testimonial-row {
    background: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    flex-basis: 48%; /* Makes two columns */
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.testimonial-list .testimonial-avatar {
    font-size: 40px;
    color: #000;
}

.testimonial-list .testimonial-name {
    font-size: 20px;
    font-weight: bold;
    color: #000;
    margin-bottom: 10px;
    text-align: justify;
}

.testimonial-list .testimonial-rating {
    font-size: 25px;
    color: #FFD700; /* Gold for stars */
    margin-bottom: 10px;
}

.testimonial-list .testimonial-text {
    font-size: 16px;
    color: #000;
    line-height: 1.5;
}

/* Pagination */
.testimonial-list .pagination {
    text-align: center;
    margin-top: 30px;
}

.testimonial-list .pagination a {
    padding: 10px 20px;
    background-color: #FFD700;
    color: #000;
    text-decoration: none;
    margin: 0 5px;
    border-radius: 3px solid #EBB922;
}

.testimonial-list .pagination a:hover {
    background-color: #EDEDED;
}

/* No testimonials message */
.no-testimonials-message {
    text-align: center;
    font-size: 18px;
    color: #000;
    margin-top: 30px;
}

@media only screen and (max-width: 600px) {
    /* Stack testimonials vertically */
    .testimonial-carousel-wrapper {
        grid-template-columns: 1fr; /* 1 column */
    }
    
    /* Reduce padding and font size for smaller screens */
    .testimonial-section {
        padding: 30px 15px;
    }
    
    .testimonial-item {
        padding: 15px;
        font-size: 14px;
    }

    .testimonial-avatar {
        font-size: 40px;
    }

    .testimonial-name {
        font-size: 18px;
    }

    .testimonial-rating {
        font-size: 18px;
    }

    .testimonial-text {
        font-size: 14px;
    }

    .testimonial-list .testimonial-table {
        display: grid;
        grid-template-columns: 1fr;
        justify-content: space-between;
    }
}
@media only screen and (min-width: 600px) {
    /* Two columns for larger phones and small tablets */
    .testimonial-carousel-wrapper {
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
    }

    .testimonial-section {
        padding: 40px 20px;
    }

    .testimonial-item {
        padding: 20px;
    }

    .testimonial-avatar {
        font-size: 45px;
    }

    .testimonial-name {
        font-size: 20px;
    }

    .testimonial-rating {
        font-size: 18px;
    }

    .testimonial-text {
        font-size: 15px;
    }
}
@media only screen and (min-width: 768px) {
    /* Three columns for landscape tablets */
    .testimonial-carousel-wrapper {
        grid-template-columns: repeat(3, 1fr); /* 3 columns */
    }

    .testimonial-section {
        padding: 50px 20px;
    }

    .testimonial-item {
        padding: 25px;
    }

    .testimonial-avatar {
        font-size: 50px;
    }

    .testimonial-name {
        font-size: 22px;
    }

    .testimonial-rating {
        font-size: 20px;
    }

    .testimonial-text {
        font-size: 16px;
    }

}
@media only screen and (min-width: 992px) {
    /* Three columns for larger screens */
    .testimonial-carousel-wrapper {
        grid-template-columns: repeat(3, 1fr); /* 3 columns */
    }

    .testimonial-section {
        padding: 60px 20px;
    }

    .testimonial-item {
        padding: 30px;
    }

    .testimonial-avatar {
        font-size: 55px;
    }

    .testimonial-name {
        font-size: 20px;
    }

    .testimonial-rating {
        font-size: 22px;
    }

    .testimonial-text {
        font-size: 18px;
    }
}
@media only screen and (min-width: 1200px) {
    /* Maximum width of container for large screens */
    .testimonial-section .container {
        max-width: 1400px;
    }

    .testimonial-carousel-wrapper {
        grid-template-columns: repeat(3, 1fr); /* 3 columns */
    }

    .testimonial-item {
        padding: 35px;
    }

    .testimonial-avatar {
        font-size: 60px;
    }

    .testimonial-name {
        font-size: 20px;
    }

    .testimonial-rating {
        font-size: 24px;
    }

    .testimonial-text {
        font-size: 18px;
    }
}


/* Blogs Section
--------------------------------------------- */
/* Center the Blog Section Title */
.section-title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 30px;
}
p.section-tagline {
    text-align: center;
}

/* Main Blog Container */
.blog-section {
    background-color: #f5f5f5;
    padding: 30px 0;
}

.blog-container {
    display: grid;
    grid-template-columns: 1fr 2fr; /* Left side 1/3, Right side 2/3 */
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto; /* Centers the container */
    padding: 40px 20px;
}
/* Parent Page Info (Left Side) */
.parent-page-info {
    background-color: #fff;
    border: 1px solid #EDEDED;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}

.parent-thumbnail img {
    width: 100%;
    border-radius: 6px;
    margin-bottom: 15px;
}

.parent-title {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.parent-content {
    color: #000;
    font-size: 1rem;
    line-height: 1.6;
}

.learn-more-btn {
    display: inline-block;
    font-family: 'Port LLigat Sans', sans-serif;
    font-size: 16px;
    font-weight: bold;
    background-color: #FFD700;
    color: #000;
    padding: 10px 20px;
    border:3px solid #EBB922;
    border-radius: 12px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 15px;
    transition: background-color 0.3s ease;
}

.learn-more-btn:hover {
    background-color: #EDEDED;
    color:#000;
}


/* Blog Posts List (Right Side) */
.blog-posts {
    display: flex;
    flex-direction: column;
    gap: 0px;
    margin-top: 15px;
    margin-bottom: 0px;
    background-color: #FDFDFD;
}

.blog-post {
    display: flex;
    align-items: center;
    border-radius: 8px;
    padding: 15px;
}
.blog-post:hover {
    transform: translateY(-5px);
}

.post-thumbnail img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 6px;
    margin-right: 15px;
}

.post-details {
    flex: 1;
}

.post-details h3 {
    margin: 0 0 10px;
    font-size: 24px;
}

.post-details p {
    margin: 0;
    color: #000;
    font-size: 1rem;
}

.learn-more-link {
    display: inline;
    color: #EBB922;
    text-decoration: none;
    font-weight: bold;
    margin-left: 5px;
    transition: color 0.3s ease;
}

.learn-more-link:hover {
    color: #FFD700;
}

/* Divider Between Blog Posts */
.post-divider {
    border: none;
    height: 1px;
    background-color: #EDEDED;
    margin: 0px 0;
}

.single-post .post-featured-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    overflow: hidden;  /* Prevents overflow if the image is too large */
    position: relative;
}

.single-post .post-content-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.single-post h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    text-align: center;
}

.single-post .post-content {
    line-height: 1.8;
    font-size: 1.1rem;
    color: #000;
}

.post-content iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9; /* Ensures a perfect video ratio */
    max-width: 800px; /* Limits video size for readability */
    display: block;
    margin: 20px auto; /* Centers the video */
}

figure.wp-block-embed-youtube {
    max-width: 800px;
    margin: 20px auto;
}

.post-content-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.post-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    padding-top: 20px;
    background-color: #f5f5f5;
    border-top: 3px solid #EBB922;
}

.post-navigation .nav-prev a,
.post-navigation .nav-next a {
    text-decoration: none;
    font-weight: bold;
    color: #000;
    transition: color 0.3s ease;
    font-family: 'Port Lligat Sans', sans-serif;
    font-size: 20px;
}

.post-navigation .nav-prev a:hover,
.post-navigation .nav-next a:hover {
    color: #EDEDED;
}

/* Parent Page */
/* Full-width Featured Image for Blogs Page */
.blog-page-featured-image {
    width: 100%;
    margin-bottom: 40px;
}

.blog-page-featured-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    overflow: hidden;  /* Prevents overflow if the image is too large */
    position: relative;
}

/* Blog Page Content */
.blog-page-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    background-color: #fff; /* Optional background color for the content */
}

h2.wp-block-heading {
    font-size: 30px;
    color: #25231f;
}

.post-content-container h1 {
    color: #25231f;
}

/* Blog Post List Container */
.posts-list-container {
    background-color: #fff;
    padding: 40px 20px;
    margin-top: 20px;
}

/* Blog Post List */
.posts-list {
    max-width: 1200px;
    margin: 0 auto;
}

/* Individual Blog Post Style */
.blog-post {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
}

.blog-post-left {
    flex-shrink: 0; /* Prevent the thumbnail from shrinking */
    margin-right: 20px;
}

.post-thumbnail img {
    width: 100px; /* Thumbnail size */
    height: 100px;
    object-fit: cover;
}

.blog-post-right {
    flex-grow: 1;
}

.blog-post-title {
    font-size: 24px;
    margin: 0 0 10px;
    text-align: left;
    color: #25231f;
}
.blog-post-title:hover {
    color: #EBB922;
}

.post-excerpt p {
    font-size: 1rem;
    color: #000;
    margin: 0;
    display: inline;
}

.learn-more-link {
    color: #25231f;
    font-weight: bold;
    font-family: 'Port Lligat Sans', sans-serif;
    font-size: 16px;
    text-decoration: none;
    margin-left: 10px;
    display: inline;
}

.learn-more-link:hover {
    color: #EBB922;
}

/* Pagination Styling */
.pagination {
    text-align: center;
    margin-top: 40px;
}

.pagination a, .pagination span {
    margin: 0 5px;
    padding: 8px 16px;
    background-color: #FFD700;
    color: #000;
    text-decoration: none;
    border: 3px solid #EBB922;
    border-radius: 12px;
    font-size: 16px;
    font-weight: bold;
}

.pagination a:hover {
    background-color: #EDEDED;
    color: #000;
}

.pagination .current {
    background-color: #EBB922;
    border: 3px solid #FFD700;
    color: #000;
}

/* Media Queries for Small to Medium Screens (Tablets, Phones) */
@media (max-width: 1024px) {
    .blog-container {
        display: block;
        padding: 20px;
    }

    .parent-page-info {
        margin-bottom: 20px; /* Spacing between parent page and blog posts */
    }

    .blog-posts {
        margin-top: 20px; /* Increased space between parent and list */
    }

    .blog-post {
        display: block; /* Stack blog posts vertically */
        margin-bottom: 20px;
    }

    .post-thumbnail img {
        width: 100%;
        height: 200px; /* Adjust image size for mobile */
        object-fit: cover;
        margin-bottom: 15px;
    }

    .post-details h3 {
        font-size: 24px; /* Adjust title size for better readability */
    }

    .post-details p {
        font-size: 1rem;
        line-height: 1.5;
    }
}

/* Media Queries for Mobile (Phone Portrait) */
@media (max-width: 768px) {
    .blog-section {
        padding: 20px 10px;
    }

    .blog-container {
        display: block;
        padding: 10px;
    }

    .parent-page-info {
        padding: 15px;
    }

    .blog-posts {
        gap: 20px;
    }

    .post-thumbnail img {
        width: 100%; /* Full-width images */
        height: 180px;
    }

    .post-details h3 {
        font-size: 20px;
    }

    .post-details p {
        font-size: 0.9rem;
        line-height: 1.4;
    }

    .learn-more-link {
        font-size: 14px;
    }
}
/* Large Screens */
@media (min-width: 1200px) {
    /* Adjust font size for large screens */
    .section-title {
        font-size: 2.5rem;
    }

    .post-details p {
        font-size: 1.1rem;
    }

    /* Increase the size of the thumbnails */
    .post-thumbnail img {
        width: 150px;
        height: 150px;
    }

    /* Blog Container Layout */
    .blog-container {
        grid-template-columns: 1fr 2fr; /* Default layout for large screens */
    }
}


/* Galleries
--------------------------------------------- */
/* Limit the gallery container's max width */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* Flexible 3-column layout */
    gap: 20px; 
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.gallery-insta-grid {
    gap: 20px; 
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}
section.blog-gallery-section {
    background-color: #fff;
    padding: 30px 0;
}

/* Individual Gallery Item */
.gallery-item {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    background-color: #FDFDFD; /* Subtle background */
}

/* Image Styling - Full Container Fit */
.gallery-item img {
    width: 100%;             /* Full width */
    height: 450px;           /* Full height */
    object-fit: cover;       /* Zooms in to fill container while maintaining aspect ratio */
    padding: 5px;            /* Adds a neat spacing effect */
    border-radius: 6px;      /* Softer corners for better aesthetics */
}

/* Videos - Same Size for Consistency */
.gallery-item iframe {
    width: 100%;
    height: 450px;
    border-radius: 8px;
}

/* Optional: Hover Effect for Interactive Feel */
.gallery-item:hover img {
    transform: scale(1.05);  /* Subtle zoom on hover */
    transition: transform 0.3s ease-in-out;
}

/* Full-width Featured Image */
.gallery-featured-image {
    width: 100%;  /* Ensures the image takes up the full width */
    height: auto; /* Fixes the height to 600px */
    overflow: hidden;  /* Prevents overflow if the image is too large */
    position: relative;
}

.gallery-featured-image img {
    object-fit: cover;  /* Ensures the image covers the area while maintaining its aspect ratio */
    width: 100%;  /* Makes the image responsive */
    height: 100%;  /* Ensures the height is constrained to 600px */
    object-position: center center;  /* Centers the image within the container */
}

/* Centered Gallery Title */
.gallery-title {
    text-align: center;
    margin: 30px 0 20px;
}

.gallery-title h2 {
    font-size: 2.5rem;
    color: #EBB922;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
}

/* Gallery Grid */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.gallery-item img, 
.gallery-item video {
    width: 100%;
    height: 450px;
    object-fit: cover; /* Ensures all items are the same size */
    border-radius: 8px;
}

/* Pagination Styling */
.pagination {
    position: relative; /* No sticky or fixed positioning */
    text-align: center;
    margin-top: 30px; /* Space above pagination */
    margin-bottom: 60px; /* Space before footer */
    padding: 10px 0;
}

.pagination a, 
.pagination .current {
    color: #000;
    background-color: #FFD700;
    border: 3px solid #EBB922;
    padding: 8px 15px;
    margin: 0 5px;
    border-radius: 12px;
    text-decoration: none;
    transition: background 0.3s;
}

.pagination a:hover {
    background-color: #EDEDED;
}

.pagination .current {
    background-color: #EBB922;
    border: 3px solid #FFD700;
}

/* For Small Screens (Mobile) */
@media (max-width: 600px) {
    .gallery-grid {
        grid-template-columns: 1fr; /* Single column layout for small screens */
        padding: 10px; /* Less padding for smaller screens */
    }

    .gallery-item img,
    .gallery-item iframe {
        height: 300px; /* Reduce image/video height on smaller screens */
    }

    .gallery-title h2 {
        font-size: 1.8rem; /* Smaller title font size for smaller screens */
    }

    /* Optional: Adjust pagination for smaller screens */
    .pagination a,
    .pagination .current {
        padding: 6px 12px; /* Slightly smaller pagination buttons */
    }
}

/* For Medium Screens (Tablets) */
@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr); /* 2-column layout for tablets */
        padding: 15px; /* Adjust padding for tablet screens */
    }

    .gallery-item img,
    .gallery-item iframe {
        height: 350px; /* Adjust height for medium screens */
    }

    .gallery-title h2 {
        font-size: 2.2rem; /* Adjust title font size for tablets */
    }

    /* Pagination adjustments */
    .pagination a,
    .pagination .current {
        padding: 8px 14px; /* Slightly adjusted pagination button sizes */
    }
}

/* For Large Screens (Desktops) */
@media (min-width: 1024px) {
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr); /* 3-column layout for desktops */
        padding: 20px; /* Keep padding for desktop */
    }

    .gallery-item img,
    .gallery-item iframe {
        height: 450px; /* Full height for images/videos on larger screens */
    }

    .gallery-title h2 {
        font-size: 2.5rem; /* Larger title font size */
    }

    /* Pagination adjustments */
    .pagination a,
    .pagination .current {
        padding: 10px 18px; /* Slightly larger pagination button sizes */
    }
}

.modal {
    display: none; /* Initially hidden */
}
  
.modal.show {
   display: block; /* Show when the class is added */
}
/* Ensure background elements are visually hidden when the modal is open */
.gallery-parent-page[aria-hidden="true"] {
    pointer-events: none; /* Disable pointer events on the background */
    opacity: 0.5; /* Optionally, dim the background */
}
/* Gallery Video Grid Section */
.gallery-video-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}

.gallery-video-item {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f4f4f4;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.gallery-video-item video,
.gallery-video-item iframe {
    width: 100%;
    height: 450px;
    border-radius: 8px;
}

.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

  
/* Footer Style
------------------------------------------------------ */
/* Footer General Styles */
.site-footer {
    background-color: #000;
    color: #fff;
    padding: 40px 20px;
    text-align: center;
    margin-top: 25px;
    margin-bottom: -25px;
}
/* Footer Top Layout */
.footer-top {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    align-items: stretch;
    margin-bottom: 25px;
}

/* Contact Box (General Styling) */
.contact-box {
    background-color: #EDEDED;
    border: 2px solid #EBB922;
    border-radius: 12px;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
    position: relative;
}
p {
    text-align: justify;
}

/* Round Buttons for Call, Email, and Address */
.round-btn {
    background-color: #FFD700;
    color: #000;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 32px;
    border: 3px solid #EBB922;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: absolute;
    top: -65px; /* Moves the round button above the container */
    left: 50%;
    transform: translateX(-50%); /* Centers the button */
}

.round-btn:hover {
    background-color: #EDEDED;
}

/* Text Styling for Contact Details */
.contact-item .contact-box p {
    margin: 40px 0 0; /* Creates space below the overlapping round button */
    color: #000;
    font-family: 'Port Lligat Sans', sans-serif;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
}

/* Footer Bottom Layout */
.footer-bottom {
    display: grid;
    grid-template-columns: 0.5fr 2fr 0.5fr; /* Makes the first and third columns smaller */
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    align-items: center;
}

/* Logo Styling */
.footer-logo img {
    max-width: 150px;   /* Controls the logo size */
    height: auto;       /* Maintains aspect ratio */
    display: block;
    margin: 0 auto;     /* Centers the logo in its column */
}

.footer-column {
    text-align: center;
}

/* Quick Links Container */
.footer-column .footer-menu {
    min-width: 250px; /* Ensures the Quick Links container has enough width */
    padding: 20px;     /* Adds padding inside the container for extra space */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Quick Links Styling */
.footer-menu .footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;  /* Arrange links horizontally */
    gap: 20px;            /* Adds space between the links */
    text-align: center;   /* Centers the links inside the container */
}

/* Quick Links Links Styling */
.footer-menu .footer-links a {
    color: #FFD700;
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
    font-family: 'Port Lligat Sans', sans-serif;    /* Adjusts font size for better readability */
    transition: color 0.3s ease;
}

.footer-menu .footer-links a:hover {
    color: #EBB922;       /* Darker shade of blue on hover */
}

.social-media-footer {
    text-align: center;
    margin-top: 20px;
}

.social-media-icons {
    list-style: none;
    padding: 0;
}

.social-media-icons li {
    display: inline;
    margin: 0 10px;
}

.social-media-icons li a {
    font-size: 24px;
    color: #FFD700;
    text-decoration: none;
}

.social-media-icons li a:hover {
    color: #EBB922;
}

.social-icon {
    display: inline-block;
}

/* Theme Info Row (Final Row) */
.site-info {
    background-color: #000;
    color: #FFD700;
    padding: 15px 0;
    font-size: 20px;
    font-weight: 600;
    font-family: 'Port Lligat Sans', sans-serif;;
}

.site-info a {
    color: #FFD700;
    text-decoration: none;
}

.site-info a:hover {
    color:#EBB922;
}

.footer-top-contact .box {
    width: 45%; /* Making the contact boxes smaller */
    padding: 10px;
}

.footer-top-contact .round-button {
    position: absolute;
    top: -25px; /* Position it higher on the container */
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .site-footer {
        padding: 30px 15px;  /* Reduced padding for smaller screens */
    }

    .footer-top {
        grid-template-columns: 1fr;  /* Stack all contact items vertically */
        gap: 40px;
        padding: 0 10px;  /* Padding for small screens */
    }

    .contact-box {
        padding: 5px;
        height: 70px;
    }

    .round-btn {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        top: -37px;
        left: 14px;
        font-size: 16px;
    }
    .contact-item .contact-box p {
        margin: 5px 0;
    }

    .footer-logo img {
        max-width: 100px;  /* Logo size for phones */
    }

    .footer-menu .footer-links {
        flex-direction: column;  /* Stack links vertically */
        align-items: center;
        gap: 10px;
    }
    .footer-bottom {
        display: grid;
        grid-template-columns: 1fr;
    }

    .site-info {
        font-size: 16px;  /* Reduce font size for the info section */
        padding: 10px 0;
    }
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) and (max-width: 768px) {
    .footer-top {
        grid-template-columns: 1fr 1fr;  /* Two-column layout for better balance */
        gap: 40px;
    }

    .round-btn {
        width: 90px;  /* Slightly larger buttons */
        height: 90px;
        font-size: 30px;  /* Adjusted for readability */
        top: -74px;
        left: 89px;
    }

    .footer-logo img {
        max-width: 130px;  /* Adjust logo for mid-size devices */
    }

    .footer-menu .footer-links {
        flex-direction: row;  /* Return to horizontal layout */
        gap: 15px;
    }

    .footer-bottom {
        display: grid;
        grid-template-columns: 1fr;
    }

    .site-info {
        font-size: 18px;  /* Make text slightly larger for readability */
    }
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) and (max-width: 992px) {
    .footer-top {
        grid-template-columns: 1fr 1fr 1fr;  /* Keep three columns */
        gap: 20px;
    }
    .round-btn {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        top: -37px;
        left: 14px;
        font-size: 16px;
    }

    .footer-logo img {
        max-width: 150px;  /* Logo size for medium screens */
    }

    .footer-menu .footer-links {
        flex-direction: row;  /* Maintain horizontal layout for quick links */
        gap: 20px;
    }

    .social-media-icons li {
        margin: 0 10px;  /* Spacing between social icons */
    }

    .site-info {
        font-size: 20px;  /* Increase font size for readability */
    }
}


/* Posts and pages
--------------------------------------------- */
.site-content {
    padding-top: calc(150px + 10px); /* Adds extra spacing */
}

.sticky {
	display: block;
}
/* Featured image with full-width */
.featured-image img {
    width: 100%;
    height: auto;
}

/* Container for page content */
.page-container {
    display: flex;
    justify-content: center; 
    padding: 0 20px; 
}

/* Content area inside the container with max-width */
.page-content {
    max-width: 1200px;
    width: 100%; /* Ensures content is responsive */
}

/* Center the page title */
.page-title {
    text-align: center;
    color: #25231f;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}