@charset "UTF-8";
/*
Theme Name: Toda Studio
Theme URI: nistrif.com
Author: Strahinja Djukic
Author URI: nistrif.com
Description: El Gato Theme is a sleek and modern WordPress theme 
Version: 6.865
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

Text Domain: el-gato

/* --------------------------------------------------------------
 * Table of Contents
 * --------------------------------------------------------------
 *
 * 01. Abstracts
 *     01.1 Config Styles
 *
 * 02. Base Styles
 *     02.1 Reset Styles
 *     02.2 Typography Styles
 *     02.3 Icons Styles
 *
 * 03. Components
 *     03.1 Buttons Styles
 *
 * 04. Layout
 *     04.1 Grid System
 *     04.2 Header Styles
 *     04.3 Footer Styles
 *     04.4 Navigation Styles
 *
 * 05. Pages
 *     05.1 Home Page Styles
 *     05.2 Services Page Styles
 *     05.3 About Us Page Styles
 *     05.4 Contact Page Styles
 *     05.5 Blog Page Styles
 *     05.6 Single Post Styles
 *     05.7 FAQ Page Styles
 *     05.8 Generic Pages Styles
 */
/* 
 * Font Sizes
 * Defines font sizes for different text elements, ranging from small text to large headings.
 */
:root {
  --font-sm: 0.875rem; /* Small text (14px) */
  --font-md: 1.25rem; /* Standard text (20px) */
  --font-lg: 1.5rem; /* Larger text or smaller emphasized (24px) */
  --font-xl: 2.1875rem; /* Medium emphasized text (35px) */
  --font-xxl: 1.875rem; /* Larger emphasized text (30px) */
  --font-em: 2.25rem; /* New font size for extra-large (50px) */
  --font-heading: 2.5rem; /* Largest headings or hero text (40px) */
  --font-section-number-lg: 3.75rem; /* Large section numbers (60px) */
  --font-hero-em:2.175rem;
  --font-marquee:1.125rem;
  /* 
   * Theme constants for consistent design elements.
   */
  --THEME_BG: var(--color-primary-lightBeige);
  --THEME_FONT_SIZE: var(--font-md);
  --THEME_LINE_HEIGHT: 1.7;
  --THEME_FONT_FAMILY: "Barlow", sans-serif;
  --THEME_FONT_HEADINGS: "Playfair Display", serif;
  --THEME_FONT_EM: "MonteCarlo", sans-serif;
  --THEME_INDENT: var(--theme-spacing-lg);
  --THEME_TEXT: #080F0F;
  /* 
   * Define primary colors for theme.
   */
  --color-primary-darkRed: #BC343F;
  --color-primary-lightRed: #CD2735;
  /* 
   * Accent colors for highlighting and background elements.
   */
  --color-accent-softPink: #FCEFEF; /* Soft pink accent color */
  --color-soft-peach: #F8EBE7; /* Soft peach background */
  /* 
   * Menu button dimensions and styles.
   */
  --menu-button-size: 45px;
  --menu-button-bg-color: #fff;
  --menu-button-position-right: 1rem;
  --menu-button-position-top: 1rem;
  --menu-line-color: var(--color-primary-darkRed);
  --transition-bezier-2: cubic-bezier(0.42, 0, 0.58, 1);
  /* 
   * Navigation bar background and text styles.
   */
  --nav-background-color: var(--color-primary-darkRed);
  --nav-list-gap: 1rem;
  --nav-font-size:1.375rem;
  --nav-link-color:#fff;
  --nav-link-color-hover:#fff;
  --nav-link-color-active:#fff;
  /* 
   * Defines global spacing values for consistent layout across the site.
   */
  --theme-spacing-sm: 8px; /* Small spacing */
  --theme-spacing-md: 16px; /* Medium spacing */
  --theme-spacing-lg: 2.5rem; /* Large spacing */
  --theme-spacing-xl: 3rem; /* Extra large spacing */
  /* 
   * Defines styles specific to the hero section, including background and button appearance.
   */
  --hero-background-color: #fff;
  --hero-button-background: var(--color-primary-lightBeige);
  --hero-button-link-color: var(--color-secondary-darkCharcoal);
  --hero-button-border-color: var(--color-primary-lightBeige);
  --hero-button-border-width: 1px;
  --hero-text-color: var(--color-primary-lightBeige);
  /* -----------------------
  * Defines layout-related variables such as spacing and content overlap for about-us page.
  */
  --about-section-gap: 2rem;
  --about-content-overlap: -10rem;
  --about-content-bg: #f6f1ed;
  --about-title-spacing: 0.75rem 0 2.5rem 0;
}

/* 
 * Adjusts navigation styles for larger screens.
 */
@media (min-width: 60em) {
  :root {
    --nav-background-color: transparent;
    --font-sm: 1rem; /* Small text (16px) */
    --font-md: 1.25rem; /* Standard text (20px) */
    --font-lg: 1.75rem; /* Larger text or smaller emphasized (28-30px) */
    --font-xl: 2.1875rem; /* Medium emphasized text (35px) */
    --font-xxl: 2.5rem; /* Larger emphasized text (40px) */
    --font-em: 3rem; /* New font size for extra-large (50px) */
    --font-heading: 3.75rem; /* Largest headings or hero text (60px) */
    --font-section-number-lg: 5rem; /* Large section numbers */
    --font-hero-em:2.75rem;
    --font-marquee:1.3125rem;
    --nav-link-color: var(--THEME_TEXT);
    --nav-link-color-hover: var(--THEME_TEXT);
    --nav-link-color-active: var(--THEME_TEXT);
    --nav-font-size: var(--font-sm);
    --theme-spacing-xl: 6.5rem;
  }
}
/* 
 * CONTAINER STYLES
 * ------------------------------
 * Provides consistent layout and spacing across various container types.
 */
/* Common container for consistent width and centering */
.container {
  margin: 0 auto;
  max-width: var(--CONTAINER_MAX_WIDTH);
}

.container .container {
  padding: 0;
}

/* 
* NARROW CONTAINER
* ------------------------------
* Used for narrow content areas with a fixed max-width of 800px.
*/
.container-narrow {
  --CONTAINER_MAX_WIDTH: 800px;
}

/* 
* MAIN CONTAINER
* ------------------------------
* Default container used for most cases with a max-width of 1160px.
*/
.container-main {
  max-width: 1160px;
}

/* 
* WIDE CONTAINER
* ------------------------------
* For larger content areas with a max-width of 1280px.
*/
.container-wide {
  --CONTAINER_MAX_WIDTH: 1280px;
}

/* 
* FULLSCREEN CONTAINER
* ------------------------------
* Takes up the full width of the screen.
*/
.container-wide-full {
  --CONTAINER_MAX_WIDTH: 100%;
}

/* 
* RESPONSIVE ADJUSTMENTS
* ------------------------------
* Adjusts padding for wide-full containers on large screens.
*/
@media (min-width: 60em) {
  .eg-spacing,
  .container.eg-spacing {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .eg-page-spacing {
    padding: 4rem 0;
  }
  .container.container-wide-full {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media (min-width: 100em) {
  .container.container-wide-full {
    padding: 0 6rem;
  }
  .container-wide {
    --CONTAINER_MAX_WIDTH: 1440px;
  }
}
/* 
 * SPACING BETWEEN ELEMENTS
 * ------------------------------
 * Ensures spacing between adjacent elements within the .eg-flow container.
 */
.eg-flow > * + * {
  margin-top: 3rem;
}

/* 
* TOP SPACING FOR PAGE SECTIONS
* ------------------------------
* Adds large top padding to page sections for proper spacing from the top of the page.
*/
.spacing-top-lg {
  padding-top: 6rem;
}

/* 
* BOTTOM SPACING FOR PAGE SECTIONS
* ------------------------------
* Adds large bottom padding to page sections for consistent layout spacing.
*/
.spacing-bottom-lg {
  padding-bottom: 6rem;
}

@media (max-width: 60em) {
  .spacing-bottom-lg {
    padding-bottom: 3rem;
  }
  .spacing-top-lg {
    padding-top: 3rem;
  }
}
/* 
 * BREADCRUMB NAVIGATION STYLING
 * ------------------------------
 * Ensures consistent layout and readability for breadcrumb navigation.
 */
.breadcrumb {
  display: flex;
  margin-bottom: var(--THEME_INDENT);
  font-size: var(--font-sm);
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.075em;
  font-family: var(--THEME_FONT_FAMILY);
}

.breadcrumb > span {
  margin-right: 0.75rem;
}

/* 
  * STYLES FOR BACKGROUND AND HEADER
  * -------------------------------
  * These styles control the background color and padding for the header section, 
  * as well as the layout adjustments for larger screens.
  */
.eg-peach-bg {
  /* Sets the background color to a soft peach shade */
  background-color: #F6F1ED;
}

/* 
 * LINK CONTAINER
 * ------------------------------
 * Defines a flex container for aligning its child elements.
 */
.link-container {
  display: flex;
}

/* 
 * BASIC LINK STYLES
 * ------------------------------
 * Applies base styles for the link, including color, alignment, and text properties.
 */
.link-basic {
  color: var(--color-primary-lightRed);
  display: inline-flex;
  align-items: center;
  line-height: normal;
  letter-spacing: 0.025em;
  font-weight: normal;
  font-size: var(--font-sm);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 
 * BUTTON HOVER EFFECT
 * ------------------------------
 * Applies a subtle hover effect that translates the button upwards.
 */
.link-basic:hover {
  transform: translateY(-5px);
}

/* 
 * LINK ARROW ICON
 * ------------------------------
 * Adds an arrow icon after the link to visually indicate an action.
 */
.link-basic::after {
  content: "";
  background-image: url("assets/icons/navigation/arrow-right-2.svg");
  background-repeat: no-repeat;
  width: 16px;
  height: 10px;
  display: block;
  margin-left: 0.5rem;
  margin-top: 2px;
}

/*  
 * SCREEN READER ONLY (SR-ONLY)  
 * ------------------------------  
 * Hides elements visually while keeping them accessible to screen readers.  
 * Ensures text remains available for assistive technologies without affecting layout.  
 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0, 0, 0, 0);
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%); /* Improves compatibility with modern browsers */
  overflow: hidden;
  white-space: nowrap;
}

/* 
 * PLACEHOLDER STYLING 
 * ------------------------------
 * Customizes the placeholder text across different browsers.
 * Ensures consistent placeholder styling for Chrome, Firefox, Safari, IE, and Edge.
 */
::-moz-placeholder {
  color: var(--THEME_TEXT); /* Chrome, Firefox, Opera, Safari 10.1+ */
  font-size: var(--font-md);
  opacity: 1; /* Firefox */
  font-family: var(--THEME_FONT_FAMILY);
}
::placeholder {
  color: var(--THEME_TEXT); /* Chrome, Firefox, Opera, Safari 10.1+ */
  font-size: var(--font-md);
  opacity: 1; /* Firefox */
  font-family: var(--THEME_FONT_FAMILY);
}

/*  
* MS-PLACEHOLDER (Internet Explorer 10-11)
* ------------------------------
* Customizes the placeholder for older versions of Internet Explorer.
* Provides color styling for placeholders in IE 10 and IE 11.
*/
:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: var(--THEME_TEXT);
  font-size: var(--font-md);
  font-family: var(--THEME_FONT_FAMILY);
}

/*  
* MS-PLACEHOLDER (Microsoft Edge)
* ------------------------------
* Customizes the placeholder for Microsoft Edge.
* Ensures consistency in placeholder color for Edge browsers.
*/
::-ms-input-placeholder { /* Microsoft Edge */
  color: var(--THEME_TEXT);
  font-size: var(--font-md);
  font-family: var(--THEME_FONT_FAMILY);
}

/* 
 * GLOBAL RESET AND OPTIMIZATION
 * ------------------------------
 * Establishes a clean baseline for the website layout.
 */
/* Box sizing for all elements */
*, ::after, ::before {
  box-sizing: border-box;
}

/* Reset margins and paddings for common elements */
blockquote,
body,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

/* Smooth scrolling for :focus-within */
html:focus-within {
  scroll-behavior: smooth;
}

/* Default styles for anchor tags without classes */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* List styling */
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* List item spacing */
:is(ul:not([class]), ol:not([class])) li {
  padding-bottom: calc(var(--THEME_INDENT) / 2);
}

:is(ul:not([class]), ol:not([class])) li:last-of-type {
  padding-bottom: 0;
}

:is(ul:not([class]), ol:not([class])) li::marker {
  color: var(--color-li-marker);
  list-style: none;
}

/* 
 * REDUCED MOTION MEDIA QUERY
 * ------------------------------
 * Adjusts styles for users who prefer reduced motion.
 */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  ::after,
  ::before {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
}
/* 
 * FONT SIZE CONTROL
 * ------------------------------
 * Ensures proper font size control for accessibility.
 */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  height: 100%;
  height: -webkit-fill-available;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 
 * IMAGE AND MEDIA RESPONSIVENESS
 * ------------------------------
 * Ensures media scales properly across devices.
 */
img,
picture {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
}

/* 
 * BLOCKQUOTE AND Q ELEMENTS
 * ------------------------------
 * Removes quotes for cleaner blockquote and q elements.
 */
blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
}

/* 
 * CURSOR AND INTERACTIVE ELEMENTS
 * ------------------------------
 * Adds cursor pointer for interactive elements.
 */
:is(a, button, label, input[type=checkbox], input[type=radio]) {
  cursor: pointer;
}

/* 
 * ANCHOR TAG STYLING
 * ------------------------------
 * Adds hover and focus effects for anchor tags.
 */
a {
  color: var(--text-color);
  text-decoration: none;
}

a:hover {
  text-decoration-thickness: 2px;
}

a:focus:focus-visible {
  color: var(--focus-text);
  background-color: var(--focus-bg);
  outline: var(--border-width) solid var(--focus-outline);
  text-decoration: none;
  transition: none;
}

a:focus:not(:focus-visible) {
  outline: none;
}

a:active {
  transform: translateY(1px);
}

/* 
 * VISUALLY HIDDEN CLASS
 * ------------------------------
 * Hides elements but allows them to be focused.
 */
.visually-hidden:not(:focus):not(:active) {
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.visually-hidden:focus {
  height: unset;
  width: unset;
  clip: unset;
}

/* 
 * TABLE STYLING
 * ------------------------------
 * Adjusts table layout and spacing for readability.
 */
table {
  border-spacing: 0;
}

/* 
 * STRONG TEXT STYLING
 * ------------------------------
 * Applies bold weight to strong text.
 */
strong,
b {
  font-weight: 700;
}

/* 
 * BODY STYLES
 * ------------------------------
 * Core styles for the body including font and layout defaults.
 */
body {
  background-color: var(--THEME_BG);
  color: var(--THEME_TEXT);
  font-family: var(--THEME_FONT_FAMILY);
  font-size: var(--THEME_FONT_SIZE);
  font-weight: 300;
  line-height: var(--THEME_LINE_HEIGHT);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 
 * TYPOGRAPHY STYLES
 * ------------------------------
 * Styles for headings and emphasis across the site.
 */
/* General heading styles */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--THEME_FONT_HEADINGS);
  text-wrap: balance;
  font-weight: 600;
}

/* Specific heading spacing between consecutive headings */
h2 + h3,
h3 + h4,
h4 + h5,
h5 + h6 {
  margin-top: var(--heading-following-margin-top-h4);
}

/* Heading 1 line height */
h1 {
  font-size: var(--font-em);
  line-height: normal;
}

/* Heading 2 styling */
h2 {
  font-size: var(--font-xxl);
  line-height: 1.3;
}

/* Heading 3 styling */
h3 {
  font-size: var(--font-h3);
  line-height: var(--line-height-120);
}

/* Heading 4 styling */
h4 {
  font-size: var(--font-h4);
  line-height: var(--line-height-130);
}

/* Emphasis text styling */
em {
  font-family: var(--THEME_FONT_EM);
  font-size: var(--font-hero-em);
  line-height: 1;
  display: inline-block;
  font-style: normal;
}

.page-title {
  padding-bottom: 6rem;
}

@media (max-width: 60em) {
  .page-title {
    padding-bottom: 2rem;
  }
}
/* 
 * ICON STYLES
 * ------------------------------
 * This section defines the base styles for icons used throughout the website.
 * Icons are set to use CSS variables for width and height, with each specific 
 * icon having its own class for customization. The icons are background images 
 * for an inline-block element and utilize `background-size` and `background-repeat` 
 * properties for proper display.
 */
/* Base Icon Styling */
.icon {
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  width: var(--_icon-width);
  height: var(--_icon-height);
  flex-shrink: 0;
}

/* 
 * SOCIAL MEDIA ICONS
 * ------------------------------
 * These classes represent icons for various social media platforms. 
 * Each icon has custom dimensions and a specific background image for the 
 * respective platform.
 */
/* Facebook Icon */
.icon-facebook {
  --_icon-width: 8px;
  --_icon-height: 15px;
  background-image: url("assets/icons/social/facebook-icon.svg");
}

/* Instagram Icon */
.icon-instagram {
  --_icon-width: 16px;
  --_icon-height: 16px;
  background-image: url("assets/icons/social/instagram-icon.svg");
}

/* YouTube Icon */
.icon-youtube {
  --_icon-width: 18px;
  --_icon-height: 13px;
  background-image: url("assets/icons/social/youtube-icon.svg");
}

/* Facebook Icon */
.icon-facebook-light {
  --_icon-width: 8px;
  --_icon-height: 15px;
  background-image: url("assets/icons/social/facebook-icon-light.svg");
}

/* Instagram Icon */
.icon-instagram-light {
  --_icon-width: 16px;
  --_icon-height: 16px;
  background-image: url("assets/icons/social/instagram-icon-light.svg");
}

/* TikTok Icon */
.icon-tiktok {
  --_icon-width: 16px;
  --_icon-height: 18px;
  background-image: url("assets/icons/social/tiktok.svg");
}

/* TikTok Icon */
.icon-tiktok-light {
  --_icon-width: 16px;
  --_icon-height: 18px;
  background-image: url("assets/icons/social/tiktoklight.svg");
}




/* YouTube Icon */
.icon-youtube-light {
  --_icon-width: 18px;
  --_icon-height: 13px;
  background-image: url("assets/icons/social/youtube-icon-light.svg");
}

/* 
 * SERVICE ICONS
 * ------------------------------
 * These icons are used to represent various services offered. Each icon 
 * has a unique background image and custom dimensions to match the respective 
 * service type.
 */
/* Photography Service Icon */
.icon-fotografija {
  --_icon-width: 32px;
  --_icon-height: 32px;
  background-image: url("assets/icons/usluge/usluge-fotografija-icon.svg");
}

/* Corporate Service Icon */
.icon-korporativni {
  --_icon-width: 32px;
  --_icon-height: 32px;
  background-image: url("assets/icons/usluge/usluge-korporativni-icon.svg");
}

/* Video Service Icon */
.icon-video {
  --_icon-width: 32px;
  --_icon-height: 32px;
  background-image: url("assets/icons/usluge/usluge-video-icon.svg");
}

/* 
 * NAVIGATION ICONS
 * ------------------------------
 * These icons are used for navigation purposes. They typically represent 
 * directional arrows or scroll actions.
 */
/* Right Arrow Icon */
.icon-arrow-right {
  --_icon-width: 26px;
  --_icon-height: 10px;
  background-image: url("assets/icons/navigation/arrow-right.svg");
}

/* Left Arrow Icon */
.icon-arrow-left {
  --_icon-width: 16px;
  --_icon-height: 16px;
  background-image: url("assets/icons/navigation/arrow-left.svg");
}

/* Scroll Down Arrow Icon */
.icon-arrow-scroll-down {
  --_icon-width: 10px;
  --_icon-height: 39px;
  background-image: url("assets/icons/navigation/arrow-scroll-down.svg");
}

/* 
 * UI ELEMENTS ICONS
 * ------------------------------
 * These icons are used within various UI components to provide visual cues.
 */
/* Check Icon */
.icon-check {
  --_icon-width: 20px;
  --_icon-height: 20px;
  background-image: url("assets/icons/ui-elements/check-mark.svg");
}

/* Heart Icon */
.icon-heart {
  --_icon-width: 20px;
  --_icon-height: 20px;
  background-image: url("assets/icons/ui-elements/heart-icon.svg");
}

/* Logo Icon */
.icon-logo {
  --_icon-width: 40px;
  --_icon-height: 40px;
  background-image: url("assets/icons/ui-elements/toda-logo.svg");
}

/* 
 * DIVIDER ICONS
 * ------------------------------
 * These icons are used to create decorative dividers within sections.
 */
/* Flower Divider Icon */
.divider-flower {
  --_icon-width: 90px;
  --_icon-height: 15px;
  background-image: url("assets/icons/dividers/flower-divider.svg");
}

/* Sparkle Divider Icon */
.divider-sparkle {
  --_icon-width: 15px;
  --_icon-height: 15px;
  background-image: url("assets/icons/dividers/sparkle-devider.svg");
}

/* Heart Divider Icon */
.divider-heart {
  --_icon-width: 90px;
  --_icon-height: 18px;
  background-image: url("assets/icons/dividers/heart-divider.svg");
}

/* Zoom Icon */
.icon-zoom {
  --_icon-width:24px;
  --_icon-height: 24px;
  background-image: url("assets/icons/ui-elements/images-icon.svg");
}

/* 
 * STAMPS
 * ------------------------------
 * These are icon stamps that are used in various decorative or branded sections.
 */
/* Stamp 1 Icon */
.stamp-1 {
  --_icon-width: 150px;
  --_icon-height: 150px;
  background-image: url("assets/icons/stamps/stamp-1.svg");
}

/* Stamp 2 Icon */
.stamp-2 {
  --_icon-width: 48px;
  --_icon-height: 48px;
  background-image: url("assets/icons/stamps/stamp-2.svg");
}

/* 
 * OTHER ICONS
 * ------------------------------
 * These are general-purpose icons that are used in various contexts across 
 * the website, including for quotes or other decorative features.
 */
/* Quote Icon */
.icon-quote {
  --_icon-width: 40px;
  --_icon-height: 34px;
  background-image: url("assets/icons/other/quote-marks.svg");
}

/* 
 * BUTTON STYLES
 * ------------------------------
 * Provides consistent button appearance with customizable variables.
 */
.button {
  display: inline-flex;
  align-items: center;
  padding: 12px 30px;
  font-size: 16px;
  font-family: var(--THEME_FONT_FAMILY);
  color: #CD2735;
  letter-spacing: 0.05em;
  background-color: transparent;
  border: 2px solid #CD2735;
  border-radius: 30px;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
  font-weight: 500;
  text-transform: uppercase;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 
 * BUTTON HOVER STATE
 * ------------------------------
 * Enhances the button appearance when the user hovers over it.
 */
.button:hover {
  transform: translateY(-5px);
}

/* 
 * BUTTON ARROW ICON
 * ------------------------------
 * Adds an arrow icon to the button with specified size.
 */
.button::after {
  content: "";
  display: block;
  width: 26px;
  height: 10px;
  background: url("assets/icons/navigation/arrow-right.svg") no-repeat center center;
  background-size: 100%;
  margin-left: 1rem;
}

/* 
* ARROW ROTATE ON BUTTON HOVER
* ------------------------------
* Rotates the arrow when the button is hovered.
*/
/* --------------------------------------------------------------
   CUSTOM GRID SYSTEM USING CSS GRID AND VARIABLES
-------------------------------------------------------------- */
/* 
 * BASE GRID STYLES
 * ------------------------------
 * Defines the core grid structure with customizable columns and spacing.
 */
.eg-grid {
  --layout-amount: 1; /* Default number of columns */
  --layout-gap: var(--THEME_INDENT); /* Default gap between grid items */
  display: grid;
  grid-template-columns: repeat(var(--layout-amount), 1fr); /* Dynamic column layout */
  gap: var(--layout-gap); /* Applies spacing between grid items */
}

/* 
* FLEX CONTAINER FOR CENTERING
* ------------------------------
* Utility class for centering content both horizontally and vertically.
*/
.eg-flex-center {
  display: flex;
  justify-content: center; /* Centers content horizontally */
  align-items: center; /* Centers content vertically */
}

/* 
* GRID ITEM IMAGE ADJUSTMENTS
* ------------------------------
* Removes padding from images inside grid items to maintain consistency.
*/
.eg-grid img {
  padding: 0;
}

/* 
* SECTION SPACING
* ------------------------------
* Adds vertical spacing to grid sections.
*/
.eg-spacing-section {
  padding: var(--theme-spacing-xl) 0; /* Adds top and bottom padding */
}

/* 
* GRID COLUMN SPAN UTILITY
* ------------------------------
* Allows a grid item to span multiple columns.
*/
.eg-span-2 {
  grid-column: span 2; /* Spans across 2 columns */
}

/* 
* FLEX AND GRID ALIGNMENT UTILITIES
* ------------------------------
* Provides various alignment options for items inside flex or grid containers.
*/
/* Centers items vertically and horizontally */
.eg-align-center {
  align-items: center;
}

/* Justifies content to the center horizontally */
.eg-justify-center {
  justify-content: center;
}

/* Distributes space between items */
.eg-justify-space-between {
  justify-content: space-between;
}

/* Aligns the last grid item to the end */
.eg-grid-item--last {
  justify-self: end;
}

/* 
* GRID GAP UTILITIES
* ------------------------------
* Adds spacing between grid items.
*/
.eg-gap-md {
  gap: 4rem; /* Medium gap */
}

.eg-gap-large {
  gap: calc(var(--THEME_INDENT) * 2); /* Large gap based on theme spacing */
}

/* 
* RESPONSIVE GRID COLUMN LAYOUT
* ------------------------------
* Adjusts the number of grid columns at different screen sizes.
*/
/* Medium screens (≥50em) */
@media (min-width: 50em) {
  .--amount-2 {
    --layout-amount: 2; /* 2-column layout */
  }
  .--amount-3 {
    --layout-amount: 3; /* 3-column layout */
  }
  .--amount-4 {
    --layout-amount: 2; /* 2-column layout */
  }
  .--amount-5 {
    --layout-amount: 3; /* 3-column layout */
  }
}
/* Large screens (≥70em) */
@media (min-width: 70em) {
  .--amount-4 {
    --layout-amount: 4; /* 4-column layout */
  }
  .--amount-5 {
    --layout-amount: 5; /* 5-column layout */
  }
}
/* 
 * HEADER STYLES
 * --------------
 * These styles define the padding for the header. Padding is adjusted based 
 * on screen size to ensure proper spacing.
 */
header {
  padding-top: 1.5rem; /* Default padding for the top of the header */
}

/* 
 * MEDIA QUERY FOR LARGE SCREENS (60em and above)
 * -------------------------------
 * This media query adjusts the header and grid layout for screens with a minimum 
 * width of 60em (960px), typically for larger devices (tablets and desktops).
 */
@media (min-width: 60em) {
  /* 
   * Increases the top padding of the header for larger screens to provide more spacing.
   */
  header {
    padding-top: 3rem;
  }
  /* 
   * Defines a grid layout for the header body. 
   * The header is divided into three columns: left (1fr), center (auto), and right (1fr).
   */
  .header-body {
    display: grid;
    grid-template-columns: 150px 1fr;
    align-items: center;
  }
}
@media (max-width: 60em) {
  .page-template-faq_tpl .site-branding {
    padding: 0;
  }
  .site-branding {
    padding: 0 1.5rem;
  }
  .site-branding a > img {
    max-width: 120px;
  }
}
/* 
 * FOOTER SECTION STYLING
 * ------------------------------
 * Applies margin, padding, and background color to the footer.
 */
footer {
  padding-bottom: var(--THEME_INDENT);
  background-color: #fff;
}

/* 
 * FOOTER GRID STYLING
 * ------------------------------
 * Adjusts the margin of the first eg-grid inside the footer and adds space between grid elements.
 */
/* 
 * FOOTER MISCELLANEOUS SECTION
 * ------------------------------
 * Centers text by default and adjusts the alignment of the last grid item.
 */
.footer-misc {
  text-align: center;
  padding: 0;
}

.footer-misc .eg-grid-item--last {
  justify-self: center;
}

/* 
 * FOOTER LIST STYLING
 * ------------------------------
 * Aligns list items in a row with equal spacing.
 */
.footer-list,
.footer-list-item {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  position: relative;
}

@media (max-width: 60em) {
  .footer-list,
  .footer-list-item {
    justify-content: center;
    gap: 1rem;
  }
  .footer {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
/* 
 * FOOTER LIST ITEM LINKS
 * ------------------------------
 * Styles the anchor links inside list items, setting font size.
 */
.footer-list-item a {
  font-size: var(--font-sm);
}

/* 
 * FOOTER CONTACT ITEM STYLING
 * ------------------------------
 * Aligns contact information with consistent styling for dt elements and links.
 */
.footer-contact-item:first-of-type {
  margin-bottom: 1.5rem;
}

@media (min-width: 60em) {
  .footer-contact-item {
    display: flex;
    align-items: center;
  }
  .footer-contact-item:first-of-type {
    margin-bottom: 0;
  }
}
/* 
 * FOOTER CONTACT ITEM - DT STYLING
 * ------------------------------
 * Sets text transformation, font size, and letter spacing for dt elements.
 */
.footer-contact-item dt {
  text-transform: uppercase;
  font-size: var(--font-sm);
  letter-spacing: 0.05em;
  font-weight: 500;
  margin-right: 4rem;
  min-width: 70px;
  font-style: normal;
}

/* 
 * FIRST FOOTER CONTACT ITEM CUSTOM STYLING
 * ------------------------------
 * Changes the color of the first contact item link and sets font size.
 */
.footer-contact-item:first-child a {
  font-size: var(--font-heading);
  color: var(--color-primary-lightRed);
}

/* 
 * SECOND FOOTER CONTACT ITEM CUSTOM STYLING
 * ------------------------------
 * Sets a specific font size for the second contact item link.
 */
.footer-contact-item:nth-child(2) a {
  font-size: var(--font-xxl);
}

/* 
 * FOOTER CONTACT ITEM LINKS
 * ------------------------------
 * Customizes the font and color of anchor links inside contact items.
 */
.footer-contact-item a {
  font-family: var(--THEME_FONT_EM);
  color: var(--THEME_TEXT);
  font-style: normal;
}

/* 
 * FOOTER DETAILS SECTION STYLING
 * ------------------------------
 * Applies font styling, line height, and spacing for footer details.
 */
.footer-details {
  font-size: var(--font-xxl);
  font-family: var(--THEME_FONT_HEADINGS);
  line-height: 1.3;
}

/* 
 * FOOTER DETAILS HEADING STYLING
 * ------------------------------
 * Adds spacing beneath the h3 headings inside the footer details section.
 */
.footer-details h3 {
  margin-bottom: 1rem;
}

/* 
 * RESPONSIVE DESIGN FOR FOOTER ON LARGE SCREENS
 * ------------------------------
 * Adjusts text alignment and layout of footer details for better presentation on larger screens.
 */
@media (min-width: 60em) {
  /* 
   * Align footer-misc text to the left on larger screens.
   */
  .footer-misc {
    text-align: left;
  }
  /* 
   * Adjust the last grid item to align to the end of the container.
   */
  .footer-misc .eg-grid-item--last {
    justify-self: end;
  }
  /* 
   * Set a maximum width for the footer-details section on large screens.
   */
  .footer-details {
    max-width: 550px;
    width: 100%;
  }
  .footer-item--navigation {
    display: flex;
    justify-content: center;
  }
}
/*
 * MAIN NAVIGATION LIST
 * ------------------------------
 * Defines the base styles for the main navigation container.
 */
.nav-list {
  display: flex;
  position: relative;
  padding: 0 1rem;
  margin-right: 1rem;
  margin-left: auto;
  gap: 2.75rem;
}

/*
 * NAVIGATION LINKS
 * ------------------------------
 * Styles for the navigation links, including hover and active effects.
 */
.nav-list li a {
  position: relative;
  color: var(--nav-link-color);
  padding-bottom: 8px;
  display: inline-block;
  transition: color 0.3s ease-in-out;
  font-size: var(--nav-font-size);
  font-weight: 400;
  letter-spacing: normal;
}

/*
 * NAVIGATION UNDERLINE EFFECT
 * ------------------------------
 * Adds a subtle underline animation on hover and active states.
 */
.nav-list li a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(to right, var(--color-primary-lightRed), var(--color-primary-darkRed));
  transition: width 0.3s ease;
  margin: auto;
}

.nav-list li a:hover::after,
.nav-list > .current-menu-item > a::after {
  width: 90%;
}

/*
 * ACTIVE MENU ITEM
 * ------------------------------
 * Highlights the currently active menu link.
 */
.nav-list > .current-menu-item > a,
.nav-list > .current_page_item > a {
  color: var(--nav-link-color-active);
}

/*
 * TOGGLE MENU BUTTON (MOBILE)
 * ------------------------------
 * Initially hidden and displayed only on smaller viewports.
 */
#toggle-menu-button {
  display: none;
}

.nav {
  display: flex;
  align-items: center;
}

.nav > .button {
  margin-left: auto;
}

/*
 * MOBILE NAVIGATION STYLES
 * ------------------------------
 * Adjusts styles for smaller screens, including the toggle menu button.
 */
@media (max-width: 60em) {
  /*
   * SHOW TOGGLE MENU BUTTON
   * ------------------------------
   * Displays the toggle button for mobile navigation.
   */
  #toggle-menu-button {
    display: grid;
    place-items: center;
    width: var(--menu-button-size);
    height: var(--menu-button-size);
    border-radius: 50%;
    position: fixed;
    right: var(--menu-button-position-right);
    top: var(--menu-button-position-top);
    background-color: var(--menu-button-bg-color);
    border: 0;
    z-index: 3;
  }
  /*
   * TOGGLE MENU ICON ANIMATION
   * ------------------------------
   * Transforms the hamburger icon into a close (X) icon when active.
   */
  #toggle-menu-button svg rect {
    transition: transform 0.3s ease;
    transform-origin: center;
  }
  #toggle-menu-button[aria-expanded=true] svg rect:nth-child(1) {
    transform: translate(-5px, 5px) rotateZ(45deg);
  }
  #toggle-menu-button[aria-expanded=true] svg rect:nth-child(2) {
    opacity: 0;
  }
  #toggle-menu-button[aria-expanded=true] svg rect:nth-child(3) {
    transform: translate(-5px, -5px) rotateZ(-45deg);
  }
  /*
   * MOBILE NAVIGATION MENU
   * ------------------------------
   * Implements a slide-in effect for the mobile menu.
   */
  .nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    min-height: 100%;
    z-index: 2;
    display: grid;
    place-items: center;
    transition: transform 0.5s var(--transition-bezier-2);
    transform: translateX(100%);
    background-color: var(--nav-background-color);
    overflow: auto;
  }
  .nav--active {
    transform: translateX(0);
  }
  .nav-list li a::after {
    background: linear-gradient(to right, #fff, #fff);
  }
  /*
   * MOBILE NAVIGATION LIST
   * ------------------------------
   * Adjusts layout for better stacking on smaller screens.
   */
  .nav-list {
    flex-direction: column;
    padding: 5rem 0 0 0;
    gap: 0.75rem;
    margin: 0;
  }
  /*
   * MOBILE NAVIGATION LINK STYLES
   * ------------------------------
   * Adjusts color, spacing, and weight for better readability.
   */
  .nav-list li a {
    --nav-link-color: #fff;
    letter-spacing: 0.025em;
    font-weight: 300;
    transition: all 0.25s;
  }
  .nav-list li a:hover,
  .nav-list li a:focus {
    color: #fff;
  }
}
/*  
 * NAVIGATION FOOTER  
 * ------------------------------  
 * This is the navigation section located at the bottom of the main navigation.  
 * It is hidden by default and only appears on smaller screens.  
 */
.nav-footer {
  margin-left: auto;
  display: flex;
}

.nav-footer .social-media-list {
  display: none;
}

/*  
 * RESPONSIVE NAVIGATION FOOTER  
 * ------------------------------  
 * On screens smaller than 960px (60em), the nav-footer becomes visible,  
 * stretches to full width, and aligns items using flexbox.  
 */
@media (max-width: 60em) {
  .nav-footer {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .nav-footer .social-media-list {
    display: flex;
  }
  /*  
   * NAV-FOOTER BUTTON STYLES  
   * ------------------------------  
   * Ensures buttons within the navigation footer have proper contrast  
   * on darker backgrounds by adjusting the border and text color.  
   */
  .nav-footer .button {
    border-color: #fff;
    color: #fff;
  }
  /*  
   * NAV-FOOTER BUTTON ARROW ICON  
   * ------------------------------  
   * Replaces the default arrow icon with a lighter version for better visibility  
   * within the navigation footer.  
   */
  .nav-footer .button::after {
    background-image: url("assets/icons/navigation/arrow-right-2-light.svg");
  }
}
/* 
 * MAIN LAYOUT CONTAINER
 * ------------------------------
 * The container for the photo layout using flexbox for responsive arrangement.
 */
.photo-layout {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  justify-content: space-between;
  align-items: center;
}

/* 
 * INDIVIDUAL ITEM STYLING
 * ------------------------------
 * Styling for individual items in the photo layout.
 */
/* 
 * IMAGE STYLING FOR INDIVIDUAL ITEMS
 * ------------------------------
 * Ensures images are responsive and fit within the defined max-width.
 */
.photo-layout--item img {
  width: 100%;
  height: auto;
  max-width: 500px;
}

/* 
 * SPECIFIC LAYOUT SECTIONS
 * ------------------------------
 * Defines layout for specific sections like bride's image, quote, and others.
 */
/* 
 * BRIDE'S LARGE IMAGE (TOP LEFT)
 * ------------------------------
 * Customizes the width and max-width for the bride’s image.
 */
.photo-layout--bride {
  width: var(--threshold, 30%);
  max-width: 700px;
}

/* 
 * QUOTE SECTION (CENTER)
 * ------------------------------
 * Centers the quote section and applies flexbox for layout.
 */
.photo-layout--quote {
  width: var(--threshold, 40%);
  text-align: center;
  display: flex;
}

/* 
 * DIVIDER STYLE FOR QUOTE SECTION
 * ------------------------------
 * Adds a margin to the divider for spacing.
 */
.photo-layout--quote .divider-heart {
  margin-top: 4.5rem;
}

/* 
 * PARAGRAPH STYLING WITHIN QUOTE SECTION
 * ------------------------------
 * Adjusts font size and applies heading font for the quotes.
 */
.photo-layout--quote p {
  font-size: var(--font-lg);
  font-family: var(--THEME_FONT_HEADINGS);
}

/* 
 * SPACING FOR PARAGRAPHS WITHIN QUOTES
 * ------------------------------
 * Adds padding to all paragraphs except the last one for spacing.
 */
.photo-layout p:not(:last-child) {
  padding-bottom: 1.5rem;
}

/* 
 * SPECIAL STYLING FOR FIRST PARAGRAPH IN QUOTES
 * ------------------------------
 * Applies uppercase and italic styling to the first paragraph.
 */
.photo-layout--quote p:first-of-type {
  text-transform: uppercase;
  font-style: italic;
}

/* 
 * COUPLE WALKING IMAGE (RIGHT)
 * ------------------------------
 * Customizes the width, background, and margin for the walking couple image.
 */
.photo-layout--walking {
  width: var(--threshold, 25%);
  max-width: 400px;
  margin-top: 6rem;
}

/* 
 * ABOUT SECTION (BOTTOM LEFT)
 * ------------------------------
 * Customizes the width and positioning of the about section.
 */
.photo-layout--about {
  max-width: 600px;
  width: var(--threshold, 50%);
  margin-left: auto;
  margin-top: auto;
  transform: translateY(-40px);
}

@media (max-width: 60em) {
  .photo-layout--about,
  .photo-layout--photographer {
    padding: 0 1.5rem;
  }
}
/* 
 * ADJUSTMENTS FOR INNER WRAP OF ABOUT SECTION
 * ------------------------------
 * Limits the max width for the internal wrap element.
 */
.photo-layout--about .photo-layout-wrap {
  max-width: 520px;
}

/* 
 * HEADING STYLING IN ABOUT SECTION
 * ------------------------------
 * Adds bottom padding and adjusts line height for the heading.
 */
.photo-layout--about h2 {
  padding-bottom: 3rem;
  line-height: 1.3;
}

/* 
 * BREADCRUMB STYLING IN ABOUT SECTION
 * ------------------------------
 * Adds margin below the breadcrumb for spacing.
 */
.photo-layout--about .breadcrumb {
  margin-bottom: 1rem;
}

/* 
 * PHOTOGRAPHER IMAGE (BOTTOM RIGHT)
 * ------------------------------
 * Customizes the width and text alignment for the photographer image.
 */
.photo-layout--photographer {
  max-width: 600px;
  width: var(--threshold, 50%);
  margin-right: auto;
  text-align: center;
  transform: translateY(-40px);
}

@media (max-width: 60em) {
  .photo-layout--photographer {
    padding-top: 1.5rem;
  }
}
/* 
 * RED OVERLAPPING SQUARE WITH CIRCULAR TEXT
 * ------------------------------
 * Customizes the layout and visual effect for the overlapping section.
 */
.photo-layout--overlap {
  width: 100%;
  text-align: center;
  transform: translateY(-40px);
}

/* 
 * RESPONSIVE DESIGN FOR MOBILE
 * ------------------------------
 * Tweaks layout for better stacking and visual appearance on smaller screens.
 */
@media (max-width: 768px) {
  .photo-layout--overlap {
    margin-top: 3rem;
  }
  /* REMOVE TRANSLATE EFFECT FOR SMALLER SCREENS */
  /* ------------------------------ */
  /* Resets the transform effect on smaller screens */
  .photo-layout--overlap,
  .photo-layout--photographer,
  .photo-layout--about {
    transform: none;
  }
  /* ADJUST LAYOUT DIRECTION FOR BETTER STACKING ON MOBILE */
  /* ------------------------------ */
  /* Aligns items vertically for smaller screens */
  .photo-layout {
    flex-direction: column;
    align-items: center;
  }
  /* REDUCE WIDTH FOR ITEMS ON MOBILE DEVICES */
  /* ------------------------------ */
  /* Makes items take up more space on mobile */
  /* ADJUST WIDTH FOR QUOTE AND ABOUT SECTIONS ON MOBILE */
  /* ------------------------------ */
  /* Makes quote and about sections more flexible on smaller screens */
  .photo-layout--quote,
  .photo-layout--about,
  .photo-layout--item {
    --threshold:100%;
  }
}
/* MAIN MARQUEE TEXT CONTAINER LAYOUT */
/* ------------------------------ */
/* Provides the basic layout and masking effect for the scrolling text */
.eg-marquee-text {
  overflow: hidden;
  background-color: var(--_marquee-bg);
  padding: 1.5rem 0;
  margin-bottom: 0.75rem;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, black 5rem, black calc(100% - 2rem), transparent);
          mask-image: linear-gradient(to right, transparent, black 5rem, black calc(100% - 2rem), transparent);
}

/* LIGHT MARQUEE VARIATION */
/* ------------------------------ */
/* Specific styles for the light-colored marquee, overriding background color */
.eg-marquee-light {
  --_marquee-bg: #fff; /* Sets background color to white */
  margin-bottom: 0; /* Removes the bottom margin */
}

/* DARK MARQUEE VARIATION */
/* ------------------------------ */
/* Specific styles for the dark-colored marquee, with additional margin */
.eg-marquee-dark {
  --_marquee-bg: var(--color-soft-peach); /* Sets background color to soft peach */
  margin-top: 4rem; /* Adds space above the marquee */
}

/* MARQUEE TEXT TRACK */
/* ------------------------------ */
/* Defines the animation speed and movement direction for the marquee text */
.eg-marquee-text-track {
  --speed: 35s; /* Sets the speed of the marquee animation */
  /* --direction: reverse; */ /* Optional: Uncomment to reverse the direction of the marquee */
  display: flex;
  gap: 2rem;
  width: -moz-max-content;
  width: max-content;
  animation: marquee-move-text var(--speed, 10s) linear infinite var(--direction, forwards);
}

/* INDIVIDUAL PARAGRAPH STYLING IN THE MARQUEE */
/* ------------------------------ */
/* Applies text and layout styles to each paragraph in the marquee */
.eg-marquee-text p {
  display: flex;
  align-items: center;
  font-style: italic;
  font-family: var(--THEME_FONT_HEADINGS);
  color: var(--THEME_TEXT);
  padding: 0;
  font-size: var(--font-marquee);
  letter-spacing: 0.05em;
}

/* ADDS DECORATIVE SPARKLE DIVIDER AFTER EACH PARAGRAPH */
/* ------------------------------ */
/* Adds a sparkle icon after each paragraph for decoration */
.eg-marquee-text p::after {
  content: "";
  background-image: url("assets/icons/dividers/sparkle-devider.svg");
  background-repeat: no-repeat;
  background-size: 100%;
  width: 15px;
  height: 15px;
  margin-left: 2rem;
  display: block;
}

/* KEYFRAME ANIMATION FOR MARQUEE MOVEMENT */
/* ------------------------------ */
/* Defines the animation for scrolling the text horizontally, moving the text to the left */
@keyframes marquee-move-text {
  to {
    transform: translateX(-50%);
  }
}
/* HERO SECTION CONTAINER LAYOUT */
/* ------------------------------ */
/* Sets up the grid layout, centers the content and image, and handles text color and overflow */
.hero-section {
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
  color: var(--hero-text-color);
  overflow: hidden;
  margin-top: 0;
}

/* HERO IMAGE STYLING */
/* ------------------------------ */
/* Ensures the hero image covers the entire area and is centered */
.hero-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  border-radius: var(--THEME_BORDER_RADIUS);
}

@media (max-width: 60em) {
  .hero-image img {
    min-height: 300px;
  }
}
/* HERO CONTENT STYLING */
/* ------------------------------ */
/* Positions and styles the content inside the hero section */
.hero-content {
  background: var(--hero-background-color); /* Custom background color */
  max-width: 100%;
  padding: 1.5rem;
  width: 100%;
  z-index: 1;
  text-align: center;
}

/* DIVIDER HEART STYLING (USED AS A SEPARATOR IN THE CONTENT) */
/* ------------------------------ */
/* Adds space below the heart divider element */
.hero-content > .divider-heart {
  margin-bottom: 1.5rem;
}

/* BUTTON STYLING INSIDE HERO CONTENT */
/* ------------------------------ */
/* Styles the button inside the hero content for spacing and layout */
.hero-content .button {
  display: inline-flex;
  margin-top: 3.5rem;
}

/* MEDIA QUERIES FOR RESPONSIVE LAYOUT ADJUSTMENTS */
/* ------------------------------ */
/* MEDIUM SCREEN (min-width: 50em) */
/* ------------------------------ */
/* Adjusts the layout for screens above 50em for better responsiveness */
@media (min-width: 50em) {
  /* HERO IMAGE POSITIONING ON MEDIUM SCREENS */
  /* ------------------------------ */
  /* Positions the image behind the content for a layered effect */
  .hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
  /* HERO SECTION GRID LAYOUT FOR MEDIUM SCREENS */
  /* ------------------------------ */
  /* Adjusts the layout of the hero section for better centering */
  .hero-section {
    display: grid;
    align-items: center;
  }
  /* HERO CONTENT PADDING ADJUSTMENTS */
  /* ------------------------------ */
  /* Increases padding for a more spacious layout on larger screens */
  .hero-content {
    padding: 4rem;
  }
  /* HERO CONTENT CENTERING (FOR SECTIONS WITH THE --CENTER MODIFIER) */
  /* ------------------------------ */
  /* Centers the content in the middle of the hero section */
  .hero-section--center .hero-content {
    grid-column: 2/5;
    max-width: 960px;
    width: 100%;
  }
  /* HERO CONTENT RIGHT ALIGNMENT (FOR SECTIONS WITH THE --RIGHT MODIFIER) */
  /* ------------------------------ */
  /* Aligns content to the right side in larger screens */
  .hero-section--right .hero-content {
    grid-column: 2/5;
    max-width: 960px;
  }
  /* HERO IMAGE POSITIONING FOR MEDIUM SCREENS */
  /* ------------------------------ */
  /* Ensures the image stays centered */
  .hero-image img {
    -o-object-position: center;
       object-position: center;
  }
}
/* LARGE SCREEN (min-width: 90em) */
/* ------------------------------ */
/* Adjusts the layout for very large screens to fit content properly */
@media (min-width: 90em) {
  /* HERO SECTION GRID LAYOUT FOR LARGE SCREENS */
  /* ------------------------------ */
  /* Defines the layout to have five equal-width columns */
  .hero-section {
    grid-template-columns: repeat(5, 1fr);
  }
  /* HERO CONTENT RIGHT ALIGNMENT FOR LARGE SCREENS */
  /* ------------------------------ */
  /* Moves the content to the right side for large screens */
  .hero-section--right .hero-content {
    grid-column: 3/-1;
    max-width: 800px;
  }
}
/* 
 * STYLES FOR HERO SECTION
 * -------------------------
 * These styles target the <em> elements within the hero section. The color of the text
 * is set to a primary light red defined by a custom property.
 */
.hero em {
  /* Sets the color of <em> text inside the hero section */
  color: var(--color-primary-lightRed);
  margin-top: 3.5rem;
}

.hero h1 {
  margin-bottom: 2rem;
}

.hero p {
  font-size: var(--font-lg);
}

/* 
 * MEDIA QUERY STYLES FOR HERO SECTION ON SMALL SCREENS
 * ----------------------------
 * This media query adjusts the hero section layout on screens with a maximum width 
 * of 40em (640px). It changes the background color and the order of the last grid item.
 */
@media (max-width: 50em) {
  /* 
   * Targets the last grid item in the hero section. Changes the background color 
   * and sets the item to appear first in the layout by modifying its order.
   */
  .hero .eg-grid-item:last-child {
    order: -1; /* Moves the item to the first position */
  }
  .hero em {
    text-align: center;
  }
  .hero .eg-grid-item {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
/* 
 * STYLES FOR SERVICES SECTION
 * ---------------------------
 * These styles define the appearance of the services section, including the background 
 * color and heading adjustments. The colors and spacing are controlled via custom properties.
 */
.services-home {
  /* Sets the background color of the services section to a soft peach */
  background-color: var(--color-soft-peach);
  margin-top: 0;
}

.services-home .eg-grid {
  --layout-gap:5rem;
}

@media (max-width: 50em) {
  .services-home {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
/* TESTIMONIALS SLIDER CONTAINER */
/* ------------------------------ */
/* Contains the main testimonial slider and positions it for visual alignment */
.testimonials-slider {
  position: relative;
}

@media (max-width: 50em) {
  .testimonials-slider {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
/* TESTIMONIALS SLIDER WRAPPER */
/* ------------------------------ */
/* This wrapper holds the testimonials and ensures the overflow is hidden for proper display */
.testimonials-slider--wrapper {
  overflow: hidden;
  position: relative;
  margin-top: 2rem;
}

/* NAVIGATION BUTTONS */
/* ------------------------------ */
/* Styles for the previous and next buttons of the testimonial slider */
.testimonials-slider--prev, .testimonials-slider--next {
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
  background-color: transparent;
}

/* PREVIOUS BUTTON - ROTATED FOR VISUAL DIRECTION */
/* ------------------------------ */
/* Rotates the previous button to point in the left direction */
.testimonials-slider--prev {
  transform: rotate(-180deg);
  margin-left: 3rem;
}

/* TESTIMONIAL STYLING */
/* ------------------------------ */
/* Centers the testimonial content and sets typography properties */
.testimonial {
  text-align: center;
  font-size: var(--font-lg);
  line-height: 1.3;
}

/* TESTIMONIAL IMAGE STYLING */
/* ------------------------------ */
/* Adds spacing below images for separation from text */
.testimonial > img {
  margin-bottom: 1rem;
  border-radius: 50%;
  width: 100px;
  height: 100px;
}

/* TESTIMONIAL AUTHOR STYLING */
/* ------------------------------ */
/* Styles the author text, aligning it to the right */
.testimonial--author {
  text-align: right;
  font-size: var(--font-sm);
  margin: 1rem 0;
}

/* TESTIMONIAL QUOTE STYLING */
/* ------------------------------ */
/* Applies a quote style to the testimonial's quote with icon integration */
.testimonial--quote {
  display: block;
  font-family: var(--THEME_FONT_HEADINGS);
  text-align: left;
  padding-top: 1rem;
  line-height: 1.5;
}

/* QUOTE ICON STYLING */
/* ------------------------------ */
/* Inserts the quote mark icon before the quote text */
.testimonial--quote::before {
  content: "";
  background-image: url("assets/icons/other/quote-marks.svg"); /* Path to the quote icon */
  width: 40px;
  height: 34px;
  display: block;
  margin-bottom: 1rem;
}

/* PADDING ON TESTIMONIAL QUOTE */
/* ------------------------------ */
/* Adds padding on top of the quote for visual balance */
@media (min-width: 60em) {
  .testimonial--quote {
    display: flex;
  }
  .testimonial--quote::before {
    content: "";
    display: inline-block;
    margin-right: 1rem;
    margin-top: 0;
    flex-shrink: 0;
  }
}
/* GENERAL TYPOGRAPHY STYLES */
/* ------------------------------ */
/* Defines typography for section numbering and paragraph content. 
 * Uses a larger font size and italic style for the section numbers. 
 */
.section-numbering {
  font-size: var(--font-section-number-lg);
  font-family: var(--THEME_FONT_EM);
  line-height: 1;
  color: var(--color-primary-lightRed);
  display: inline-block;
  font-style: normal;
  margin: 1.5rem 0 2.5rem 0;
}

/* LAYOUT STYLES: GRID AND IMAGE SETUP */
/* ------------------------------ */
/* Defines the grid layout and image styling inside the .recent-works section. 
 * Ensures images take up 100% of their container width.
 */
.recent-works .eg-grid {
  --layout-gap: 0;
}

.recent-works {
  padding-top: 0;
}

.recent-works .eg-grid-item > img {
  width: 100%;
}

/* PARAGRAPH STYLING FOR .RECENT-WORKS GRID ITEMS */
/* ------------------------------ */
/* Adds padding to paragraph text inside the grid items for spacing */
.recent-works .eg-paragraph {
  padding: 1.5rem;
}

/* LARGE SCREEN (MIN-WIDTH: 90EM) */
/* ------------------------------ */
/* Reduces padding and sets a max width for paragraphs inside .recent-works grid */
@media (min-width: 90em) {
  .recent-works .eg-paragraph {
    max-width: 530px;
    padding: 0;
  }
}
/* SMALL SCREEN (MAX-WIDTH: 60EM) */
/* ------------------------------ */
/* Reorders even grid items to improve layout on smaller screens.
 * Moves the last item in even-numbered grid rows to the top of the list.
 */
@media (max-width: 60em) {
  .recent-works .eg-grid:nth-of-type(even) .eg-grid-item:last-of-type {
    order: -1;
  }
}
/* 
 * ROTATING IMAGE ANIMATION
 * ------------------------------
 * This animation applies a continuous rotation effect to the specified image.
 */
.rotating-image .stamp-1 {
  animation: rotateAnimation 10s linear infinite;
}

/* 
 * ROTATION ANIMATION KEYFRAMES
 * ------------------------------
 * Defines the keyframes for the rotating effect, making the image spin 360 degrees.
 */
@keyframes rotateAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* 
 * LINK CONTAINER
 * ------------------------------
 * Ensures that the link inside aligns to the right within a flex container.
 * This is useful for positioning action links consistently.
 */
.link-container > .link-basic {
  margin-left: auto;
}

/* 
* SERVICES FEATURES STYLES
* ------------------------------
* Defines spacing and layout adjustments for service feature blocks.
*/
/* Adjusts spacing around headings inside service feature blocks */
.services-features h3 {
  padding: 1.5rem 0 1.5rem 0;
  margin: 0;
  font-size: var(--font-xxl);
  line-height: 1.2;
}

/* Adds top margin to the link container inside the services section */
.services-features .link-container {
  margin-top: 1rem;
}

@media (min-width: 90em) {
  /* Styles the service feature grid items with a border and background */
  .services-features .eg-grid-item + .eg-grid-item {
    padding-left: 3rem;
  }
}
.hero-scroll-down {
  text-align: center;
  padding: 1.5rem 0;
}

/**
* `.icon-arrow-scroll-down`
* -------------------------
* - Represents the scrolling action with an arrow icon.
* - Can be an inline SVG or a background image.
* - Hidden from screen readers (`aria-hidden="true"`) as it's purely decorative.
*/
.icon-arrow-scroll-down {
  animation: bounce 1.5s infinite;
}

/* Simple bounce animation */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}
.hero-photo {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: center;
}

.hero-photo--thumb {
  grid-column: 1/span 4;
  grid-row: 1;
  min-width: clamp(300px, 50vw, 600px);
}

.hero-photo .social-media-list {
  grid-column: 6;
  grid-row: 1;
  align-items: center;
  margin-bottom: 4rem;
  margin-left: auto;
}

@media (max-width: 50em) {
  .hero-photo {
    grid-template-columns: 1fr;
  }
}
/* 
 * PACKAGE CONTENT STYLES
 * ------------------------------
 * This section defines the base styles for the service package component.
 * It includes elements for package title, information, features, pricing, and labels.
 */
/* 
 * .package-content
 * ------------------------------
 * Main container for the service package section.
 * Wraps all elements related to a specific package.
 */
.package-content + .package-content {
  margin-top: 7.5rem;
}

.package-photo-radius img {
  border-radius: 50%;
}

@media (max-width: 60em) {
  .package-info {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
/* 
 * .package-title
 * ------------------------------
 * Displays the package name, e.g., "03 Premium (Premium)".
 * Typically styled with a distinct font and spacing for emphasis.
 */
.package-title {
  padding-bottom: 5rem;
  font-size: var(--font-xxl);
  font-family: var(--THEME_FONT_HEADINGS);
  font-style: italic;
}

.package-title > span {
  color: var(--color-primary-lightRed);
  font-size: var(--font-section-number-lg);
  font-family: var(--THEME_FONT_EM);
  margin-right: 2rem;
  font-style: normal;
  font-weight: normal;
}

.package-description {
  margin-top: 2rem;
  padding: 2rem 1.5rem;
}

@media (min-width: 90em) {
  .package-description {
    max-width: 960px;
    margin-top: 6rem;
    margin-bottom: 5rem;
    padding: 0;
  }
}
/* 
 * .package-info
 * ------------------------------
 * Container for package information, including details on the target group, features, and price.
 * Ensures a structured layout for easy readability.
 */
/* Style for paragraphs inside .package-info excluding the last one */
.package-info p:not(:last-of-type) {
  padding-bottom: 1.5rem;
}

/* Style for anchor links inside .eg-grid-item within .package-info */
.package-info .eg-grid-item a {
  color: var(--color-primary-lightRed);
  font-weight: bold;
}

.package-info .eg-grid-item:first-of-type {
  text-align: center;
}

/* Style for h2 headers inside .package-info */
.package-info h2 {
  padding-bottom: 3rem;
  font-size: var(--font-xxl);
}

/* 
 * .package-group
 * ------------------------------
 * Groups related package details, such as target audience and key features.
 * Often used to visually separate different types of content.
 */
.package-group {
  /* Styles for .package-group go here */
}

/* 
 * .package-label
 * ------------------------------
 * Labels used within the package to highlight key information.
 * Examples: "Target Group", "Price".
 */
.package-label {
  display: flex;
  align-items: baseline;
  gap: 0.5rem; /* Razmak između ikonice i teksta */
}

.package-label + .package-features {
  margin-top: 1.5rem;
}

/* 
 * .package-features
 * ------------------------------
 * Wraps the feature list of the package, detailing the included services.
 * Often displayed as a bulleted or icon-based list.
 */
.package-features {
  /* Styles for .package-features go here */
}

/* 
 * .package-list
 * ------------------------------
 * Defines the list structure for package features.
 * Includes benefits such as full-day photography, video production, and more.
 */
.package-list {
  padding: 1.5rem 2rem;
}

.package-list li {
  position: relative;
  padding-left: 1.25rem;
}

.package-list li::before {
  content: "•";
  color: var(--color-primary-lightRed);
  font-size: 1.2rem;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* 
 * .package-price
 * ------------------------------
 * Displays the package price.
 * Typically styled to stand out, possibly with dynamic text updates.
 */
.package-price {
  /* Styles for .package-price go here */
}

.package-info,
.package-photo {
  order: 1; /* Default mobile order */
}

@media (max-width: 60em) {
  .package-content--odd .package-photo {
    order: -1;
  }
}
/* 
* SERVICES SECTION CONTAINER
* ------------------------------
* The main wrapper for the services section, ensuring consistency 
* across different service categories.
*/
.services {
  /* Styles go here */
}

.packages-section .eg-grid {
  --layout-gap: 5rem;
}

@media (max-width: 60em) {
  .packages-section .eg-grid {
    --layout-gap:3rem;
  }
}
/* 
 * SERVICES HEADER
 * ------------------------------
 * The header section containing the icon and title of the services block.
 */
.services-header {
  display: flex;
  align-items: baseline;
}

@media (max-width: 60em) {
  .services-header {
    padding: 0 1.5rem;
  }
}
/* 
 * SERVICES TITLE
 * ------------------------------
 * The main heading of the services section.
 */
.services-title {
  padding-left: 1.5rem;
  padding-bottom: 2rem;
}

@media (min-width: 90em) {
  .services-title {
    padding-bottom: 5rem;
  }
}
/* 
 * SERVICES ICON
 * ------------------------------
 * Decorative icon placed next to the section title.
 */
.services-icon {
  /* Styles go here */
}

/* 
 * SERVICES LIST CONTAINER
 * ------------------------------
 * The unordered list that holds all service items.
 */
.services-list {
  padding-bottom: var(--spacing-bottom-lg);
}

@media (max-width: 60em) {
  .services-list {
    padding: 0 1.5rem 2rem 1.5rem;
  }
}
/* 
 * SERVICE ITEM
 * ------------------------------
 * Individual service entry inside the services list.
 */
.services-item {
  display: flex;
  align-items: baseline;
}

.services-item:not(:last-of-type) {
  margin-bottom: 2rem;
}

.services-item::before {
  content: "";
  background-image: url("assets/icons/dividers/sparkle-devider.svg");
  background-repeat: no-repeat;
  background-size: 100%;
  width: 15px;
  height: 15px;
  display: block;
  margin-right: 1.5rem;
  aspect-ratio: 1;
}

/* 
 * SERVICE NAME
 * ------------------------------
 * The title of each service, indicating the type of service provided.
 */
.services-name {
  /* Styles go here */
}

/* 
 * SERVICE DESCRIPTION
 * ------------------------------
 * A brief description of the service, providing essential details.
 */
.services-description {
  /* Styles go here */
}

.services-item h3 {
  margin: 0;
  font-size: var(--font-lg);
  font-family: var(--THEME_FONT_FAMILY);
  line-height: 1.2;
  padding-bottom: 0.75rem;
}

@media (min-width: 90em) {
  .services-photo--odd {
    margin-left: auto;
  }
  .services-photo--even {
    margin-right: auto;
  }
  .services .eg-grid-item {
    max-width: 650px;
  }
  .services .eg-grid-item:first-of-type {
    margin-left: auto;
  }
}
@media (max-width: 60em) {
  .services-photo--odd + .eg-grid-item {
    order: -1;
  }
}
/* 
 * SERVICES HERO SECTION STYLES
 * ------------------------------
 * Defines the layout and styling for the services hero section,
 * including the background image and content display.
 */
/* Main container for the hero section */
.services-hero {
  display: grid;
  place-items: center;
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  margin-top: 4rem;
}

/* Background image container */
.services-hero--background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* Background image style */
.services-hero--background img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

/* Content area inside the hero section */
.services-hero--content {
  z-index: 1;
  text-align: left;
  color: #fff;
  padding: 0 20px;
  max-width: 1400px;
  width: 100%;
}

/* Translate effect on photo */
.services-photo--translate {
  transform: translateY(-200px);
}

/* Responsive styles for smaller screens */
@media (max-width: 768px) {
  .services-hero {
    height: 300px;
  }
  .services-photo--translate {
    transform: translateY(0);
  }
}
/* 
 * FORM CONTAINER
 * ------------------------------
 * Provides a clean and spacious container for the form elements.
 */
.form-container {
  background-color: #fff;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* Responsive: Adjusts padding and margin for large screens */
@media (min-width: 90em) {
  .form-container {
    --CONTAINER_MAX_WIDTH:1000px;
    padding: 7rem 9rem 5rem 9rem;
    margin-bottom: 7rem;
  }
}
/* 
 * FORM STRUCTURE AND ELEMENTS
 * ------------------------------
 */
/* Form Title: Centers the title and adds spacing below */
.form-title {
  text-align: center;
  margin-bottom: 20px;
}

/* Form Group: Adds spacing between form groups */
.form-group {
  margin-bottom: 2.5rem;
}

/* Cilja poslednji .form-group, bez obzira na ostale elemente */
.wpcf7-form .form-group:nth-of-type(9) {
  margin-top: 6rem;
}

/* Form Label: Ensures labels are displayed as block elements */
.form-label {
  display: block;
  margin-bottom: 5px;
}

/* 
 * FORM INPUT FIELDS
 * ------------------------------
 * Applies consistent styling across input, textarea, and select fields.
 */
.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 10px;
  border-width: 0 0 2px 0;
  border-style: solid;
  border-color: var(--color-soft-peach);
  box-sizing: border-box;
  font-family: var(--THEME_FONT_FAMILY);
  font-weight: 300;
  font-size: var(--font-md);
  background-color: #fff;
}

/* Textarea: Allows vertical resizing */
.wpcf7-textarea {
  width: 100%; /* Širina može biti 100% ili specifična vrednost */
  height: 120px; /* Visina textarea */
  padding: 10px;
  resize: vertical; /* Omogućava korisnicima da menjaju visinu */
}

/* 
 * FORM SUBMIT BUTTON
 * ------------------------------
 * Styles the submit button with color, padding, and rounded corners.
 */
.form-submit {
  color: #fff;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* 
 * CONTACT SECTION
 * ------------------------------
 * Centers the section and adds spacing at the top and bottom.
 */
.contact {
  text-align: center;
  margin: 6rem 0 5rem 0;
}

/* Contact Title: Centers the title and adds spacing below */
.contact-title {
  text-align: center;
  margin-bottom: 20px;
}

/* 
 * CONTACT CONTENT
 * ------------------------------
 */
/* Emphasis Tag: Adds spacing at the top */
.contact-content > em {
  margin-top: var(--THEME_INDENT);
}

/* Contact Details: Adds spacing below each section */
.contact-details {
  margin-bottom: 20px;
}

/* Contact Detail Paragraphs: Adjusts font size */
.contact-details p {
  font-size: var(--font-md);
}

/* Last Paragraph: Adds spacing above the last paragraph */
.contact-details p:last-of-type {
  margin-top: 1rem;
}

/* 
 * CONTACT LINKS
 * ------------------------------
 */
/* General Contact Links: Styles font and removes text decoration */
.contact-link,
.contact-email-link {
  display: inline-block;
  font-family: var(--THEME_FONT_EM);
  text-decoration: none;
  color: var(--color-primary-lightRed);
}

/* Specific Contact Link: Enlarges font size */
.contact-link {
  font-size: var(--font-section-number-lg);
  line-height: normal;
  margin: 0;
}

/* Contact Link Hover: Ensures no decoration on hover */
.contact-link:hover {
  text-decoration: none;
}

/* Contact Email Link: Adjusts font size and spacing */
.contact-email-link {
  font-size: var(--font-em);
  margin-top: 0.5rem;
}

/* 
 * CALL TO ACTION
 * ------------------------------
 */
/* Centers the call-to-action section */
.contact-call-to-action {
  text-align: center;
}

/* Call to Action Text: Adds bottom margin */
.contact-cta-text {
  margin-bottom: 10px;
}

/* Emphasis in CTA: Sets specific font size */
.contact-cta-text > em {
  font-size: var(--font-heading);
}

/* Call to Action Description: Sets font size and family */
.contact-cta-description {
  font-size: var(--font-lg);
  font-family: var(--THEME_FONT_HEADINGS);
  padding-top: 1rem;
}

/*  
* SCREEN READER RESPONSE
* ------------------------------
* Hides the response for screen readers. 
* Ensures the response text remains inaccessible for visually impaired users, improving accessibility.
*/
.screen-reader-response {
  display: none;
}

/*  
* CF7 PLACEHOLDER STYLE
* ------------------------------
* Customizes the placeholder text color for Contact Form 7 inputs and textareas.
* Allows the use of a dynamic color based on the theme variable.
*/
.wpcf7-form input::-moz-placeholder, .wpcf7-form textarea::-moz-placeholder {
  color: var(--cf7-placeholder-color);
}
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
  color: var(--cf7-placeholder-color);
}

/*  
* CF7 RESPONSE OUTPUT 
* ------------------------------
* Styles the response output container. 
* Adds padding and rounded corners for better visual appeal and consistency.
*/
.wpcf7-response-output {
  padding: 10px;
  border-radius: 4px;
}

/*  
* CF7 SUCCESS MESSAGE 
* ------------------------------
* Styles the success message after form submission.
* Background color changes based on the success state using a theme variable.
*/
.wpcf7-mail-sent-ok {
  background-color: var(--cf7-success-color);
  color: #fff;
}

/*  
* CF7 ERROR MESSAGES 
* ------------------------------
* Styles error messages when there are form validation errors or failures in submission.
* Background and text colors are set to reflect error state using a theme variable.
*/
.wpcf7-mail-sent-ng,
.wpcf7-validation-errors {
  background-color: var(--cf7-error-color);
  color: #fff;
}

/*  
* CF7 SUBMIT BUTTON 
* ------------------------------
* Styles the submit button for Contact Form 7.
* The button is designed with inline-flex, rounded corners, and interactive hover effects.
*/
.wpcf7-submit {
  display: inline-flex;
  align-items: center;
  padding: 12px 30px;
  font-size: 16px;
  font-family: var(--THEME_FONT_FAMILY);
  color: #CD2735;
  letter-spacing: 0.1em;
  background-color: transparent;
  border: 2px solid #CD2735;
  border-radius: 30px;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
  font-weight: 500;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/*  
* CF7 VALIDATION TIP 
* ------------------------------
* Styles the validation tip message shown when user input is incorrect.
* Adds smaller font size, red color, and normal font weight for emphasis.
*/
.wpcf7-not-valid-tip {
  font-size: 11px;
  color: var(--color-primary-lightRed);
  font-weight: 500;
  text-transform: uppercase;
  padding-left: 0.75rem;
}

/*  
* CF7 SUBMIT BUTTON ICON
* ------------------------------
* Adds an arrow icon to the submit button for visual indication of action.
* The icon is loaded via a background image, and positioned next to the button text.
*/
.wpcf7-submit > span {
  content: "";
  display: inline-block;
  width: 26px;
  height: 10px;
  background: url("assets/icons/navigation/arrow-right.svg") no-repeat center center;
  background-size: auto;
  background-size: 100%;
  margin-left: 1rem;
}

/*  
* CF7 SUBMIT BUTTON HOVER EFFECT 
* ------------------------------
* Adds a hover effect to the submit button to improve interactivity.
* On hover, the button lifts slightly with a smooth transition.
*/
.wpcf7-submit:hover {
  transform: translateY(-3px);
}

@media (max-width: 60em) {
  .blog.container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
/* 
 * BLOG POST STYLING
 * ------------------------------
 * This section defines the styles for the Blog Post layout,
 * including the title, author, meta data, content, gallery, and quote sections.
 */
/* 
 * Main title of the blog post.
 * This controls the appearance of the blog post's headline.
 */
.blog-post--title {
  /* Add styles for the blog post title (e.g., font size, weight, color) */
}

/* 
 * Author section of the blog post.
 * This contains the author's image and name.
 */
/* 
 * Author's image inside the author section.
 * This image represents the author of the blog post.
 */
.author--image {
  /* Add styles for the author image (e.g., border-radius, size) */
}

/* 
 * Author's name.
 * This class is used for styling the author's name in the blog post.
 */
.author--name {
  /* Add styles for the author's name (e.g., font size, weight, color) */
}

/* 
 * Meta information section for the blog post.
 * This section includes the publication date and category.
 */
.blog-post--meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* 
 * Hero section that displays the main image of the blog post.
 * This section helps set the tone for the content of the post.
 */
.blog-post--hero {
  margin: var(--THEME_INDENT) 0;
}

/* 
 * Hero image inside the blog post.
 * This is the main visual element of the hero section.
 */
.blog-post--hero-image {
  width: 100%;
  height: auto;
}

/* styles.css */
/**
 * Blockquote Styling
 * ------------------
 * - Uses BEM methodology for maintainable class naming.
 * - Adds an SVG quote mark as a decorative element using ::before.
 * - Uses CSS variables for easy theming.
 * - Ensures accessibility with proper contrast and readable text size.
 */
.blog-post--quote {
  position: relative;
  padding-left: 3rem;
  font-family: var(--THEME_FONT_HEADINGS);
  font-size: var(--font-lg);
  max-width: 640px;
  margin: 2rem auto;
  position: relative;
}

/* Adds the quote icon before the text */
.blog-post--quote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2rem;
  height: 2rem;
  background: url("assets/icons/other/quote-marks.svg") no-repeat center;
  background-size: contain;
}

@media (min-width: 60em) {
  .eg-paragraph--blog {
    max-width: 690px;
  }
}
/* 
 * Q&A SECTION STYLES
 * ------------------------------
 * This section defines the layout and styling for the Q&A section.
 * It includes general styles for the container, questions, and answers,
 * ensuring readability and structure across different screen sizes.
 */
/* 
 * MAIN CONTAINER
 * ------------------------------
 * Styles the main wrapper for the Q&A section.
 * Provides padding and ensures proper spacing.
 */
@media (max-width: 60em) {
  .page-template-faq_tpl .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
/* 
 * Q&A CONTENT WRAPPER
 * ------------------------------
 * Defines the container for the Q&A items.
 * Centers content and sets a max-width for readability.
 */
.qa-container {
  /* max-width: 800px;  Ensures readability by limiting the width */
  /* margin: 0 auto;  Centers the container horizontally */
}

/* 
 * SECTION TITLE
 * ------------------------------
 * Styles the main heading of the Q&A section.
 * Centers the title and adds spacing below.
 */
.qa-title {
  text-align: center; /* Aligns the title to the center */
  margin-bottom: 20px; /* Adds spacing below the title */
}

/* 
 * INDIVIDUAL Q&A ITEM
 * ------------------------------
 * Styles each question-answer pair.
 * Adds spacing and an optional border for separation.
 */
.qa-item {
  padding: 3rem 0; /* Adds vertical spacing */
}

.qa-item:first-of-type {
  padding-top: 0;
}

/* Adds a divider between items, excluding the last one */
.qa-item:not(:last-of-type) {
  border-bottom: 1px solid #fff;
}

/* 
 * RESPONSIVE LAYOUT (Q&A Items)
 * ------------------------------
 * Adjusts the structure for larger screens by using a grid.
 */
@media (min-width: 60em) {
  .qa-item {
    display: grid;
    grid-template-columns: 500px 1fr; /* Defines column layout */
  }
}
/* 
 * QUESTION STYLING
 * ------------------------------
 * Styles the question text, making it bold and structured.
 */
.qa-question {
  font-size: var(--font-lg);
  line-height: 1.3;
  display: flex; /* Aligns text and marker */
}

/* Styling for the question marker (e.g., Q: ) */
.qa-counter {
  color: var(--color-primary-lightRed);
  font-size: var(--font-xxl);
  font-family: var(--THEME_FONT_EM);
  margin-right: 1.5rem;
  line-height: 1;
  font-weight: normal;
  font-style: normal;
}

@media (max-width: 60em) {
  .qa-counter,
  .qa-question {
    display: block;
  }
  .qa-counter {
    margin-bottom: 1rem;
  }
  .qa-item > * + * {
    margin-top: 1rem;
  }
}
/* 
 * ANSWER STYLING
 * ------------------------------
 * Ensures proper spacing and readability for answers.
 */
.qa-answer {
  line-height: 1.6; /* Improves readability */
}

/* 
 * RESPONSIVE LAYOUT (Answer Section)
 * ------------------------------
 * Enhances structure and adds a decorative icon before answers.
 */
@media (min-width: 60em) {
  .qa-answer {
    padding-left: 3rem;
    display: grid;
    grid-template-columns: 15px 1fr; /* Adds a space for the icon */
    gap: 1rem;
    align-items: baseline;
  }
  /* Decorative icon before each answer */
  .qa-answer::before {
    content: "";
    background-image: url("assets/icons/dividers/sparkle-devider.svg");
    width: 15px;
    height: 15px;
    display: block;
    margin-right: 1rem;
  }
}
/* 
 * ANSWER LINKS
 * ------------------------------
 * Styles links within the answers for visibility and interaction.
 */
.qa-answer a {
  color: var(--THEME_TEXT);
  font-weight: 600;
}

/* 
 * HOVER EFFECTS (Answer Links)
 * ------------------------------
 * Adds an underline effect on hover to indicate interactivity.
 */
.qa-answer a:hover {
  text-decoration: underline;
}

.faq-additionals {
  padding-top: 2rem;
}

/* 
 * PROJECTS SECTION
 * ------------------------------
 * This section defines the styles for the Projects section, 
 * which showcases a grid of project items.
 */
/* 
 * Main container for the Projects section. 
 * This container holds all project items in a grid-like structure.
 */
.projects {
  --layout-gap: 4.5rem; /* Defines the gap between elements */
  padding-top: 6rem; /* Adds space above the projects section */
}

@media (max-width: 60em) {
  .page-template-projects_tpl .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .page-template-projects_tpl .site-branding {
    padding-left: 0;
    padding-right: 0;
  }
}
/* 
 * PROJECT ITEM STYLES
 * ------------------------------
 * These styles apply to individual project items, including 
 * their layout, images, and content.
 */
/* 
 * Style for each project item. 
 * Each project item will be a card-like container with an image and a title.
 */
.project-item {
  overflow: hidden; /* Prevents content from overflowing */
  transition: transform 0.3s ease; /* Smooth transition effect on hover */
  position: relative;
}

.project-item-zoom {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 1;
}

/* 
 * Adds spacing between multiple project items. 
 */
.project-item + .project-item {
  margin-top: 2rem; /* Adds spacing between project items */
}

/* 
 * IMAGE STYLES
 * ------------------------------
 * Styles for images within project items to ensure proper display.
 */
/* 
 * Style for the images within each project item. 
 * Ensures proper sizing and aspect ratio.
 */
.project-image {
  width: 100%; /* Ensures the image fills its container */
  height: auto; /* Maintains aspect ratio */
  -o-object-fit: cover;
     object-fit: cover; /* Ensures the image covers the area without distortion */
}

/* 
 * CONTENT STYLES
 * ------------------------------
 * Defines styles for project categories and titles within each project item.
 */
/* 
 * Content container for the project title and category. 
 * This section holds the project category and title and ensures proper spacing.
 */
.project-content {
  padding: 16px; /* Adds padding around the category and title */
  text-align: center; /* Centers the text */
}

.project-content .link-basic {
  justify-content: center;
  margin-top: 1.5rem;
}

/* 
 * Style for the project category. 
 * Typically displayed above the project title.
 */
.project-category,
.project-date {
  font-size: var(--font-sm); /* Smaller font size for categories */
  margin-bottom: 8px; /* Adds spacing below the category */
  display: block; /* Ensures it appears as a separate block */
  text-transform: uppercase; /* Capitalizes category text */
  letter-spacing: 0.025em; /* Adds slight spacing between letters */
  font-weight: 400; /* Normal font weight */
}

/* 
 * Style for the project titles. 
 * Ensures the titles are prominent and easily readable.
 */
.project-title {
  font-family: var(--THEME_FONT_HEADINGS); /* Uses heading font */
  font-size: var(--font-xxl); /* Large font size for prominence */
  margin: 0; /* Removes default margins */
}

/* ----------------------------------------------------------
   HOVER EFFECTS
   ---------------------------------------------------------- */
/* 
 * Apply a scaling effect on hover to make project items interactive.
 */
.project-item:hover {
  transform: translateY(-10px); /* Lifts the item slightly on hover */
}

/* ----------------------------------------------------------
   ACCESSIBILITY ENHANCEMENTS
   ---------------------------------------------------------- */
/* 
 * Ensures focus styles for accessibility.
 * Users navigating with a keyboard should easily identify focusable elements.
 */
.project-item:focus {
  outline: 3px solid #0078d4; /* Blue outline for focus indication */
}

.blog .project-item + .project-item {
  margin-top: 0;
}

/* 
 * BASIC STYLES FOR SOCIAL MEDIA LIST
 * ------------------------------
 * These styles define the basic structure and layout of the social media list.
 * The list is displayed as a flex container with no default list styling.
 */
.social-media-list {
  display: flex;
}

/* 
 * STYLES FOR LIST ITEMS (SOCIAL MEDIA LINKS)
 * ------------------------------
 * These styles define the appearance of individual list items (social media links). 
 * Items are displayed as inline-blocks to keep them aligned properly within the list.
 */
.social-media-list-item {
  display: inline-block;
  line-height: normal;
}

/* 
 * STYLES FOR VERTICAL ARRANGEMENT
 * ------------------------------
 * These styles control the appearance of the social media list in a vertical arrangement. 
 * By default, the vertical arrangement is hidden and will be displayed based on 
 * media query conditions.
 */
.social-media-list--vertical {
  /* Hides the vertical arrangement by default */
  display: none;
}

/* 
 * Adds spacing between list items in the vertical layout when it's enabled.
 * Ensures consistent spacing between items using margin-top.
 */
.social-media-list--vertical > .social-media-list-item:not(:last-of-type) {
  margin-bottom: 5px;
}

/* 
 * STYLES FOR HORIZONTAL ARRANGEMENT
 * ------------------------------
 * These styles control the appearance of the social media list in a horizontal arrangement.
 * When the layout is horizontal, list items are arranged in a row and are spaced accordingly.
 */
.social-media-list--horizontal {
  flex-direction: row;
}

/* 
 * Adds left margin between list items in horizontal layout for spacing.
 */
.social-media-list--horizontal > .social-media-list-item + .social-media-list-item {
  margin-left: 15px;
}

.social-media-list-item a {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.social-media-list-item a:hover {
  transform: translateX(-5px);
}

/* 
 * MEDIA QUERY STYLES FOR VERTICAL ARRANGEMENT ON LARGER SCREENS
 * ------------------------------
 * This media query makes the social media list vertical on screens with a minimum width 
 * of 60em (960px). The list will display as a column and have top margin adjusted 
 * to align properly within the layout.
 */
@media (min-width: 60em) {
  /* Displays the list as a flex container in a column layout */
  .social-media-list--vertical {
    display: flex;
    flex-direction: column;
    margin-top: auto;
  }
}
/* 
 * STYLES FOR LINKS WITHIN PARAGRAPHS
 * ------------------------------
 * This rule targets anchor links within paragraphs, giving them a primary red color,
 * underlining them, and applying a medium font weight.
 */
.eg-paragraph a {
  color: var(--color-primary-lightRed);
  text-decoration: underline;
  font-weight: 500;
}

/* 
* BASE ABOUT SECTION STYLES
* ------------------------------
* Defines basic styles for the about section layout.
*/
.about-section {
  display: grid;
  gap: var(--about-section-gap);
}

.about-section__media {
  margin-left: auto;
}

.about-section__content {
  position: relative;
  z-index: 1;
}

.about-section__content {
  padding-left: 2rem;
}

@media (max-width: 60em) {
  .about-section__media {
    order: -1;
  }
  .about-section__content {
    padding: 1.5rem;
  }
}
/* 
* INTRO SECTION SPECIFIC STYLES
* ------------------------------
* Configures the layout and styling for the introductory section of the about page.
*/
.about-section--intro {
  grid-template-columns: 1fr;
}

.about-section--intro__media {
  position: relative;
  max-width: 100%;
}

.about-section__body {
  max-width: 750px;
  margin-left: auto;
}

.about-section__body em {
  font-family: var(--THEME_FONT_HEADINGS);
  font-size: var(--font-lg);
  line-height: 1.7;
  letter-spacing: 0.025em;
  font-style: italic;
}

/* 
* PROFILE COMPONENT STYLES
* ------------------------------
* Defines the layout and structure for the profile section.
*/
.about-profile {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--about-section-gap);
}

.about-profile__media {
  position: relative;
  max-width: 700px;
}

.about-profile__image {
  width: 100%;
  height: auto;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

.about-profile__content {
  background-color: var(--about-content-bg);
  padding: 2rem;
}

.about-profile__title {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 400;
  font-size: var(--font-sm);
  margin: var(--about-title-spacing);
  font-family: var(--THEME_FONT_FAMILY);
}

.about-profile__divider {
  display: block;
  width: 60px;
  height: 3px;
  background: currentColor;
  margin: 2rem 0;
}

.about-profile__bio p + p {
  padding-top: 1.5rem;
}

/* 
* REVERSED PROFILE VARIATION
* ------------------------------
* Reverses the order of the content and media in profile section.
*/
.about-profile--reversed .about-profile__content {
  order: -1;
}

/* 
* DESKTOP LAYOUT STYLES
* ------------------------------
* Adjusts layout for large screens (above 70em).
*/
@media (min-width: 70em) {
  .about-section--intro {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  .about-profile {
    grid-template-columns: 1fr 1.5fr;
    align-items: center;
  }
  .about-profile--reversed {
    grid-template-columns: 1.5fr 1fr;
    background-color: #fff;
  }
  .about-profile__content {
    padding: 6rem;
    margin-left: var(--about-content-overlap);
  }
  .about-profile--reversed .about-profile__content {
    background-color: #fff;
  }
  .about-profile__body {
    max-width: 900px;
    padding-left: 4rem;
  }
  .about-profile__body > span {
    margin-bottom: 1.25rem;
  }
}
/* 
* MOBILE LAYOUT ADJUSTMENTS
* ------------------------------
* Specific adjustments for smaller screens (below 70em).
*/
@media (max-width: 70em) {
  .about-profile--reversed .about-profile__media {
    order: -1;
    padding: 1.5rem 1.5rem 0 1.5rem;
  }
  .about-profile__body {
    padding-left: 0;
  }
}/*# sourceMappingURL=main.css.map */




/* Dodaj SVG ikonicu preko CSS pseudo-elementa */
.footer-list-item {
  gap: 0.5ch;
}
.footer-list-item.ugovor::before {
  content: '';
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14,2 14,8 20,8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cpolyline points='10,9 9,9 8,9'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

/* Hover effect */
.footer-list-item.ugovor:hover::before {
  opacity: 1;
}

/* Alternative - using mask for better color control */
.footer-list-item.ugovor.use-mask::before {
  background-image: none;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14,2 14,8 20,8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cpolyline points='10,9 9,9 8,9'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
.copy-protected {
  font-size:0.75rem;
  max-width: 60ch;
  text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
  .footer-list-item.ugovor::before {
    width: 20px;
    height: 20px;
  }
  .copy-protected {
   margin-top: var(--theme-spacing-lg);
}

}