/*
Theme Name: Soccer Sports Club Pro
Theme URI: 
Author: Webnotick 
Author URI: www.Webnotick.com
Description: This is Soccer Sports Club theme. 
Version: 0.3
Requires at least: 5.1
Requires PHP: 5.6
Tested up to: 5.9
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: the-corporate-business
Tags: translation-ready, custom-background, theme-options, custom-menu, threaded-comments, featured-images, footer-widgets, left-sidebar, editor-style, right-sidebar, full-width-template, two-columns, three-columns, custom-colors, custom-header, custom-logo

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

The Corporate Business  is based on Underscores http://underscores.me/, (C) 2012-2016 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 http://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
    ## Links
    ## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
    ## Posts and pages
    ## Comments
# Infinite scroll
# Layouts and Titles
# Media
    ## Captions
    ## Galleries
# Social Icons
# Breadcrumb List
# Homepage Sections
    ## Featured Slider Section
    ## Featured  Section
    ## Featured type_of_work Section
    ## Featured Classes Section
    ## Featured Testimonial Section
    ## Latest Posts Section
# Footer
# Responsive

--------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
html {
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-weight: 400;
    background-color: #000;
}

/* ==========================================================================
   NORTHSIDE FC TYPOGRAPHY DESIGN SYSTEM
   ========================================================================== */

/* Import Google Fonts: Bebas Neue for Headings, Montserrat & Inter for Body/Nav */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600&family=Montserrat:wght@400;500;600;700;800&display=swap');

:root {
    /* Font Families */
    --font-heading: 'Bebas Neue', 'Anton', 'Oswald', sans-serif;
    --font-body: 'Montserrat', 'Inter', sans-serif;
    --font-alt-body: 'Inter', sans-serif;

    /* Font Weights */
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-ultra-bold: 800;

    /* Letter Spacings (Crucial for styling Bebas Neue & Montserrat) */
    --tracking-wide: 2px;
    --tracking-widest: 3.5px;
    --tracking-tight: 0.5px;
}

:root {
    --theme-color: var(--theme-color);
}
/* Hide Chrome, Edge, Safari scrollbar */
::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

/* Firefox */
html {
    scrollbar-width: none !important;
}

/* $text-color: #333 !default; // very dark grey */

.container-fluid {
    padding: 0 0;
}

#featured-legacy .container,
#featured-posts .container,
#colophon .container,
#featured-club .container,
#featured-contact .container,
#featured-mission .container,
#featured-team .container,
#featured-posts-news .container,
#featured-about .container {
    max-width: 100%;
}

#section-header .border-b-2 {
    border-bottom: 4px solid #000;
}

#content {
    position: relative;
    display: block;
}

#content .entry-content p {
    color: #000;
    margin: 30px 0px 30px;
}

#content .wp-block-details p {
    color: #A1A1A1;
    margin: 0px 30px;
}

.boxed-layout,
.frame-layout {
    background-color: #f6f6f6;
}

.boxed-layout #page {
    max-width: 1600px;
    width: 90%;
    margin: 0 auto;
    background-color: #fff;
}

.frame-layout #page {
    max-width: 1600px;
    width: 90%;
    margin: 50px auto;
    background-color: #1a1a1a;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
    display: block;
}

audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

[hidden],
template {
    display: none;
}

a {
    background-color: transparent;
}

abbr[title] {
    border-bottom: 1px dotted;
}

b,
strong {
    font-weight: bold;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    clear: both;
    color: #282828;
    margin: 16px 0;
    line-height: 1.3;
    font-weight: 400;
    font-family: var(--font-heading) !important;
}

mark {
    background: var(--theme-color);
    color: #111;
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

img {
    border: 0;
}

figure {
    margin: 1em 40px;
}

hr {
    box-sizing: content-box;
    height: 0;
}

pre {
    overflow: auto;
}

code,
kbd,
pre,
samp {
    font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}

button {
    overflow: visible;
}

button,
select {
    text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

button[disabled],
html input[disabled] {
    cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

input {
    line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

fieldset {
    border: 1px solid var(--theme-color);
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

legend {
    border: 0;
    padding: 0;
}

textarea {
    overflow: auto;
}

optgroup {
    font-weight: bold;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

#wp-calendar {
    display: table;
    width: 100%;
    margin-bottom: 0;
}

tbody {
    text-align: left;
}

td,
th {
    padding: 5px;
    font-weight: 400;
}

td#next {
    text-align: right;
}

.social-links a[href*="twitter.com"]:before {
    content: "\e61b";
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
textarea {
    color: #666;
    font-size: 16px;
    line-height: 28px;
    word-wrap: break-word;
    font-family: var(--font-body) !important;
}

p {
    margin: 0 0 1em;
    font-family: var(--font-body);
}

p:last-child {
    margin-bottom: 0;
}

blockquote {
    margin: 0 1.5em;
}

address {
    margin: 0 0 1.5em;
}

.md-0 {
    margin: 0 0;
}

.pd-0 {
    padding: 0 0;
}

pre {
    background: #f6f6f6;
    font-size: 15px;
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1.6em;
}

code,
kbd,
tt,
var {
    font-size: 15px;
    font-size: 0.9375rem;
}

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

mark {
    background: #fff9c0;
}

big {
    font-size: 125%;
}

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

*,
*:before,
*:after {
    /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
    box-sizing: inherit;
}

body {
    background: #fff;
    /* Fallback for when there is no custom background color defined. */
    overflow-x: hidden;
    counter-reset: my-sec-counter;
}

blockquote {
    font-size: 18px;
    line-height: 35px;
    position: relative;
    margin: 0;
}

blockquote.alignright {
    padding-right: 0;
    margin-bottom: 14px;
}

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

ul,
ol {
    margin: 0;
    padding-left: 1.5em;
}

ul {
    list-style: disc;
}

ol {
    list-style: decimal;
}

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

dt {
    font-weight: bold;
    margin-bottom: 1em;
}

dd {
    margin: 0 1.5em 1.5em;
}

img {
    height: auto;
    /* Make sure images are scaled correctly. */
    max-width: 100%;
    /* Adhere to container width. */
    vertical-align: middle;
}

figure {
    margin: 0;
    /* Extra wide images within figure tags don't overflow the content area. */
}

table {
    margin: 0 0 1.5em;
    width: 100%;
    display: inline-block;
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    background: var(--theme-color);
    /* box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; */
    border-radius: 0;
    padding: 10px 45px;
    /* margin: 5px 0 5px 0px; */
    text-align: center;
    position: relative;
    display: inline-block;
    transition: 0.5s;
    color: #fff;
    transition: all 0.5s ease-in-out;
    border: none;
    font-weight: 300;
    font-size: 18px;
    letter-spacing: 0.59px;
    text-transform: uppercase;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
    color: #fff;
    background-color: var(--theme-color);
    border-color: var(--theme-color);
    text-decoration: none;
}

button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
    color: #fff;
    border-color: var(--theme-color);
    outline: thin dotted;
    text-decoration: none;
}

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 {
    color: #000;
    border: 1px solid var(--theme-color);
    background-color: #fff;
    padding: 12px;
    width: 100%;
}

select {
    border: 1px solid var(--theme-color);
}

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: #333;
    outline: thin dotted;
}

textarea {
    width: 100%;
}

#respond input[type="checkbox"] {
    min-height: auto;
    height: auto;
    float: left;
    margin-right: 10px;
    width: auto;
}

#respond .comment-form-cookies-consent label {
    display: table;
    margin: 0;
    line-height: 1;
}

#commentform .comment-form-cookies-consent {
    clear: both;
    display: inline-block;
    width: 100%;
    margin-top: 25px;
    margin-bottom: 0;
}

p.form-submit {
    clear: both;
    display: inline-block;
    position: relative;
}

.comment-notes {
    font-size: 14px;
    margin-top: 0;
}

#respond label {
    margin-bottom: 15px;
    display: block;
    color: #3f536d;
    font-weight: 500;
}

#respond input[type="text"],
#respond input[type="email"],
#respond input[type="url"] {
    width: 100%;
}

#commentform p {
    margin-bottom: 21px;
}

#commentform p.comment-form-comment {
    margin-bottom: 0;
}

#commentform p.form-submit {
    margin: 21px 0 0;
}

#comments {
    margin-top: 35px;
}

#respond {
    margin-top: 35px;
    /* box-shadow: 0px 3px 22px 0px #00000029; */
    padding: 15px;
}

.single-service #respond,
.single-project #respond {
    display: none;
}

.logged-in-as a {
    color: #01549a;
    text-decoration: none;
}

.logged-in-as a:hover,
.logged-in-as a:focus {
    color: #fdc401;
}

.required {
    color: #ff0000;
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/


@media (min-width: 1200px) {
    ul.mainmenu li ul.sub-menu.open {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(-50%) translateY(0) !important;
    }
}


/* ==========================================================================
   NORTHSIDE FC HEADER — EXACT MATCH TO DESIGN IMAGE
   Fixed header overlaid on the hero slider
   ========================================================================== */

/* ==========================================================================
   NORTHSIDE FC HEADER — COMPLETE TYPOGRAPHY & LAYOUT SYSTEM
   ========================================================================== */

/* Import Google Fonts: Bebas Neue for Headings, Montserrat & Inter for Body/Nav */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600&family=Montserrat:wght@400;500;600;700;800&display=swap');



/* ==========================================================================
   1. GLOBAL HEADER STRUCTURE (OVERLAID ON SLIDER)
   ========================================================================== */
#section-header {
    position: absolute;
    top: 6% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    width: 100% !important;
}

#featured-slider {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ==========================================================================
   2. BOTTOM HEADER ROW 
   ========================================================================== */
.bottomheader {
    padding: 0 !important;
    width: 100% !important;
}

.bottomheader .row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin: 0 !important;
    gap: 12% !important;
    position: relative !important;
    min-height: 80px !important;
}

/* ==========================================================================
   3. LOGO COLUMN — LEFT SIDE
   ========================================================================== */
.col-xl-3.col-lg-3.pd-0 {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 40px 0 32px !important;
    z-index: 5 !important;
}

.site-branding {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.site-logo img {
    max-height: 65px !important;
    width: auto !important;
    display: block !important;
}

#site-identity .site-title a {
    font-family: var(--font-heading) !important;
    font-weight: var(--weight-normal) !important;
    /* Bebas Neue natively stylized thick */
    text-transform: uppercase !important;
    color: #111111;
    letter-spacing: var(--tracking-wide) !important;
    text-decoration: none !important;
    font-size: 26px !important;
    /* Bumped slightly to balance condensed height */
    line-height: 1.05 !important;
    display: block !important;
}

#site-identity .site-description {
    font-family: var(--font-body) !important;
    font-size: 9px !important;
    text-transform: uppercase !important;
    color: #888888 !important;
    letter-spacing: 2.5px !important;
    margin: 3px 0 0 0 !important;
    font-weight: var(--weight-semibold) !important;
}

/* ==========================================================================
   4. NAVIGATION COLUMN CONTAINER
   ========================================================================== */
.col-xl-9.col-lg-9.pd-0 {
    display: flex !important;
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    align-items: center !important;
}

.header-nav {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    justify-content: space-between !important;
}

.main-navigation {
    width: 100% !important;
}

/* ==========================================================================
   5. DESKTOP MAIN NAVIGATION LINKS
   ========================================================================== */
ul.mainmenu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 80px 0 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6% !important;
    width: 100% !important;
    position: relative !important;
}

ul.mainmenu>li {
    position: relative !important;
    display: inline-flex !important;
    white-space: nowrap;
}

ul.mainmenu>li>a {
    display: block !important;
    font-family: var(--font-body) !important;
    font-size: 12px !important;
    font-weight: var(--weight-bold) !important;
    text-transform: uppercase !important;
    color: #111111;
    text-decoration: none !important;
    padding: 30px 0 !important;
    letter-spacing: 0.8px !important;
    transition: color 0.25s ease !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

ul.mainmenu>li>a:hover {
    color: var(--theme-color);
    text-decoration: none !important;
}

/* ==========================================================================
   6. ACTIVE DOT INDICATORS (DESKTOP)
   ========================================================================== */
ul.mainmenu>li.current-menu-item>a,
ul.mainmenu>li.current_page_item>a,
ul.mainmenu>li.current-menu-ancestor>a {
    color: #111111;
}

ul.mainmenu>li.current-menu-item>a::after,
ul.mainmenu>li.current_page_item>a::after,
ul.mainmenu>li.current-menu-ancestor>a::after {
    content: '' !important;
    position: absolute !important;
    bottom: 16px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 5px !important;
    height: 5px !important;
    background-color: var(--theme-color);
    border-radius: 50% !important;
    display: block !important;
}

ul.mainmenu>li:last-child>a::after,
ul.mainmenu>li:last-child.current-menu-item>a::after,
ul.mainmenu>li:last-child.current_page_item>a::after {
    display: none !important;
}

/* ==========================================================================
   7. TICKETS / CTA PILL BUTTON
   ========================================================================== */
ul.mainmenu>li:last-child {
    margin-left: auto !important;
    flex-shrink: 0 !important;
}

ul.mainmenu>li:last-child>a {
    font-family: var(--font-body) !important;
    background-color: #f5f3ee;
    color: #111111;
    border: 1.5px solid var(--theme-color);
    border-radius: 30px !important;
    padding: 12px 22px !important;
    font-size: 11px !important;
    font-weight: var(--weight-ultra-bold) !important;
    letter-spacing: 1px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
}

ul.mainmenu>li:last-child>a:hover {
    background-color: var(--theme-color);
    color: #0b0e14;
    border-color: var(--theme-color);
}

/* ==========================================================================
   8. HAMBURGER TOGGLE BUTTON — HIDDEN BY DEFAULT ON DESKTOP
   ========================================================================== */
.menu-toggle {
    display: none;
    background: #1c2224;
    border: none !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
    transition: background 0.2s ease !important;
    padding: 0 !important;
    outline: none !important;
}

.menu-toggle:hover {
    background: #2d3a3e;
}

.menu-toggle .icon-bar {
    display: block !important;
    width: 18px !important;
    height: 2px !important;
    background-color: #ffffff;
    border-radius: 1px !important;
    position: absolute !important;
    left: 13px !important;
    transition: all 0.3s ease !important;
}

.menu-toggle .icon-bar:nth-child(1) {
    top: 16px !important;
}

.menu-toggle .icon-bar:nth-child(2) {
    top: 21px !important;
}

.menu-toggle .icon-bar:nth-child(3) {
    top: 26px !important;
}

/* Open State (Animated 'X') */
.menu-toggle.open .icon-bar:nth-child(1) {
    transform: rotate(45deg) !important;
    top: 21px !important;
}

.menu-toggle.open .icon-bar:nth-child(2) {
    opacity: 0 !important;
}

.menu-toggle.open .icon-bar:nth-child(3) {
    transform: rotate(-45deg) !important;
    top: 21px !important;
}

/* ==========================================================================
   9. DESKTOP DROPDOWN SUBMENU
   ========================================================================== */
ul.mainmenu li ul.sub-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    background-color: #ffffff;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    padding: 8px 0;
    min-width: 200px;
    border-radius: 4px;
    list-style: none;
    margin: 0 !important;
    opacity: 0 !important;
    visibility: hidden;
    transition: all 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 999;
    border: 1px solid #eeeeee;
}

ul.mainmenu li:hover>ul.sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0);
}

ul.mainmenu li ul.sub-menu li {
    display: block !important;
    width: 100% !important;
}

ul.mainmenu li ul.sub-menu li a {
    display: block !important;
    padding: 10px 20px !important;
    color: #333333;
    font-family: var(--font-body) !important;
    font-size: 11px !important;
    font-weight: var(--weight-bold) !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    letter-spacing: 0.5px !important;
    transition: background 0.2s, color 0.2s !important;
}

ul.mainmenu li ul.sub-menu li a:hover {
    background-color: #f7f6f4;
    color: var(--theme-color);
}

ul.mainmenu>li>button {
    color: #111111;
    background-color: transparent !important;
    transition: color 0.25s ease !important;
    /* Smooth color transition matching link behavior */
}

/* New behavior: when the parent 'li' or the 'a' link itself is hovered, change the button color */
ul.mainmenu>li:hover>button,
ul.mainmenu>li>a:hover+button,
ul.mainmenu>li>button:hover {
    background-color: transparent !important;
    color: var(--theme-color);
}

/* ==========================================================================
   10. MOBILE RESPONSIVE LAYOUT (BELOW 1199px)
   ========================================================================== */
@media (max-width: 1199px) {

    /* Toggle button structural viewport positioning overrides */
    button.menu-toggle,
    .menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed !important;
        right: 42px !important;
        top: 60px !important;
        z-index: 9999999 !important;
    }

    .bottomheader .row {
        gap: 0 !important;
        position: relative !important;
        min-height: 68px !important;
    }

    .col-xl-3.col-lg-3.pd-0 {
        max-width: 75% !important;
    }

    .col-xl-9.col-lg-9.pd-0 {
        display: block !important;
        margin-left: 0 !important;
    }

    /* Hides desktop row rules */
    ul.mainmenu {
        display: none !important;
    }

    /* Side drawer menu canvas wrapper */
    .main-navigation {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        width: 65% !important;
        height: 100% !important;
        background-color: #ffffff;
        box-shadow: -5px 0 30px rgba(0, 0, 0, 0.12) !important;
        padding: 90px 24px 40px 24px !important;
        transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
        overflow-y: auto !important;
        z-index: 999990 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        display: block !important;
    }

    ul.mainmenu>li {
        display: contents !important;
        position: relative !important;
    }

    ul.mainmenu>li>button {
        display: none;
    }

    /* Dropdown arrow */
    ul.mainmenu>li.menu-item-has-children>a {
        position: relative !important;
    }

    ul.mainmenu>li.menu-item-has-children>a::after {
        content: "";
        display: inline-block;
        position: absolute;
        right: 9px;
        top: 19px;
        width: 8px;
        height: 8px;
        margin-left: 7px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transform-origin: center;
        vertical-align: 3px;
        transition: transform 0.3s ease;
    }

    /* Rotate arrow when dropdown is open/hovered */
    ul.mainmenu>li.menu-item-has-children:hover>a::after {
        transform: rotate(225deg);
    }

    /* Drawer Active State rules */
    .main-navigation.toggled-open {
        left: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
    }

    .main-navigation.toggled-open ul.mainmenu {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0 !important;
        width: 100% !important;
        padding: 0 !important;
        justify-content: flex-start !important;
    }

    .main-navigation.toggled-open ul.mainmenu>li {
        width: 100% !important;
        border-bottom: 1px solid #eeeeee;
    }

    .main-navigation.toggled-open ul.mainmenu>li>a {
        font-family: var(--font-body) !important;
        padding: 16px 0 !important;
        font-size: 13px !important;
        width: 100% !important;
    }

    /* Active indicator mobile rules */
    .main-navigation.toggled-open ul.mainmenu>li.current-menu-item>a::after,
    .main-navigation.toggled-open ul.mainmenu>li.current_page_item>a::after {
        bottom: 16px !important;
        left: auto !important;
        right: 10px !important;
        transform: none !important;
    }

    /* Mobile CTA layout configurations */
    .main-navigation.toggled-open ul.mainmenu>li:last-child {
        margin-left: 0 !important;
        margin-top: 28px !important;
        border-bottom: none !important;
    }

    .main-navigation.toggled-open ul.mainmenu>li:last-child>a {
        font-family: var(--font-body) !important;
        background-color: transparent !important;
        color: #111111;
        border: 1.5px solid var(--theme-color);
        border-radius: 30px !important;
        padding: 9px 22px !important;
        font-size: 11px !important;
        font-weight: var(--weight-ultra-bold) !important;
        letter-spacing: 1px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        transition: all 0.3s ease !important;
        white-space: nowrap !important;
        justify-content: center !important;
    }

    .main-navigation.toggled-open ul.mainmenu>li:last-child>a:hover {
        background-color: var(--theme-color);
        color: #ffffff;
        border-color: var(--theme-color);
    }

    ul.mainmenu>li>a {
        width: 100%;
    }

    /* Mobile Context Submenus Dropdowns styles */
    ul.mainmenu li ul.sub-menu {
        position: relative !important;
        top: 100% !important;
        left: 0% !important;
        transform: translateX(0%) translateY(0px) !important;
        background-color: #ffffff;
        box-shadow: none;
        padding: 8px 0 !important;
        min-width: 100% !important;
        max-width: 100% !important;
        border-radius: 4px !important;
        list-style: none !important;
        margin: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: all 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
        z-index: 999 !important;

    }

    ul.mainmenu li ul.sub-menu li a {
        font-family: var(--font-body) !important;
        padding: 12px 20px !important;
        text-align: left !important;
    }

    body.menu-lock-scroll {
        overflow: hidden !important;
    }
}

/* ==========================================================================
   11. SMALL SMARTPHONES BREAKPOINT (BELOW 575px)
   ========================================================================== */
@media (max-width: 575px) {
    .col-xl-3.col-lg-3.pd-0 {
        padding: 10px 24px 10px 16px !important;
    }

    .site-logo img {
        max-height: 40px !important;
    }

    #site-identity .site-title a {
        font-size: 22px !important;
        /* Rescaled scaling bounds smoothly */
    }

    button.menu-toggle,
    .menu-toggle {
        right: 42px !important;
        top: 60px !important;
    }
}





/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a {
    color: #c42118;
    text-decoration: underline;
}

/* a:hover,
a:focus,
a:active {
    color: #000;
} */

a:focus {
    outline: thin dotted;
}


.widget_address_block ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.widget_address_block ul li {
    display: inline-block;
}

.widget_address_block ul li i {
    margin-right: 8px;
}


.md-0 {
    padding: 0 0;
    margin: 0 0;
}

.pd-0 {
    padding: 0 0;
}


.social-links a:before {
    content: "\f1d0";
}

.social-links a[href*="facebook.com"]:before,
.social-links a[href*="fb.com"]:before {
    content: "\f39e";
}

.social-links a[href*="twitter.com"]:before {
    content: "\e61b";
}

.social-links a[href*="linkedin.com"]:before {
    content: "\f0e1";
}

.social-links a[href*="plus.google.com"]:before {
    content: "\f0d5";
}

.social-links a[href*="youtube.com"]:before {
    content: "\f167";
}

.social-links a[href*="dribbble.com"]:before {
    content: "\f17d";
}

.social-links a[href*="pinterest.com"]:before {
    content: "\f231";
}

.social-links a[href*="bitbucket.org"]:before {
    content: "\f171";
}

.social-links a[href*="github.com"]:before {
    content: "\f113";
}

.social-links a[href*="codepen.io"]:before {
    content: "\f1cb";
}

.social-links a[href*="flickr.com"]:before {
    content: "\f16e";
}

.social-links a[href$="/feed/"]:before {
    content: "\f09e";
}

.social-links a[href*="foursquare.com"]:before {
    content: "\f180";
}

.social-links a[href*="instagram.com"]:before {
    content: "\f16d";
}

.social-links a[href*="tumblr.com"]:before {
    content: "\f173";
}

.social-links a[href*="reddit.com"]:before {
    content: "\f1a1";
}

.social-links a[href*="vimeo.com"]:before {
    content: "\f194";
}

.social-links a[href*="digg.com"]:before {
    content: "\f1a6";
}

.social-links a[href*="twitch.tv"]:before {
    content: "\f1e8";
}

.social-links a[href*="stumbleupon.com"]:before {
    content: "\f1a4";
}

.social-links a[href*="delicious.com"]:before {
    content: "\f1a5";
}

.social-links a[href*="mailto:"]:before {
    content: "\f0e0";
}

.social-links a[href*="soundcloud.com"]:before {
    content: "\f1be";
}

.social-links a[href*="wordpress.org"]:before {
    content: "\f19a";
}

.social-links a[href*="wordpress.com"]:before {
    content: "\f19a";
}

.social-links a[href*="jsfiddle.net"]:before {
    content: "\f1cc";
}

.social-links a[href*="tripadvisor.com"]:before {
    content: "\f262";
}

.social-links a[href*="foursquare.com"]:before {
    content: "\f180";
}

.social-links a[href*="angel.co"]:before {
    content: "\f209";
}

.social-links a[href*="slack.com"]:before {
    content: "\f198";
}

.social-links a[href*="tiktok.com"]:before {
    content: "\e07b";
}


form.search-form {
    width: 90%;
    max-width: 100%;
    position: relative;
    padding: 0px 17px 10px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-navigation form.search-form {
    min-width: 320px;
}

input.search-field {
    height: 45px;
    padding: 0 50px 0 15px;
    width: 100%;
}


.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
    float: left;
    /* width: 50%; */
    position: relative;
    text-align: left;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
    float: right;
    text-align: right;
    /* width: 50%; */
    position: relative;
}

.post-navigation a,
.posts-navigation a {
    background: #C8DCEC;
    padding: 0px 10px;
    width: fit-content;
    font-weight: 400;
    display: block;
    color: #000;
    text-decoration: none;
}

.post-navigation a:hover,
.posts-navigation a:hover,
.post-navigation a:focus,
.posts-navigation a:focus {
    color: #3f536d;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.35) 0px -1px 10px;
    transition: all 0.3s ease-in-out;
}

.post-navigation,
.posts-navigation {
    padding: 0;
    position: relative;
}


.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
}

.pagination .page-numbers,
.pagination .page-numbers.dots:hover,
.pagination .page-numbers.dots:focus {
    text-align: center;
    line-height: 35px;
    width: 35px;
    height: 35px;
    display: inline-block;
    margin-right: 5px;
    color: #fff;
    background-color: #01549a;
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover,
.pagination .page-numbers:focus {
    color: #fff;
    background-color: #fdc401;
}

.pagination .page-numbers.prev,
.pagination .page-numbers.next {
    margin-right: 25px;
    width: auto;
    height: auto;
    position: relative;
    top: 2px;
    background-color: transparent;
    color: #000;
}

.pagination .page-numbers.prev:hover,
.pagination .page-numbers.next:hover,
.pagination .page-numbers.prev:focus,
.pagination .page-numbers.next:focus {
    color: #111;
    background-color: transparent;
}

.pagination .page-numbers.next {
    margin-left: 18px;
    margin-right: 0;
    background-color: transparent;
}

.nav-previous span {
    padding-left: 11px;
    float: left;
    text-align: left;
}

.nav-next span {
    padding-right: 11px;
    float: right;
    text-align: right;
}

.post-navigation span,
.posts-navigation span {
    display: table;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    word-wrap: normal !important;
    /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.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;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
    /* Above WP toolbar. */
}

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

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
    display: inline;
    float: left;
    margin-right: 1.5em;
}

.alignright {
    display: inline;
    float: right;
    margin-left: 1.5em;
}

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

/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after,
.footer-widgets-area:before,
.footer-widgets-area:after,
.wrapper:before,
.wrapper:after {
    content: "";
    display: table;
    table-layout: fixed;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after,
.footer-widgets-area:before,
.footer-widgets-area:after,
.wrapper:before,
.wrapper:after {
    clear: both;
}

/*------------------------------------------------------------
Not Found Page
--------------------------------------------------------------*/
#main .no-results {
    text-align: center;
}

#main .no-results form {
    width: 25%;
    max-width: 100%;
    position: relative;
    padding: 0px 17px 10px 0px;
    display: inline-block;
}

#main .no-results form label {
    display: block;
}

#main .no-results form .search-submit {
    height: 45px;
    line-height: 30px;
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    width: 45px;
    padding: 0;
    background: var(--theme-color);
    color: #fff;
}

#primary ul li a,
#secondary ul li a {
    text-decoration: none;
    border-bottom: none;
    font-weight: 400;
    font-size: 16px;
}

.edit-link {
    display: none;
}

/* Widgets End */



form.search-form button.search-submit {
    height: 45px;
    line-height: 30px;
    position: absolute;
    right: 0;
    top: 0;
    border: none;
    width: 45px;
    padding: 0;
    background: var(--theme-color);
    color: #fff;
}



form.search-form {
    position: relative;
}

form.search-form input {
    width: 100%;
    padding: 0 40px 0 15px;
    font-weight: 300;
    color: #3f536d;
    font-weight: 500;
    text-transform: uppercase;
}

#wp-calendar tbody td {
    text-align: center;
}

#wp-calendar caption {
    margin-bottom: 15px;
    font-weight: 600;
}


.wpcf7-spinner {
    display: none;
}

.wpcf7 form .wpcf7-response-output {
    margin: 0.5em 0.5em 1em;
}

.widget li {
    margin-bottom: 10px;
}

.widget .menu {
    width: 96%;
    padding-left: 19px;
}

#primary ul li a:hover,
#secondary ul li a:hover,
#primary ul li a:focus,
#secondary ul li a:focus {
    border-bottom-color: #fff;
}




#recent-comments-2 li span a::after {
    display: none;
}

#recent-comments-2 li span a::before {
    display: inline-block !important;
}

#recent-comments-2 li a::before {
    display: none !important;
}

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
.sticky {
    display: block;
}

.hentry {
    margin: 0;
}

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

.single .byline,
.group-blog .byline {
    display: inline;
}

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

.author img {
    display: block;
    text-align: center;
    /* margin: 20px auto; */
}

.page-header span.posted-on {
    margin-bottom: 12px;
    display: inline-block;
    width: 100%;
}

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

.page-header span.author-name {
    display: block;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    color: #111;
}

.page-header small {
    font-size: 12px;
    color: #c42118;
}

nav.navigation.pagination {
    margin-top: 50px;
    clear: both;
    display: inline-block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.posts-wrapper.col-3 article:nth-child(3n) {
    border-right: 1px solid #e4e4e4;
}

.post-categories a {
    color: #c42118;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: bold;
}

.archive-description {
    color: #fff;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.tags-links {
    margin-bottom: 20px;
    display: inline-block;
}

.tags-links span {
    margin: 0 8px 8px 0;
}

.tags-links span.fw-bold {
    color: var(--theme-color);
}

.tags-links a {
    background: white;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 3px 0px;
    border-radius: 0;
    padding: 8px 10px;
    margin: 0px 0 8px 8px;
    text-align: center;
    position: relative;
    display: inline-block;
    transition: 0.5s;
    color: #c19a5b;
    transition: all 0.5s ease-in-out;
    border: none;
    font-weight: 400;
}

.tags-links a:hover,
.tags-links a:focus {
    border-color: #c19a5b;
    background-color: white;
    color: #fff;
}

.socialMedia {
    float: right;
}

.socialMedia ul li {
    display: inline-block;
    position: relative;
    margin-bottom: 0 !important;
    padding: 4px 10px !important;
    border: 1px solid;
    border-color: #3f536d;
    border-radius: 50%;
    margin-right: 10px;
    color: #3f536d;
    background-color: transparent;
    transition: all ease 0.5s;
    font-size: 18px;
}

#primary .socialMedia ul li a.blgsmedia {
    font-size: 18px;
    color: #3f536d;
    line-height: 0;
}

#primary .socialMedia ul li:hover a.blgsmedia {
    color: #c19a5b;
}

.socialMedia ul li:hover {
    background-color: transparent;
    border-color: var(--theme-color);
    /* transform: scale(-20px); */
    transition: all ease 0.5s;
    transform: scale(1.1);
}

.single .date a:before,
.entry-meta .author a:before,
.comments-link a:before {
    content: "\f017";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 5px;
    color: #c19a5b;
}

.entry-meta .author a:before {
    content: "\f007";
}

.comments-link a:before {
    content: "\f086";
}

.single .date a:before {
    content: "\f017";
}

.cat-links a:before {
    content: "\f02c";
    font-weight: 600;
    font-family: 'Font Awesome 5 Free';
    color: #01549a;
    margin-right: 5px;
}

.entry-meta a,
.entry-meta span:before,
.entry-meta .author:before {
    color: #000;
    text-decoration: none;
    font-weight: 300;
}

.entry-meta a:hover,
.entry-meta a:focus {
    color: #3f536d;
}

.entry-meta {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 0;
    text-decoration: none;
    border-bottom: 1px solid #00000050;
}

.author.vcard {
    margin-left: 5px;
}

.byline {
    visibility: hidden;
}

.byline .author.vcard {
    visibility: visible;
    margin-left: -20px;
}

.single-post .site-main .comment-navigation,
.single-post .site-main .posts-navigation,
.single-post .site-main .post-navigation {
    margin-bottom: 0;
}

.navigation.post-navigation,
.navigation.posts-navigation {
    padding: 10px;
    margin-top: 35px;
}

.post-navigation .previous-article span span,
.posts-navigation .previous-article span span,
.post-navigation .next-article span span,
.posts-navigation .next-article span span {
    display: block;
}

.post-navigation span.previous-article b,
.post-navigations span.previous-article b,
.post-navigation span.next-article b,
.post-navigations span.next-article b {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 10px;
    display: inline-block;
    width: 100%;
}

.post-navigation span.previous-article,
.post-navigations span.previous-article {
    display: table;
}

.error-404.not-found {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.error404 #page-site-header {
    display: none !important;
}

.error404 .section-gap {
    padding: 9em 0;
}

.error-404.not-found .page-title {
    font-size: 38px;
}

.error-404.not-found .page-content p {
    color: #01549a;
    font-weight: 400;
}

.error-404.not-found .error-404title {
    color: #fff;
    font-size: 195px;
    text-align: center;
    display: block;
    animation: effect linear 1900ms infinite;
    font-weight: 600;
    margin-bottom: 15px;
    line-height: 240px;
}

@keyframes effect {
    0% {
        text-shadow: 4px -4px 0 #01549A, 3px -3px 0 #01549A,
            2px -2px 0 #01549A, 1px -1px 0 #01549A,
            -4px 4px 0 #01549A, -3px 3px 0 #01549A,
            -2px 2px 0 #01549A, -1px 1px 0 #01549A;
    }

    25% {
        text-shadow: -4px -4px 0 #01549A, -3px -3px 0 #01549A,
            -2px -2px 0 #01549A, -1px -1px 0 #01549A,
            4px 4px 0 #01549A, 3px 3px 0 #01549A,
            2px 2px 0 #01549A, 1px 1px 0 #01549A;
    }

    50% {
        text-shadow: -4px 4px 0 #01549a, -3px 3px 0 #01549a,
            -2px 2px 0 #01549a, -1px 1px 0 #01549a,
            4px -4px 0 #01549a, 3px -3px 0 #01549a,
            2px -2px 0 #01549a, 1px -1px 0 #01549a;
    }

    75% {
        text-shadow:
            4px 4px 0 #01549a, 3px 3px 0 #01549a,
            2px 2px 0 #01549a, 1px 1px 0 #01549a,
            -4px -4px 0 #01549a, -3px -3px 0 #01549a,
            -2px -2px 0 #01549a, -1px -1px 0 #01549a;
    }

    100% {
        text-shadow:
            4px -4px 0 #01549a, 3px -3px 0 #01549a,
            2px -2px 0 #01549a, 1px -1px 0 #01549a,
            -4px 4px 0 #01549a, -3px 3px 0 #01549a,
            -2px 2px 0 #01549a, -1px 1px 0 #01549a;
    }
}

.page404 .site-main {
    padding-top: 15%;
}

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

.bypostauthor {
    display: block;
}

#reply-title,
.comments-title {
    font-size: 42px;
    margin: 0;
}

.comments-title,
#reply-title {
    margin-bottom: 30px;
    font-size: 32px;
    font-weight: 600;
    color: #111000;
}

.comments-title {
    margin: 0 !important;
}

#cancel-comment-reply-link {
    float: right;
}

ul.post-categories li:after {
    content: ",";
}

ul.post-categories li:last-child:after {
    display: none;
}

ol.comment-list {
    padding: 0;
    margin: 0 0 30px;
    list-style: none;
}

#comments ol {
    list-style: none;
    margin-left: 0;
    padding: 0;
}

#comments ol.comment-list {
    padding-top: 35px;
    position: relative;
    overflow: hidden;
}

#comments ol.children {
    margin-left: 120px;
}

.says {
    display: none;
}

.comment-meta img {
    width: 60px;
    height: 60px;
    float: left;
    margin-right: 20px;
}

#comments time:before {
    display: none;
}

.comment-body {
    position: relative;
}

.reply {
    text-align: right;
}

#comments article {
    margin-bottom: 30px;
    clear: both;
    padding: 30px;
    background-color: #f6f6f6;
    text-decoration: none;
    /* border-radius: 25px; */
    border: 1px solid #01549a;
}

#comments ol.comment-list>li {
    padding-top: 49px;
}

#comments ol.comment-list>li:first-child {
    padding-top: 0;
}

#comments ol.comment-list>li article:last-child .reply {
    border-bottom: none;
    padding-bottom: 0;
}

.reply a {
    color: #000;
    display: inline-block;
    font-weight: 400;
    padding: 7px 30px;
    position: relative;
    background-color: #C8DCEC;
    border: 2px solid #C8DCEC;
    border-radius: 50px;
    text-decoration: none;
    z-index: 1;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.reply a:hover,
.reply a:focus {
    color: #000;
    background-color: #fdc401;
    border-color: #fdc401;
}

.comment-meta .url,
.comment-meta .fn {
    display: inline-block;
    color: #01549a;
    font-size: 25px;
    text-decoration: none;
    text-transform: capitalize;
}

.comment-meta .url:hover,
.comment-meta .url:focus {
    color: #fdc401;
}

.comment-metadata a,
.comment-metadata a time {
    color: #01549a;
    text-decoration: none;
}

.comment-metadata a:hover,
.comment-metadata a:focus,
.comment-metadata a:hover time,
.comment-metadata a:focus time {
    color: #000;
}

.comment-metadata time {
    font-weight: 500;
}

.comment-metadata {
    display: block;
    margin-bottom: 15px;
}

.comment-content {
    margin-bottom: 10px;
    margin-top: 0;
    padding-left: 80px;
}

.comment-content p {
    font-weight: 400;
    margin-bottom: 1em;
    color: #A1A1A1;
    font-size: 16px;
    line-height: 1.6;
}

/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation,
/* Older / Newer Posts Navigation (always hidden) */
.infinite-scroll.neverending .site-footer {
    /* Theme Footer (when set to scrolling) */
    display: none;
}

/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer {
    display: block;
}

/*--------------------------------------------------------------
# Layouts and titles
--------------------------------------------------------------*/

section {
    position: relative;
    overflow: hidden;
}

.title-section {
    /* text-align: center; */
    margin-bottom: 3em;
    display: flex;
    /* align-items: center; */
    position: relative;
    z-index: 2;
}

.title-section h1 {
    margin: 0;
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: 1px;
    color: #000000;
    border-radius: 0px;
}

.entry-content {
    margin-top: 0;
    position: relative;
    z-index: 1;
}


.wrapper {
    width: 90%;
    max-width: 1430px;
    margin: 0 auto;
    padding-left: 15px;
}

.entry-title,
.section-title {
    font-size: 22px;
    margin: 0 0 6px;
    font-weight: 700;
    word-wrap: break-word;
}

.section-title {
    font-size: 32px;
    margin: 0 0 15px;
    color: #000;
}

.section-subtitle {
    max-width: 600px;
    margin: 0 auto;
}

.entry-title a {
    color: #000;
    text-decoration: none;
    font-size: 33px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.entry-title a:hover,
.entry-title a:focus {
    color: #c42118;
}

.post-thumbnail-link {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.align-left {
    text-align: left;
}

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

.align-right {
    text-align: right;
}

.btn {
    color: #fff;
    display: inline-block;
    font-weight: 600;
    padding: 8px 25px;
    border-radius: 7px;
    font-size: 21px;
    position: relative;
    text-decoration: none;
    z-index: 1;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.btn:hover,
.btn:focus {
    color: #fff;
    background-color: #000;
    border-color: #000;
}

.btn i {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}

.featured-image {
    position: relative;
}

.col-1 article,
.col-2 article,
.col-3 article,
.col-4 article,
.col-5 article,
.col-6 article {
    margin-bottom: 30px;
    width: 100%;
}

.col-1 article:last-child,
.col-2 article:last-child,
.col-3 article:last-child,
.col-4 article:last-child,
.col-5 article:last-child,
.col-6 article:last-child {
    margin-bottom: 0;
}

/*--------------------------------------------------------------
# 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 embeds and iframes fit their containers. */
embed,
iframe,
object {
    max-width: 100%;
}

/*--------------------------------------------------------------
## 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;
}

/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.type_of_work {
    margin: -4px;
}

.type_of_work-item {
    display: inline-block;
    text-align: center;
    vertical-align: top;
    width: 100%;
    padding: 4px;
}

.type_of_work-columns-2 .type_of_work-item {
    max-width: 50%;
}

.type_of_work-columns-3 .type_of_work-item {
    max-width: 33.33%;
}

.type_of_work-columns-4 .type_of_work-item {
    max-width: 25%;
}

.type_of_work-columns-5 .type_of_work-item {
    max-width: 20%;
}

.type_of_work-columns-6 .type_of_work-item {
    max-width: 16.66%;
}

.type_of_work-columns-7 .type_of_work-item {
    max-width: 14.28%;
}

.type_of_work-columns-8 .type_of_work-item {
    max-width: 12.5%;
}

.type_of_work-columns-9 .type_of_work-item {
    max-width: 11.11%;
}

.type_of_work-caption {
    display: block;
}

/*--------------------------------------------------------------
## Social Icons
--------------------------------------------------------------*/
.social-icons li {
    display: inline-block;
    height: auto;
    text-align: center;
    position: relative;
    list-style: none;
}

.footer-widgets-area .widget .social-icons li {
    display: inline-block;
    width: auto;
}

.social-icons li:not(:last-child) {
    margin-right: 5px;
}

.social-icons,
.social-icons ul {
    margin: 0;
    padding: 0;
}

.social-icons li a {
    background-color: transparent;
    width: 40px;
    height: 40px;
    line-height: 40px;
    display: block;
}

/*--------------------------------------------------------------
## Social Icons
--------------------------------------------------------------*/
ul.social-icons {
    margin: 0;
    padding: 0;
}

.social-icons li {
    width: 40px;
    height: auto;
    text-align: center;
    line-height: 40px;
    position: relative;
    list-style: none;
}

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

.social-icons li:not(:last-child) {
    margin-right: 10px;
}

.social-icons li a {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    color: #fff;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    font-family: "Font Awesome 5 Brands";
}

.social-icons li a:hover,
.social-icons li a:focus {
    color: #fff;
    background-color: #FF3366;
}

.social-icons li a:before {
    content: "\f1d0";
}

.social-icons li a[href*="facebook.com"]:before,
.social-icons li a[href*="fb.com"]:before {
    content: "\f39e";
}

.social-icons li a[href*="twitter.com"]:before {
    content: "\e61b";
}

.social-icons li a[href*="linkedin.com"]:before {
    content: "\f0e1";
}

.social-icons li a[href*="plus.google.com"]:before {
    content: "\f0d5";
}

.social-icons li a[href*="youtube.com"]:before {
    content: "\f167";
}

.social-icons li a[href*="dribbble.com"]:before {
    content: "\f17d";
}

.social-icons li a[href*="pinterest.com"]:before {
    content: "\f231";
}

.social-icons li a[href*="bitbucket.org"]:before {
    content: "\f171";
}

.social-icons li a[href*="github.com"]:before {
    content: "\f113";
}

.social-icons li a[href*="codepen.io"]:before {
    content: "\f1cb";
}

.social-icons li a[href*="flickr.com"]:before {
    content: "\f16e";
}

.social-icons li a[href$="/feed/"]:before {
    content: "\f09e";
}

.social-icons li a[href*="foursquare.com"]:before {
    content: "\f180";
}

.social-icons li a[href*="instagram.com"]:before {
    content: "\f16d";
}

.social-icons li a[href*="tumblr.com"]:before {
    content: "\f173";
}

.social-icons li a[href*="reddit.com"]:before {
    content: "\f1a1";
}

.social-icons li a[href*="vimeo.com"]:before {
    content: "\f194";
}

.social-icons li a[href*="digg.com"]:before {
    content: "\f1a6";
}

.social-icons li a[href*="twitch.tv"]:before {
    content: "\f1e8";
}

.social-icons li a[href*="stumbleupon.com"]:before {
    content: "\f1a4";
}

.social-icons li a[href*="delicious.com"]:before {
    content: "\f1a5";
}

.social-icons li a[href*="mailto:"]:before {
    content: "\f0e0";
}

.social-icons li a[href*="soundcloud.com"]:before {
    content: "\f1be";
}

.social-icons li a[href*="wordpress.org"]:before {
    content: "\f19a";
}

.social-icons li a[href*="wordpress.com"]:before {
    content: "\f19a";
}

.social-icons li a[href*="jsfiddle.net"]:before {
    content: "\f1cc";
}

.social-icons li a[href*="tripadvisor.com"]:before {
    content: "\f262";
}

.social-icons li a[href*="foursquare.com"]:before {
    content: "\f180";
}

.social-icons li a[href*="angel.co"]:before {
    content: "\f209";
}

.social-icons li a[href*="slack.com"]:before {
    content: "\f198";
}

.social-icons li a[href*="tiktok.com"]:before {
    content: "\e07b";
}

/*--------------------------------------------------------------
## Social Icons Hover Color
--------------------------------------------------------------*/
.social-icons li a[href*="facebook.com"]:hover,
.social-icons li a[href*="fb.com"]:hover,
.social-icons li a[href*="facebook.com"]:focus,
.social-icons li a[href*="fb.com"]:focus {
    background-color: #3c5798 !important;
}

.social-icons li a[href*="twitter.com"]:hover,
.social-icons li a[href*="twitter.com"]:focus {
    background-color: #1ea0f1 !important;
}

.social-icons li a[href*="linkedin.com"]:hover,
.social-icons li a[href*="linkedin.com"]:focus {
    background-color: #0077B5 !important;
}

.social-icons li a[href*="plus.google.com"]:hover,
.social-icons li a[href*="plus.google.com"]:focus {
    background-color: #ec7161 !important;
}

.social-icons li a[href*="youtube.com"]:hover,
.social-icons li a[href*="youtube.com"]:focus {
    background-color: #cc181e !important;
}

.social-icons li a[href*="dribbble.com"]:hover,
.social-icons li a[href*="dribbble.com"]:focus {
    background-color: #f4a09c !important;
}

.social-icons li a[href*="pinterest.com"]:hover,
.social-icons li a[href*="pinterest.com"]:focus {
    background-color: #bd081b !important;
}

.social-icons li a[href*="bitbucket.org"]:hover,
.social-icons li a[href*="bitbucket.org"]:focus {
    background-color: #205081 !important;
}

.social-icons li a[href*="github.com"]:hover,
.social-icons li a[href*="github.com"]:focus {
    background-color: #323131 !important;
}

.social-icons li a[href*="codepen.io"]:hover,
.social-icons li a[href*="codepen.io"]:focus {
    background-color: #111000 !important;
}

.social-icons li a[href*="flickr.com"]:hover,
.social-icons li a[href*="flickr.com"]:focus {
    background-color: #025FDF !important;
}

.social-icons li a[href$="/feed/"]:hover,
.social-icons li a[href$="/feed/"]:focus {
    background-color: #089DE3 !important;
}

.social-icons li a[href*="foursquare.com"]:hover,
.social-icons li a[href*="foursquare.com"]:focus {
    background-color: #F94877 !important;
}

.social-icons li a[href*="instagram.com"]:hover,
.social-icons li a[href*="instagram.com"]:focus {
    background-color: #cd42e7 !important;
}

.social-icons li a[href*="tumblr.com"]:hover,
.social-icons li a[href*="tumblr.com"]:focus {
    background-color: #56BC8A !important;
}

.social-icons li a[href*="reddit.com"]:hover,
.social-icons li a[href*="reddit.com"]:focus {
    background-color: #FF4500 !important;
}

.social-icons li a[href*="vimeo.com"]:hover,
.social-icons li a[href*="vimeo.com"]:focus {
    background-color: #00ADEF !important;
}

.social-icons li a[href*="digg.com"]:hover,
.social-icons li a[href*="digg.com"]:focus {
    background-color: #00ADEF !important;
}

.social-icons li a[href*="twitch.tv"]:hover,
.social-icons li a[href*="twitch.tv"]:focus {
    background-color: #0E9DD9 !important;
}

.social-icons li a[href*="stumbleupon.com"]:hover,
.social-icons li a[href*="stumbleupon.com"]:focus {
    background-color: #EB4924 !important;
}

.social-icons li a[href*="delicious.com"]:hover,
.social-icons li a[href*="delicious.com"]:focus {
    background-color: #0076E8 !important;
}

.social-icons li a[href*="mailto:"]:hover,
.social-icons li a[href*="mailto:"]:focus {
    background-color: #4169E1 !important;
}

.social-icons li a[href*="soundcloud.com"]:hover,
.social-icons li a[href*="soundcloud.com"]:focus {
    background-color: #FF5500 !important;
}

.social-icons li a[href*="wordpress.org"]:hover,
.social-icons li a[href*="wordpress.org"]:focus {
    background-color: #0073AA !important;
}

.social-icons li a[href*="wordpress.com"]:hover,
.social-icons li a[href*="wordpress.com"]:focus {
    background-color: #00AADC !important;
}

.social-icons li a[href*="jsfiddle.net"]:hover,
.social-icons li a[href*="jsfiddle.net"]:focus {
    background-color: #396AB1 !important;
}

.social-icons li a[href*="tripadvisor.com"]:hover,
.social-icons li a[href*="tripadvisor.com"]:focus {
    background-color: #FFE090 !important;
}

.social-icons li a[href*="angel.co"]:hover,
.social-icons li a[href*="angel.co"]:focus {
    background-color: #111000 !important;
}

.social-icons li a[href*="tiktok.com"]:hover,
.social-icons li a[href*="tiktok.com"]:focus {
    background-color: #7d88e3 !important;
}

/*--------------------------------------------------------------
#  Inner Page settings
--------------------------------------------------------------*/
#main .entry-content h1 {
    font-size: 55px;
    clear: both;
    color: #000;
    margin: 16px 0;
    line-height: 1.3;
    font-weight: 700;
}

#main .entry-content p strong {
    color: #000;
}

#main .entry-content p em {
    color: #FF5B4A;
}

#main .entry-content h2 {
    font-size: 46px;
    clear: both;
    color: #000;
    margin: 16px 0;
    line-height: 1.3;
    font-weight: 700;
}

#main .entry-content h3 {
    font-size: 38px;
    clear: both;
    color: #000;
    margin: 16px 0;
    line-height: 1.3;
    font-weight: 700;
    /* letter-spacing: 0.59px; */
}

#main .entry-content h4 {
    font-size: 30px;
    clear: both;
    color: #000;
    margin: 16px 0;
    line-height: 1.3;
    font-weight: 700;
}

#main .entry-content h5 {
    font-size: 26px;
    clear: both;
    color: #000;
    margin: 16px 0;
    line-height: 1.3;
    font-weight: 700;
}

#main .entry-content h6 {
    font-size: 22px;
    clear: both;
    color: #000;
    margin: 16px 0;
    line-height: 1.3;
    font-weight: 700;
}

#main .entry-content ul {
    /* padding: 20px 0 20px 0; */
    list-style: none;
    font-size: 18px;
    margin: 0;
}

#main .entry-content ul li,
#main .entry-content ul li ul li {
    /* line-height: 50px; */
    font-size: 18px;
    color: #000;
}

#main .entry-content ul li:before {
    content: '\f124';
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    margin-right: 20px;
    transform: scale(1);
    transition: all 0.5s ease 0s;
    color: #fdc401;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    padding: 2px;
    line-height: 1;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    transform: rotate(45deg);
    z-index: 1;
}

details {
    line-height: 2rem;
}

details p {
    margin-left: 30px;
}

.tagcloud {
    padding: 10px 8px;
}

.tagcloud a {
    color: #959595;
}

#main .entry-content ul li ul {
    margin: 15px 0 0 25px;
}

#main .entry-content ul li ul li:before {
    content: "\f124";
    font-family: 'Fontawesome';
    margin-right: 10px;
    transform: scale(1);
    transition: all 0.5s ease 0s;
    color: var(--theme-color);
    display: inline-block;
    transform: scale(1);
    transition: all 0.5s ease 0s;
    font-size: 14px;
    transform: rotate(45deg);
}

#main .entry-content ol {
    counter-reset: li;
    list-style: none;
    /* *list-style: decimal; */
    margin: 30px 0 0;
}

#main .entry-content ol li {
    position: relative;
    padding-left: 6rem;
    min-height: 50px;
    padding-top: 0px;
    line-height: 30px;
    font-size: 18px;
    color: #000;
}

#main .entry-content ol li:before {
    content: counter(li);
    counter-increment: li;
    color: #fff;
    background: #01549a;
    border: 1px solid #a1a1a1;
    /* border-radius: 50%; */
    font-size: 16px;
    width: 30px;
    height: 30px;
    line-height: 29px;
    text-align: center;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 3rem;

}

blockquote .wp-block-quote,
.wp-block-pullquote,
.wp-block-quote,
.wp-block-quote:not(.is-large):not(.is-style-large) {
    /* border-left: none !important; */
    padding: 1em !important;
    background-color: #01549a !important;
    border: 1px solid !important;
    border-color: #002434 !important;
    /* width: 70%; */
    margin-top: 50px;
}

.wp-block-quote h1,
.wp-block-quote h2,
.wp-block-quote h3,
.wp-block-quote h4,
.wp-block-quote h5,
.wp-block-quote h6 {
    text-align: center;
    font-size: 25px !important;
    font-weight: bold !important;
    margin: 0px 0px 20px;
}

blockquote .wp-block-quote p,
.wp-block-pullquote p,
.wp-block-quote p {
    color: #fff !important;
    font-size: 16px;
    font-weight: 300;
    /* text-align: left; */
    padding: 12px 40px 0;
    letter-spacing: 0.64px;
    line-height: 30px;
}

.wp-block-quote p:before,
blockquote .wp-block-quote p:before {
    content: "\f10d";
    position: absolute;
    top: -1rem;
    left: 1.5rem;
    font-size: 60px;
    color: #fdc401;
    font-family: 'FontAwesome';
}

.wp-block-quote p:after,
blockquote .wp-block-quote p:after {
    content: "\f10e";
    position: absolute;
    bottom: -1rem;
    right: 33px;
    font-size: 60px;
    color: #fdc401;
    font-family: 'FontAwesome';
    transform: rotate(180deg) rotateY(180deg);
}



/*--------------------------------------------------------------
## Breadcrumb
--------------------------------------------------------------*/

#page-site-header .breadcrumbbox {
    padding: 0px 0 0.5em 0%;
    text-align: left;
    /* margin-bottom: 8%; */

}

#page-site-header .breadcrumbbox .button {
    display: inline-block;
    /* / background-color: #fff; / */
    padding: 20px 22px;
    border-radius: 50px;
    text-decoration: none;
}

#page-site-header .breadcrumbbox .button .root,
#page-site-header .breadcrumbbox span {
    background-color: #fff;
    padding: 10px 17px;
    font-size: 16px;
    font-weight: 500;
    color: #333333;
}

#page-site-header .breadcrumbbox .button .root::before {
    content: '\e3af';
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    color: #333333;
    padding-right: 5px;
}

#page-site-header .breadcrumbbox span.treeEnd-margin {
    margin-left: -36px;
}

#page-site-header .breadcrumbbox span.treeEnd {
    background-color: #FFF;
    color: #333333;
    /* margin: 0 3px; */
    font-size: 16px;
    font-weight: 500;
    padding: 10px 0px;
    line-height: 30px;
    /* margin-left: -53px; */
}

#page-site-header .breadcrumbbox span.bread-arrow {
    font-size: 28px;
    /* line-height: 13px; */
    position: relative;
    top: 6px;
    padding: 0px;
    color: #b39359;
    background-color: #00000000;
    font-weight: 400;
    left: -16px;
}

#page-site-header .breadcrumbbox span.spanarrow {
    font-size: 35px !important;
    padding: 0px 10px !important;
}

#page-site-header .breadcrumbbox a {
    /* color: #01549a; */
    font-weight: 500;
    text-decoration: none;
    font-size: 16px;
    line-height: 25px;
    text-transform: uppercase;
}

#page-site-header .breadcrumbbox a:hover,
#page-site-header .breadcrumbbox .treeEnd:hover {
    color: #111111;
    text-decoration: none;
    cursor: pointer;
}

/*--------------------------------------------------------------
#  Breadcrumb List
--------------------------------------------------------------*/
#breadcrumb-list {
    background-color: #222;
    padding: 20px 0;
}

.trail-items {
    margin: 0;
    padding: 0;
    list-style: none;
}

.trail-items li {
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 14px;
}

.trail-items li a {
    color: rgba(255, 255, 255, 0.30);
}

.trail-items li a:hover,
.trail-items li a:focus {
    color: #fff;
}

.trail-items .separator {
    color: rgba(255, 255, 255, 0.30);
    padding: 0 2px;
}

/*--------------------------------------------------------------
#  Slick Slider
--------------------------------------------------------------*/
.slick-slide {
    outline: none;
}

.slick-dotted.slick-slider {
    margin-bottom: 8%;
}

.slick-next:before,
.slick-prev:before {
    opacity: 1;
    /* content: "\f105"; */
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    font-size: 26px;
    color: #c42118;
    z-index: 5;
}

.slick-prev:before {
    content: '\f104' !important;
    font-family: 'Font Awesome 5 Free' !important;
}

.slick-next:before {
    content: '\f105' !important;
    font-family: 'Font Awesome 5 Free' !important;
}

.slick-prev,
.slick-next {
    left: 0;
    z-index: 1;
    width: 84px;
    height: 45px;
    line-height: 62px;
}

.slick-prev {
    left: 0;
    border-left: 3px solid #c42118;
}

.slick-next {
    left: auto;
    right: 0;
    border-right: 3px solid #c42118;
}

.slick-prev:hover,
.slick-next:hover,
.slick-prev:focus,
.slick-next:focus {
    background-color: #000;
}

.slick-dots {
    bottom: 25px;
}

.slick-dots li {
    margin: 0 6px;
    width: auto;
    height: auto;
}

.slick-dots li button {
    background-color: #ccc;
    width: 12px;
    height: 12px;
    padding: 0;
    border-radius: 12px;
}

.slick-dots li button:focus-visible {
    outline: auto;
}

.slick-dots li button:before {
    display: none;
}

.display-block {
    display: block;
}

.display-none {
    display: none;
}

.slick-dotted.slick-slider {
    margin: 0 !important;
}

/*--------------------------------------------------------------
#  Featured Slider Section
--------------------------------------------------------------*/
#featured-slider .slick-dots {
    bottom: 3rem;
}

#featured-slider {
    position: relative;
    overflow: hidden;
    padding-bottom: 0;
}

#featured-slider .entry-container {
    margin-left: 2rem;
    width: 61%;
}

#featured-slider .swiper-slide {
    overflow: hidden;
    color: #fff;
}

#featured-slider .slide-inner {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
    justify-content: center;
    align-items: center;
}

#featured-slider img {
    max-width: 100%;
    width: 100%;
    height: 712px;
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#featured-slider .sliderimg::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(270deg, #06060600, #00000096);
    opacity: 1;
}

.opbg {
    position: relative;
    width: 100%;
    height: auto;
}

#featured-slider article {
    position: relative;
    background-size: cover;
    background-position: 50%;
}

#featured-slider .featured-image {
    background-size: cover;
    background-position: 50%;
    padding: 200px 0;
    border-radius: 50px;
    margin-bottom: 50px;
}

#featured-slider .wrapper {
    position: relative;
    /* left: 14%; */
    top: 31%;
    margin: 0;
}

#featured-slider .entry-header {
    max-width: 900px;
    margin: 0px 0 0;
    height: auto;
    /* padding: 10px; */
}

#featured-slider .entry-content {
    max-width: 900px;
}

#featured-slider h2.title {
    position: relative;
    z-index: 1;
    overflow: hidden;
    color: #FFFFFF;
    font-size: 60px;
    font-weight: 700;
    letter-spacing: 1.98px;
}

#featured-slider .entry-header h3 {
    font-size: 40px;
    letter-spacing: normal;
    text-transform: capitalize;
    font-weight: 600;
    color: #fff;

}

#featured-slider h2.title small {
    font-size: 31px;
    letter-spacing: normal;
    text-transform: capitalize;
    font-weight: 400;
    color: #fff;
    margin: 0 0 0 0em;
    position: absolute;
    left: 17px;
    top: 91px;
}

#featured-slider .entry-content {
    color: #fff;
}

#featured-slider .entry-content p {
    font-size: 20px;
    letter-spacing: 0.66px;
    line-height: 30px;
    font-weight: 300;
    color: #fff;
    /* margin-right: 4rem; */
    margin-bottom: 1.5rem;
    margin-top: 1rem;
    width: 85%;
}

hr {
    border: none;
    height: 2px;
    background-color: #000;
    margin: 10px 0;
}

#featured-slider .read-more .btn {
    display: inline-block;
    font-weight: 300;
    padding: 12px 15px;
    font-size: 18px;
    text-transform: capitalize;
    background: #01549A;
    text-decoration: none;
    border-radius: 0;
    letter-spacing: 0.59px;
    transition: 0.5s;
    color: #ffffff;
    overflow: hidden;
    margin-top: 5px;
}

#featured-slider .read-more .btn:before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%) scaleY(1) scaleX(1.25);
    top: 100%;
    width: 140%;
    height: 180%;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    display: block;
    transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
    z-index: -1;
}

#featured-slider .read-more .btn:after {
    content: "";
    position: absolute;
    left: 55%;
    transform: translateX(-50%) scaleY(1) scaleX(1.45);
    top: 180%;
    width: 160%;
    height: 190%;
    background-color: #E9F5FF;
    border-radius: 50%;
    display: block;
    transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
    z-index: -1;
}

#featured-slider .read-more .btn:hover {
    color: #01549A;
    animation: pulseBig infinite 3s linear;
}

#featured-slider .read-more .btn:hover:before {
    top: -35%;
    background-color: #E9F5FF;
    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

#featured-slider .read-more .btn:hover:after {
    top: -45%;
    background-color: #E9F5FF;
    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

#featured-slider .borderbtn {
    border: 2px solid;
    border-color: #ffffff;
    border-radius: 50px;
    width: 65px;
    height: 65px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#featured-slider .play-btn {
    background-color: #fff;
    color: #01549A;
    padding: 10px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 20px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    animation: pulseBig infinite 3s linear;
    transition: opacity 0.3s;
}

@keyframes pulseBig {
    0% {
        box-shadow: 0 0 0 0 rgba(2, 108, 195, 0.4);
    }

    50% {
        box-shadow: 0 0 0 30px rgba(163, 182, 200, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(1, 196, 53, 0);
    }
}

#featured-slider .playbtntxt {
    color: #ffffff;
    letter-spacing: 0.66px;
    text-decoration: none;
    font-size: 20px;
}

#featured-slider .leftcontentbox {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
}

/* Slick Dot indicator */
/* //////////////// */

#featured-slider .slick-dots {
    display: none !important;
}

/* ///////// pagination slider section /////////// */
#featured-slider .slick-prev,
#featured-slider .slick-next {
    font-size: 22px;
    line-height: 0;
    position: absolute;
    bottom: 0 !important;
    top: 80%;
    width: 90px;
    height: 130px;
    padding: 0px;
    cursor: pointer;
    border-radius: 50%;
}

#featured-slider .slick-prev {
    left: 11%;
    top: 88%;
}

#featured-slider .slick-next {
    left: 13.5%;
    top: 88%;
}

#featured-slider .slick-next:before,
#featured-slider .slick-prev:before {
    position: absolute;
    background-color: #EFF8FF;
    width: 54px;
    height: 51px;
    opacity: 9;
    /* border: 5px solid; */
    /* border-color: #ffffff; */
    font-size: 27px;
    padding: 14px 13px;
    color: #01549A;
}

#featured-slider .slick-prev:before {
    content: '\f053';
    font-family: "Font Awesome 5 Free";
}

#featured-slider .slick-next:before {
    content: '\f054';
    font-family: "Font Awesome 5 Free";
}


/* ///////////////////// */
.icon-disable,
/*.icon-container, */
.image-disable .featured-image,
.position-disable .team-position,
.position-disable .testimonial-position,
.title-disable .entry-header,
.content-disable .entry-content,
.button-disable .read-more,
.category-disable .cat-links,
.date-disable .date,
.blog-posts-wrapper .category-disable .cat-links,
#page-site-header.page-title-disable .page-header,
#page-site-header.header-image-disable {
    display: none;
}

.title-font-weight-regular .title,
.content-font-weight-regular .entry-content,
.button-font-weight-regular .btn {
    font-weight: 400;
}

.title-font-weight-semi-bold .title,
.content-font-weight-semi-bold .entry-content,
.button-font-weight-semi-bold .btn {
    font-weight: 600;
}

.title-font-weight-bold .title,
.content-font-weight-bold .entry-content,
.button-font-weight-bold .btn {
    font-weight: bold;
}

.title-default .title,
.content-default .entry-content,
.button-default .btn {
    text-transform: none;
}

.title-uppercase .title,
.content-uppercase .entry-content,
.button-uppercase .btn {
    text-transform: uppercase;
}

.title-lowercase .title,
.content-lowercase .entry-content,
.button-lowercase .btn {
    text-transform: lowercase;
}

.title-capitalize .title,
.content-capitalize .entry-content,
.button-capitalize .btn {
    text-transform: capitalize;
}

.cloud-top {
    margin-bottom: -5px;
    position: absolute;
    bottom: 100%;
    z-index: 1;
}

.cloud-bottom {
    margin-top: -5px;
    position: absolute;
    top: 100%;
    z-index: 1;
    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1);
}

/*--------------------------------------------------------------
#  Featured Services Section
--------------------------------------------------------------*/
#featured-services {
    position: relative;
    overflow: hidden;
}

#featured-services .featured-services-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
}

#featured-services .servicerightside {
    position: relative
}

#featured-services .title-section {
    margin-bottom: 4em;
    display: block;
}

#featured-services .entry-content3 h5 {
    position: relative;
    font-size: 40px;
    margin: 0px 0px 0px 0px;
    color: #01549a;
    font-weight: bold;
    letter-spacing: 1.20px;
}

#featured-services .entry-content3 h5::before {
    content: '';
    display: inline-block;
    width: 36px;
    /* Adjust size based on your design */
    height: 100px;
    /* Adjust size based on your design */
    background-image: url('assets/images/flower.png');
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 10px;
    /* Space between the image and the text */
    vertical-align: middle;
    /* Align the image vertically with the text */
    position: relative;
    left: 20px;
}

#featured-services .featured-service-item {
    background: #FFFFFF;
    border-radius: 10px;
    padding: 13px;
    /* margin: 0 10px; */
    transition: 0.5s;
}

#featured-services .featured-service-item:hover .entry-content .serv-icon i,
#featured-services .featured-service-item:hover .entry-content .serv-icon svg {
    color: #085208;
}

#featured-services .entry-container {
    background: #FFFFFF;
    border-radius: 10px;
    margin: 0 0 2px;
}

#featured-services .entry-container .service-image {
    position: relative;
    height: 392px;
    background-color: #fff;
    color: #fff;
    overflow: hidden;
}

#featured-services .entry-content {
    text-align: left;
    margin: 0 auto;
    height: auto;
    background-color: #000;
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    /* padding: 10px 0; */
    -webkit-transform: translateY(80%);
    transform: translateY(80%);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: opacity 0.1s 0.3s, -webkit-transform 0.4s;
    transition: opacity 0.1s 0.3s, -webkit-transform 0.4s;
    transition: transform 0.4s, opacity 0.1s 0.3s;
    transition: transform 0.4s, opacity 0.1s 0.3s, -webkit-transform 0.4s;
}

#featured-services .entry-container .service-image:hover .entry-content {
    opacity: .8;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition: opacity 0.1s, -webkit-transform 0.4s;
    transition: opacity 0.1s, -webkit-transform 0.4s;
    transition: transform 0.4s, opacity 0.1s;
    transition: transform 0.4s, opacity 0.1s, -webkit-transform 0.4s;
    text-align: center;
}

#featured-services .entry-container .service-image:hover .entry-content h2 {
    font-size: 20px;
    text-transform: uppercase;
    margin-top: 80px;
    opacity: 1;
}

#featured-services .entry-container .service-image:hover .entry-content h2 a {
    font-size: 20px;
}

#featured-services .entry-container .service-image:hover .entry-content p {
    color: #fff;
    font-size: 16px;
    letter-spacing: 0.53px;
    padding: 0 5px;
    opacity: 1;
}

#featured-services .entry-container .service-image:hover .entry-content .newsCaption-link {
    color: #fdc401;
    font-size: 16px;
    opacity: 1;
}

#featured-services .entry-container .service-image:hover .entry-content .newsCaption-link::after {
    content: '\f061';
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    margin-left: 7px;
    font-size: 16px;
}

#featured-services .entry-content .serv-icon i,
#featured-services .entry-content .serv-icon svg {
    font-size: 19px;
    line-height: 61px;
    color: #000;
    padding: 10px;
}

#featured-services .entry-content p {
    color: #000000;
    line-height: 23px;
    font-size: 15px;
    margin-bottom: 1em;
    margin-top: 10px;
    font-weight: 300;
}

#featured-services .entry-content h2.entry-title {
    margin: 24px 0 0;
}

#featured-services .entry-title a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    text-transform: capitalize;
    letter-spacing: normal;
    font-weight: 400;
    padding: 0px 18px 0px 18px;
    line-height: 30px;
}

#featured-services .entry-title a::after {
    content: '\f061';
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    float: right;
    height: 36px;
    width: 38px;
    background-color: #fff;
    color: #000;
    margin-right: 10px;
    /* padding: 10px 12px; */
    font-size: 19px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#featured-services .entry-container .service-image:hover .entry-title a::after {
    display: none;
}

/*--------------------------------------------------------------
#  Inner Services Page css
--------------------------------------------------------------*/

/* Remove top/bottom gap specifically for Academy template */
#content:has(#primary.academy-services-page),
#content:has(#main.site-main) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


#content-page {
    background: #f7f4eb;
    z-index: 0;
    position: relative;
}

#content {
    margin-top: 5rem;
    margin-bottom: 5rem;
}

#primary.academy-services-page #main.site-main,
#main.site-main #main.site-main {
    max-width: 1400px;
    margin: 0 auto;
}

#primary.academy-services-page .academy-services-layout,
#main.site-main .academy-services-layout {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

#primary.academy-services-page .academy-main-col,
#main.site-main .academy-main-col {
    flex: 1;
    min-width: 0;
}

#primary.academy-services-page .academy-sidebar-col,
#main.site-main .academy-sidebar-col {
    flex: 0 0 340px;
    width: 340px;
}

/* ==========================================================
   2. SERVICE / ACADEMY SECTION HEADER
========================================================== */

#primary.academy-services-page .service-section-heading,
#main.site-main .service-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 50px;
}

#primary.academy-services-page .service-heading-left,
#main.site-main .service-heading-left {
    display: flex;
    flex-direction: column;
    max-width: 100%;
}

/* Subtitle / Eyebrow */
#primary.academy-services-page .service-subtitle,
#main.site-main .service-subtitle {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 700;
    color: #cbb27a;
    /* Signature Gold Accent */
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

/* Main Section Title */
#primary.academy-services-page .service-title,
#main.site-main .service-title {
    margin: 0 0 16px 0;
    font-size: 62px;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
    color: #111111;
    letter-spacing: 0.5px;
}

/* Section Description */
#primary.academy-services-page .service-desc,
#main.site-main .service-desc {
    margin: 0;
    max-width: 650px;
    font-size: 15px;
    line-height: 1.6;
    color: #555555;
    font-weight: 400;
}

#primary.academy-services-page .academy-intro,
#main.site-main .academy-intro {
    max-width: 480px;
    padding-top: 10px;
}

#primary.academy-services-page .academy-intro p,
#main.site-main .academy-intro p {
    font-size: 14px;
    line-height: 1.6;
    color: #555555;
    margin: 0;
}

#primary.academy-services-page .academy-main-col .service-section-heading,
#main.site-main .academy-main-col .service-section-heading {
    margin-bottom: 35px;
}

/* ==========================================================
   3. ACADEMY COURSES GRID (3 Columns)
========================================================== */

#primary.academy-services-page .academy-courses-grid,
#main.site-main .academy-courses-grid {
    display: grid;
    gap: 28px;
    grid-template-columns: repeat(3, 1fr);
}

/* ==========================================================
   4. COURSE CARD STYLES
========================================================== */

#primary.academy-services-page .webnotick-service-card,
#main.site-main .webnotick-service-card {
    position: relative;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
    transition: 0.4s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid #e4e4e4;
}

#primary.academy-services-page .webnotick-service-card:hover,
#main.site-main .webnotick-service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.14);
}

/* Card Image Area */
#primary.academy-services-page .service-card-image,
#main.site-main .service-card-image {
    position: relative;
    display: block;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #111111;
}

#primary.academy-services-page .service-card-thumb,
#primary.academy-services-page .service-card-placeholder,
#main.site-main .service-card-thumb,
#main.site-main .service-card-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: 0.7s ease;
}

#primary.academy-services-page .service-card-placeholder,
#main.site-main .service-card-placeholder {
    background: #1a1a1a;
}

#primary.academy-services-page .webnotick-service-card:hover .service-card-thumb,
#main.site-main .webnotick-service-card:hover .service-card-thumb {
    transform: scale(1.08);
}

#primary.academy-services-page .service-card-image::after,
#main.site-main .service-card-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
}

/* Floating Icon Overlay */
#primary.academy-services-page .service-card-icon,
#main.site-main .service-card-icon {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 5;
    width: 38px;
    height: 38px;
    border-radius: 6px;
    background: #cbb27a;
    color: #111111;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

/* Card Body Content */
#primary.academy-services-page .service-card-content,
#main.site-main .service-card-content {
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background: #ffffff;
}

#primary.academy-services-page .service-card-badge,
#main.site-main .service-card-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #cbb27a;
    margin-bottom: 8px;
}

#primary.academy-services-page .service-card-title,
#main.site-main .service-card-title {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#primary.academy-services-page .service-card-title a,
#main.site-main .service-card-title a {
    color: #111111;
    text-decoration: none;
    transition: color 0.2s ease;
}

#primary.academy-services-page .service-card-title a:hover,
#main.site-main .service-card-title a:hover {
    color: #cbb27a;
}

#primary.academy-services-page .service-card-excerpt,
#main.site-main .service-card-excerpt {
    font-size: 13.5px;
    line-height: 1.6;
    color: #555555;
    margin-bottom: 16px;
}

#primary.academy-services-page .service-card-excerpt p,
#main.site-main .service-card-excerpt p {
    margin: 0;
}

/* Meta Data List */
#primary.academy-services-page .service-card-meta,
#main.site-main .service-card-meta {
    list-style: none !important;
    margin: auto 0 16px !important;
    padding: 12px 0 0 !important;
    border-top: 1px solid #e4e4e4;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#primary.academy-services-page .service-card-meta li,
#main.site-main .service-card-meta li {
    font-size: 13px;
    color: #333333;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 !important;
    border-bottom: none !important;
}

#primary.academy-services-page .service-card-meta i,
#primary.academy-services-page .service-card-meta svg,
#main.site-main .service-card-meta i,
#main.site-main .service-card-meta svg {
    width: 16px;
    text-align: center;
    color: #cbb27a;
    font-size: 13px;
}

/* Read More Link */
#primary.academy-services-page .service-card-link,
#main.site-main .service-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #111111;
    text-decoration: none;
    transition: color 0.25s ease;
    padding-top: 6px;
}

#primary.academy-services-page .service-card-link i,
#main.site-main .service-card-link i {
    font-size: 11px;
    color: #cbb27a;
    transition: transform 0.25s ease;
}

#primary.academy-services-page .service-card-link:hover,
#main.site-main .service-card-link:hover {
    color: #cbb27a;
}

#primary.academy-services-page .service-card-link:hover i,
#main.site-main .service-card-link:hover i {
    transform: translateX(5px);
}

/* ==========================================================
   5. RESPONSIVE BREAKPOINTS
========================================================== */

@media (max-width: 1199px) {

    #primary.academy-services-page .academy-courses-grid,
    #main.site-main .academy-courses-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {

    #primary.academy-services-page .academy-services-layout,
    #main.site-main .academy-services-layout {
        flex-direction: column;
    }

    #primary.academy-services-page .academy-sidebar-col,
    #main.site-main .academy-sidebar-col {
        width: 100%;
        flex: 1 1 auto;
    }

    #primary.academy-services-page .service-section-heading,
    #main.site-main .service-section-heading {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 35px;
    }

    #primary.academy-services-page .academy-intro,
    #main.site-main .academy-intro {
        max-width: 100%;
        padding-top: 0;
    }
}

@media (max-width: 768px) {

    #primary.academy-services-page .service-title,
    #main.site-main .service-title {
        font-size: 42px;
        margin-bottom: 12px;
    }

    #primary.academy-services-page .service-desc,
    #main.site-main .service-desc {
        font-size: 14px;
        line-height: 1.5;
    }
}

@media (max-width: 639px) {

    #primary.academy-services-page .academy-courses-grid,
    #main.site-main .academy-courses-grid {
        grid-template-columns: 1fr;
    }

    #primary.academy-services-page,
    #main.site-main {
        padding: 30px 16px 24px;
    }
}


/* ==========================================================
   ACADEMY / SERVICE SIDEBAR DESIGN (MATCHING REFERENCE)
========================================================== */

/* Sidebar Container */
#secondary.academy-sidebar-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Base Widget Card Container */
#secondary.academy-sidebar-col .widget {
    background: #f7f4eb;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    padding: 32px 28px;
    margin-bottom: 0;
    box-shadow: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Widget Title Row (Icon + Header) */
#secondary.academy-sidebar-col .widget-title,
#secondary.academy-sidebar-col .widget-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 16px 0;
    font-size: 20px;
    font-weight: 900;
    text-transform: uppercase;
    color: #111111;
    letter-spacing: 0.8px;
    line-height: 1.1;
}

/* Widget Title Icon (Calendar, User, Brochure, Headphones) */
#secondary.academy-sidebar-col .widget-title i,
#secondary.academy-sidebar-col .widget-icon,
#secondary.academy-sidebar-col .widget-title img {
    color: #cbb27a;
    font-size: 32px;
    line-height: 1;
    flex-shrink: 0;
}

/* Paragraph Description inside Widgets */
#secondary.academy-sidebar-col .widget p,
#secondary.academy-sidebar-col .widget-description {
    font-size: 13.5px;
    line-height: 1.6;
    color: #555555;
    margin: 0 0 20px 0;
}

/* Feature List (Icon + Text items) */
#secondary.academy-sidebar-col .widget ul,
#secondary.academy-sidebar-col .sidebar-feature-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 24px 0 !important;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#secondary.academy-sidebar-col .widget ul li,
#secondary.academy-sidebar-col .sidebar-feature-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13.5px;
    font-weight: 600;
    color: #222222;
    padding: 0 !important;
    border-bottom: none !important;
    justify-content: flex-start;
}

/* List Item Gold Icons */
#secondary.academy-sidebar-col .widget ul li i,
#secondary.academy-sidebar-col .sidebar-feature-list li i,
#secondary.academy-sidebar-col .widget ul li svg,
#secondary.academy-sidebar-col .sidebar-feature-list li svg {
    color: #cbb27a;
    font-size: 16px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

/* Text Link with Right Arrow (ACADEMY OVERVIEW ->, JOIN THE ACADEMY ->) */
#secondary.academy-sidebar-col .widget-link,
#secondary.academy-sidebar-col .widget a.text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #111111;
    text-decoration: none;
    transition: color 0.25s ease, transform 0.25s ease;
    margin-top: auto;
}

#secondary.academy-sidebar-col .widget-link i,
#secondary.academy-sidebar-col .widget a.text-link i,
#secondary.academy-sidebar-col .widget-link svg,
#secondary.academy-sidebar-col .widget a.text-link svg {
    color: #cbb27a;
    font-size: 14px;
    transition: transform 0.25s ease;
}

#secondary.academy-sidebar-col .widget-link:hover,
#secondary.academy-sidebar-col .widget a.text-link:hover {
    color: #cbb27a;
}

#secondary.academy-sidebar-col .widget-link:hover i,
#secondary.academy-sidebar-col .widget a.text-link:hover i,
#secondary.academy-sidebar-col .widget-link:hover svg,
#secondary.academy-sidebar-col .widget a.text-link:hover svg {
    transform: translateX(5px);
}

/* Framed Outline Buttons (DOWNLOAD PDF, CONTACT US) */
#secondary.academy-sidebar-col .widget-btn,
#secondary.academy-sidebar-col .widget a.btn-outline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 18px;
    background: transparent;
    border: 1px solid #cbb27a;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #111111;
    text-decoration: none;
    box-sizing: border-box;
    transition: all 0.3s ease;
    margin-top: auto;
}

#secondary.academy-sidebar-col .widget-btn i,
#secondary.academy-sidebar-col .widget a.btn-outline i,
#secondary.academy-sidebar-col .widget-btn svg,
#secondary.academy-sidebar-col .widget a.btn-outline svg {
    color: #cbb27a;
    font-size: 15px;
    transition: transform 0.3s ease, color 0.3s ease;
}

#secondary.academy-sidebar-col .widget-btn:hover,
#secondary.academy-sidebar-col .widget a.btn-outline:hover {
    background: #cbb27a;
    color: #ffffff;
}

#secondary.academy-sidebar-col .widget-btn:hover i,
#secondary.academy-sidebar-col .widget a.btn-outline:hover i,
#secondary.academy-sidebar-col .widget-btn:hover svg,
#secondary.academy-sidebar-col .widget a.btn-outline:hover svg {
    color: #ffffff;
    transform: translateX(4px);
}

/* ==========================================================
   WIDGET TITLE ICONS (STYLING WORDPRESS WIDGET TITLES)
========================================================== */

/* Styling the default WordPress Widget Title */
#secondary.academy-sidebar-col .widget-title,
#secondary.academy-sidebar-col .widget .widgettitle {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 900;
    text-transform: uppercase;
    color: #111111;
    letter-spacing: 0.8px;
    margin-bottom: 16px;
}

/* Base icon setup using FontAwesome pseudo-element */
#secondary.academy-sidebar-col .widget-title::before,
#secondary.academy-sidebar-col .widget .widgettitle::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #cbb27a;
    /* Accent Gold */
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
}

/* Specific Icons based on your Widget Titles */
#secondary.academy-sidebar-col .widget:has(.course-overview) .widget-title::before {
    content: "\f073";
    /* Calendar Icon for Course Overview */
}

#secondary.academy-sidebar-col .widget:has(.who-can-join) .widget-title::before {
    content: "\f007";
    /* User Icon for Who Can Join? */
}

#secondary.academy-sidebar-col .widget:has(.download-brochure) .widget-title::before {
    content: "\f15c";
    /* Document Icon for Download Brochure */
}

#secondary.academy-sidebar-col .widget:has(.have-questions) .widget-title::before {
    content: "\f025";
    /* Headphones Icon for Have Questions? */
}



/*--------------------------------------------------------------
#  Inner Academy / Services Page
--------------------------------------------------------------*/

/*--------------------------------------------------------------
#  Featured About Section
--------------------------------------------------------------*/
#featured-about {
    position: relative;
    overflow: hidden;
}

#featured-about .featured-about-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
}

#featured-slider .featured-slider-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
}

#featured-about .title-section {
    position: relative;
    text-align: center;
    padding-right: 10%;
    display: block !important;
    /* margin-bottom: 0; */
}

#content #featured-about .title-section {
    padding: 0 !important;
}

#featured-about .title-section h1 {
    margin: 16px auto;
    font-size: 48px !important;
    font-weight: 700 !important;
    padding: 0 0px;
    position: relative;
    z-index: 1;
    border-left: none;
    letter-spacing: 0.58px;
    color: #000000;
}

#featured-about h2.subtitle {
    line-height: 27px;
    color: #707070 !important;
    margin: 0px 8% 30px 0;
    font-size: 16px !important;
    font-weight: normal !important;
    position: relative;
    letter-spacing: 0.54px;
}

#featured-about .title-section .about-service p {
    color: #000 !important;
    font-size: 16px !important;
    letter-spacing: 0.53px;
    font-weight: 400 !important;
    margin: 19px auto;
}

#featured-about .title-section .about-service i,
#featured-about .title-section .about-service svg {
    color: #fdc401;
    margin-right: 12px;
}

#featured-about .title-section .cleaning-text {
    margin-top: 34px;
    gap: 45px;
}

#featured-about .title-section .cleaning-text p {
    color: #000;
    font-size: 18px !important;
    letter-spacing: 0.59px;
    margin: 0;
}

#featured-about .featureimg {
    width: 35px;
    height: 35px;
}

#featured-about .abtfeature1 {
    color: #000;
    font-size: 18px !important;
}

#featured-about .section-area-textlist {
    font-size: 26px !important;
    line-height: 32px;
    font-weight: 300;
    margin: 29px 0;
    padding: 0 232px 0 25px;
    text-align: left;
    position: relative;
}

#featured-about .button-content {
    display: inline-block;
    font-weight: 400;
    padding: 10px 20px;
    font-size: 18px;
    text-transform: uppercase;
    background: #01549A;
    text-decoration: none;
    border-radius: 0;
    border: 1px solid;
    border-color: #01549a;
    letter-spacing: 1px;
    color: #ffffff;
    transition: all 0.4s ease-in;
    position: relative;
    overflow: hidden;
    z-index: 1;
    cursor: pointer;
}

#featured-about .button-content::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%) scaleY(1) scaleX(1.25);
    top: 100%;
    width: 140%;
    height: 180%;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    display: block;
    transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
    z-index: -1;
}

#featured-about .button-content::after {
    content: "";
    position: absolute;
    left: 55%;
    transform: translateX(-50%) scaleY(1) scaleX(1.45);
    top: 180%;
    width: 160%;
    height: 190%;
    background: #E9F5FF;
    border-radius: 50%;
    display: block;
    transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
    z-index: -1;
}

#featured-about .button-content:hover:before {
    top: -35%;
    background: #E9F5FF;
    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

#featured-about .button-content:hover::after {
    top: -45%;
    background: #E9F5FF;
    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

#featured-about .button-content:active {
    transform: scale(0.9);
}

#featured-about .button-content:hover {
    color: #01549A;
    animation: pulseBig infinite 3s linear;
}

#featured-about .title-section {
    position: relative;
}

#featured-about .button-content a {
    color: #fff;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 0.56px;
}

#featured-about .button-content:hover a {
    color: #01549a;
}

#featured-about .title-section .row h3 {
    font-size: 25px !important;
    font-weight: 500;
    color: #000000;
}

#featured-about .title-section .row p {
    padding: 12px 0px 20px 0px;
    font-size: 18px !important;
    font-weight: 400;
}

#featured-about .title-section .row i,
#featured-about .title-section .row svg {
    color: #0A9642;
    font-size: 24px !important;
    padding: 9px;
    border: 2px solid #0A9642;
    border-radius: 10px;
    margin: 0px 0px 0px 20px;
}

#featured-about .button-content i,
#featured-about .button-content svg {
    font-size: 17px !important;
    margin-left: 5px;
}

#featured-about .button-content:hover i,
#featured-about .button-content:hover svg {
    color: #01549a;
}

#featured-about .about-image {
    width: 100%;
    height: 544px;
    padding: 10px;
    position: relative;
}

#featured-about .image-box1::after {
    background-color: #8458cb;
    position: absolute;
    content: "";
    width: 103px;
    height: 100px;
    right: -7px;
    bottom: 186px;
}

#featured-about .image-box2::before {
    background-color: #53dbb8;
    position: absolute;
    content: "";
    width: 103px;
    height: 100px;
    left: -5px;
    bottom: -27px;
}

#featured-about .about-image img {
    height: 544px;
    width: 442px;
    position: relative;
    z-index: 2;
}

#featured-about .image-top-box {
    width: 250px;
    height: 91px;
    background-color: #01549a;
    text-align: center;
    position: absolute;
    top: -2rem;
    left: -7rem;
    z-index: 3;
    padding: 10px;
    transform: translatey(0px);
    animation: float 4s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translatey(0px);
    }

    50% {
        transform: translatey(-10px);
    }

    100% {
        transform: translatey(0px);
    }
}

#featured-about .image-top-box .top-box-num {
    font-size: 28px !important;
    color: #fdc401;
    letter-spacing: 0.92px;
    font-weight: bold;
    margin: 0;
}

#featured-about .image-top-box .top-box-text {
    font-size: 17px !important;
    color: #fff;
    letter-spacing: 0.53px;
    font-weight: 300;
    margin: 0;
}

#featured-about .aboutrightside {
    margin-left: 2.5rem;
}

#featured-about .image-bottom-box {
    width: 198px;
    height: 91px;
    background-color: #f8f3e0;
    display: flex;
    text-align: center;
    position: absolute;
    z-index: 3;
    bottom: 36px;
    left: 421px;
    border: 1px solid #fdc401;
    position: relative;
}

#featured-about .image-bottom-box .bottom-box-icon {
    width: 46px;
    height: 46px;
    background-color: #fdc401;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 24px;
    top: 20px;
}

#featured-about .image-bottom-box .bottom-box-icon i,
#featured-about .image-bottom-box .bottom-box-icon svg {
    color: #01549a;
}

#featured-about .image-bottom-box .bottom-box-text {
    position: absolute;
    left: 88px;
    top: 20px;
}

#featured-about .image-bottom-box .bottom-box-text a {
    font-size: 18px !important;
    letter-spacing: 0.59px;
    color: #fdc401;
}

#featured-about .image-bottom-box .bottom-box-text a span {
    font-size: 16px !important;
    letter-spacing: 0.53px;
    color: #01549a;
}

#featured-about .aboutimgtext .d-flex {
    gap: 30px;
    font-size: 20px !important;
    font-weight: bold;
}

#featured-about .aboutimgtext .aboutimgbg {
    background: #FFFFFF;
    padding: 20px 30px;
    border-radius: 20px;
}

#featured-about .aboutimgtext .aboutimgbg h5 {
    font-size: 18px !important;
    font-weight: 500;
    line-height: 26px;
    color: #000000;
}

#featured-about .aboutimgtext {
    position: absolute;
    bottom: 8%;
    width: 100%;
}

#featured-about .about-service {
    margin-bottom: 32px;
}

/* ==========================================================
   featured-socialicon
========================================================== */

#featured-socialicon {
    display: block !important;
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 5;
    background-color: var(--theme-color);
}

.social-banner-inner {
    width: 100%;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-top: 10px;
    padding-bottom: 10px;
}

.social-banner-left {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0;
}

.social-banner-logo-shield {
    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;
}

.social-banner-logo-shield .custom-logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-banner-logo-shield .custom-logo {
    width: 42px;
    height: 42px;

    object-fit: contain;

    filter: brightness(0) invert(1);
}


.default-shield-icon {
    width: 38px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;
}

.default-shield-icon svg {
    width: 32px;
    height: 38px;
    display: block;
}

.social-banner-divider {
    width: 1px;
    height: 35px;

    margin-left: 18px;
    margin-right: 18px;

    background-color: rgba(255, 255, 255, 0.65);

    flex-shrink: 0;
}


.social-banner-tagline {
    display: flex;
    align-items: center;
}

.social-banner-tagline span {
    color: #ffffff;

    font-family: "Oswald", "Roboto Condensed", Arial, sans-serif;

    font-size: 18px;
    font-weight: 500;

    line-height: 1;
    letter-spacing: 0.3px;

    text-transform: uppercase;

    white-space: nowrap;
}

.social-banner-right {
    display: flex !important;
    align-items: center !important;

    margin-left: auto;
}

.social-banner-follow-text {
    color: #ffffff;

    font-family: Arial, sans-serif;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.5px;

    text-transform: uppercase;

    white-space: nowrap;

    margin-right: 15px !important;
}


.social-banner-icons-list {
    display: flex !important;
    align-items: center !important;
    gap: 10px;
}

.social-icon-circle-item {
    width: 30px;
    height: 30px;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;

    color: #ffffff;

    text-decoration: none !important;

    transition: all 0.25s ease;
}

.social-icon-circle-item i {
    display: block;
    font-size: 13px;
    line-height: 1;
}

.social-icon-circle-item:hover {
    background-color: #ffffff;
    border-color: #ffffff;
    color: #A99A58;
    transform: translateY(-2px);
}

/* =========================================================
   NORTHSIDE FEATURE / MEMBERSHIP SECTION
   ========================================================= */

#section-northside {
    width: 100%;
    background: #FAF9F6;
    overflow: hidden;
    position: relative;
}

.northside-section-wrapper {
    position: relative;
    width: 100%;
    padding-top: 70px !important;
    padding-bottom: 70px !important;
}


/* =========================================================
   MAIN CONTAINER
   ========================================================= */

.northside-section-wrapper>.container-fluid {
    position: relative;
    z-index: 2;
}


/* =========================================================
   LEFT CONTENT
   ========================================================= */

.northside-left-content {
    position: relative;
    z-index: 3;
    padding-right: 25px;
}


/* =========================================================
   SMALL TAGLINE
   ========================================================= */

.northside-tagline-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 25px !important;
}

.northside-tagline-text {
    font-family: Arial, sans-serif;
    color: var(--theme-color);
    font-size: 12px;
    line-height: 1.2;

    font-weight: 700;

    letter-spacing: 0.7px;

    text-transform: uppercase;

    white-space: nowrap;
}

.northside-tagline-line {
    width: 35px;
    height: 1px;
    display: block;
    margin-left: 12px;
    background: var(--theme-color) ;
}


/* =========================================================
   MAIN HEADLINE
   ========================================================= */

.northside-main-headline {
    font-size: clamp(26px, 4vw, 36px);
    font-weight: 800;
    text-transform: uppercase;
    
    font-family: var(--font-heading) !important;
}

.northside-headline-primary {
    display: block;
    font-family: var(--font-heading) !important;
    color: #111111;
    font-weight: 600;
}

.northside-headline-highlight {
    display: block;
    font-weight: 600;
    color: var(--theme-color);
    font-family: var(--font-heading) !important;
    margin-top: 5px;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.northside-body-description {
    max-width: 430px;

    margin-bottom: 30px !important;
}

.northside-body-description p {
    margin: 0;

    font-family: Arial, sans-serif;

    font-size: 14px;

    line-height: 1.65;

    color: #555555;
}


/* =========================================================
   ACTION BUTTONS
   ========================================================= */

.northside-action-row {
    display: flex;

    align-items: center;

    gap: 25px !important;
}


/* PRIMARY BUTTON */

.northside-btn-primary {
    min-width: 145px;
    min-height: 48px;

    padding: 0 18px;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    gap: 20px;

    background: #2C352E;

    color: #FFFFFF;

    text-decoration: none !important;

    font-family: Arial, sans-serif;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.4px;

    text-transform: uppercase;

    transition: all 0.3s ease;
}

.northside-btn-primary:hover {
    background: var(--theme-color);

    color: #FFFFFF;

    transform: translateY(-2px);
}

.northside-btn-primary .btn-label-text {
    white-space: nowrap;
}

.northside-btn-primary .btn-icon-arrow {
    margin: 0 !important;

    display: flex;

    align-items: center;
}

.northside-btn-primary .btn-icon-arrow i {
    font-size: 13px;
}


/* SECONDARY LINK */

.northside-btn-link {
    position: relative;

    display: inline-flex;
    align-items: center;

    padding-bottom: 5px;

      color: var(--theme-color);

    text-decoration: none !important;

    font-family: Arial, sans-serif;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.4px;

    text-transform: uppercase;

    transition: all 0.3s ease;
}

.northside-btn-link::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 50%;
    height: 1.5px;

    background: var(--theme-color);

    transition: width 0.3s ease;
}



/* =========================================================
   CENTER SHOWCASE
   ========================================================= */

.northside-center-showcase {
    position: relative;

    width: 100%;

    height: 480px;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* =========================================================
   SKEWED VIEWPORT
   ========================================================= */

.northside-skewed-viewport {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    transform: skewX(-12deg);

    background: #111111;
}

.lastdiv {
    transform: skewX(-12deg);
}

.northside-feature-item-row {
    transform: skewX(12deg);
}


/* =========================================================
   IMAGE FRAME
   ========================================================= */

.northside-skewed-frame {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border-left: 7px solid var(--theme-color);

    transform: skewX(0deg);
}


/* =========================================================
   IMAGE
   ========================================================= */

.northside-skewed-image {
    width: 100% !important;
    height: 100% !important;

    max-width: none !important;

    object-fit: cover;

    display: block;

    transform: skewX(9deg) scale(1.12);

    transform-origin: center center;

    filter: brightness(0.92);

    transition: transform 0.6s ease;
}

.northside-center-showcase:hover .northside-skewed-image {
    transform: skewX(9deg) scale(1.17);
}


/* =========================================================
   RIGHT FEATURES
   ========================================================= */

.northside-features-stack {
    position: relative;

    z-index: 3;

    padding-left: 20px !important;
}


/* =========================================================
   FEATURE ITEM
   ========================================================= */

.northside-feature-item-row {
    position: relative;

    display: flex;

    align-items: flex-start;

    width: 100%;

    min-height: 90px;

    padding-top: 18px !important;
    padding-bottom: 18px !important;

    border-bottom: 1px solid rgba(140, 125, 59, 0.25);
}

.northside-feature-item-row:first-child {
    padding-top: 0 !important;
}

.northside-feature-item-row:last-child {
    border-bottom: none;
}


/* =========================================================
   ICON BADGE
   ========================================================= */

.northside-feature-icon-badge {
    width: 54px;
    height: 54px;

    min-width: 54px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #F0EEE6;

    color: var(--theme-color);

    transition: all 0.3s ease;
}

.northside-feature-icon-badge i {
    font-size: 21px;

    line-height: 1;
}

.northside-feature-item-row:hover .northside-feature-icon-badge {
    background: var(--theme-color);

    color: #FFFFFF;

    transform: scale(1.05);
}

.northside-feature-text-block {
    flex: 1;

    padding-top: 2px;
}

.northside-feature-heading {
    margin: 0 0 7px !important;

    font-family: Arial, sans-serif;

    font-size: 13px;

    line-height: 1.3;

    font-weight: 800;

    letter-spacing: 0.2px;

    text-transform: uppercase;

    color: #111111;
}

.northside-feature-body {
    margin: 0;
    max-width: 310px;
    font-family: Arial, sans-serif;
    font-size: 11px;
    line-height: 1.55;
    color: #666666;
}

.northside-dot-matrix-accent {
    position: absolute;
    right: -20px;
    bottom: -35px;
    width: 100px;
    height: 100px;
    opacity: 0.35;
    background-image: radial-gradient(var(--theme-color) 1px,
            transparent 1px);
    background-size: 12px 12px;
    pointer-events: none;
}

#section-northside .row {
    margin-left: -12px;
    margin-right: -12px;
}

#section-northside .row>[class*="col-"] {
    padding-left: 12px;
    padding-right: 12px;
}

@media (max-width: 767px) {
    .northside-skewed-image {
        transform: skewX(0deg);
    }

    .northside-skewed-viewport {
        position: relative;

        width: 100%;
        height: 100%;

        overflow: hidden;

        transform: skewX(0deg);

        background: #111111;
    }

    .lastdiv {
        transform: skewX(0deg);
    }

    .northside-feature-item-row {
        transform: skewX(0);
    }
}

/* ==========================================================
   TEAM ARCHIVE PAGE
========================================================== */
#primary.team-archive-page {
    background-color: #f7f4eb;
    padding: 60px 40px 40px;
}

#primary.team-archive-page::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background: #f7f4eb;
    z-index: -1;
}

#primary.team-archive-page #main.site-main {
    max-width: 1400px;
    margin: 0 auto;
}

/*==========================================================
TEAM HEADING
==========================================================*/

.team-section-heading {

    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    margin-bottom: 60px;
}

.team-heading-left {

    display: flex;
    flex-direction: column;
}

.team-subtitle {

    position: relative;

    font-size: 14px;
    font-weight: 700;

    color: var(--theme-color);

    text-transform: uppercase;

    letter-spacing: 2px;

    margin-bottom: 20px;


}

.team-subtitle::before {

    content: "";

    position: absolute;

    left: 11%;
    top: 50%;

    width: 50px;
    height: 2px;

    background: var(--theme-color);

    transform: translateY(-50%);
}

.team-title {

    margin: 0;

    font-size: 62px;

    line-height: 1;

    font-weight: 900;

    text-transform: uppercase;

    color: #111;
}

.team-heading-decoration {

    display: grid;

    grid-template-columns: repeat(3, 8px);

    gap: 12px;

    margin-top: 20px;
}

.team-heading-decoration span {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #d7d7d7;
}

@media(max-width:768px) {
    #featured-team .image-container-mask {
        transform: skewX(0deg) !important;
        margin: 0px !important;
        /* Pulls image wide to match desktop behavior */
    }

    .team-section-heading {

        flex-direction: column;

        gap: 25px;
    }

    .team-title {

        font-size: 42px;
    }

}

/* ==========================================================
   TEAM GRID
========================================================== */
#primary.team-archive-page .team-archive-grid {
    display: grid;
    gap: 32px;
}

/* ==========================================================
   TEAM CARD
========================================================== */

#primary.team-archive-page .webnotick-team-card {
    position: relative;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .12);
    transition: .4s ease;
}

#primary.team-archive-page .webnotick-team-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 28px 60px rgba(0, 0, 0, .18);
}


/* ==========================================================
   PLAYER IMAGE
========================================================== */

#primary.team-archive-page .team-card-image {
    position: relative;
    display: block;
    aspect-ratio: 3/4.15;
    overflow: hidden;
    background: #111;
}

#primary.team-archive-page .team-player-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: .7s ease;
}

#primary.team-archive-page .webnotick-team-card:hover .team-player-image {
    transform: scale(1.08);
}

#primary.team-archive-page .team-card-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, .15),
            rgba(0, 0, 0, 0) 35%,
            rgba(0, 0, 0, .65));
}


/* ==========================================================
   PLAYER OVERLAY
========================================================== */

#primary.team-archive-page .team-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    padding: 28px;
}


/* ==========================================================
   POSITION INITIALS
========================================================== */

#primary.team-archive-page .team-player-position-initials {

    display: inline-flex;

    font-size: 26px;
    font-weight: 900;
    letter-spacing: 2px;

    text-transform: uppercase;

    color: var(--theme-color);
    font-family: var(--font-heading);


}


/* ==========================================================
   JERSEY NUMBER
========================================================== */

#primary.team-archive-page .team-player-number {

    display: block;

    font-size: 40px;

    font-weight: 900;

    line-height: 0.9;

    color: #ffffff;

    text-shadow: 0 8px 20px rgba(0, 0, 0, .45);

    margin-bottom: 16px;
    font-family: var(--font-heading);

}


/* ==========================================================
   PLAYER BADGE
========================================================== */

#primary.team-archive-page .team-player-badge {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 34px;

    height: 34px;

    border-radius: 10%;

    background: var(--theme-color);

    color: #111;

    font-size: 14px;

    font-weight: 800;

    box-shadow: 0 6px 14px rgba(0, 0, 0, .25);
}

/* ==========================================================
   CONTENT
========================================================== */

#primary.team-archive-page .team-card-content {

    position: relative;

    background: #fff;

    padding: 22px 24px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    z-index: 10;

    box-shadow: 0 15px 35px rgba(0, 0, 0, .08);
}


/* ==========================================================
   PLAYER NAME
========================================================== */

#primary.team-archive-page .team-player-name {
    margin: 0;
}

#primary.team-archive-page .team-player-name a {
    align-items: flex-end;
    text-decoration: none;
    text-transform: uppercase;
    gap: 8px;
    display: grid;
}

#primary.team-archive-page .player-first-word {
    color: var(--theme-color);
    font-size: 22px;
    /* Increase if needed */
    font-weight: 800;
    line-height: 1;
}

#primary.team-archive-page .player-name-text {
    color: #1b1b1b;
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
}

/* ==========================================================
   PLUS BUTTON
========================================================== */

#primary.team-archive-page .team-card-plus {

    width: 42px;

    height: 42px;

    display: flex;

    justify-content: center;

    align-items: center;

    color: var(--theme-color);

    flex-shrink: 0;

    transition: .35s;
}

#primary.team-archive-page .team-card-plus svg {

    width: 25px;

    height: 25px;

    fill: currentColor;
}

#primary.team-archive-page .team-card-plus:hover {

    transform: rotate(90deg);
}


/* ==========================================================
   RESPONSIVE
========================================================== */

/* Desktop: 4 columns */
@media (min-width: 1200px) {
    #primary.team-archive-page .team-archive-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Laptop: 3 columns */
@media (min-width: 992px) and (max-width: 1199px) {
    #primary.team-archive-page .team-archive-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablet: 2 columns */
@media (min-width: 640px) and (max-width: 991px) {
    #primary.team-archive-page .team-archive-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    #primary.team-archive-page {
        padding: 40px 24px 30px;
    }

    #primary.team-archive-page .stay-connected-container {
        justify-content: center;
        text-align: center;
    }
}

/* Mobile: 1 column */
@media (max-width: 639px) {
    #primary.team-archive-page .team-archive-grid {
        grid-template-columns: 1fr;
    }

    #primary.team-archive-page {
        padding: 30px 16px 24px;
    }

    #primary.team-archive-page .stay-connected-container {
        flex-direction: column;
        align-items: flex-start;
        padding: 28px 24px;
    }

    #primary.team-archive-page .sc-form-side {
        width: 100%;
    }

    #primary.team-archive-page .sc-form-side p {
        width: 100%;
    }

    #primary.team-archive-page input.wpcf7-email {
        width: 100%;
        flex: 1;
    }
}

/*--------------------------------------------------------------
#  Single Team Page 
--------------------------------------------------------------*/

/*==============================================================
    SINGLE TEAM PAGE
==============================================================*/

#main .entry-content.sin {
    max-width: 1200px;
    margin: 20px 0px;
    padding: 0 0px;
    color: #555;
    font-size: 17px;
    line-height: 1.9;
}


/*==============================================================
META
==============================================================*/

#main .entry-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 25px;
    margin-bottom: 18px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e8e8e8;
}

#main .entry-meta,
#main .entry-meta a {
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #777;
    font-weight: 500;
    text-decoration: none;
}

#main .entry-meta a:hover {
    color: #111111;
}

#main .single .date a:before,
#main .entry-meta .author a:before,
#main .comments-link a:before,
.single .date a:before,
.entry-meta .author a:before,
.comments-link a:before {
    color: #c19a5b;
}


/*==============================================================
PARAGRAPHS
==============================================================*/

#main .entry-content.sin p {
    color: #555;
    font-size: 16px;
    line-height: 1.9;
    margin: 10px 0;
}


/*==============================================================
PLAYER DETAILS
==============================================================*/

#main .entry-content.sin p strong {
    display: inline-block;
    width: 210px;
    color: #111;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}


/*==============================================================
SECTION HEADINGS
==============================================================*/

#main .entry-content.sin h2 {
    margin: 20px 0 18px;
    font-size: 30px;
    font-weight: 700;
    text-transform: uppercase;
    color: #111;
    line-height: 1.1;
    position: relative;
    padding-bottom: 20px;
}

#main .entry-content.sin h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 90px;
    height: 3px;
    background: #c19a5b;
}


/*==============================================================
SMALL HEADINGS
==============================================================*/

#main .entry-content.sin h4 {
    margin: 42px 0 15px;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #c19a5b;
    position: relative;
    padding-left: 70px;
}

#main .entry-content.sin h4::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 55px;
    height: 2px;
    background: #c19a5b;
}

/*==============================================================
H5 HEADINGS
==============================================================*/

#main .entry-content.sin h5 {
    margin: 0 0 18px;
    padding-bottom: 12px;
    position: relative;

    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #111;
}

#main .entry-content.sin h5::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 2px;
    background: #111;
}

#main .entry-content.sin h5+p {
    margin-top: 12px;
}

/*==============================================================
H1 HEADINGS
==============================================================*/

#main .entry-content.sin h1 {
    margin: 20px 0 22px;
    font-size: 42px;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #111;
    position: relative;
    padding-bottom: 24px;
}

#main .entry-content.sin h1::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 120px;
    height: 4px;
    background: #c19a5b;
}

/*==============================================================
H3 HEADINGS
==============================================================*/

#main .entry-content.sin h3 {
    margin: 36px 0 18px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: #111;
    position: relative;
    padding-bottom: 16px;
}

#main .entry-content.sin h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 70px;
    height: 3px;
    background: #c19a5b;
}

/*==============================================================
H6 HEADINGS
==============================================================*/

#main .entry-content.sin h6 {
    margin: 28px 0 12px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #c19a5b;
    position: relative;
    padding-left: 55px;
}

#main .entry-content.sin h6::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 2px;
    background: #c19a5b;
}

#main .entry-content.sin h6+p {
    margin-top: 10px;
}

/*==============================================================
TABLE
==============================================================*/

#main figure.wp-block-table {
    margin: 20px 0;
    overflow-x: auto;
}

#main table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #ececec;
}

#main table th {
    color: #000;
    padding: 18px;
    font-size: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-right: 1px solid rgba(255, 255, 255, .12);
}

#main table th:last-child {
    border-right: none;
}

#main table td {
    padding: 18px;
    border: 1px solid #ececec;
    font-size: 15px;
}

#main table tr:nth-child(even) {
    background: #fafafa;
}


/*==============================================================
PERFORMANCE COLUMNS
==============================================================*/

#main .wp-block-columns {
    margin: 20px 0;
    gap: 0;
    /* border-top:1px solid #ececec;
    border-bottom:1px solid #ececec; */
}

#main .wp-block-column {
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 10px;
    padding-top: 0px;
    position: relative;
}

#main .wp-block-column:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 20px;
    bottom: 20px;
    width: 1px;
    background: #ececec;
}


/*==============================================================
COLUMN TITLE
==============================================================*/

/* #main .wp-block-column > p:first-child{
    margin-bottom:15px;
    padding-bottom:12px;
    font-size:17px;
    font-weight:700;
    text-transform:uppercase;
    color:#111;
    position:relative;
}

#main .wp-block-column > p:first-child::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:45px;
    height:2px;
    background:#c19a5b;
} */


.wp-block-group.is-layout-grid>.wp-block-paragraph {
    padding: 0 25px;
    margin: 0;
    border-right: 1px solid #dcdcdc;
}

.wp-block-group.is-layout-grid>.wp-block-paragraph:last-child {
    border-right: none;
}

/*==============================================================
LIST
==============================================================*/

#main .wp-block-column ul,
#main .entry-content.sin>ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#main .wp-block-column li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0px;
    padding: 0px 0;
    border-bottom: 1px solid #efefef;
    font-size: 14px;
    color: #666;
    list-style: none;
    /* white-space: nowrap; */
}

#main .wp-block-column li:last-child {
    border-bottom: none;
}

#main .wp-block-column li strong {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #888;
    width: auto;
    white-space: nowrap;
}

#main .entry-content.sin ul li::before {
    display: none;
}


/*==============================================================
HONOURS
==============================================================*/

#main>.entry-content.sin>ul {
    margin-top: 15px;
}

#main>.entry-content.sin>ul li {
    position: relative;
    padding: 15px 0 15px 24px;
    border-bottom: 1px solid #ececec;
    font-size: 16px;
    color: #222;
}

#main>.entry-content.sin>ul li:last-child {
    border-bottom: none;
}

#main>.entry-content.sin>ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c19a5b;
}


/*==============================================================
LINKS
==============================================================*/

#main a {
    color: inherit;
    text-decoration: none;
    transition: .3s;
}

#main a:hover {
    color: #c19a5b;
}


/*==============================================================
RESPONSIVE
==============================================================*/

@media (max-width:991px) {

    #main .wp-block-columns {
        display: block;
    }

    #main .wp-block-column {
        padding: 22px 0;
    }

    #main .wp-block-column::after {
        display: none;
    }

    #main .entry-content.sin p strong {
        display: block;
        width: auto;
        margin-bottom: 6px;
    }

    #main .entry-content.sin h2 {
        font-size: 34px;
    }

}

@media (max-width:767px) {

    #main .entry-content.sin {
        padding: 0 18px;
    }

    #main .entry-meta {
        gap: 12px;
    }

    #main table th,
    #main table td {
        padding: 14px;
        font-size: 13px;
    }

    #main .wp-block-column li {
        display: block;
    }

    #main .wp-block-column li strong {
        display: block;
        margin-bottom: 5px;
    }

}





/*--------------------------------------------------------------
#  Featured Features Section
--------------------------------------------------------------*/
#featured-features {
    position: relative;
    overflow: hidden;
}

#featured-features .image-container {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
}

#featured-features .feature-img {
    margin-left: 4%;
    position: relative;
    width: 85%;
}

#featured-features .feature-img img {
    height: 657px;
    width: 100%;
}

#featured-features .entry-content {
    position: absolute;
    top: 20%;
    padding: 30px 50px;
    text-align: center;
}

#featured-features .entry-content h2 {
    color: #fff;
    transform: translateY(-100%) scale(0);
    transition: .5s;
    font-size: 40px;
    margin: 46% 0 0px 40px;
    letter-spacing: 1.32px;
    font-weight: bold;
}

#featured-features .entry-content h2::after {
    content: '';
    display: inline-block;
    width: 36px;
    height: 100px;
    background-image: url(assets/images/flower2.png);
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 10px;
    vertical-align: middle;
    position: relative;
    left: -5px;
    transform: rotateY(180deg);
}

#featured-features .entry-content a {
    color: #01549a;
    transform: scale(2);
    transition: .5s;
    opacity: 0;
    background-color: #fdc401;
    padding: 10px 20px;
    font-size: 17px;
    letter-spacing: 0.56px;
    text-transform: uppercase;
}

#featured-features .entry-content a::after {
    content: '\f061';
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    margin-left: 5px;
    font-size: 17px;
}

#featured-features .feature-img .entry-content {
    background-color: #000;
    opacity: 0.8;
    z-index: 2;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transition: 0.4s ease;
}

#featured-features .feature-img .entry-content h2 {
    transform: translateY(0%) scale(1);
}

#featured-features .feature-img .entry-content a {
    transform: scale(1);
    opacity: 1;
}

#featured-features .section-content {
    padding: 0px;
    margin-left: -30px;
}

#featured-features .featured-features-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
}

#featured-features .title-section {
    display: inline-block;
    margin: 0 0 17px;
}

#featured-features h3 {
    font-size: 24px;
    font-weight: bold;
    color: #101010;
    z-index: 1;
}

#featured-features .featuresbox .features-icon {
    font-size: 54px;
    color: #fdc401;
    position: relative;
    z-index: 1;
    left: 6px;
}

#featured-features .featuresbox .circle {
    position: absolute;
    background: #eff8ff;
    width: 79px;
    z-index: 0;
    height: 79px;
    border-radius: 50%;
    opacity: 0.9;
    top: 0;
    left: 0;
}

#featured-features .featuresbox .features-icon i,
#featured-features .featuresbox .features-icon svg {
    margin: 0 0 14px 18px;
    z-index: 2;
}

#featured-features .title-section h1 {
    font-size: 28px;
    font-weight: 500;
    color: #1D3176;
    border: none;
    position: relative;
}

#featured-features .title-section h1::after {
    content: "";
    width: 161px;
    height: 1px;
    background: #1D3176;
    position: absolute;
    bottom: 0px;
    margin-left: 0px;
}

#featured-features p.section-text {
    font-size: 18px;
    font-weight: 400;
    color: #000000;
    text-align: center;
    margin: 0 0 65px;
}

#featured-features .features-block {
    padding: 31px 25px 17px;
    position: relative;
    border: 1px solid;
    border-color: #01549a;
    transition: 0.4s ease-in;
}

#featured-features .features-block::before {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background: #021338;
    content: "";
    z-index: 0;
    transition: all 0.5s ease-in-out 0s;
    transform-style: preserve-3d;
    transform: perspective(1200px) rotateX(-30deg) translateZ(0px);
    opacity: 0;
}

#featured-features .features-block:first-child {
    background-color: #021338;
    z-index: 0;
}

#featured-features .features-block:hover::before {
    opacity: 1;
    transform: perspective(1200px) rotateX(0deg) translateZ(0px);
    transition-delay: 0.1s;
}

#featured-features .features-block:hover .features-title a {
    color: #fff;
}

#featured-features .features-block:hover .features-details p {
    color: #fff;
}

#featured-features .features-block:last-child:after {
    display: none;
}

#featured-features .featuresbox {
    border-radius: 8px;
    padding: 20px 0;
    position: relative;
}

#featured-features h4.features-title {
    margin: 20px 0;
}

#featured-features h4.features-title a {
    color: #000;
    text-decoration: none;
    font-weight: 500;
    font-size: 18px;
    transition: color 0.3s ease;
    letter-spacing: 0.59px;
    text-align: left !important;
}

#featured-features .features-block:first-child h4.features-title a {
    color: #fff;
}

#featured-features .features-details p {
    font-size: 16px;
    color: #707070;
    letter-spacing: 1.53px;
    text-align: left;
}

#featured-features .features-block:first-child .features-details p {
    color: #fff;
}

#featured-features .featuretextcontainer:hover h4.features-title a {
    color: #FAA919;
}

/*--------------------------------------------------------------
# Features Inner page Section
--------------------------------------------------------------*/

#main .features-inner-content {
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: 12px;
    padding: 2em 1em;
    text-align: center;
    height: 100%;
    transition: all 0.4s ease-in-out;
    background-color: #fff;
}

#main .features-inner-content:hover {
    background-color: #c42118;
    border: 1px solid #b81919;
}

#main .features-inner-content:nth-child(3n) {
    background-color: #c42118;
    border: 1px solid #b81919;
}

#main .features-inner-content:nth-child(3n) h4.features-title a,
#main .features-inner-content:nth-child(3n) .features-details p {
    color: #fff;
}

#main .features-inner-content:nth-child(3n) a i {
    color: #f18d88;
}

#main .box-left-brdr {
    width: 3px;
    height: 11em;
    position: absolute;
    left: -14px;
    top: 5em;
    background: #c42118;

}

#main .features-inner-content h4.features-title {
    margin: 20px;
}

#main .features-inner-content h4.features-title a {
    color: #000;
    text-decoration: none;
    font-weight: 500;
    font-size: 20px;
}

#main .features-inner-content .features-details p {
    font-size: 18px;
    color: #000;
}

#main .features-inner-content a i {
    color: #c42118;
    font-size: 60px;
}

#main .features-inner-content:hover h4.features-title a,
#main .features-inner-content:hover .features-details p {
    color: #fff;
}

#main .features-inner-content:hover a i {
    color: #f18d88;
}

/*--------------------------------------------------------------
#  Featured Our Steps Section
--------------------------------------------------------------*/
#featured-steps {
    position: relative;
    overflow: hidden;
    background-color: #f3f3f3;
}

#featured-steps .featured-steps-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
}

#featured-steps .entry-content3 {
    margin-top: 52px;
}

#featured-steps .entry-content3 h5 {
    font-size: 40px;
    color: #01549a;
    letter-spacing: 1.32px;
    font-weight: bold;
    margin-bottom: 40px;
    position: relative;
}

#featured-steps .entry-content3 h5::before {
    content: '';
    display: inline-block;
    width: 32px;
    /* Adjust size based on your design */
    height: 100px;
    /* Adjust size based on your design */
    background-image: url('assets/images/flower.png');
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 10px;
    /* Space between the image and the text */
    vertical-align: middle;
    /* Align the image vertically with the text */
    position: relative;
    left: 20px;
}

#featured-steps .section-content .steps-block {
    width: 100%;
    background-color: #fff;
    margin-top: 30px;
    margin-bottom: 38px;
    padding: 0 8px 35px;
    transition: all ease-in-out 0.5s;
}

#featured-steps .section-content .steps-block:hover {
    box-shadow: 0 26px 0 -13px #fff, 0 44px 0 -22px #fff;
    transition: all ease-in-out 0.5s;
    transform: translateY(-20px);
}

#featured-steps .section-content .steps-block:nth-child(2):hover {
    box-shadow: 0 26px 0 -13px #fff, 0 44px 0 -22px #fff;
}

#featured-steps .section-content .steps-block:nth-child(2) .steps-icon {
    width: 150px;
    height: 150px;
    font-size: 50px;
}

#featured-steps .section-content .steps-block .steps-icon {
    color: #fdc401;
    font-size: 45px;
    bottom: 4rem;
    position: relative;
    background-color: #fff;
    width: 127px;
    height: 128px;
    border: 10px solid;
    border-color: #f3f3f3;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#featured-steps .section-content .steps-block h4 a {
    color: #000;
    font-size: 24px;
    letter-spacing: 0.79px;
    font-weight: 500;
    text-transform: capitalize;
}

#featured-steps .section-content .steps-block:hover h4 a {
    color: #fdc401;
}

#featured-steps .section-content .steps-block .stepsbox {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#featured-steps .section-content .steps-block .stepsbox .steps-title {
    position: relative;
    top: 0rem;
    left: 0px;
    margin-top: 20px;
}

#featured-steps .section-content .steps-block .stepsbox .steps-text {
    font-size: 17px;
    color: #707070;
    letter-spacing: 0.51px;
    padding: 19px 24px;
}

#featured-steps .section-content .steps-block .stepsbox .steps-no {
    color: #01549a;
    font-size: 30px;
    letter-spacing: 0.99px;
    font-weight: 700;
    position: relative;
}

#featured-steps .stepsbox .steps-no::before {
    content: '';
    width: 13%;
    height: 27%;
    position: absolute;
    border-bottom: 3px solid;
    border-bottom-color: #01549a;
    border-left: 3px solid;
    border-left-color: #01549a;
    bottom: 0;
    left: -1rem;
    color: linear-gradient(270deg, #01549a 15%, #01549A2E 50%);
}

#featured-steps .stepsbox .steps-no::after {
    content: '';
    width: 13%;
    height: 27%;
    position: absolute;
    border-top: 3px solid;
    border-top-color: #01549a;
    border-right: 3px solid;
    border-right-color: #01549a;
    bottom: 2rem;
}

/*--------------------------------------------------------------
#  Featured clients Section
--------------------------------------------------------------*/
#featured-clients {
    position: relative;
    overflow: hidden;
}

#featured-clients .featured-clients-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
}

#featured-clients .section-content {
    position: relative;
    opacity: 0.8;
}

#featured-clients .featured-clients-item:hover img {
    transform: translateY(-15px);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

#featured-clients .featured-clients-item img {
    transition: all 0.5s ease-in-out;
}

/*--------------------------------------------------------------
#  Inner page Gallery
--------------------------------------------------------------*/

#main .gallery-title {
    display: block;
}

#content .gallery-inner-content {
    position: relative;
    overflow: hidden;
    margin: 0 0;
}

#main .gallerybox {
    margin: 0 auto;
}

#main .gallerybox .img1-3 {
    height: 303px;
}

#main .gallerybox .img2 {
    height: 263px;
}

#main .gallerybox .img4 {
    height: 342px;
}

#main .gallerybox .img4-parent {
    top: -40px;
}

#main .gallerybox .img5 {
    height: 342px;
}

#main .gallery-image {
    position: relative;
}

#main .entry-content .gallery-image p {
    position: absolute;
    bottom: 0px;
    left: 0;
    background-color: #01549a;
    width: 100%;
    font-size: 18px;
    letter-spacing: 0.59px;
    line-height: 31px;
    padding: 24px 38px 24px;
    color: #fff;
    opacity: 0.8;
    margin: 0;
}

#main .gallery-image .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #E9F5FF;
    overflow: hidden;
    width: 100%;
    height: 100%;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: .3s ease;
    transition: .3s ease;
    opacity: 0.3;
    z-index: 1;
}

#main .gallery-image:hover .overlay {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.fancybox-toolbar {
    top: 40px !important;
}


/*--------------------------------------------------------------
# Latest Posts(blog)
--------------------------------------------------------------*/
#featured-posts {
    position: relative;
    overflow: hidden;
    padding-top: 5em;
    background: #f0edec;
}

/* #featured-posts .posts-overlay {
    background: #0F5290bf;
    background: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0.9;
} */

#featured-posts .featured-posts-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 1;
}

#featured-posts .title-section {
    display: block;
    margin-bottom: 1em;
}

#featured-posts .title-section h1 {
    /* margin: 0 0 20px; */
    font-size: 40px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: 0px;
    color: #01549a;
    padding: 0 0px;
    border-radius: 0px;
    position: relative;
}

#featured-posts .title-section h1::before {
    content: '';
    display: inline-block;
    width: 35px;
    /* Adjust size based on your design */
    height: 100px;
    /* Adjust size based on your design */
    background-image: url('assets/images/flower.png');
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 10px;
    /* Space between the image and the text */
    vertical-align: middle;
    /* Align the image vertically with the text */
    position: relative;
    left: 20px;
}

#featured-posts .featured-image {
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    padding: 0;
    height: 515px;
    width: 100%;
    transition: 0.5s;
    position: relative;
}

#featured-posts .entry-container {
    position: absolute;
    bottom: 0px;
    background: linear-gradient(180deg, #00000000, #000000);
}

#featured-posts .post-item {
    /* border-radius: 10px; */
    background-color: #fff;
    /* padding: 5px; */
    position: relative;
    width: 90%;
}

#featured-posts .post-item:hover h2.entry-title a {
    color: #F6BB19;
}

#featured-posts .entry-contentbox {
    padding: 0px 28px 18px 39px;
    position: relative;
}

#featured-posts .entry-contentbox .entry-title {
    margin: 0 0px 20px;
}

#featured-posts .entry-meta {
    padding: 6px 7px 0;
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 10px 0;
    text-decoration: none;
    border: none;
    justify-content: space-between;
}

#featured-posts .entry-meta a {
    font-size: 14px;
    color: #fff;
}

#featured-posts .entry-meta i,
#featured-posts .entry-meta svg {
    font-size: 18px;
    text-decoration: none;
    color: #fdc401;
    line-height: 8px;
    text-align: center;
    font-weight: 400;
}

#featured-posts .entry-meta .d-flex {
    gap: 30px;
}

#featured-posts h2.entry-title a {
    color: #fff;
    text-decoration: none;
    font-size: 20px;
    font-weight: 400;
    position: relative;
    line-height: 34px;
    letter-spacing: 0.66px;
}

#featured-posts .entry-content {
    padding: 20px 0 20x 22px;
}

#featured-posts .entry-content p {
    color: #000;
    line-height: 18px;
    margin-bottom: 5px;
    padding-right: 10px;
    font-size: 15px;
    z-index: 1;
    position: relative;
}

#featured-posts .posts-date {
    padding: 12px 0 0 0;
    display: flex;
    justify-content: space-between;
}

#featured-posts .posts-date .arrow-up {
    margin-right: 4rem;
    transform: rotate(45deg);
    font-size: 18px;
    color: #fff;
    transition: 0.4s;
}

#featured-posts .posts-date svg {
    color: #fdc401;
}

#featured-posts .posts-date a {
    color: #fff;
    font-weight: 300;
}

#featured-posts hr {
    width: 90%;
    color: #fff;
    opacity: 1;
}

/*--------------------------------------------------------------
# Inner Blog Posts
--------------------------------------------------------------*/
/* Container & Grid Setup */

.blog-fullwidth-custom::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background: #f7f4eb;
    z-index: -1;
}

.blog-fullwidth-custom {
    background-color: #f7f4eb;
    padding: 60px 20px;
    font-family: Arial, sans-serif;
}

.container-custom {
    max-width: 1200px;
    margin: 0 auto;
}

.blog-grid-custom {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 45px;
    /* Vertical and horizontal gap */
}

/* Horizontal Blog Cards with Bottom Border */
.custom-blog-card {
    display: flex;
    align-items: flex-start;
    background: transparent;
    overflow: hidden;

    /* Adds the separator line */
    border-bottom: 1px solid #e4e4e4;
    padding-bottom: 35px;
    /* Space between content and the line */
    margin-bottom: 5px;
    /* Space after the line before the next row */
}

/* Left Image Side */
.custom-blog-card .card-image-side {
    flex: 0 0 42%;
    /* Controls the width balance of the image vs text */
    margin-right: 20px;
}

.custom-blog-card .card-image-side img {
    width: 100%;
    height: 180px;
    /* Fixed height matching the clean proportions */
    object-fit: cover;
    /* Keeps images crisp and scaled correctly */
    display: block;
}

/* Right Content Side */
.custom-blog-card .card-content-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Meta Categories & Dates */
.custom-blog-card .card-meta {
    font-size: 11px;
    letter-spacing: 1px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

.custom-blog-card .card-category {
    color: #cbb27a;
    /* Gold tint heading color */
    font-weight: 700;
}

.custom-blog-card .meta-dot {
    margin: 0 6px;
    color: #a1a1a1;
}

.custom-blog-card .card-date {
    color: #8a8a8a;
    font-weight: 500;
}

/* Bold Titles */
.custom-blog-card .card-title {
    margin: 0 0 10px 0;
    line-height: 1.2;
}

.custom-blog-card .card-title a {
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 100;
    color: #111111;
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: color 0.2s ease;
}

.custom-blog-card .card-title a:hover {
    color: #cbb27a;
}

/* Short Snippet Text */
.custom-blog-card .card-excerpt p {
    font-size: 14px;
    line-height: 1.5;
    color: #555555;
    margin: 0 0 15px 0;
}

/* Read More Links */
.custom-blog-card .card-readmore {
    font-size: 12px;
    font-weight: 700;
    color: #111111;
    text-decoration: none;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
}

.custom-blog-card .card-readmore .arrow {
    margin-left: 8px;
    transition: transform 0.2s ease;
}

.custom-blog-card .card-readmore .arrow svg,
.custom-blog-card .card-readmore .arrow i {
    color: #cbb27a;
}

.custom-blog-card .card-readmore:hover .arrow {
    transform: translateX(4px);
}

/* Square Styled Block Pagination */
.custom-pagination {
    margin-top: 60px;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.custom-pagination a,
.custom-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    text-decoration: none;
    color: #111111;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
    border: 1px solid #e4e4e4;
}

/* Active Highlight Block styling matching the gold square pagination block */
.custom-pagination .current {
    background-color: #cbb27a;
    color: #ffffff;
}

.custom-pagination a:hover {
    background-color: rgba(203, 178, 122, 0.2);
}

/* Responsive Breakdown for mobile viewports */
@media (max-width: 991px) {
    .blog-grid-custom {
        grid-template-columns: 1fr;
        /* Drop down to single columns on tablets/mobile devices */
        gap: 35px;
    }
}

@media (max-width: 576px) {
    .custom-blog-card {
        flex-direction: column;
        /* Stack image over text if on very narrow displays */
    }

    .custom-blog-card .card-image-side {
        margin-right: 0;
        margin-bottom: 15px;
        width: 100%;
    }
}

/* blog with sidebar */

.blog-with-sidebar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background: #f7f4eb;
    z-index: -1;
}

/* Main Canvas Background */
.blog-with-sidebar {
    background-color: #f7f4eb;
    /* Warm off-white backdrop matching your image layout */
    padding: 60px 0;
    font-family: Arial, sans-serif;
}

/* Neutralize & Override the 2-Column Grid to force 1 Post Per Row */
.blog-with-sidebar .grid,
.blog-with-sidebar [class*="grid-cols"],
#secondary .grid,
#secondary [class*="grid-cols"] {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    /* Let card padding create exact design gaps instead */
}



/* blog with side bar  */


/* ==========================================================================
   Complete Sidebar Widget Styles (Northside FC Theme)
   ========================================================================== */

/* Main Sidebar Structure & Alignment */
.blog-with-sidebar .col-lg-4,
.standard-sidebar-area,
#secondary .col-lg-4,
#secondary .standard-sidebar-area,
#secondary .content-area,
#secondary .single,
#primary .col-lg-4,
#primary .standard-sidebar-area,
#primary .content-area,
#primary .single {
    display: flex;
    flex-direction: column;
    gap: 30px;
    /* Precise spacing between widget cards */
    padding-left: 20px;
}

/* White Box Widget Container Layout */
.blog-with-sidebar .widget,
#primary .widget,
#secondary .widget {
    background: #f7f4eb;
    border: 1px solid #e4e4e4;
    /* Soft premium framework outline */
    padding: 30px 25px;
    margin-bottom: 0;
    /* Managed cleanly by parent gap flex */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    box-sizing: border-box;
}

#secondary .widget,
#primary .widget {
    margin-bottom: 32px;
}

/* Widget Headings (Bold, Modern Condensed Caps) */
.blog-with-sidebar .widget-title,
#primary .widget-title,
#secondary .widget-title {
    font-size: 16px;
    text-transform: uppercase;
    color: #cbb27a;
    margin: 0 0 20px 0;
    padding-bottom: 0;
    letter-spacing: 0.8px;
    line-height: 1.2;
}

/* Strips any old header accent lines from generic theme styles */
.blog-with-sidebar .widget-title::after,
#primary .widget-title::after,
#secondary .widget-title::after {
    display: none !important;
}

/* Core Widget List Rule Settings */
.blog-with-sidebar .widget ul,
#primary .widget ul,
#secondary .widget ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.blog-with-sidebar .widget ul li,
#primary .widget ul li,
#secondary .widget ul li {
    font-size: 13px;
    color: #333333;
    border-bottom: 1px solid #e4e4e4;
    /* Clean solid row divider line */
    display: flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0px;
}

/* Reset alignment rules exclusively for Recent Posts */
/* ==========================================================================
   Archives & Recent Posts Alignment Overrides with Calendar Icons
   ========================================================================== */

/* 1. Apply the left-aligned, top-anchored layout to both Recent Posts and Archives */
.blog-with-sidebar .widget_recent_entries ul li,
.blog-with-sidebar .widget_webnotick_recent_posts_thumb ul li,
.blog-with-sidebar .custom-side-recent-list li,
#secondary .widget_recent_entries ul li,
#secondary .widget_webnotick_recent_posts_thumb ul li,
#secondary .custom-side-recent-list li,
#primary .widget_recent_entries ul li,
#primary .widget_webnotick_recent_posts_thumb ul li,
#primary .custom-side-recent-list li {
    justify-content: flex-start !important;
    /* Aligns content tight to the left side */
    align-items: flex-start !important;
    /* Anchors items to the top row line */
}


.blog-with-sidebar .widget_archive ul li,
#primary .widget_archive ul li,
#secondary .widget_archive ul li {
    justify-content: flex-start !important;
    /* Aligns content tight to the left side */
}

/* 2. Style adjustment for Archives rows to handle icon spacing */
.blog-with-sidebar .widget_archive ul li,
#primary .widget_archive ul li,
#secondary .widget_archive ul li {
    display: flex !important;
    gap: 12px;
    /* Uniform gap between the icon, link text, and post counter */
}

/* 3. Inject the Calendar Icon before Archive Links */
/* 3. Inject the Calendar Icon before Archive Links */
.blog-with-sidebar .widget_archive ul li a::before,
#primary .widget_archive ul li a::before,
#secondary .widget_archive ul li a::before {
    content: "\f508";
    /* WordPress Dashicon calendar glyph */
    font-family: "dashicons";
    display: inline-block;
    margin-right: 12px;
    font-size: 14px;
    color: #111111;
    /* Signature Gold Accent to match your categories styling */
    vertical-align: middle;
    font-weight: normal;
}

/* ==========================================================================
   Categories Widget Custom Icons Integration
   ========================================================================== */

/* Ensure the category row links make room for a left icon */
.blog-with-sidebar .widget_categories ul li,
#primary .widget_categories ul li,
#secondary .widget_categories ul li {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: relative;
}

/* Set up a generic icon template space before the link text */
.blog-with-sidebar .widget_categories ul li a::before,
#primary .widget_categories ul li a::before,
#secondary .widget_categories ul li a::before {
    display: inline-block;
    margin-right: 12px;
    font-size: 22px;
    color: #cbb27a;
    /* Matches your premium brand accent gold */
    vertical-align: middle;
    font-weight: normal;
}

/* --------------------------------------------------------------------------
   Assign Specific Dashicons Based on Row Order 
   (Uses native WP Dashicons built into your admin framework)
   -------------------------------------------------------------------------- */

/* Row 1: Club News / Home Icon */
.blog-with-sidebar .widget_categories ul li:nth-child(1) a::before,
#primary .widget_categories ul li:nth-child(1) a::before,
#secondary .widget_categories ul li:nth-child(1) a::before {
    content: "\f102";
    /* WP Dashicons Home/Building symbol */
    font-family: "dashicons";
}

/* Row 2: Match Reports / Clipboard or Document Icon */
.blog-with-sidebar .widget_categories ul li:nth-child(2) a::before,
#primary .widget_categories ul li:nth-child(2) a::before,
#secondary .widget_categories ul li:nth-child(2) a::before {
    content: "\f497";
    /* Document/Report symbol */
    font-family: "dashicons";
}

/* Row 3: Academy / Graduation or Star Icon */
.blog-with-sidebar .widget_categories ul li:nth-child(3) a::before,
#primary .widget_categories ul li:nth-child(3) a::before,
#secondary .widget_categories ul li:nth-child(3) a::before {
    content: "\f313";
    /* Star/Reward symbol */
    font-family: "dashicons";
}

/* Row 4: Community / Groups Icon */
.blog-with-sidebar .widget_categories ul li:nth-child(4) a::before,
#primary .widget_categories ul li:nth-child(4) a::before,
#secondary .widget_categories ul li:nth-child(4) a::before {
    content: "\f307";
    /* Groups/People symbol */
    font-family: "dashicons";
}

/* Row 5: Interviews / Microphone or Speech Bubble Icon */
.blog-with-sidebar .widget_categories ul li:nth-child(5) a::before,
#primary .widget_categories ul li:nth-child(5) a::before,
#secondary .widget_categories ul li:nth-child(5) a::before {
    content: "\f125";
    /* Message/Bubble symbol */
    font-family: "dashicons";
}

/* Row 6: Behind the Scenes / Camera or Video Icon */
.blog-with-sidebar .widget_categories ul li:nth-child(6) a::before,
#primary .widget_categories ul li:nth-child(6) a::before,
#secondary .widget_categories ul li:nth-child(6) a::before {
    content: "\f306";
    /* Camera symbol */
    font-family: "dashicons";
}

/* Generic Fallback for any extra categories added later */
.blog-with-sidebar .widget_categories ul li:nth-child(n+7) a::before,
#primary .widget_categories ul li:nth-child(n+7) a::before,
#secondary .widget_categories ul li:nth-child(n+7) a::before {
    content: "\f115";
    /* Standard bullet point folder symbol */
    font-family: "dashicons";
}

/* First and Last Row Padding Resets */
.blog-with-sidebar .widget ul li:first-child,
#primary .widget ul li:first-child,
#secondary .widget ul li:first-child {
    padding-top: 0;
}

.blog-with-sidebar .widget ul li:last-child,
#primary .widget ul li:last-child,
#secondary .widget ul li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Global Text Hyperlinks Inside Lists */
.blog-with-sidebar .widget ul li a,
#primary .widget ul li a,
#secondary .widget ul li a {
    color: #222222;
    text-decoration: none !important;
    font-weight: 600;
    font-family: Arial, sans-serif;
    transition: color 0.2s ease;
}

.blog-with-sidebar .widget ul li a:hover,
#primary .widget ul li a:hover,
#secondary .widget ul li a:hover {
    color: #cbb27a;
    /* Signature Gold Accent on Hover */
}

/* --------------------------------------------------------------------------
   Categories & Archives Count Badges
   -------------------------------------------------------------------------- */
.blog-with-sidebar .widget_categories li,
.blog-with-sidebar .widget_archive li,
#primary .widget_categories li,
#primary .widget_archive li,
#secondary .widget_categories li,
#secondary .widget_archive li {
    font-weight: 500;
    color: #555555;
    font-size: 13px;
}

/* --------------------------------------------------------------------------
   Custom Recent Posts Widget (With Featured Images Support)
   -------------------------------------------------------------------------- */
.blog-with-sidebar .widget_webnotick_recent_posts_thumb ul,
.blog-with-sidebar .widget_recent_entries ul,
#primary .widget_webnotick_recent_posts_thumb ul,
#primary .widget_recent_entries ul,
#secondary .widget_webnotick_recent_posts_thumb ul,
#secondary .widget_recent_entries ul {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.blog-with-sidebar .widget_webnotick_recent_posts_thumb ul li,
.blog-with-sidebar .widget_recent_entries ul li,
#primary .widget_webnotick_recent_posts_thumb ul li,
#primary .widget_recent_entries ul li,
#secondary .widget_webnotick_recent_posts_thumb ul li,
#secondary .widget_recent_entries ul li {
    display: flex !important;
    align-items: center;
    gap: 6px;
    padding: 0 !important;
}

/* Thumbnail Holder Box Dimensions */
.blog-with-sidebar .widget-thumb-holder,
#primary .widget-thumb-holder,
#secondary .widget-thumb-holder {
    flex: 0 0 65px;
    width: 65px;
    height: 50px;
    overflow: hidden;
}

.blog-with-sidebar .sidebar-recent-thumb,
.blog-with-sidebar .widget_recent_entries ul li img,
#primary .sidebar-recent-thumb,
#primary .widget_recent_entries ul li img,
#secondary .sidebar-recent-thumb,
#secondary .widget_recent_entries ul li img {
    width: 65px !important;
    height: 50px !important;
    object-fit: cover;
    display: block;
    border-radius: 0px;
    /* Kept perfectly square per design specs */
}

/* Text Content Wrapper Next To Image */
.blog-with-sidebar .widget-text-holder,
#primary .widget-text-holder,
#secondary .widget-text-holder {
    flex: 1;
}

#primary .blog-with-sidebar .widget-text-holder .recent-post-title,
#primary .blog-with-sidebar .widget_recent_entries ul li a,
#primary .widget-text-holder .recent-post-title,
#primary .widget_recent_entries ul li a,
#secondary .blog-with-sidebar .widget-text-holder .recent-post-title,
#secondary .blog-with-sidebar .widget_recent_entries ul li a,
#secondary .widget-text-holder .recent-post-title,
#secondary .widget_recent_entries ul li a,
#main .blog-with-sidebar .widget-text-holder .recent-post-title,
#main .blog-with-sidebar .widget_recent_entries ul li a {
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #111111;
    text-decoration: none !important;
    display: block;
    margin-bottom: 2px;
}

.blog-with-sidebar .widget-text-holder .recent-post-title:hover,
#primary .widget-text-holder .recent-post-title:hover,
#secondary .widget-text-holder .recent-post-title:hover {
    color: #cbb27a;
}

.blog-with-sidebar .post-date,
#primary .post-date,
#secondary .post-date {
    font-size: 11px;
    color: #8a8a8a;
    display: block;
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   Minimal Clean Tag Cloud Widget
   -------------------------------------------------------------------------- */
.blog-with-sidebar .tagcloud,
#primary .tagcloud,
#secondary .tagcloud {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.blog-with-sidebar .tagcloud a,
#primary .tagcloud a,
#secondary .tagcloud a {
    display: inline-block;
    background-color: #f7f4eb;
    color: #444444;
    font-size: 11px !important;
    /* Strict uniform sizing override */
    font-weight: 600;
    text-transform: capitalize;
    text-decoration: none !important;
    padding: 5px 12px;
    border: 1px solid #e5e0d8;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.blog-with-sidebar .tagcloud a:hover,
#primary .tagcloud a:hover,
#secondary .tagcloud a:hover {
    background-color: #f7f4eb;
    color: #111111;
    border-color: #cbb27a;
}

/* Responsive Tablet/Mobile Fixes */
@media (max-width: 991px) {

    .blog-with-sidebar .col-lg-4,
    .standard-sidebar-area,
    #primary .col-lg-4,
    #primary .standard-sidebar-area,
    #primary .content-area,
    #primary .single,
    #secondary .col-lg-4,
    #secondary .standard-sidebar-area,
    #secondary .content-area,
    #secondary .single {
        padding-left: 0;
        margin-top: 40px;
        /* Pushes sidebar neatly under content grid on mobile */
    }
}

/* Custom Recent Posts Layout Fixes */
.blog-with-sidebar .custom-recent-posts-list,
#primary .custom-recent-posts-list,
#secondary .custom-recent-posts-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.blog-with-sidebar .recent-post-item,
#primary .recent-post-item,
#secondary .recent-post-item {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    border-bottom: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Image Containers */
.blog-with-sidebar .widget-thumb-holder,
#primary .widget-thumb-holder,
#secondary .widget-thumb-holder {
    flex: 0 0 65px !important;
    width: 65px !important;
    height: 50px !important;
}

.blog-with-sidebar .sidebar-recent-thumb,
#primary .sidebar-recent-thumb,
#secondary .sidebar-recent-thumb {
    width: 65px !important;
    height: 50px !important;
    object-fit: cover !important;
    display: block !important;
}

/* Gray block helper to check layout if no Featured Image exists */
.blog-with-sidebar .sidebar-recent-thumb-placeholder,
#primary .sidebar-recent-thumb-placeholder,
#secondary .sidebar-recent-thumb-placeholder {
    width: 65px;
    height: 50px;
    background-color: #e5e0d8;
    display: block;
    position: relative;
}

.blog-with-sidebar .sidebar-recent-thumb-placeholder::before,
#primary .sidebar-recent-thumb-placeholder::before,
#secondary .sidebar-recent-thumb-placeholder::before {
    content: "No Img";
    font-size: 9px;
    color: #8a8a8a;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-transform: uppercase;
    font-weight: 700;
}

/* Text elements side alignment */
.blog-with-sidebar .widget-text-holder,
#primary .widget-text-holder,
#secondary .widget-text-holder {
    flex: 1 !important;
}

.blog-with-sidebar .recent-post-title,
#primary .recent-post-title,
#secondary .recent-post-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #111111;
    text-decoration: none !important;
    display: block !important;
    margin-bottom: 2px !important;
}

.blog-with-sidebar .recent-post-title:hover,
#primary .recent-post-title:hover,
#secondary .recent-post-title:hover {
    color: #cbb27a;
}

.blog-with-sidebar .post-date,
#primary .post-date,
#secondary .post-date {
    font-size: 11px !important;
    color: #8a8a8a;
    display: block !important;
    font-weight: 500 !important;
}

/* ==========================================================================
   Search Widget
   ========================================================================== */

/* Search Form */
.blog-with-sidebar .widget_search .search-form,
#primary .widget_search .search-form,
#secondary .widget_search .search-form {
    position: relative;
    width: 100%;
}

/* Label */
.blog-with-sidebar .widget_search label,
#primary .widget_search label,
#secondary .widget_search label {
    display: block;
    width: 100%;
    margin: 0;
}

/* Search Input */
.blog-with-sidebar .widget_search .search-field,
#primary .widget_search .search-field,
#secondary .widget_search .search-field {
    width: 100%;
    height: 52px;
    padding: 0 18px 0 50px;
    background-color: #ffffff;
    border: 1px solid #e4e4e4;
    color: #222222;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 52px;
    box-sizing: border-box;
    transition: all .3s ease;
    outline: none;
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
}

/* Placeholder */
.blog-with-sidebar .widget_search .search-field::placeholder,
#primary .widget_search .search-field::placeholder,
#secondary .widget_search .search-field::placeholder {
    color: #8a8a8a;
    opacity: 1;
}

/* Hover */
.blog-with-sidebar .widget_search .search-field:hover,
#primary .widget_search .search-field:hover,
#secondary .widget_search .search-field:hover {
    border-color: #cbb27a;
}

/* Focus */
.blog-with-sidebar .widget_search .search-field:focus,
#primary .widget_search .search-field:focus,
#secondary .widget_search .search-field:focus {
    border-color: #cbb27a;
    box-shadow: none;
    outline: none;
}

/* Search Button */
.blog-with-sidebar .widget_search .search-submit,
#primary .widget_search .search-submit,
#secondary .widget_search .search-submit {
    position: absolute;
    top: 0;
    left: 0;
    width: 52px;
    height: 52px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .3s ease;
}

/* SVG Search Icon */
.blog-with-sidebar .widget_search .search-submit svg,
#primary .widget_search .search-submit svg,
#secondary .widget_search .search-submit svg {
    width: 16px;
    height: 16px;
    color: #cbb27a;
    transition: fill .3s ease;
}

/* Hide Screen Reader Text */
.blog-with-sidebar .widget_search .screen-reader-text,
#primary .widget_search .screen-reader-text,
#secondary .widget_search .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Responsive */
@media (max-width: 767px) {

    .blog-with-sidebar .widget_search .search-field,
    #primary .widget_search .search-field,
    #secondary .widget_search .search-field {
        height: 48px;
        padding: 0 50px 0 16px;
        font-size: 13px;
        line-height: 48px;
    }

    .blog-with-sidebar .widget_search .search-submit,
    #primary .widget_search .search-submit,
    #secondary .widget_search .search-submit {
        width: 48px;
        height: 48px;
    }

    .blog-with-sidebar .widget_search .search-submit svg,
    #primary .widget_search .search-submit svg,
    #secondary .widget_search .search-submit svg {
        width: 15px;
        height: 15px;
    }
}

/* ==========================================================================
   Calendar Widget
   ========================================================================== */

/* Calendar Wrapper */
.blog-with-sidebar .widget_calendar .calendar_wrap,
#primary .widget_calendar .calendar_wrap,
#secondary .widget_calendar .calendar_wrap {
    width: 100%;
}

/* Calendar Table */
.blog-with-sidebar .widget_calendar table,
#primary .widget_calendar table,
#secondary .widget_calendar table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    background: #ffffff;
    border: 1px solid #e4e4e4;
}

/* Month Caption */
.blog-with-sidebar .widget_calendar caption,
#primary .widget_calendar caption,
#secondary .widget_calendar caption {
    background: #cbb27a;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 12px;
    caption-side: top;
    letter-spacing: .5px;
}

/* Days Heading */
.blog-with-sidebar .widget_calendar thead th,
#primary .widget_calendar thead th,
#secondary .widget_calendar thead th {
    background: #f7f4eb;
    color: #222222;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    padding: 10px 0;
    border: 1px solid #e4e4e4;
}

/* Date Cells */
.blog-with-sidebar .widget_calendar tbody td,
#primary .widget_calendar tbody td,
#secondary .widget_calendar tbody td {
    height: 42px;
    text-align: center;
    font-size: 13px;
    color: #555555;
    border: 1px solid #e4e4e4;
    transition: all .3s ease;
}

/* Empty Cells */
.blog-with-sidebar .widget_calendar tbody td.pad,
#primary .widget_calendar tbody td.pad,
#secondary .widget_calendar tbody td.pad {
    background: #fafafa;
}

/* Hover */
.blog-with-sidebar .widget_calendar tbody td:hover,
#primary .widget_calendar tbody td:hover,
#secondary .widget_calendar tbody td:hover {
    background: #f7f4eb;
}

/* Today's Date */
.blog-with-sidebar .widget_calendar #today,
#primary .widget_calendar #today,
#secondary .widget_calendar #today {
    background: #cbb27a;
    color: #ffffff;
    font-weight: 700;
}

/* Dates with Posts */
.blog-with-sidebar .widget_calendar tbody td a,
#primary .widget_calendar tbody td a,
#secondary .widget_calendar tbody td a {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 42px;
    color: #222222;
    text-decoration: none;
    font-weight: 600;
    transition: all .3s ease;
}

.blog-with-sidebar .widget_calendar tbody td a:hover,
#primary .widget_calendar tbody td a:hover,
#secondary .widget_calendar tbody td a:hover {
    background: #111111;
    color: #ffffff;
}

/* Calendar Navigation */
.blog-with-sidebar .widget_calendar .wp-calendar-nav,
#primary .widget_calendar .wp-calendar-nav,
#secondary .widget_calendar .wp-calendar-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    font-size: 13px;
}

/* Navigation Links */
.blog-with-sidebar .widget_calendar .wp-calendar-nav a,
#primary .widget_calendar .wp-calendar-nav a,
#secondary .widget_calendar .wp-calendar-nav a {
    color: #222222;
    text-decoration: none;
    font-weight: 600;
    transition: color .3s ease;
}

.blog-with-sidebar .widget_calendar .wp-calendar-nav a:hover,
#primary .widget_calendar .wp-calendar-nav a:hover,
#secondary .widget_calendar .wp-calendar-nav a:hover {
    color: #cbb27a;
}

/* Empty Navigation Space */
.blog-with-sidebar .widget_calendar .wp-calendar-nav .pad,
#primary .widget_calendar .wp-calendar-nav .pad,
#secondary .widget_calendar .wp-calendar-nav .pad {
    flex: 1;
}

/* sidebar css end  */


.backtotop {
    background-color: #FDAF1B;
    z-index: 300;
    font-size: 25px;
    position: fixed;
    bottom: -100px;
    right: 25px;
    color: #fff;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    -webkit-transition: all .7s ease-in-out;
    -moz-transition: all .7s ease-in-out;
    -o-transition: all .7s ease-in-out;
    -ms-transition: all .7s ease-in-out;
    transition: all .7s ease-in-out;
}

.backtotop:hover,
.backtotop:focus {
    background-color: #000;
}

#loader-wrapper {
    overflow-x: hidden;
    overflow-y: hidden;
    vertical-align: middle;
    background-color: #fff;
    position: fixed;
    width: 100%;
    top: 0;
    bottom: 0;
    height: 100%;
    min-height: 100%;
    z-index: 9999;
}

#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 80px;
    height: 80px;
}

.preloader-one #loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #3498db;
    -webkit-animation: spin 2s linear infinite;
    /* / Chrome, Opera 15+, Safari 5+ / */
    animation: spin 2s linear infinite;
    /* / Chrome, Firefox 16+, IE 10+, Opera / */
}

.preloader-one #loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #e74c3c;

    -webkit-animation: spin 3s linear infinite;
    /* / Chrome, Opera 15+, Safari 5+ / */
    animation: spin 3s linear infinite;
    /* / Chrome, Firefox 16+, IE 10+, Opera / */
}

.preloader-one #loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #f9c922;
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

#loader svg,
.preloader-disable #loader-wrapper {
    display: none;

}

#loader svg {
    width: 70px;
    height: 70px;
    fill: #d72924;
}

.preloader-two #loader .loader-two,
.preloader-three #loader .loader-three,
.preloader-four #loader .loader-four,
.preloader-five #loader .loader-five {
    display: block;
}

/* / Scroll to top Button / */
.scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
}

.scroll-to-top a {
    background-color: var(--theme-color);
    padding: 8px;
    display: flex;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.scroll-to-top a img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

/*--------------------------------------------------------------
#                   RESPONSIVE
--------------------------------------------------------------*/
@media screen and (min-width: 567px) {

    .footer-widgets-area.col-2 .hentry,
    .footer-widgets-area.col-4 .hentry {
        width: 50%;
        float: left;
    }

    .footer-widgets-area.col-2 .hentry:nth-child(2n+1),
    .footer-widgets-area.col-4 .hentry:nth-child(2n+1) {
        clear: left;
    }

    .footer-widgets-area.col-2 .hentry:nth-child(odd),
    .footer-widgets-area.col-4 .hentry:nth-child(odd) {
        padding-right: 40px;
    }

    .footer-widgets-area.col-2 .hentry:nth-last-child(-n+2),
    .footer-widgets-area.col-4 .hentry:nth-last-child(-n+2) {
        margin-bottom: 0;
    }

    #featured-clients .section-content .gap-20 {
        gap: 3rem !important;
    }
}

@media screen and (min-width: 767px) {

    .col-2,
    .col-3,
    .col-4,
    .col-5,
    .col-6 {
        margin: 0 -15px;
    }

    .col-2 article,
    .col-3 article,
    .col-4 article,
    .col-5 article,
    .col-6 article {
        padding: 0 19px;
        float: left;
        width: 50%;
        margin-bottom: 30px;
    }

    .col-2 article:nth-child(2n+1),
    .col-3 article:nth-child(2n+1),
    .col-4 article:nth-child(2n+1),
    .col-5 article:nth-child(2n+1),
    .col-6 article:nth-child(2n+1) {
        clear: left;
    }

    .col-2 article:nth-last-child(-n+2),
    .col-3 article:nth-last-child(-n+2),
    .col-4 article:nth-last-child(-n+2),
    .col-5 article:nth-last-child(-n+2),
    .col-6 article:nth-last-child(-n+2) {
        margin-bottom: 0;
    }

    .footer-widgets-area.col-3 .hentry {
        width: 33.33%;
        float: left;
        margin-bottom: 0;
    }

    .footer-widgets-area.col-3 .hentry:not(:last-child) {
        padding-right: 40px;
    }

    .site-info.col-2 span {
        float: left;
        width: 50%;
        text-align: left;
    }

    .site-info.col-2 span:nth-child(2) {
        float: right;
        text-align: right;
    }

}

@media screen and (min-width: 992px) {

    .col-3 article,
    .col-5 article,
    .col-6 article {
        width: 33.33%;
    }

    .col-3 article:nth-child(2n+1),
    .col-5 article:nth-child(2n+1),
    .col-6 article:nth-child(2n+1) {
        clear: none;
    }

    .col-3 article:nth-child(3n+1),
    .col-5 article:nth-child(3n+1),
    .col-6 article:nth-child(3n+1) {
        clear: left;
    }

    .col-3 article:nth-last-child(-n+3),
    .col-5 article:nth-last-child(-n+3),
    .col-6 article:nth-last-child(-n+3) {
        margin-bottom: 0;
    }

    .col-4 article {
        width: 25%;
    }

    .col-5 article {
        width: 20%;
    }

    .col-6 article {
        width: 16.66%;
    }

    .col-4 article:nth-child(2n+1),
    .col-5 article:nth-child(3n+1),
    .col-6 article:nth-child(3n+1) {
        clear: none;
    }

    .col-4 article:nth-child(4n+1),
    .col-5 article:nth-child(5n+1),
    .col-6 article:nth-child(6n+1) {
        clear: left;
    }

    .col-4 article:nth-last-child(-n+4),
    .col-5 article:nth-last-child(-n+5),
    .col-6 article:nth-last-child(-n+6) {
        margin-bottom: 0;
    }

    /* #top-bar .widget+.widget {
        margin-top: 0;
    } */

    #top-bar.col-2 .widget {
        float: left;
        text-align: left;
        padding: 6px 0;
    }

    #top-bar.col-2 .widget+.widget {
        float: right;
        text-align: right;
        padding: 0;
    }

    nav.navigation.pagination {
        margin-top: 63px;
    }



    .footer-widgets-area.col-4 .hentry {
        width: 25%;
        padding-right: 40px;
    }

    .footer-widgets-area.col-4 .hentry:last-child {
        padding-right: 0;
    }

    .footer-widgets-area.col-4 .hentry:nth-child(2n+1) {
        clear: none;
    }

    .footer-widgets-area.col-4 .hentry:nth-child(4n+1) {
        clear: left;
    }

    .footer-widgets-area.col-4 .hentry:nth-last-child(-n+4) {
        margin-bottom: 0;
    }
}

@media screen and (min-device-width: 820px) and (max-device-width: 1024px) {

    .entry-title,
    .section-title,
    #featured-team .entry-content {
        margin: 0;
    }

    /* inner page testimonial */
    .main-navigation ul.nav-menu>li>a {
        margin: 0 29px 0 0;
    }


    #colophon .widget-title {
        line-height: 30px;
    }

    /* team */
    #main .team-inner-content .entry-content {
        margin: 0 9px 0 0;
    }

    /* services */
    .main-navigation ul.nav-menu>li>a {
        margin: 0 8px 0 0;
    }

    #content .leftbox .contactformbox h1 {
        padding: 10px 0 10px 0px;
    }

    #content .leftbox .contactformbox .contacttext {
        padding-top: 50%;
    }

    #content .infoboxinn .contact-text p {
        padding: 15px 0 0 0;
    }

    #content .infoboxinn .address-icon {
        height: 70px;
        width: 70px;
    }

    /* #content .contactform{
        padding-top: 22%;
    } */
    #featured-posts .button {
        padding: 8px 36px 7px 0px;
    }

    /* #main .entry-content h2{
        line-height: 0.1;
    } */
    #main .bloginn-inner-content .post-date {
        margin-bottom: 0rem;
    }

    #main .bloginn-inner-content .content {
        padding: 10px;
        margin-left: 32px;
    }

}

/*---------menu display above 1024 and 1024 screen-------------*/
@media screen and (min-width: 1024px) {


    #featured-slider .entry-title {
        font-size: 68px;
        letter-spacing: normal;
        text-transform: uppercase;
        font-weight: 700;
    }

    .overlay-side {
        position: absolute;
        top: 0;
    }

    /* .right-sidebar #primary,
    .left-sidebar #primary {
        width: 70%;
        float: left;
        padding-right: 30px;
    }

    .right-sidebar #secondary,
    .left-sidebar #secondary {
        width: 30%;
        float: right;
    }

    .left-sidebar #primary {
        float: right;
        padding-right: 0;
        padding-left: 30px;
    } */

    .no-sidebar #primary {
        width: 100%;
        float: none;
        padding-right: 0;
    }
}

@media screen and (min-width: 1900px) {

    .footer-widgets-area.section-gap {
        padding: 200px 0 100px;
    }
}

@media only screen and (max-width: 768px) {
    #featured-slider .wrapper {
        top: 55% !important;
    }

    #featured-slider .wrapper .d-flex {
        justify-content: center;
        align-items: center;
    }

    .content-site .md-0 {
        display: none;
    }

    #section-header .content-site,
    #colophon p {
        padding: 0;
    }

    #featured-slider .entry-header {
        padding: 0 10px;
    }

    #section-header {
        margin: 0;
    }

    #colophon .footer-widgets-area .widget_text ul li:nth-child(3) {
        margin-left: 0;
    }

    .bottomheader {
        padding: 4px 0;
    }

    #featured-slider .entry-header h3,
    .bottomheader,
    .entry-title,
    .section-title,
    #featured-posts .button {
        margin: 0;
    }

    #featured-team .entry-content {
        position: relative;
    }

    #colophon .widget-title {
        height: 45px;
        line-height: 28px;
    }

    /* innear page testimonial */
    #main .testimonial-inner-content,
    #content .leftbox .contactformbox h1 {
        padding: 0;
    }

    #main .bloginn-inner-content .content {
        padding: 10px;
    }

    #main .bloginn-inner-content .entry-contentbox p {
        margin-bottom: 0;
    }

    #main .bloginn-inner-content .content {
        margin-left: 20px;
    }

    #main .bloginn-inner-content .post-date {
        left: -2.7rem;
        bottom: 20rem;
    }

    #content .infoboxinn .address-icon {
        height: 60px;
        width: 60px;
    }

    #content .infoboxinn .contact-text {
        padding: 25px 5px;
    }

    #content .contactform .innershortcode {
        padding: 0 10px;
    }

    #content .leftbox .contactformbox .contacttext p {
        padding: 7px 0 0px 0;
    }

    #content .infoboxinn .contact-text p {
        padding: 15px 0 0 0;
    }

    #content .infoboxinn::before {
        margin: 10px 0 0px -6%;
    }

    #masthead.site-header .main-navigation ul.nav-menu {
        width: auto;
        margin-right: 0;
        background-color: #fff;
        margin-top: 25px;
        border-top: 1px solid rgba(0, 0, 0, 0.10);
        position: absolute;
        top: 100%;
        left: auto;
        right: 0;
    }

    .header-main {
        height: auto;
        background: #c42118;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 6px 6px 6px 15px;
    }

    .content-site {
        border-radius: 10px;
    }

    #featured-slider .entry-container {
        position: absolute;
        top: 50%;
        width: 100%;
        left: 0;
        right: 0;
        text-align: center;
        padding: 0 30px;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .overlay-side {
        display: none;
    }

    .site-branding {
        min-height: 62px;
        display: flex;
        align-items: center;
    }

    #featured-slider .entry-title {
        margin-bottom: 0;
        font-size: 32px;
        color: #fff;
        text-transform: uppercase;
    }

    #featured-slider .entry-content {
        color: #fff;
        margin: 0 72px 0 5px;
        display: block;
    }
}

@media only screen and (max-width: 431px) {

    #content .searchbar {
        padding: 0 30px;
    }

    #featured-about .aboutimgtext .aboutimgbg {
        display: none;
    }

    #featured-posts .title-section {
        padding: 0;
    }

    #colophon .searchbar h4 {
        border-radius: 10px;
    }

    #main .gallerybox .gallery-inner-content:nth-child(5) {
        top: 0;
    }

    #main .faqcontactimg {
        padding-bottom: 3em;
    }

    #main .bloginn-inner-content .content-image img,
    #secondary .bloginn-inner-content .content-image img {
        margin-top: 0px;
    }

    #content .leftbox {
        padding: 20px 15px 10px 15px;
    }

    #content .infoboxinn {
        width: 95%;
    }

    #content .contactform {
        margin: 0;
        padding: 30px 20px;
    }

    #featured-slider .entry-header h3 {
        font-size: 12px;
    }

    #featured-slider h2.entry-title {
        font-size: 25px;
    }

    #featured-slider .entry-container,
    .slick-dotted.slick-slider {
        padding: 0;
    }

    .bottomheader {
        padding: 0;
    }

    #featured-posts .read-more a {
        justify-content: center;
    }

    .content-site p {
        font-size: 11px;
    }

    .content-site .social-links i {
        font-size: 17px;
    }

    #featured-posts .entry-content p {
        padding-right: 0em;
    }

    #featured-slider .entry-content {
        color: #fff;
        margin: 0 0px 0;
        display: block;
    }

    .site-logo img {
        width: auto;
    }

    .site-branding {
        padding-right: 0px !important;
    }

    .header-nav {
        display: block;
        float: none;
    }

    .contact-header {
        margin-right: 100px;
        width: auto;
        margin-left: 0;
        height: 100%;
    }

    #featured-posts .message-box .message-form p .wpcf7-spinner::before {
        left: 12.6rem;
    }
}

@media only screen and (max-width: 1023px) {


    .content-site .social-links {
        display: none;
    }

    #top-bar {
        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    }

    #masthead {
        min-height: 0px;
    }

    .site-branding {
        /* padding-right: 50px; */
        min-height: 54px;
        display: flex;
        align-items: center;
    }

    .site-title {
        font-size: 26px;
    }

    .main-navigation ul ul {
        border-top: 1px solid rgba(0, 0, 0, 0.10);
    }

    .main-navigation ul ul ul {
        margin-top: 0;
    }

    .main-navigation ul.nav-menu li {
        border-bottom: 1px solid rgba(0, 0, 0, 0.10);
        display: block;
        width: 100%;
    }

    .main-navigation ul.nav-menu li:last-child {
        border-bottom: none;
    }

    .main-navigation ul ul li a {
        padding-left: 35px;
        color: #fff;
    }

    .main-navigation ul ul ul li a {
        padding-left: 60px;
    }

    .main-navigation ul ul ul ul li a {
        padding-left: 80px;
    }

    .main-navigation ul ul a {
        width: 100%;
    }

    .main-navigation ul ul,
    .main-navigation ul ul ul {
        box-shadow: none;
        float: none;
        position: relative;
        top: 0;
        left: 0;
        margin-bottom: 0;
        display: none;
        z-index: 0;
    }

    .main-navigation .menu-item-has-children>a:before {
        content: "";
        float: right;
        position: relative;
        right: 0;
        background-color: rgba(255, 255, 255, 0.20);
        width: 1px;
        height: 25px;
    }

    .main-navigation .menu-item-has-children>a:after {
        padding-top: 3px;
    }

    .main-navigation ul.sub-menu li a {
        border-left: none;
    }


    .menu-toggle {
        width: 40px !important;
        height: 40px !important;
        top: -3rem;
        right: 0;
    }

    .menu-toggle span {
        width: 32px !important;
        height: 3px !important;
    }

    .main-navigation ul.nav-menu {
        position: fixed;
        width: 80%;
        background-color: #FFFFFF;
        transition: left 0.4s ease-in-out;
        top: 0%;
        left: 0;
        height: 100%;
        z-index: 0;
        align-content: center;
        overflow-y: auto;
    }

    .menu-toggle {
        position: absolute;
    }

    .menu-toggle.active {
        position: fixed;
        top: 60px !important;
        right: 42px !important;
        z-index: 10;
    }

    #section-header #form1 form {
        width: 100%;
    }











    .main-navigation .search-menu a {
        display: none;
    }

    .main-navigation form.search-form input {
        background-color: #fff;
        border: none;
        min-height: 55px;
    }

    .main-navigation form.search-form button.search-submit {
        height: 59px;
    }

    .main-navigation form.search-form input {
        padding-left: 25px;
    }

    .body-overlay #content,
    .body-overlay #colophon,
    .body-overlay .backtotop {
        filter: blur(25px);
    }
}

@media screen and (max-width: 992px) {

    .comments-title,
    #reply-title {
        font-size: 28px;
    }
}

@media screen and (max-width: 767px) {
    #content .entry-content {
        padding: 1rem;
    }

    #masthead.site-header .main-navigation ul.nav-menu {
        width: auto !important;
        margin-right: 0;
        background-color: #fff;
        margin-top: 25px;
        border-top: 1px solid rgba(0, 0, 0, 0.10);
        position: absolute;
        top: 100%;
        left: auto;
        right: 0;
    }

    #page-site-header .page-title {
        font-size: 32px;
    }

    #featured-classes .featured-classes-item,
    .blog-posts-wrapper .post-item {
        text-align: center;
    }

    .comment-navigation .nav-previous,
    .posts-navigation .nav-previous,
    .post-navigation .nav-previous,
    .comment-navigation .nav-next,
    .posts-navigation .nav-next,
    .post-navigation .nav-next {
        width: 100%;
        margin: 15px 0;
    }

    .post-navigation span.previous-article b,
    .post-navigations span.previous-article b,
    .post-navigation span.next-article b,
    .post-navigations span.next-article b {
        font-size: 18px;
    }

    #respond {
        margin-top: 40px;
    }

    .comment-meta img {
        margin-right: 15px;
    }

    .comments-title,
    #reply-title {
        margin-bottom: 8px;
    }

    #commentform p.comment-form-comment,
    #commentform p.form-submit {
        margin-top: 21px;
    }

    nav.navigation.pagination,
    #secondary {
        margin-top: 30px;
    }

    .comments-title,
    #reply-title {
        font-size: 26px;
    }

    #comments {
        margin-top: 40px;
    }

    .tags-links {
        margin-bottom: 25px;
    }

    .backtotop {
        display: none;
    }

    #featured-about .title-section {
        padding-right: 0 !important;
    }

    #featured-about h2.subtitle {
        margin: 0px 0 30px 0;
    }
}

@media screen and (min-width: 567px) and (max-width: 767px) {
    .menu-toggle {
        top: 0rem !important;
        right: 1rem !important;
    }
}

@media screen and (max-width: 567px) {
    .menu-toggle {
        width: 40px !important;
        height: 40px !important;
        top: -3rem !important;
        right: 0rem !important;
    }

    .main-navigation ul.nav-menu {
        width: 100%;
    }

    .pagination .page-numbers.prev,
    .pagination .page-numbers.next {
        top: 0;
    }

    .pagination .prev.page-numbers:before,
    .pagination .next.page-numbers:before {
        width: 35px;
        height: 10px;
    }

    .pagination .page-numbers.prev,
    .pagination .page-numbers.next {
        margin-left: 0;
        margin-right: 0;
    }

    .trail-items li {
        font-size: 12px;
    }

    #breadcrumb-list {
        padding: 10px 0;
    }

    blockquote.alignright {
        margin-left: 0;
    }

    .comment-meta img {
        margin: 0 0 25px;
        float: none;
    }

    .comment-meta .url,
    .comment-meta .fn {
        display: block;
    }

    .comment-content {
        padding-left: 0;
    }

    #comments ol.children {
        margin-left: 50px;
    }

    .reply {
        padding-left: 0;
    }

    .footer-widgets-area .hentry:last-child,
    .footer-widgets-area.col-3 .hentry:last-child {
        margin-bottom: 0;
        padding-right: 0;
    }
}

/* mobile view */
@media screen and (min-device-width: 320px) and (max-device-width: 550px) {
    #masthead {
        position: relative;
        min-height: auto;
    }

    #masthead .sidepadding {
        --bs-gutter-x: 0;
    }

    #featured-posts .post-date {
        bottom: 11rem;
        left: -0.7rem;
    }

    /* inner page */

    /* faq */
    #main .image-container .image2 img,
    #main .image-container .image2::after {
        display: none;
    }

    #masthead .bottomheader .row {
        --bs-gutter-x: 0;
    }

    #content .leftbox .contactformbox h1 {
        padding: 10px 0% 10px 0px;
        font-size: 32px;
    }

    #content .infoboxinn::before {
        margin: 10px 0 0px -11%;
    }

    #content .infoboxinn .contact-text p {
        padding: 15px 0 0 0;
    }

    #content .rightbox-form .conct-header h1 {
        margin: 0;
    }

    #content .contactform {
        padding: 30px 0;
    }

    #content .leftbox .contact-right-side {
        margin-top: 25px;
    }

    #content .infoboxinn .contact-text {
        padding: 25px 10px;
    }

    #featured-services .title-section p {
        padding-top: 25px;
        padding-bottom: 10px;
    }

    #featured-services .title-section {
        margin-bottom: 1em;
    }

    #featured-posts .message-box {
        top: 25px;
    }

    #featured-posts .button a {
        padding: 10px 20px;
    }

    #featured-posts .button {
        padding: 8px 32px 7px 0px;
    }

    #featured-posts .button svg {
        right: 5px;
    }

    #content .innershortcode input[type="submit"] {
        margin-top: 20px;
    }

    .menu-toggle span {
        width: 29px;
    }
}

@media screen and (max-device-width: 320px) {
    #featured-slider .borderbtn {
        width: 100px !important;
    }

    #featured-slider .read-more .btn {
        padding: 12px 9px;
    }

    #featured-slider img {
        height: 100%;
    }

    #featured-slider .entry-container {
        transform: translateY(-61%);
    }

    #featured-services .entry-title a {
        padding: 0px 9px 0px 9px;
    }

    #featured-team .title-section h1::after {
        position: absolute;
        left: 90%;
        top: 13px;
    }

    #featured-team .title-section h1 {
        font-size: 35px;
    }
}

@media screen and (min-device-width: 600px) and (max-device-width: 1024px) and (orientation:landscape) {
    #featured-slider .entry-header h3::before {
        left: -97px;
    }

    #featured-about .title-section .row h3 {
        font-size: 17px !important;
    }

    #featured-posts .button {
        padding: 8px 39px 7px 0px;
        margin: 0;
    }

    /* inner page testimonial */
    .main-navigation ul.nav-menu>li>a {
        margin: 0 13px 0 0;
    }

    #section-header .social-links a {
        margin: 10px 4px;
    }

    #main .bloginn-inner-content .content {
        padding: 8px;
        margin-left: 30px;
    }

    #main .bloginn-inner-content .post-date {
        left: -2.3rem;
    }

    .main-navigation ul.nav-menu .current_page_item>a,
    .main-navigation ul.nav-menu .current-menu-item>a,
    .main-navigation ul.nav-menu .current_page_ancestor>a,
    .main-navigation ul.nav-menu .current-menu-ancestor>a {
        padding: 5px 15px;
    }
}

@media (min-width:300px) and (max-width:700px) {

    .main-navigation ul.nav-menu>li>a,
    .main-navigation ul.nav-menu>li:last-child>a {
        padding: 10px;
    }

    #section-header .site-logo img {
        width: 70%;
        height: 57.34px;
    }

    .main-navigation ul.nav-menu>li:last-child {
        width: fit-content;
        padding: 0;
        margin: 0 auto;
    }

    .main-navigation ul.nav-menu>li:last-child a {
        margin: 0;
        color: #fff;
    }

    .main-navigation ul.nav-menu,
    .main-navigation ul ul {
        text-align: center;
    }

    .scroll-to-top {
        right: 18px;
    }

    #featured-slider h2.title {
        font-size: 35px;
    }

    #featured-slider .entry-header {
        padding: 0;
    }

    #featured-slider .entry-container {
        margin-left: 1rem;
    }

    #featured-slider .slick-prev {
        left: 2%;
    }

    #featured-slider .wrapper {
        top: 39%;
    }

    #featured-slider .borderbtn {
        width: 80px;
    }

    #featured-slider img {
        height: 100%;
    }

    #featured-about .about-image img {
        height: 500px !important;
    }

    #featured-about .image-top-box {
        width: auto;
        height: auto;
        top: -4rem;
        left: 0;
    }

    #featured-about .title-section h1 {
        font-size: 35px !important;
    }

    #featured-about .aboutrightside .title-section .d-flex {
        margin-bottom: 15px;
    }

    #featured-about .aboutrightside {
        margin-left: 0;
    }

    #featured-services .gap-16 {
        gap: 2rem;
    }

    #featured-features .feature-img {
        margin-left: 0;
        width: 100%;
    }

    #featured-features .section-content {
        padding: 25px 0 0;
        margin-left: 0;
    }

    #featured-posts .post-date {
        letter-spacing: 1.4px;
        left: -2.5rem;
    }

    #featured-posts .gap-20 {
        gap: 40px;
    }

    #featured-posts .entry-container {
        margin-left: 0;
    }

    #featured-posts .entry-contentbox {
        padding: 0px 28px 18px 14px;
    }

    #colophon .gap-16 {
        gap: 1rem;
    }

    #colophon .logo {
        margin-bottom: 15px;
    }

    #colophon .footerbox:first-child .hentry {
        width: 100%;
    }

    /* Inner Page */
    #page-site-header .page-header {
        top: 10rem;
    }

    #page-site-header .breadcrumbbox .button {
        padding: 0;
        gap: 40px;
    }

    #page-site-header .breadcrumbbox span.treeEnd {
        padding: 3px;
        line-height: 48px;
    }

    #page-site-header .breadcrumbbox .button .root,
    #page-site-header .breadcrumbbox span {
        padding: 10px 19px;
        width: fit-content;
        margin-bottom: 10px;
    }

    #main .service-inner-content .entry-title .service-title,
    #secondary .service-inner-content .entry-title .service-title {
        padding: 0 6px;
        font-size: 17px !important;
    }

    #main .image-container .image1 img {
        width: 100%;
        padding-right: 0;
    }

    #main .gallerybox .img4-parent {
        top: 0;
    }

    #main .bloginn-inner-content .entry-contentbox,
    #secondary .bloginn-inner-content .entry-contentbox,
    #featured-posts-item .content {
        width: 100%;
        padding: 0 15px 18px;
    }

    #main .bloginn-inner-content .content-image img,
    #secondary .bloginn-inner-content .content-image img,
    #featured-posts-item .content-image img {
        width: 100%;
    }

    .widget_text input {
        margin: 0 0 16px 30px;
    }

    .entry-meta {
        display: grid;
        gap: 8px;
    }

    .socialMedia {
        float: left;
    }

    blockquote .wp-block-quote p,
    .wp-block-pullquote p,
    .wp-block-quote p {
        padding: 12px 0 0;
    }

    #main .entry-content ol li {
        padding-left: 3rem;
    }

    #main .entry-content ol li:before {
        left: 0;
    }

    #section-header {
        width: 90%;
        margin: 0px;
    }

    #featured-features .entry-content h2 {
        margin: 55% 0 0 0;
    }


    #primary .widget ul li a::before,
    #secondary .widget ul li a::before,
    #primary .widget ol li a::before,
    #secondary .widget ol li a::before {
        margin-right: 7px;
        margin-left: 0.5em;
    }

    #content .inquiry-screen {
        padding: 20px 12px;
    }

    #content .rightbox-form .conct-header hr {
        left: 1.3rem;
    }

    .error-404.not-found .error-404title {
        font-size: 162px;
    }

    #featured-steps .section-content .steps-block {
        margin-top: 0;
        margin-bottom: 0;
        padding: 0 8px;
    }

    #featured-team .title-section h1 {
        font-size: 35px;
    }


    #featured-posts .title-section h1 {
        font-size: 35px;
    }

    #featured-posts .title-section h1::before {
        left: 20px;
        top: -25px;
        height: 41px;
    }

    #featured-posts .post-item {
        width: 100%;
        margin-bottom: 30px;
    }

    #mission-section .mission-fixtures-link {
        width: 100%;
        justify-content: center;
    }

    #mission-section .mission-next-label {
        text-align: center;
    }
}

/* ============================================= */
/*/////////////////// media query css for tab start ////////////////*/
@media (min-width:700px) and (max-width:912px) {

    .main-navigation ul.nav-menu>li>a,
    .main-navigation ul.nav-menu>li:last-child>a {
        padding: 10px;
    }

    .main-navigation ul.nav-menu>li>a {
        margin: 0;
    }

    .main-navigation ul.nav-menu>li:last-child {
        width: fit-content;
        padding: 0;
        margin: 0 auto;
    }

    .main-navigation ul.nav-menu>li:last-child a {
        margin: 0;
        color: #fff;
    }

    .main-navigation ul.nav-menu,
    .main-navigation ul ul {
        text-align: center;
    }

    #page-site-header .page-header {
        top: 10rem;
    }

    #page-site-header .breadcrumbbox .button {
        display: flex;
        /* flex-direction: column; */
    }

    #page-site-header .breadcrumbbox span.treeEnd-margin {
        margin-left: -26px;
    }

    #content .inquiry-screen {
        padding: 20px 13px;
    }

    #page-site-header .breadcrumbbox .button .root,
    #page-site-header .breadcrumbbox span {
        width: fit-content;
        margin-bottom: 10px;
    }

    .site-description {
        padding: 0px;
    }

    .opbg {
        height: fit-content;
    }

    #featured-slider .wrapper {
        top: 28%;
    }

    #featured-slider h2.title {
        font-size: 55px;
    }

    #featured-slider .entry-header h3 {
        margin: 0;
    }

    #featured-slider h2.entry-title {
        line-height: 1;
    }

    #featured-slider .entry-content {
        margin: 0 72px 0 18px;
    }

    #featured-slider .wrapper .d-flex {
        justify-content: start;
        margin-left: 18px;
    }

    #featured-slider .slick-next {
        left: 17.5%;
    }

    #featured-slider img {
        height: 100%;
    }

    #featured-about .image-top-box {
        width: 149px;
        height: 78px;
        top: -2.3rem;
        left: -3.2rem;
    }

    #featured-about .image-top-box .top-box-num {
        font-size: 22px !important;
    }

    #featured-about .image-top-box .top-box-text {
        font-size: 11px !important;
    }

    #featured-about .title-section {
        margin-bottom: 0;
    }

    #featured-about .title-section h5 {
        font-size: 17px !important;
    }

    #featured-about .title-section h1 {
        font-size: 24px !important;
    }

    #featured-about h2.subtitle {
        margin: 0 0 30px 0;
        font-size: 14px !important;
    }

    #featured-about .title-section .about-service p {
        font-size: 14px !important;
    }

    #featured-about .title-section .cleaning-text {
        gap: 9px;
    }

    #featured-about .title-section .cleaning-text p {
        font-size: 12px !important;
    }

    #featured-about .title-section .cleaning-text svg,
    #featured-about .title-section .cleaning-text i {
        font-size: 23px !important;
    }

    #featured-about .button-content {
        margin: 7% 0 0 0;
        padding: 8px 15px;
    }

    #featured-about .button-content a {
        font-size: 14px !important;
    }

    #featured-about .button-content i,
    #featured-about .button-content svg {
        font-size: 15px !important;
    }

    #featured-about .aboutrightside {
        margin-left: 0;
    }

    #featured-services .gap-16 {
        gap: 2rem;
    }

    #featured-features .features-block {
        padding: 31px 15px;
    }

    #featured-features .featuresbox .features-icon {
        font-size: 40px;
    }

    #featured-features .featuresbox .circle {
        width: 58px;
        height: 58px;
    }

    #featured-features .featuresbox {
        padding: 0 0 0px;
    }

    #featured-features h4.features-title {
        margin: 6px 0 10px;
    }

    #featured-features .featuresbox .features-icon i,
    #featured-features .featuresbox .features-icon svg {
        margin: 0 0 0 18px;
    }

    #featured-steps .gap-20 {
        gap: 2rem;
    }

    #featured-steps .section-content .steps-block .steps-icon {
        /* left: 3.4rem; */
        width: 118px;
        height: 118px;
    }

    #featured-steps .section-content .steps-block .stepsbox .steps-no {
        margin-top: -30px;
    }

    #featured-steps .section-content .steps-block h4 a {
        font-size: 17px;
    }

    #featured-steps .section-content .steps-block .stepsbox .steps-text {
        font-size: 16px;
        padding: 19px 20px;
    }

    #featured-steps .section-content .steps-block:nth-child(2) .steps-icon {
        width: 134px;
        height: 134px;
    }

    #featured-steps .section-content .steps-block {
        margin-top: 20px;
    }

    #featured-posts .gap-20 {
        gap: 1rem;
    }

    #featured-posts .entry-meta {
        padding: 6px 0 0;
    }

    #featured-posts .entry-meta .d-flex {
        gap: 12px;
        padding-left: 6px;
    }

    #featured-posts .px-3 {
        padding-right: 0.25rem !important;
        padding-left: 0.25rem !important;
    }

    #featured-posts .entry-contentbox {
        padding: 20px 0;
    }

    #featured-posts .entry-contentbox .entry-title {
        margin: 0 5px 15px;
    }

    #featured-posts h2.entry-title a {
        font-size: 18px;
    }

    #featured-posts .posts-date {
        padding: 12px 0 0 5px;
    }

    #featured-posts .posts-date .arrow-up {
        margin-right: 1rem;
    }

    #featured-clients .gap-20 {
        gap: 2rem;
    }

    #colophon .social-links a {
        margin: 13px 10px;
    }

    #colophon .widget_nav_menu ul li a {
        font-size: 16px;
    }

    #colophon .logo {
        margin-bottom: 15px;
    }

    #main .gallery-image p {
        padding: 24px 19px;
    }


    .widget .menu {
        width: 100%;
        padding-left: 0;
    }

    .widget_text input {
        width: 90%;
        margin: 0 10px 16px;
    }

    #secondary .widget ul li a::after,
    #secondary .widget ol li a::after {
        content: '. . . . . .';
    }

    .post-navigation a,
    .posts-navigation a {
        margin-bottom: 10px;
    }


    #main .entry-content .gallery-image p {
        padding: 24px 18px 24px;
    }

    #primary ul li a,
    #secondary ul li a {
        font-size: 14px;
    }

    #primary .widget ul li a::before,
    #secondary .widget ul li a::before,
    #primary .widget ol li a::before,
    #secondary .widget ol li a::before {
        margin-left: 0.2em;
        margin-right: 4px;
    }

    #secondary .widget .menu-services-container ul li a::after,
    #secondary .widget .menu-our-services-container ul li a::after {
        right: 0;
    }

    #content .rightbox-form .conct-header hr {
        left: 1.3rem;
    }

    #featured-features .entry-content h2 {
        margin: 46% 0 0px 0px;
    }

    #featured-features .feature-img {
        width: 100%;
    }

    #featured-features .section-content {
        margin-left: 0;
    }

    #main .gallerybox .gallery-inner-content .gallery-box {
        width: 100%;
    }
}

/* ============================================= */
/*/////////////////// media query css for laptop start ////////////////*/
@media (min-width:1023px) and (max-width:1024px) {
    .main-navigation ul.nav-menu>li>a {
        padding: 5px 4px;
        font-size: 13px;
    }

    .main-navigation ul.nav-menu>li>a {
        margin-right: 10px;
    }

    .main-navigation ul.nav-menu>li>a {
        font-size: 14px;
    }

    .main-navigation ul.nav-menu>li:last-child {
        padding: 6px 3px;
    }

    .main-navigation ul.nav-menu>li:last-child>a {
        font-size: 15px;
    }

    .site-description {
        padding: 0;
    }

    #featured-slider h2.entry-title {
        font-size: 36px;
        line-height: 1.5;
    }

    .main-navigation ul.nav-menu>li>a {
        padding: 5px 4px;
    }

    #featured-slider h2.title {
        font-size: 40px;
    }

    #featured-slider .slick-next {
        left: 15.5% !important;
    }

    #featured-about .image-top-box {
        width: auto;
        height: auto;
        top: -2rem;
        left: -5rem;
    }

    #featured-services .gap-16 {
        gap: 2rem;
    }

    #featured-services .entry-title a {
        font-size: 14px;
        padding: 0 0 0 4px;
    }

    #featured-steps .section-content .steps-block .stepsbox .steps-no {
        margin-top: -34px;
    }

    #featured-steps .gap-20 {
        gap: 2rem;
    }


    #featured-team .entry-content {
        padding: 10px 15px;
    }

    #featured-team .gap-5 {
        gap: 1rem !important;
    }

    #featured-posts .gap-20 {
        gap: 1rem !important;
    }

    #featured-clients .gap-20 {
        gap: 2rem;
    }

    #colophon .logo {
        margin-bottom: 15px;
    }

    #colophon .social-links {
        margin-top: 15px;
    }

    #colophon .footer-widgets-area .widget_text ul li:nth-child(2),
    #colophon .footer-widgets-area .widget_text ul li:nth-child(4),
    #colophon .footer-widgets-area .widget_text ul .list-email {
        margin-left: 0rem;
    }

    #colophon .gap-16 {
        gap: 2rem;
    }

    .site-description {
        padding: 0px;
    }

    #page-site-header .page-header {
        top: 12rem;
    }

    #page-site-header .breadcrumbbox .button {
        display: flex;
        /* flex-direction: column; */
    }

    #page-site-header .breadcrumbbox .button .root,
    #page-site-header .breadcrumbbox span {
        width: fit-content;
        margin-bottom: 10px;
    }

    #page-site-header .breadcrumbbox span.treeEnd-margin {
        margin-left: -25px;
    }

    .navigation.post-navigation,
    .comment-navigation .nav-next,
    .posts-navigation .nav-next,
    .post-navigation .nav-next {
        padding: 0;
    }

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

    .comment-navigation .nav-previous,
    .posts-navigation .nav-previous,
    .post-navigation .nav-previous {
        margin-bottom: 15px;
    }

    #main .service-inner-content .entry-title .service-title,
    #secondary .service-inner-content .entry-title .service-title {
        padding: 0 11px;
    }

    #main .gallerybox {
        margin: 30px auto;
    }

    #secondary .grid.gap-20 {
        gap: 2rem;
    }

    #main .bloginn-inner-content .content-image img,
    #secondary .bloginn-inner-content .content-image img,
    #featured-posts-item .content-image img {
        width: 100%;
    }

    #main .bloginn-inner-content .entry-contentbox,
    #secondary .bloginn-inner-content .entry-contentbox,
    #featured-posts-item .content {
        width: 100%;
        /* padding: 0px 6px 18px; */
    }

    #main .column-gap {
        column-gap: 2rem;
    }

    .widget_text input {
        margin: 0 30px 16px;
    }

    #section-header {
        width: 90%;
        margin: 0px 5% 0px;
    }

    #content .rightbox-form .conct-header hr {
        left: 1.3rem;
    }
}

/* ============================================= */
@media (min-width:1024px) and (max-width:1366px) {
    .site-description {
        padding: 0px;
    }

    #page-site-header .page-header {
        top: 12rem;
    }

    #page-site-header .breadcrumbbox .button {
        display: flex;
        /* flex-direction: column; */
    }

    #page-site-header .breadcrumbbox .button .root,
    #page-site-header .breadcrumbbox span {
        width: fit-content;
        margin-bottom: 10px;
    }

    #page-site-header .breadcrumbbox span.treeEnd-margin {
        margin-left: -25px;
    }

    .navigation.post-navigation,
    .comment-navigation .nav-next,
    .posts-navigation .nav-next,
    .post-navigation .nav-next {
        padding: 0;
    }
}

/* ============================================= */
/*/////////////////// media query css for laptop start ////////////////*/
@media (orientation: landscape) and (max-width:1440px) {
    #featured-posts .message-box .message-form p .wpcf7-spinner::before {
        left: 16.2rem;
    }

    .post-navigation a,
    .posts-navigation a {
        margin-bottom: 8px;
    }
}


#content #featured-about {
    padding: 1rem 0 4rem 0;
}

.home #content .entry-content {
    display: none !important;
}

#main .entry-content .socialMedia ul li:before {
    display: none !important;
}

#main .entry-content .socialMedia ul li {
    line-height: 28px !important;
}





/* ============================================================
   NORTHSIDE FOOTBALL CLUB - EXPERT HERO SLIDER STYLESHEET
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@500;600;700&display=swap');

#featured-slider {

    --ns-font-display: 'Bebas Neue', sans-serif;
    --ns-font-body: 'Inter', sans-serif;
    --ns-font-nav: 'Montserrat', sans-serif;

    width: 100%;
    height: 100%;
    min-height: 650px;
    background-color: #f5f3ee;
    position: relative;
    overflow: hidden;
    font-family: var(--ns-font-body);
}

/* --- Subtly Textured Editorial Background Grid --- */
#featured-slider::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.25;
    pointer-events: none;
    background-size: 6px 6px, 160px 160px;
}

/* --- Layout Split Matrix --- */
#featured-slider .ns-slide-layout {
    display: grid !important;
    grid-template-columns: 35% 65% !important;
    /* Enforced 35/65 Split */
    width: 100%;
    height: 100%;
    min-height: 650px;
    position: relative;
    z-index: 5;
}

/* ============================================================
   LEFT CONTENT PANEL
   ============================================================ */
#featured-slider .ns-left-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 130px 0px 60px 11%;
    z-index: 10;
    position: relative;
}

#featured-slider .ns-coordinates {
    font-size: 16px;
    font-weight: 500;
    color: #7a7a7a;
    text-transform: uppercase;
    font-family: var(--ns-font-body);
}

#featured-slider .ns-main-title {
    font-family: var(--ns-font-display);
    font-size: clamp(50px, 6.5vw, 95px);
    line-height: 0.85;
    color: #111111;
    margin: 0;
    text-transform: uppercase;
    font-weight: 900;
}

/* Forces the heading explicitly into a clean 2-row layout stack */
#featured-slider .ns-main-title .ns-heading-line {
    display: inline;
}

/* Dynamic container for the 90 + structural dot placement */
#featured-slider .ns-main-title .ns-accent {
    display: inline-flex;
    align-items: baseline;
    color: var(--theme-color);
    position: relative;
}

/* Premium filled circle dot attached directly after the 90 */
#featured-slider .ns-main-title .ns-accent::after {
    content: "";
    display: inline-block;
    width: clamp(10px, 1.2vw, 16px);
    height: clamp(10px, 1.2vw, 16px);
    background-color: var(--theme-color);
    border-radius: 50%;
    margin-left: 6px;
    transform: translateY(-0.05em);
    /* Keeps dot aligned correctly with display baseline */
}

#featured-slider .ns-divider {
    width: 60px;
    height: 1.5px;
    background: #111111;
    margin: 25px 0;
}

#featured-slider .ns-subtitle {
    font-size: 17px;
    line-height: 1.6;
    color: #7a7a7a;
    margin-bottom: 35px;
    max-width: 250px;
}

#featured-slider .ns-subtitle p {
    margin: 0 0 6px 0;
}

/* Editorial CTA Button styling */
#featured-slider .ns-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    text-decoration: none !important;
    color: #111111;
    font-family: var(--ns-font-nav);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

#featured-slider .ns-cta-icon-wrap {
    width: 46px;
    height: 46px;
    border: 1px solid #111111;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

#featured-slider .ns-cta-btn:hover .ns-cta-icon-wrap {
    background: var(--theme-color);
    border-color: var(--theme-color);
}

/* ============================================================
   RIGHT PANEL VISUAL COMBO (IMAGE LAYER STACKING)
   ============================================================ */
#featured-slider .ns-right-panel {
    position: relative;
    width: 100%;
    height: 100%;
}

/* LAYER 1: DECORATIVE GREEN STRIPE */
#featured-slider .ns-slash-1 {
    position: absolute;
    right: 120px;
    bottom: -51px;
    width: 150px;
    height: 56%;
    background: var(--theme-color);
    transform: skewX(-21deg);
    z-index: 1;
}

/* LAYER 2: BIG STADIUM QUOTATION SHAPE */
#featured-slider .ns-clip-img-wrap {
    position: absolute;
    right: 0px;
    width: 700px;
    height: 100%;
    bottom: 0;
    top: 0;
    overflow: hidden;
    z-index: 2;
    -webkit-clip-path: polygon(34% 0%, 100% 0%, 70% 100%, 0% 100%);
    clip-path: polygon(34% 0%, 100% 0%, 64% 100%, -12% 100%);
}

/* LAYER 2b: TOP MATCHING QUOTATION CUT */
#featured-slider .ns-clip-img-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #f5f3ee;
    z-index: 3;
    -webkit-clip-path: polygon(50% 0%, 167% 0%, 47% 32%, 58% 0%);
    clip-path: polygon(-100% 0%, 182% 0%, 40% 32%, 50% 7%);
}

/* STADIUM IMAGE FILTERING */
#featured-slider .ns-clip-img {
    width: 170%;
    height: 100%;
    object-fit: cover;
    object-position: 60% center;
    display: block;
    filter: grayscale(100%) brightness(0.55) contrast(1.2);
}

/* LAYER 3: TRANSPARENT PLAYER BREAKOUT OVERLAP */
#featured-slider .ns-hero-img-wrap {
    position: absolute;
    bottom: 0;
    left: -17%;
    width: 82%;
    height: 90%;
    z-index: 10;
    pointer-events: none;
}

#featured-slider .ns-hero-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
}

/* ============================================================
   LAYER 4: ANCHORED BOTTOM INFO BADGE
   ============================================================ */
#featured-slider .ns-bottom-box {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 330px;
    height: 105px;
    background: #111111;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 35px;
    -webkit-clip-path: polygon(12% 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(12% 0, 100% 0, 100% 100%, 0% 100%);
}

#featured-slider .ns-bottom-icon-wrap {
    width: 38px;
    height: 38px;
    border: 2px solid var(--theme-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7a7a7a;
    flex-shrink: 0;
}


#featured-slider .ns-bottom-icon-wrap svg {
    width: 16px;
    height: 16px;
}

#featured-slider .ns-bottom-title {
    font-family: var(--ns-font-nav);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #ffffff;
    margin: 0 0 3px 0;
    text-transform: uppercase;
}

#featured-slider .ns-bottom-text p {
    margin: 0;
    font-size: 12px;
    color: #7a7a7a;
    text-transform: uppercase;
    font-weight: 500;
}

#featured-slider .ns-bottom-text span {
    color: #7a7a7a;
    font-size: 14px;
}

/* ============================================================
   RESPONSIVE COMPRESSION HANDLERS
   ============================================================ */
@media (max-width: 1200px) {
    #featured-slider .ns-left-panel {
        padding-left: 6%;
    }

    #featured-slider .ns-clip-img-wrap {
        width: 484px;
    }

    #featured-slider .ns-slash-1 {
        right: 65px;
    }

    #featured-slider .ns-hero-img-wrap {
        left: -10%;
    }
}

@media (max-width: 767px) {
    #featured-slider {
        height: auto;
        min-height: auto;
    }

    #featured-slider .ns-slide-layout {
        grid-template-columns: 1fr !important;
        height: auto;
    }

    #featured-slider .ns-left-panel {
        padding: 120px 30px 50px 30px;
    }

    #featured-slider .ns-right-panel {
        height: 460px;
    }

    #featured-slider .ns-hero-img-wrap {
        width: 100%;
        left: 0;
    }

    #featured-slider .ns-clip-img-wrap {
        width: 100%;
        right: 0;
    }

    #featured-slider .ns-slash-1 {
        right: 55px;
    }
}





/* ============================================================
   mission-section.css
   UPDATED DUO-TONE (WHITE/GREEN) SLANTING BORDER LINE
   ============================================================ */

#featured-mission {
    background-color: #0b0b0b;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    border-top: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
}

/* ── CONTAINER OUTER TRACK RESET ── */


/* ── FLEXBOX ROW LAYOUT ENGINE ── */
#mission-section.mission-section {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    min-height: 580px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    position: relative !important;
    font-family: var(--ms-font-alt-body) !important;
    box-sizing: border-box !important;
}

/* ══════════════════════════════════════════
   LEFT PANEL - BASE HOUSING FOR LINE EFFECT
══════════════════════════════════════════ */
#mission-section .mission-left {
    position: relative !important;
    width: 62% !important;
    flex: 0 0 62% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 80px 12% 80px 80px !important;
    z-index: 5 !important;
    box-sizing: border-box !important;

    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;

    /* Cuts the shape cleanly */
    clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%) !important;
}

/* ══════════════════════════════════════════
   THE SLANT LINE - INNER NESTED ARCHITECTURE
══════════════════════════════════════════ */
#mission-section .mission-slant-line {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 30 !important;

    background: linear-gradient(to bottom,
            #ffffff 0%,
            #ffffff 50%,
            var(--theme-color) 50%,
            var(--theme-color) 100%);

    /* 3px slanted border strip matching the clip-path edge */
    clip-path: polygon(calc(100% - 3px) 0,
            100% 0,
            86% 100%,
            calc(86% - 0.5%) 100%) !important;
}

/* Content wrapper overlay controls */
#mission-section .mission-content {
    position: relative !important;
    z-index: 10 !important;
    max-width: 100%;
    width: 100% !important;
}

/* ── COMPONENT STYLING CONTINUITY ── */
#mission-section .mission-label {
    display: inline-flex;
    align-items: center;
    font-family: var(--ms-font-body);
    color: var(--theme-color);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin-bottom: 24px;
}

#mission-section .mission-heading {
    font-family: var(--ms-font-display) !important;
    font-size: clamp(38px, 4.2vw, 56px);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: 2px;
    color: #ffffff;
    margin: 0 0 24px 0;
    text-transform: uppercase;
}

#mission-section .mission-heading .highlight {
    color: var(--theme-color);
}

#mission-section .mission-body {
    font-family: var(--ms-font-body) !important;
    color: #a3a3a3;
    font-size: 14px !important;
    line-height: 1.6 !important;
    max-width: 380px !important;
    margin: 0 0 36px 0 !important;
    font-weight: 400 !important;
    letter-spacing: 0.5px !important;
}

#mission-section .mission-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 16px !important;
    font-family: var(--ms-font-body) !important;
    color: #ffffff;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}

#mission-section .mission-btn .btn-icon {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

#mission-section .mission-btn .btn-icon svg {
    font-size: 14px !important;
    padding: 12px !important;
}

#mission-section .mission-btn:hover .btn-icon {
    border-color: var(--theme-color);
    color: var(--theme-color);
}

/* ══════════════════════════════════════════
   RIGHT PANEL - FIXED STATS & DATA TILES
══════════════════════════════════════════ */
#mission-section .mission-right {
    position: relative !important;
    width: 38% !important;
    flex: 0 0 38% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 80px 60px 80px 60px !important;
    z-index: 1 !important;
    box-sizing: border-box !important;
}

#mission-section .mission-stats-label,
#mission-section .mission-next-label {
    font-family: var(--ms-font-body) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--theme-color);
    margin-bottom: 24px !important;
}

#mission-section .mission-stats-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
}

#mission-section .mission-stat-item {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding-right: 8px !important;
}

#mission-section .mission-stat-item:last-child {
    border-right: none !important;
}

#mission-section .mission-stat-number {
    font-family: var(--ms-font-display) !important;
    font-size: clamp(36px, 3.5vw, 46px) !important;
    font-weight: 400 !important;
    color: #ffffff;
    line-height: 1 !important;
    letter-spacing: 1px !important;
}

#mission-section .mission-stat-desc {
    font-family: var(--ms-font-body) !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #737373;
    margin-top: 10px !important;
    line-height: 1.4 !important;
}

#mission-section .mission-divider {
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin: 32px 0 !important;
    width: 100% !important;
}

#mission-section .mission-match-row {
    display: flex !important;
    justify-content: space-between;
    flex-direction: row !important;
    align-items: center !important;
    background: #111111;
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 16px 20px !important;
    border-radius: 4px !important;
    gap: 0px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#mission-section .mission-team-logo {
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

#mission-section .mission-team-logo img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

/* #mission-section .mission-match-info {
    flex: 1 !important;
} */

#mission-section .mission-match-teams {
    font-family: var(--ms-font-display) !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

#mission-section .mission-match-teams .home {
    color: #ffffff;
}

#mission-section .mission-match-teams .vs {
    color: var(--theme-color);
    font-size: 13px;
    margin: 0 6px;
    font-family: var(--ms-font-display) !important;
}

#mission-section .mission-match-teams .away {
    color: #a3a3a3;
}

#mission-section .mission-match-date {
    text-align: right !important;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    padding-left: 14px !important;
    flex-shrink: 0 !important;
}

#mission-section .mission-match-date .match-date-text {
    font-family: var(--ms-font-body) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #a3a3a3;
    text-transform: uppercase !important;
}

#mission-section .mission-match-date .match-time {
    font-family: var(--ms-font-display) !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    color: #ffffff;
    display: block !important;
    margin: 2px 0 !important;
    letter-spacing: 0.5px !important;
}

#mission-section .mission-match-date .match-venue {
    font-family: var(--ms-font-alt-body) !important;
    font-size: 9px !important;
    color: #737373;
    text-transform: uppercase;
}

#mission-section .mission-fixtures-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-family: var(--ms-font-body) !important;
    color: #ffffff;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    margin-top: 24px !important;
}

#mission-section .mission-fixtures-link .arrow-box {
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#mission-section .mission-fixtures-link .arrow-box svg {
    font-size: 14px !important;
    padding: 12px !important;
}

#mission-section .mission-fixtures-link:hover {
    color: var(--theme-color);
}

/* ══════════════════════════════════════════
   VERTICAL FIXED MEDIA FOOTPRINT SOCIAL FEED
══════════════════════════════════════════ */
.mission-follow-bar {
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 24px !important;
    z-index: 99 !important;
}

.mission-follow-bar .follow-label {
    font-family: var(--ms-font-body) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3em !important;
    text-transform: uppercase !important;
    color: #555555;
    writing-mode: vertical-rl !important;
    transform: rotate(180deg) !important;
    margin-bottom: 10px !important;
}

.mission-follow-bar .follow-icons-track {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    align-items: center !important;
}

.mission-follow-bar a {
    color: #737373;
    transition: color 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
}

.mission-follow-bar a:hover {
    color: #ffffff;
}

/* ── BREAKPOINTS ── */
@media (max-width: 1100px) {
    #mission-section.mission-section {
        flex-direction: column !important;
        max-height: none !important;
    }

    #mission-section .mission-left,
    #mission-section .mission-right {
        width: 100% !important;
        flex: 0 0 auto !important;
        padding: 60px 40px !important;
    }

    #mission-section .mission-left,
    #mission-section .mission-slant-line {
        clip-path: none !important;
    }

    #mission-section .mission-slant-line {
        display: none !important;
    }

    .mission-follow-bar {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        flex-direction: row !important;
        justify-content: center !important;
        padding: 20px 0 !important;
        background-color: #0b0b0b !important;
    }

    .mission-follow-bar .follow-label {
        writing-mode: horizontal-tb !important;
        transform: none !important;
        margin-bottom: 0 !important;
    }

    .mission-follow-bar .follow-icons-track {
        flex-direction: row !important;
    }
}

@media (max-width: 600px) {
    #mission-section .mission-stats-row {
        display: flex !important;
        gap: 0px !important;
        justify-content: space-between;
    }

    #mission-section .mission-stat-item {
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        padding-bottom: 12px !important;
    }

    #mission-section .mission-match-row {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    #mission-section .mission-match-date {
        border-left: none !important;
        padding-left: 0 !important;
        margin-top: 12px !important;
        text-align: center !important;
    }
}




/* ==========================================================================
   FEATURED TEAM SECTION GLOBAL WRAPPER
   ========================================================================== */
/* ==========================================================================
   Featured Team Section - Slanted Mask & Column Math Controls
   ========================================================================== */

#featured-team {
    background-color: #fcfcfb;
    overflow: hidden;
    padding: 80px 0;
}

#featured-team .team-title-heading:last-of-type {
    color: var(--theme-color);
}

#featured-team .squad-action-btn {
    border: 1px solid #c8c6b7;
    background-color: #ffffff;
    padding: 12px 28px;
    border-radius: 9999px;
    font-size: 11px !important;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #000000;
    transition: all 0.3s ease;
}

#featured-team .squad-action-btn:hover {
    background-color: var(--theme-color);
    color: #ffffff;
    border-color: var(--theme-color);
}

#featured-team .team-carousel-window {
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
    width: 100%;
}

/* 
   SLANTED CONTAINER SHIELD
   This polygon creates a slanted clip path mask. 
   It cuts off any background elements at a -12 degree angle.
*/
#team-carousel-stage {
    flex-grow: 1;
    overflow: hidden;
    padding-left: 100px;
    margin-right: 15px;
    /* Clean slanted bounding box profile mask matching -12deg */
    clip-path: polygon(7% 0%, 100% 0%, 93% 100%, 0% 100%);
}

#team-slider-track {
    display: flex;
    transform: skewX(-12deg);
    transform-origin: top left;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

/* 
   DYNAMIC CARD FRAME CALCULATION
   Calculates card width on the fly using the Customizer variable (--dynamic-columns).
*/
#featured-team .northside-card {
    flex-shrink: 0;
    width: 100%;
    margin-right: 14px;
    box-sizing: border-box;
    background: #eaeae5;
    padding: 1px;
    transition: background-color 0.3s ease;
}

@media (min-width: 640px) {
    #featured-team .northside-card {
        width: calc((100% - 14px) / 2);
    }
}

@media (min-width: 1024px) {
    #featured-team .northside-card {
        /* Divides available track space dynamically by your set panel limit */
        width: calc((100% - ((var(--dynamic-columns) - 1) * 14px)) / var(--dynamic-columns));
    }
}

#featured-team .northside-card:hover {
    background-color: var(--theme-color);
}

#featured-team .northside-card-frame {
    background: #ffffff;
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

#featured-team .image-container-mask,
#featured-team .entry-content-box {
    transform: skewX(12deg);
}

#featured-team .image-container-mask {
    position: relative;
    overflow: hidden;
    background: #f4f4f2;
    margin: -2px -50px 0 -50px;
}

#featured-team .northside-card-image {
    height: var(--card-img-height, 360px);
    background-size: cover;
    background-position: center top;
    transform: scale(1.35);
    /* Prevents raw unmasked corners from poking through */
    transition: transform 0.5s ease;
}

#featured-team .northside-card:hover .northside-card-image {
    transform: scale(1.42);
}

#featured-team .card-meta-header {
    position: absolute;
    top: 24px;
    left: 90px;
    z-index: 10;
}

#featured-team .card-meta-header span:first-child {
    color: var(--theme-color);
    font-size: 44px;
    line-height: 0.85;
    font-weight: 900;
}

#featured-team .card-meta-header span:last-child {
    color: #ffffff;
    font-size: 14px;
    letter-spacing: 0.08em;
    margin-top: 4px;
}

#featured-team .entry-content-box {
    padding: 22px 30px 24px 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    border-top: 1px solid #eaeae5;
    margin: 0 -50px;
}

#featured-team .player-identity-group h3 {
    font-size: 1.10rem;
    line-height: 1.1;
    font-weight: 900;
    color: #111111;
    letter-spacing: -0.01em;
    white-space: normal;
}

#featured-team .player-name-link a {
    color: #111111;
    text-decoration: none;
}

#featured-team .signature-container-node {
    width: 30%;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 25px;
}

#featured-team .signature-container-node img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

#featured-team .right-navigation-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 5px 0 10px;
    flex-shrink: 0;
    z-index: 40;
}

#team-prev-btn,
#team-next-btn {
    width: 44px;
    height: 44px;
    border: 1px solid #e1dfd5;
    border-radius: 50%;
    background: #ffffff;
    color: #111111;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 12px;
    font-size: 15px;
}

#team-next-btn {
    background: var(--theme-color);
    color: #ffffff;
    border-color: var(--theme-color);
}

#team-prev-btn:hover,
#team-next-btn:hover {
    background: #000000;
    color: #ffffff;
    border-color: #000000;
}

#featured-team .slider-numeric-pagination {
    margin-top: 12px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

#featured-team .slider-numeric-pagination #slider-current {
    color: var(--theme-color);
}

/* Custom Responsive Overrides for Mobile View (< 640px) */
@media (max-width: 639px) {

    /* 1. Clear outer block paddings to center the slim portrait card frame */
    #featured-team .northside-team-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow: hidden !important;
    }

    #featured-team .northside-team-wrapper>div {
        flex-direction: column !important;
        align-items: center !important;
    }

    /* 2. Clear outer clipping so text stays perfectly safe from parent cutting */
    #team-carousel-stage {
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        clip-path: none !important;
        overflow: visible !important;
    }

    /* 3. Track setup maintaining the precise -12deg slant angle */
    #team-slider-track {
        display: flex !important;
        width: 100% !important;
        transform: skewX(-12deg) !important;
        transform-origin: top left !important;
    }

    #featured-team .northside-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        flex-shrink: 0 !important;
        overflow: hidden !important;
        /* Forces all inner content to clip to this slanted frame */
    }

    /* 4. Exact chosen proportions */
    #featured-team .northside-card-image {
        height: 370px !important;
        background-size: cover !important;
        background-position: center top !important;
    }

    #featured-team .entry-content-box {
        transform: skewX(12deg) !important;
        margin: 0 -45px !important;
        padding: 16px 45px 16px 75px !important;
        /* Extra left padding handles text safety */
    }

    /* Safe positioning for the number badge overlay */
    #featured-team .card-meta-header {
        left: 90px !important;
        top: 20px !important;
    }

    /* Prevent long text strings from forcing an overflow break */
    #featured-team .player-identity-group h3 {
        font-size: 1.1rem !important;
        white-space: normal !important;
    }

    /* Protect the alignment of the signature graphics node */
    #featured-team .signature-container-node {
        width: 35% !important;
        padding-right: 15px !important;
        /* Ensures signature stays clear of right-side slant */
    }

    /* 7. Centered Navigation Strings & Controls Below Card Layout */
    #featured-team .team-carousel-window {
        flex-direction: column !important;
        gap: 20px;
        width: 100% !important;
    }

    #featured-team .right-navigation-panel {
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100%;
        padding: 10px 0 !important;
        margin-left: 0 !important;
        gap: 16px;
    }

    #team-prev-btn,
    #team-next-btn {
        margin-bottom: 0 !important;
        flex-shrink: 0;
    }

    #team-prev-btn {
        order: 1;
    }

    #team-next-btn {
        order: 3;
    }

    #featured-team .slider-numeric-pagination {
        margin-top: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 4px;
        order: 2;
    }

    #featured-team .slider-numeric-pagination span {
        display: inline-block !important;
    }

    #featured-team .slider-numeric-pagination .text-gray-300.block {
        margin: 0 4px !important;
    }
}

/* ==========================================================
   Team Left Heading
   ========================================================== */

#featured-team .team-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: .15em;
    font-size: 14px;
    font-weight: 700;
    color: var(--theme-color);
}

#featured-team .team-section-line {
    width: 24px;
    height: 1px;
    background: var(--theme-color);
    display: inline-block;
}

#featured-team .team-heading-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: .95;
}

#featured-team .team-title-heading {
    margin: 0;
    font-size: 2.25rem;
    font-weight: 900;
    color: #111111;
}

#featured-team .team-title-heading:last-child {
    color: var(--theme-color);
}

#featured-team .section-desc-text {
    max-width: 320px;
    margin-bottom: 24px;
    font-size: 13px;
    line-height: 1.7;
    color: #6b7280;
}




/**
 * ==========================================
 * FEATURED POSTS / NEWS SECTION STYLES
 * ==========================================
 */

#featured-posts {
    background-color: #f6f5f3;
    background-image: radial-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 0);
    background-size: 24px 24px;
    position: relative;
    box-sizing: border-box;
}

/* Main Container Frame Setup */
#featured-posts-news {
    font-family: var(--ms-font-body) !important;
    /* System fallbacks replaced */
    padding: 3rem 3rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    overflow: hidden;
}

/* Halftone Dotted Accent Grid Element from Mockup */
#featured-posts-news::after {
    content: "";
    position: absolute;
    right: 30px;
    top: 50px;
    width: 35px;
    height: 80px;
    background-image: radial-gradient(#cbd5e1 1.5px, transparent 0);
    background-size: 8px 8px;
    opacity: 0.8;
    pointer-events: none;
}

/* Ensure all internal elements calculate padding correctly */
#featured-posts-news *,
#featured-posts-news *::before,
#featured-posts-news *::after {
    box-sizing: border-box;
}

/* ------------------------------------------
 * LEFT SIDEBAR CONTENT PANEL
 * ------------------------------------------ */
#featured-posts-news .news-left {
    width: 28%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    z-index: 10;
}

#featured-posts-news .news-left .news-subtitle {
    font-family: var(--ms-font-body) !important;
    font-size: 0.75rem;
    font-weight: 700;
    /* Maintained original bold weight */
    text-transform: uppercase;
    tracking-content: 0.15em;
    letter-spacing: 0.1em;
    color: var(--theme-color);
    margin-bottom: 1rem;
    display: inline-block;
}

/* Decorative short bar next to subtitle */
#featured-posts-news .news-left .news-subtitle::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 2px;
    background-color: #111111;
}

#featured-posts-news .news-left h2 {
    font-family: var(--ms-font-display) !important;
    font-size: 2.75rem;
    font-weight: 900;
    line-height: 1.0;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    margin: 0 0 1.5rem 0;
    max-width: 320px;
    /* Restricts width so "GAME" is forced onto line 2 */

    /* 1. Set the primary text color to the brand gold */
    color: var(--theme-color);

    /* 2. Target ONLY the first line of text and turn it back to Dark Gray */
    display: block;
}

/* Advanced Typography Pseudo-Selector for line splitting */
#featured-posts-news .news-left h2::first-line {
    color: #111111;
}

/* 3. GENERATE THE DOT DIRECTLY BESIDE THE SECOND-LINE WORD */
#featured-posts-news .news-left h2::after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin-left: 0px;
    /* Spaces the dot away from the final period */
    width: 6px;
    /* Width of the dot */
    height: 6px;
    /* Height of the dot */
    background-color: var(--theme-color);
    /* Gold dot accent */
    border-radius: 50%;
    /* Round shape */
    vertical-align: baseline;
}

#featured-posts-news .news-left p {
    font-family: var(--ms-font-alt-body) !important;
    /* Assigned cleaner secondary body font */
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.6;
    color: #6b7280;
    margin: 0 0 2rem 0;
    max-width: 280px;
}

#featured-posts-news .news-left .news-btn {
    font-family: var(--ms-font-body) !important;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    min-width: 180px;
    padding: 0.85rem 1.75rem;
    background-color: var(--theme-color);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    border-radius: 9999px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#featured-posts-news .news-left .news-btn svg,
#featured-posts-news .news-left .news-btn i {
    margin-left: 0.5rem;
    font-size: 1rem;
    color: #ffffff;
    transition: transform 0.3s ease;
}

#featured-posts-news .news-left .news-btn:hover {
    background-color: #111111;
    transform: translateY(-1px);
}

/* ------------------------------------------
 * CENTER GRAPHICS FRAME (GEOMETRIC SLANTS)
 * ------------------------------------------ */
#featured-posts-news .news-center {
    width: 44%;
    height: 420px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Main Background Image Slanted Crop */
#featured-posts-news .news-center .main-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 90%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    clip-path: polygon(18% 0%, 100% 0%, 82% 100%, 0% 100%);
}

#featured-posts-news .news-center .main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Circular Floating Crest/Logo Badge Overlay */
#featured-posts-news .news-center .center-logo {
    position: absolute;
    left: -20px;
    bottom: 15px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    z-index: 3;
}

#featured-posts-news .news-center .center-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Corrected layout property typo from source script */
}

/* Secondary Bottom-Right Inset Slanted Thumbnail Frame */
#featured-posts-news .news-center .small-image {
    position: absolute;
    right: -10px;
    bottom: -20px;
    width: 45%;
    height: 55%;
    z-index: 2;

    /* 1. The Slanted Clip-Path Frame */
    clip-path: polygon(22% 0%, 100% 0%, 78% 100%, 0% 100%);

    /* 2. THE WHITE BORDER SOLUTION */
    background-color: #ffffff;
    /* Creates the solid white color base */
    padding: 8px;
    /* Adjust this value to make the border thicker or thinner */

    /* 3. Drop Shadow to separate the white border from the background */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

/* Ensure the image scales down cleanly to leave room for the padding */
#featured-posts-news .news-center .small-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* 4. Match the exact same clip path so the image cuts off cleanly inside the border */
    clip-path: polygon(22% 0%, 100% 0%, 78% 100%, 0% 100%);
}

/* ------------------------------------------
 * RIGHT SIDEBAR POST FEED LIST
 * ------------------------------------------ */
#featured-posts-news .news-right {
    width: 28%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
    z-index: 10;
}

#featured-posts-news .news-right .news-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

#featured-posts-news .news-right .news-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Post Thumbnails */
#featured-posts-news .news-right .news-thumb {
    width: 100px;
    height: 80px;
    overflow: hidden;
    flex-shrink: 0;
    background-color: #e5e7eb;
}

#featured-posts-news .news-right .news-thumb a,
#featured-posts-news .news-right .news-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

#featured-posts-news .news-item:hover .news-thumb img {
    transform: scale(1.05);
}

/* Inside Post Typography Meta Layout */
#featured-posts-news .news-right .news-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#featured-posts-news .news-right .news-date {
    font-family: var(--ms-font-body) !important;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--theme-color);
    text-transform: uppercase;
    margin-bottom: 0.25rem;
    display: block;
}

#featured-posts-news .news-right h4 {
    font-family: var(--ms-font-display) !important;
    /* Match heavy display headline aesthetics */
    font-size: 0.875rem;
    font-weight: 900;
    /* Preserved aggressive title bolding */
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin: 0 0 0.5rem 0;
}

#featured-posts-news .news-right h4 a {
    color: #111111;
    text-decoration: none;
    transition: color 0.2s ease;
}

#featured-posts-news .news-item:hover h4 a {
    color: var(--theme-color);
}

/* Read More Anchors Style */
#featured-posts-news .news-right .read-more {
    font-family: var(--ms-font-body) !important;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s ease;
}

#featured-posts-news .news-item:hover .read-more {
    color: #111111;
}

/* ------------------------------------------
 * RESPONSIVE ADAPTIVE BREAKPOINTS
 * ------------------------------------------ */
@media (max-width: 1100px) {
    #featured-posts-news .news-left h2 {
        font-size: 2.25rem;
    }

    #featured-posts-news .news-center {
        height: 350px;
    }
}

@media (max-width: 1023px) {
    #featured-posts-news {
        flex-direction: column;
        align-items: stretch;
        padding: 4rem 2rem;
        gap: 4rem;
    }

    #featured-posts-news .news-left,
    #featured-posts-news .news-center,
    #featured-posts-news .news-right {
        width: 100%;
    }

    #featured-posts-news .news-left {
        align-items: left;
        text-align: left;
    }

    #featured-posts-news .news-left p {
        max-width: 100%;
    }

    #featured-posts-news .news-center {
        max-width: 600px;
        margin: 0 auto;
    }
}





/* ==========================================================================
   Soccer Theme Skewed Asymmetric About Section Stylesheet
   Matches image_29aca2.jpg 
   ========================================================================== */

#featured-about.soccer-about-section-wrapper {
    position: relative;
    padding: 0;
    overflow: hidden;
    width: 100%;
}

/* Background Linear Pattern Accent Layer */
#featured-about .soccer-decorative-line-texture {
    position: absolute;
    top: 0;
    left: 20%;
    width: 300px;
    height: 100%;
    background: linear-gradient(105deg, rgba(182, 157, 116, 0.04) 1px, transparent 1px);
    background-size: 14px 100%;
    z-index: 1;
    pointer-events: none;
}

/* LEFT COLUMN FRAME STYLING */
#featured-about .soccer-left-content-inner {
    padding: 20px 60px 20px 120px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 5;
    width: 100%;
}

@media (max-width: 1400px) {
    #featured-about .soccer-left-content-inner {
        padding: 80px 40px 20px 80px;
    }
}

@media (max-width: 991px) {
    #featured-about .soccer-left-content-inner {
        padding: 60px 20px;
    }
}

/* Vertical Rotated Badge */
#featured-about .soccer-vertical-indicator-badge {
    position: absolute;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

@media (max-width: 1400px) {
    #featured-about .soccer-vertical-indicator-badge {
        left: 25px;
    }
}

@media (max-width: 991px) {
    #featured-about .soccer-vertical-indicator-badge {
        display: none;
    }
}

#featured-about .soccer-vertical-badge-text {
    font-family: var(--ms-font-body) !important;
    /* Replaced Montserrat fallback layout */
    font-size: 14px;
    font-weight: 700;
    color: var(--theme-color);
    /* Classic gold tone accent matching design */
    text-transform: uppercase;
    letter-spacing: 3px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    margin-bottom: 20px;
}

#featured-about .soccer-vertical-badge-line {
    width: 1px;
    height: 80px;
    background-color: var(--theme-color);
    opacity: 0.4;
}

/* Typography Hierarchy matching reference image */
#featured-about .soccer-main-text-block {
    width: 100%;
}

#featured-about .soccer-editorial-maintitle {
    font-family: var(--ms-font-display) !important;
    /* Replaced Impact / Arial Black stacks */
    font-size: clamp(3rem, 5vw, 4.85rem);
    line-height: 0.9;
    color: #161616;
    letter-spacing: -1px;
    text-transform: uppercase;
    margin: 0 0 5px 0;
}

#featured-about .soccer-editorial-script-heading {
    /* Fluid signature font configuration preserved for stylized layout aesthetic */
    font-family: 'Alex Brush', 'Mr De Haviland', cursive !important;
    font-style: normal;
    /* Cursive fonts are already slanted, turning 'italic' off keeps it clean */

    /* Bumped up size because signature fonts naturally render smaller */
    font-size: clamp(2rem, 5.5vw, 4rem);
    font-weight: 400;
    color: var(--theme-color);
    /* Script accent gold */
    line-height: 0.8;
    /* Lower line-height lets it sit closely beneath the massive uppercase title */
    margin: 25px 0 15px 0;

    /* Slight positional adjustments to replicate the overlapping style */
    transform: translateY(-15px) rotate(-6deg);
    letter-spacing: 1px;
    text-transform: none;
    /* Crucial: ensures it doesn't accidentally force uppercase anywhere */
}

#featured-about .soccer-editorial-body-desc {
    font-family: var(--ms-font-alt-body) !important;
    /* Replaced system generic Arial structural fallback */
    font-size: 15px;
    line-height: 1.7;
    color: #4A4A4A;
    font-weight: 400;
    max-width: 440px;
    margin: 0 0 15px 0;
}

/* Action Button Layout */
#featured-about .soccer-action-button-container {
    display: block;
    position: relative;
}

#featured-about .soccer-premium-action-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;
    position: relative;
    transition: transform 0.3s ease;
}

#featured-about .soccer-premium-action-link::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 65px;
    width: 120px;
    height: 1px;
    background-color: var(--theme-color);
    opacity: 0.6;
    transition: width 0.3s ease;
}

#featured-about .soccer-premium-action-link:hover::after {
    width: 150px;
}

#featured-about .soccer-action-icon-circle {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: var(--theme-color);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-right: 20px;
    transition: background-color 0.3s ease;
}

#featured-about .soccer-premium-action-link:hover .soccer-action-icon-circle {
    background-color: #161616;
}

#featured-about .soccer-action-label {
    font-family: var(--ms-font-display) !important;
    /* Enforces uniform compressed layout heading styles */
    font-size: 14px;
    color: #161616;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* ==========================================================================
   CENTER COLUMN - INCREASED SLANT PARALLELOGRAM MASK BREAKOUT
   Matches a sharper, more aggressive parallel angle 
   ========================================================================== */

/* 1. Container section must allow visual breakout elements */
#featured-about.soccer-about-section-wrapper {
    position: relative;
    padding: 0;
    overflow: visible;
    width: 100%;
    z-index: 1;
}

/* 2. Middle column viewport framework */
#featured-about .soccer-skewed-visual-viewport {
    width: 100%;
    height: 100%;
    min-height: 540px;
    overflow: visible !important;
    /* Permits the sharper corners to glide across columns */
    position: relative;
    z-index: 3;
}

/* 3. Increased Slant Parallelogram Mask 
       Pushed slightly wider to 125% and shifted left to balance the heavy tilt
*/
#featured-about .soccer-skewed-mask-container {
    position: absolute;
    top: 10px;
    left: -9%;
    /* Pulled further left to prevent image clipping on the sharp angle */
    width: 116%;
    height: 100%;
    background-color: #111111;

    /* STRONGER PARALLELOGRAM GEOMETRY:
       Top-left starts deeper at 16%, Top-right goes to 100%.
       Bottom-right stops short at 84%, Bottom-left cuts straight to 0%.
       The delta on both edges is exactly 20%, maintaining flawless parallel lines.
    */
    clip-path: polygon(16% 0%, 100% 0%, 84% 100%, 0% 100%);
    -webkit-clip-path: polygon(16% 0%, 100% 0%, 84% 100%, 0% 100%);

    overflow: hidden !important;
}

/* 4. Ensures the image inside remains upright and beautiful */
#featured-about .soccer-skewed-image-element {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.0);
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Premium micro-zoom response on hover */
#featured-about .soccer-skewed-visual-viewport:hover .soccer-skewed-image-element {
    transform: scale(1.06);
}

/* 5. Elevate right side values to sit seamlessly on top of the slanted image */
#featured-about .soccer-right-features-inner {
    padding: 100px 80px 100px 50px;
    position: relative;
    z-index: 10;
    /* Text layer remains safely over the running background corner */
}

/* Mobile Responsive Matrix */
@media (max-width: 991px) {
    #featured-about .soccer-skewed-mask-container {
        width: 100%;
        left: 0;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        position: relative;
    }

    #featured-about .soccer-skewed-visual-viewport {
        min-height: auto;
        overflow: hidden !important;
    }
}

@media (max-width: 991px) {

    #featured-about .soccer-skewed-mask-container,
    #featured-about .soccer-skewed-image-element {
        transform: none !important;
    }

    #featured-about .soccer-skewed-visual-viewport {
        min-height: auto;
    }
}

/* RIGHT COLUMN - FEATURE LIST STACK */
#featured-about .soccer-right-features-inner {
    padding: 100px 80px 100px 50px;
    position: relative;
    z-index: 5;
}

@media (max-width: 1400px) {
    #featured-about .soccer-right-features-inner {
        padding: 80px 40px 80px 30px;
    }
}

@media (max-width: 991px) {
    #featured-about .soccer-right-features-inner {
        padding: 60px 30px;
    }
}

#featured-about .soccer-vertical-feature-item-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 45px;
    position: relative;
    z-index: 2;
}

#featured-about .soccer-vertical-feature-item-row:last-child {
    margin-bottom: 0;
}

#featured-about .soccer-feature-icon-circle-wrapper {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background-color: #EFECE6;
    /* Soft cream/gray circle backdrop */
    color: #161616;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-right: 25px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

#featured-about .soccer-vertical-feature-item-row:hover .soccer-feature-icon-circle-wrapper {
    background-color: var(--theme-color);
    color: #FFFFFF;
}

#featured-about .soccer-feature-text-block {
    flex-grow: 1;
}

#featured-about .soccer-feature-item-heading {
    font-family: var(--ms-font-display) !important;
    /* Replaced hardcoded Impact/Arial Black stacks */
    font-size: 15px;
    color: #161616;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0 0 8px 0;
}

#featured-about .soccer-feature-item-body {
    font-family: var(--ms-font-alt-body) !important;
    /* Replaced system generic Arial fallback */
    font-size: 13.5px;
    line-height: 1.6;
    color: #666666;
    margin: 0;
}

/* Bottom Corner Decorative Dot Matrix Accent */
#featured-about .soccer-decorative-dot-matrix {
    position: absolute;
    bottom: 25px;
    right: 40px;
    width: 90px;
    height: 45px;
    background-image: radial-gradient(#D1D1D1 1.5px, transparent 1.5px);
    background-size: 12px 12px;
    opacity: 0.7;
    z-index: 1;
    pointer-events: none;
}

@media (max-width: 991px) {
    #featured-about .soccer-decorative-dot-matrix {
        display: none;
    }
}


/* ==========================================================================
   EXACT LAYOUT ENGINE: 35% LEFT | 40% CENTER MEDIA (CUSTOM MASK) | 25% RIGHT
   ========================================================================== */

#featured-legacy {
    background-color: #0d0e10;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}


/* 1. Master Section Anchor Frame */
#legacy-section.legacy-section {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 560px !important;
    height: 560px !important;
    display: block !important;
}

/* Neutralize any page builder intermediate containers */
#legacy-section .legacy-columns-grid-wrapper {
    position: static !important;
    display: block !important;
}

/* --- COLUMN 1: LEFT AREA STYLING (35%) --- */
#legacy-section .legacy-left {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 35% !important;
    height: 100% !important;
    background-color: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 30px 35px 30px 5% !important;
    z-index: 5 !important;
    box-sizing: border-box !important;
    float: none !important;
    margin: 0 !important;
}

/* Background dots ornament indicator */
#legacy-section .legacy-left::before {
    content: "" !important;
    position: absolute !important;
    top: 25% !important;
    left: 25px !important;
    width: 45px !important;
    height: 100px !important;
    opacity: 0.12 !important;
    background-image:
        radial-gradient(#ffffff 1.5px, transparent 1.5px),
        radial-gradient(#ffffff 1.5px, transparent 1.5px);
    background-size: 14px 14px !important;
    background-position: 0 0, 7px 7px !important;
}

#legacy-section .legacy-content {
    max-width: 420px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#legacy-section .legacy-label-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}

#legacy-section .legacy-label {
    font-family: var(--ms-font-body) !important;
    /* Replaced Montserrat fallback layout */
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--theme-color);
    letter-spacing: 2px !important;
}

#legacy-section .legacy-label-line {
    width: 25px !important;
    height: 1px !important;
    background-color: rgba(197, 160, 89, 0.4);
}

#legacy-section .legacy-heading {
    font-family: var(--ms-font-display) !important;
    /* Replaced Impact / Arial Black layout engine */
    font-size: clamp(1.8rem, 2.8vw, 3.0rem);
    line-height: 1.1 !important;
    color: #ffffff;
    margin: 0 0 25px 0 !important;
    letter-spacing: -0.5px !important;
    text-transform: uppercase;
}

#legacy-section .legacy-heading .highlight {
    color: var(--theme-color);
}

/* Stats Row Elements Setup */
#legacy-section .legacy-stats-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 30px !important;
}

#legacy-section .legacy-stat-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    flex: 1 !important;
    position: relative !important;
}

#legacy-section .legacy-stat-item:not(:last-child)::after {
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    top: 20% !important;
    height: 60% !important;
    width: 1px !important;
    background-color: rgba(255, 255, 255, 0.12);
}

/* Enhanced Big Stat Icons with custom branding color alignment */
#legacy-section .legacy-stat-item i.stat-icon,
#legacy-section .legacy-stat-item svg.stat-icon {
    font-size: 26px !important;
    color: var(--theme-color);
    margin-bottom: 10px !important;
}

#legacy-section .legacy-stat-number {
    font-family: var(--ms-font-display) !important;
    /* Replaced heavy structural font stacks */
    font-size: 30px !important;
    color: #ffffff;
    line-height: 1 !important;
    margin-bottom: 2px !important;
}

#legacy-section .legacy-stat-desc {
    font-family: var(--ms-font-body) !important;
    /* Replaced Montserrat reference layout */
    font-size: 8.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #7e8285;
    letter-spacing: 0.5px !important;
}

/* Bottom Thumbnail Box - White Background Variant */
#legacy-section .legacy-community-banner {
    display: block !important;
    text-decoration: none !important;
    background: #ffffff;
    position: relative !important;
    clip-path: polygon(0 0, 94% 0, 100% 100%, 0% 100%) !important;
    -webkit-clip-path: polygon(0 0, 94% 0, 100% 100%, 0% 100%) !important;
    width: 100% !important;
    max-width: 370px !important;
    border: 1px solid rgba(0, 0, 0, 0.06);
    height: 80px !important;
}

#legacy-section .banner-flex-wrap {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
}

/* Thumbnail Forced to Fill 100% Container Box Height Edge-to-Edge */
#legacy-section .banner-thumb {
    width: 105px !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    flex-shrink: 0 !important;
}

#legacy-section .banner-info {
    flex-grow: 1 !important;
    padding: 0 14px !important;
}

/* Typography elements updated to black to cleanly contrast on white */
#legacy-section .banner-title {
    font-family: var(--ms-font-body) !important;
    /* Replaced Montserrat fallback architecture */
    font-size: 10.5px !important;
    font-weight: 800 !important;
    color: #000000;
    margin: 0 0 3px 0 !important;
    text-transform: uppercase !important;
}

#legacy-section .banner-desc {
    font-family: var(--ms-font-alt-body) !important;
    /* Set to cleaner default descriptive line height */
    font-size: 9px !important;
    color: #222222;
    margin: 0 !important;
    line-height: 1.3 !important;
}

#legacy-section .banner-arrow {
    padding-right: 20px !important;
}

#legacy-section .banner-arrow i {
    color: var(--theme-color);
    font-size: 11px !important;
}


/* --- COLUMN 2: CENTER MEDIA (40% WITH INDEPENDENT VECTOR LINES) --- */
#legacy-section .legacy-center-media {
    position: absolute !important;
    top: 0 !important;
    left: 35% !important;
    width: 40% !important;
    height: 100% !important;
    z-index: 8 !important;
    display: block !important;
    overflow: visible !important;
    /* Vital for allowing structural design lines to breathe */
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* Stable Center Image Mask Container */
#legacy-section .legacy-center-media-mask {
    width: 100% !important;
    height: 100% !important;
    clip-path: polygon(16% 0%, 100% 0%, 84% 100%, 0% 100%) !important;
    -webkit-clip-path: polygon(16% 0%, 100% 0%, 84% 100%, 0% 100%) !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 2 !important;
}

#legacy-section .legacy-center-image-element {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    display: block !important;
}

/* ==========================================
   UPDATED MASTER BORDER ARCHITECTURE (NO SKEW)
   ========================================== */
#legacy-section .legacy-decor-line-slant-left,
#legacy-section .legacy-decor-line-slant-right {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 10 !important;
    background-color: var(--theme-color);
    /* Color assigned directly to the block */
}

/* LEFT SIDE BORDER LINE
   Spans from the left edge of the image container (0%) to the start of the mask (16%).
   The clip-path creates a 2px parallel ribbon along that exact angle matrix dynamically.
*/
#legacy-section .legacy-decor-line-slant-left {
    left: 0 !important;
    width: 16% !important;
    /* Matches the left offset distance of your polygon */
    /* Dynamic 2px polygon ribbon mapping left edge */
    clip-path: polygon(calc(100% - 2px) 0%, 100% 0%, 2px 100%, 0% 100%) !important;
    -webkit-clip-path: polygon(calc(100% - 2px) 0%, 100% 0%, 2px 100%, 0% 100%) !important;
}

/* Removed legacy pseudo-element borders to avoid conflict */
#legacy-section .legacy-decor-line-slant-left::after {
    display: none !important;
}

/* The Custom Geometric Accent Wire Framework (Retained and structurally isolated) */
#legacy-section .legacy-decor-line-slant-left::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    /* Anchored to the edge of the new left line boundaries */
    width: 120px !important;
    height: 190px !important;
    background-image: linear-gradient(to right, rgba(197, 160, 89, 0.15) 1px, transparent 1px);
    background-size: 9px 100% !important;
    background-repeat: repeat-x !important;
    border-left: 1px solid rgba(197, 160, 89, 0.4);
    border-bottom: 1px solid rgba(197, 160, 89, 0.4);
    transform: skewX(-23deg) !important;
    transform-origin: top right !important;
    box-sizing: border-box !important;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 80.6px 100%) !important;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 80.6px 100%) !important;
}

/* RIGHT SIDE BORDER LINE
   Spans across the right wedge of the container from 84% to 100%.
   The clip-path maps a 2px parallel line tracking the right-side cut seamlessly.
*/
#legacy-section .legacy-decor-line-slant-right {
    left: 84% !important;
    /* Starts exactly where the bottom cut reaches inside */
    width: 16% !important;
    /* Balance width (100% - 84%) */
    /* Dynamic 2px polygon ribbon mapping right edge */
    clip-path: polygon(100% 0%, calc(100% - 2px) 0%, 0% 100%, 2px 100%) !important;
    -webkit-clip-path: polygon(100% 0%, calc(100% - 2px) 0%, 0% 100%, 2px 100%) !important;
}

/* Removed legacy pseudo-element borders to avoid conflict */
#legacy-section .legacy-decor-line-slant-right::after {
    display: none !important;
}


/* --- COLUMN 3: RIGHT TIMELINE AREA (25%) --- */
#legacy-section .legacy-right {
    position: absolute !important;
    top: 0 !important;
    left: 75% !important;
    width: 25% !important;
    height: 100% !important;
    background-color: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 30px 3% 30px 3% !important;
    z-index: 5 !important;
    box-sizing: border-box !important;
    float: none !important;
    margin: 0 !important;
}

#legacy-section .legacy-honors-block {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#legacy-section .legacy-honors-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 30px !important;
}

#legacy-section .legacy-honors-label {
    font-family: var(--ms-font-body) !important;
    /* Replaced Montserrat track fallback */
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: var(--theme-color);
    letter-spacing: 2px !important;
}

#legacy-section .legacy-honors-line {
    width: 25px !important;
    height: 1px !important;
    background-color: rgba(197, 160, 89, 0.4);
}

#legacy-section .legacy-timeline-track {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 35px 0 !important;
    position: relative !important;
}

/* Vertical track architecture timeline line */
#legacy-section .legacy-timeline-track::before {
    content: '' !important;
    position: absolute !important;
    top: 6px !important;
    bottom: 6px !important;
    left: 43px !important;
    width: 1px !important;
    background: rgba(255, 255, 255, 0.08);
}

#legacy-section .timeline-node {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 24px !important;
    position: relative !important;
}

#legacy-section .timeline-node:last-child {
    margin-bottom: 0 !important;
}

#legacy-section .node-year {
    font-family: var(--ms-font-body) !important;
    /* Replaced Montserrat layout tag */
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #7e8285;
    width: 40px !important;
    flex-shrink: 0 !important;
}

/* Node structural dots over background axis */
#legacy-section .node-dot-marker {
    width: 6px !important;
    height: 6px !important;
    background-color: var(--theme-color);
    border-radius: 50% !important;
    margin: 0 18px 0 1px !important;
    z-index: 5 !important;
    flex-shrink: 0 !important;
}

#legacy-section .node-content {
    flex-grow: 1 !important;
}

#legacy-section .node-title {
    font-family: var(--ms-font-body) !important;
    /* Standardized to unified secondary brand layout typography */
    font-size: 11.5px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 1px 0 !important;
}

#legacy-section .node-desc {
    font-family: var(--ms-font-alt-body) !important;
    /* Applied secondary descriptive weight */
    font-size: 10px !important;
    color: #7e8285;
}

/* Angular Action Trigger Button styling */
#legacy-section .legacy-achieve-btn-skew-wrap {
    display: inline-block !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transform: skewX(-12.8deg) !important;
    transition: all 0.3s ease !important;
}

#legacy-section .legacy-achieve-btn-skew-wrap:hover {
    border-color: var(--theme-color);
    background: rgba(197, 160, 89, 0.04);
}

#legacy-section .legacy-achieve-btn {
    font-family: var(--ms-font-body) !important;
    /* Integrated primary custom link family */
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    color: #ffffff;
    padding: 10px 24px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    letter-spacing: 1.5px !important;
    transform: skewX(12.8deg) !important;
    white-space: nowrap !important;
}

#legacy-section .legacy-achieve-btn i.achieve-btn-icon,
#legacy-section .legacy-achieve-btn svg.achieve-btn-icon {
    font-size: 10px !important;
    transition: transform 0.3s ease !important;
}

#legacy-section .legacy-achieve-btn:hover i.achieve-btn-icon,
#legacy-section .legacy-achieve-btn:hover svg.achieve-btn-icon {
    transform: translateX(4px) !important;
    color: var(--theme-color);
}


/* --- MOBILE RESPONSIVE BREAKPOINTS --- */
@media (max-width: 1200px) {
    #legacy-section.legacy-section {
        height: auto !important;
        min-height: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #legacy-section .legacy-left,
    #legacy-section .legacy-center-media,
    #legacy-section .legacy-right {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        padding: 65px 8% !important;
        align-items: center !important;
    }

    #legacy-section .legacy-center-media {
        min-height: 400px !important;
    }

    #legacy-section .legacy-center-media-mask {
        clip-path: none !important;
        min-height: 400px !important;
    }

    #legacy-section .legacy-left::before,
    #legacy-section .legacy-decor-line-slant-left,
    #legacy-section .legacy-decor-line-slant-right {
        display: none !important;
    }
}

@media (max-width: 550px) {
    #legacy-section .legacy-stats-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 25px 15px !important;
    }

    #legacy-section .legacy-stat-item:not(:last-child)::after {
        display: none !important;
    }
}

/* ==========================================================================
   MASTER RULES & REBALANCED GRID MATRIX (35% | 35% | 30%)
   ========================================================================== */
#featured-club {
    position: relative !important;
    background-color: #f0edec;
    padding: 2px 0 !important;
    overflow: hidden !important;
    /* Secures viewport edges while letting inner containers bleed */
    box-sizing: border-box !important;
}

/* Premium Background Watermark Placement */
#featured-club .club-premium-watermark {
    position: absolute !important;
    top: 8% !important;
    left: -4% !important;
    width: 420px !important;
    height: 84% !important;
    background-image: linear-gradient(135deg, rgba(185, 161, 107, 0.03) 25%, transparent 25%),
        linear-gradient(225deg, rgba(185, 161, 107, 0.03) 25%, transparent 25%);
    background-size: 80px 80px !important;
    opacity: 0.9 !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

#featured-club .club-custom-container {
    width: 100% !important;
    max-width: 1680px !important;
    margin: 0 auto !important;
    padding: 0 50px !important;
    box-sizing: border-box !important;
}

#featured-club .club-grid-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

/* Precise Three-Column Matrix Allocation Split */
#featured-club .club-column-left {
    flex: 0 0 35% !important;
    max-width: 35% !important;
    box-sizing: border-box !important;
    z-index: 5 !important;
}

#featured-club .club-column-center {
    flex: 0 0 35% !important;
    max-width: 35% !important;
    position: relative !important;
    box-sizing: border-box !important;
    z-index: 10 !important;
}

#featured-club .club-column-right {
    flex: 0 0 30% !important;
    max-width: 30% !important;
    box-sizing: border-box !important;
    z-index: 5 !important;
}

/* ==========================================================================
   PART 1: LEFT SIDE CONTENT BRANDING
   ========================================================================== */
#featured-club .club-left {
    position: relative !important;
    padding-right: 40px !important;
}

#featured-club .club-small-title-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    margin-bottom: 25px !important;
}

#featured-club .club-small-title {
    font-family: var(--ms-font-body) !important;
    /* Bound to global body token */
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px !important;
    color: var(--theme-color);
}

#featured-club .club-small-line {
    width: 50px !important;
    height: 1px !important;
    background-color: var(--theme-color);
    display: block !important;
}

#featured-club .club-main-title {
    font-family: var(--ms-font-display) !important;
    /* Linked to premium display variable */
    font-size: 46px;
    line-height: 1.12;
    font-weight: 800;
    color: #111111;
    margin-bottom: 30px !important;
}

#featured-club .club-highlight-title {
    display: block !important;
    color: var(--theme-color);
}

#featured-club .club-description {
    font-family: var(--ms-font-alt-body) !important;
    /* Connected to secondary editorial body copy */
    color: #666666;
    font-size: 15px !important;
    line-height: 1.8 !important;
    margin-bottom: 40px !important;
}

#featured-club .club-bottom-content {
    display: flex !important;
    align-items: left;
    gap: 30px !important;
}

#featured-club .club-btn {
    font-family: var(--ms-font-body) !important;
    /* Structured primary interaction font */
    background-color: #111111;
    color: #FFFFFF;
    text-decoration: none !important;
    padding: 16px 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 20px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
    white-space: nowrap;
}

#featured-club .club-btn:hover {
    background-color: var(--theme-color);
    color: #FFFFFF;
}

#featured-club .club-membership {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

#featured-club .membership-text {
    font-family: var(--ms-font-body) !important;
    /* Linked to primary core body script */
    color: #111111;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid #111111;
    padding-bottom: 2px !important;
    letter-spacing: 1px !important;
}

#featured-club .membership-line {
    width: 40px !important;
    height: 1px !important;
    background-color: var(--theme-color);
    display: block !important;
}

/* ==========================================================================
   PART 2: CENTER PANEL - RESPONSIVE ARCHITECTURE LINE CORRECTIONS (FIXED)
   ========================================================================== */
#featured-club .club-image-outer-frame {
    position: relative !important;
    width: 100% !important;
}

#featured-club .club-image-overflow-container {
    position: relative !important;
    width: 122% !important;
    /* Elegant horizontal bleed framework overlay */
    left: -11% !important;
    display: block !important;
    overflow: visible !important;
    /* Crucial to allow absolute design lines to stick out */
    box-sizing: border-box !important;
}

/* Legacy Stable Center Image Mask Container */
#featured-club .club-center-media-mask {
    width: 100% !important;
    height: 100% !important;
    clip-path: polygon(16% 0%, 100% 0%, 84% 100%, 0% 100%) !important;
    -webkit-clip-path: polygon(16% 0%, 100% 0%, 84% 100%, 0% 100%) !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 2 !important;
}

#featured-club .club-center-image-element {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    display: block !important;
}

/* Absolute Rails for Vector Layout Lines (Converted to solid ribbon elements) */
#featured-club .club-decor-line-slant-left,
#featured-club .club-decor-line-slant-right {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 10 !important;
    background-color: var(--theme-color);
    /* Premium gold color applied directly */
}

/* LEFT SIDE BORDER MATRIX
   Spans from container 0% to 16%. 
   The clip-path creates a 4px wide parallel ribbon that precisely matches the image mask slant.
*/
#featured-club .club-decor-line-slant-left {
    left: -6px !important;
    width: 16% !important;
    /* Matches your 16% clip-path start offset */
    /* Dynamic 4px polygon ribbon tracking the left edge */
    clip-path: polygon(calc(100% - 4px) 0%, 100% 0%, 4px 100%, 0% 100%) !important;
    -webkit-clip-path: polygon(calc(100% - 4px) 0%, 100% 0%, 4px 100%, 0% 100%) !important;
}

/* Removed skew pseudo-element to eliminate line drifting */
#featured-club .club-decor-line-slant-left::after {
    display: none !important;
}

/* RIGHT SIDE PARALLEL TRACK BORDER
   Spans the remaining 16% width block on the right side (from 84% to 100%).
   The clip-path generates a 2px parallel ribbon mapping the right edge.
*/
#featured-club .club-decor-line-slant-right {
    left: 85% !important;
    /* Starts exactly where the bottom right clip steps inward */
    width: 16% !important;
    /* Balance width (100% - 84%) */
    /* Dynamic 2px polygon ribbon tracking the right edge */
    clip-path: polygon(100% 0%, calc(100% - 2px) 0%, 0% 100%, 2px 100%) !important;
    -webkit-clip-path: polygon(100% 0%, calc(100% - 2px) 0%, 0% 100%, 2px 100%) !important;
}

/* Removed skew pseudo-element to eliminate line drifting */
#featured-club .club-decor-line-slant-right::after {
    display: none !important;
}

/* ==========================================================================
   PART 3: RIGHT SIDE - STEPPED DOWN STAIRCASE TIMELINE TRACKS (30% Width)
   ========================================================================== */
#featured-club .club-right-stepped-timeline {
    position: relative !important;
    width: 90% !important;
    padding-left: 30px !important;
    box-sizing: border-box !important;
}

/* Cascading staircase transforms matching center angle flow layout */
#featured-club .club-feature-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 20px !important;
    position: relative !important;
    padding: 22px 0 !important;
}

#featured-club .club-feature-item.step-1 {
    transform: translateX(90px) !important;
}

#featured-club .club-feature-item.step-2 {
    transform: translateX(60px) !important;
}

#featured-club .club-feature-item.step-3 {
    transform: translateX(30px) !important;
}

#featured-club .club-feature-item.step-4 {
    transform: translateX(0px) !important;
}

#featured-club .club-timeline-rail {
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    min-width: 40px !important;
}

#featured-club .club-feature-last::after,
#featured-club .club-feature-last::before {
    display: none !important;
}

#featured-club .club-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 50% !important;
    background-color: #FFFFFF;
    border: 1px solid #D8CCB1;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    z-index: 2 !important;
    transition: all 0.4s ease !important;
}

#featured-club .club-feature-item:hover .club-icon {
    background-color: var(--theme-color);
    border-color: var(--theme-color);
}

#featured-club .club-icon i,
#featured-club .club-icon svg {
    color: var(--theme-color);
    font-size: 14px !important;
    transition: color 0.3s ease !important;
}

#featured-club .club-feature-item:hover .club-icon i,
#featured-club .club-feature-item:hover .club-icon svg {
    color: #FFFFFF;
}

#featured-club .club-content {
    padding-top: 8px !important;
}

#featured-club .club-content h5 {
    font-family: var(--ms-font-body) !important;
    /* Styled clean brand sub-header alignment */
    margin: 0 0 6px 0 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #111111;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

#featured-club .club-content p {
    font-family: var(--ms-font-alt-body) !important;
    /* Connected description blocks to fluid copy rule */
    margin: 0 !important;
    color: #777777;
    font-size: 13.5px !important;
    line-height: 1.65 !important;
}

/* Horizontal Divider Lines between steps (hidden after the 4th step) */
#featured-club .club-feature-item:not(.club-feature-last)::before {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    /* Positions the divider perfectly at the bottom boundary of the step */
    left: 0 !important;
    width: 100% !important;
    /* Spans across the entire text area width */
    height: 1px !important;
    background-color: #E6E1D6;
    z-index: 1 !important;
}

/* ==========================================================================
   RESPONSIVE LAYOUT SYSTEM BREAKPOINTS
   ========================================================================== */
@media (max-width: 1450px) {
    #featured-club .club-main-title {
        font-size: 38px !important;
    }

    #featured-club .club-feature-item.step-1 {
        transform: translateX(60px) !important;
    }

    #featured-club .club-feature-item.step-2 {
        transform: translateX(40px) !important;
    }

    #featured-club .club-feature-item.step-3 {
        transform: translateX(20px) !important;
    }
}

@media (max-width: 1199px) {
    #featured-club {
        padding: 80px 0 !important;
    }

    #featured-club .club-grid-row {
        flex-direction: column !important;
    }

    #featured-club .club-column-left,
    #featured-club .club-column-center,
    #featured-club .club-column-right {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    #featured-club .club-left {
        padding-right: 0 !important;
        margin-bottom: 50px !important;
    }

    #featured-club .club-column-center {
        padding: 0 !important;
        margin-bottom: 50px !important;
    }

    /* Reset bounds normalization on single-column mobile stacking */
    #featured-club .club-image-overflow-container {
        width: 100% !important;
        left: 0 !important;
    }

    #featured-club .club-image-overflow-container {
        height: 480px !important;
    }

    #featured-club .club-right-stepped-timeline {
        padding-left: 0 !important;
    }

    #featured-club .club-feature-item.step-1,
    #featured-club .club-feature-item.step-2,
    #featured-club .club-feature-item.step-3 {
        transform: translateX(0) !important;
    }

    #featured-club .club-feature-item::before {
        display: none !important;
    }

    #featured-club .club-feature-item::after {
        left: 19.5px !important;
        top: 55px !important;
    }

    #featured-club .club-premium-watermark {
        display: none !important;
    }
}

@media (max-width: 767px) {
    #team-carousel-stage {
        width: 100% !important;
        margin-left: 0px !important;
    }

    #team-slider-track {
        transform: skewX(0deg) !important;
    }

    #featured-club {
        padding: 60px 0 !important;
    }

    #featured-team {
        padding: 20px;
    }

    #featured-club .club-custom-container {
        padding: 0 25px !important;
    }

    #featured-club .club-main-title {
        font-size: 32px !important;
    }

    #featured-club .club-bottom-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    #featured-club .club-image-overflow-container {
        height: 340px !important;
    }

    /* Strip custom slants on screens too narrow to display them properly */
    #featured-club .club-center-media-mask {
        clip-path: none !important;
        -webkit-clip-path: none !important;
    }

    #featured-club .club-decor-line-slant-left,
    #featured-club .club-decor-line-slant-right {
        display: none !important;
    }
}



/* ==========================================================================
   LEGACY-STYLE 3-COLUMN CONTACT LAYOUT (40% | 40% | 20% Grid Structure)
   Target Container ID: #featured-contact
   ========================================================================== */

/* ==========================================================================
   LEGACY-STYLE 3-COLUMN CONTACT LAYOUT (40% | 40% | 20% Grid Structure)
   ========================================================================== */

#featured-contact {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 0;
}

#featured-contact .legacy-grid-row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: stretch;
}

/* --- COLUMN 1: LEFT CONTENT BLOCK (40%) --- */
#featured-contact .left-content-pane {
    flex: 0 0 40%;
    width: 40%;
    padding: 70px 4% 70px 4%;
    position: relative;
    z-index: 5;
    box-sizing: border-box;
}

#featured-contact .inner-content-wrapper {
    width: 100%;
    max-width: 520px;
}

#featured-contact .badge-title-small {
    display: block;
    color: var(--theme-color);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

#featured-contact .hero-contact-title {
    color: #141414;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    margin-bottom: 25px;
}

#featured-contact .hero-contact-title span {
    display: block;
}

#featured-contact .hero-contact-title span.gold-text {
    color: var(--theme-color);
}

#featured-contact .section-paragraph-desc {
    color: #555555;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 35px;
}

#featured-contact .dynamic-card-item {
    margin-bottom: 25px;
}

#featured-contact .dynamic-card-item .card-inner {
    display: flex;
    align-items: flex-start;
}

#featured-contact .dynamic-card-item .icon-holder {
    background-color: #f1ebd9;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    min-width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}

#featured-contact .dynamic-card-item .icon-holder i,
#featured-contact .dynamic-card-item .icon-holder svg {
    color: var(--theme-color);
    font-size: 1rem;
}

#featured-contact .card-body-meta .meta-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--theme-color);
    margin-bottom: 4px;
    text-transform: uppercase;
}

#featured-contact .card-body-meta p,
#featured-contact .card-body-meta address {
    font-size: 0.85rem;
    line-height: 1.45;
    color: #111111;
    font-weight: 500;
    margin-bottom: 0;
    font-style: normal;
}

#featured-contact .card-body-meta a {
    color: #111111;
    text-decoration: none;
}


/* ==========================================================================
   COLUMN 2: ADAPTED SLANT IMAGE FRAMEWORK WITH INTEGRATED BORDER RAILS
   ========================================================================== */
#featured-contact .contact-image-outer-frame {
    flex: 0 0 40%;
    width: 40%;
    position: relative !important;
    min-height: 550px;
    /* Perfectly decreased default image block frame height */
    z-index: 2;
}

#featured-contact .contact-image-overflow-container {
    position: relative !important;
    width: 122% !important;
    /* Elegant horizontal bleed framework overlay */
    left: -11% !important;
    height: 100%;
    display: block !important;
    overflow: visible !important;
    /* Crucial to allow absolute design lines to stick out */
    box-sizing: border-box !important;
}

/* Stable Center Image Mask Container */
#featured-contact .contact-center-media-mask {
    width: 100% !important;
    height: 100% !important;
    clip-path: polygon(16% 0%, 100% 0%, 84% 100%, 0% 100%) !important;
    -webkit-clip-path: polygon(16% 0%, 100% 0%, 84% 100%, 0% 100%) !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 2 !important;
}

#featured-contact .contact-center-image-element {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    display: block !important;
}

/* Absolute Rails for Vector Layout Lines (Solid ribbon elements) */
#featured-contact .contact-decor-line-slant-left,
#featured-contact .contact-decor-line-slant-right {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 10 !important;
    background-color: var(--theme-color) !important;
    /* Premium branding gold tone */
}

/* LEFT SIDE BORDER MATRIX tracking the 16% slant exactly */
#featured-contact .contact-decor-line-slant-left {
    left: -6px !important;
    width: 16% !important;
    clip-path: polygon(calc(100% - 4px) 0%, 100% 0%, 4px 100%, 0% 100%) !important;
    -webkit-clip-path: polygon(calc(100% - 4px) 0%, 100% 0%, 4px 100%, 0% 100%) !important;
}

#featured-contact .contact-decor-line-slant-left::after {
    display: none !important;
}

/* RIGHT SIDE PARALLEL TRACK BORDER tracking the 84% slant step exactly */
#featured-contact .contact-decor-line-slant-right {
    left: 85% !important;
    width: 16% !important;
    clip-path: polygon(100% 0%, calc(100% - 2px) 0%, 0% 100%, 2px 100%) !important;
    -webkit-clip-path: polygon(100% 0%, calc(100% - 2px) 0%, 0% 100%, 2px 100%) !important;
}

#featured-contact .contact-decor-line-slant-right::after {
    display: none !important;
}


/* --- COLUMN 3: RIGHT OVERLAY FORM HOUSING (20%) --- */
#featured-contact .right-form-pane {
    flex: 0 0 20%;
    width: 20%;
    position: relative;
    display: flex;
    align-items: center;
    z-index: 10;
}

#featured-contact .floating-form-plate {
    position: relative;
    background: #ffffff;
    width: 500px;
    min-width: 460px;
    margin-left: -320px;
    padding: 45px 40px;
    border-radius: 0px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
    visibility: visible !important;
}

#featured-contact .form-plate-heading {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #111111;
    text-transform: uppercase;
    margin-bottom: 25px;
}

#featured-contact .form-wrapper-shortcode input:not([type="submit"]),
#featured-contact .form-wrapper-shortcode textarea {
    width: 100%;
    background-color: #faf9f6;
    border: 1px solid #e1ded7;
    padding: 13px 15px;
    font-size: 0.9rem;
    color: #111111;
    margin-bottom: 16px;
    border-radius: 0px;
    outline: none;
    box-sizing: border-box;
}

#featured-contact .form-wrapper-shortcode input::placeholder,
#featured-contact .form-wrapper-shortcode textarea::placeholder {
    color: #aaaaaa;
}

#featured-contact .form-wrapper-shortcode textarea {
    height: 115px;
    resize: none;
}

#featured-contact .form-wrapper-shortcode input[type="submit"],
#featured-contact .form-wrapper-shortcode button.wpcf7-submit,
#featured-contact .custom-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background-color: var(--theme-color);
    color: #ffffff;
    border: none;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 15px 20px;
    border-radius: 0px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#featured-contact .form-wrapper-shortcode input[type="submit"]:hover,
#featured-contact .form-wrapper-shortcode button.wpcf7-submit:hover,
#featured-contact .custom-submit-btn:hover {
    background-color: var(--theme-color);
}

#featured-contact .form-wrapper-shortcode p {
    margin: 0 !important;
    padding: 0 !important;
}

#featured-contact .form-wrapper-shortcode br {
    display: none !important;
}

#featured-contact .form-row-twin {
    display: flex !important;
    gap: 15px !important;
    width: 100% !important;
}

#featured-contact .form-row-twin .form-group,
#featured-contact .form-row-twin>div,
#featured-contact .form-row-twin>span {
    flex: 1 !important;
}


/* ==========================================================================
   UPDATED RESPONSIVE SCALING CONTROLS (DEFEATS 0px HEIGHT COLLAPSE)
   ========================================================================== */

@media (max-width: 1399px) {
    #featured-contact .hero-contact-title {
        font-size: 2.8rem;
    }

    #featured-contact .floating-form-plate {
        width: 420px;
        min-width: 420px;
        margin-left: -240px;
    }
}

@media (max-width: 1199px) {
    #featured-contact .hero-contact-title {
        font-size: 2.3rem;
    }

    #featured-contact .left-content-pane {
        padding: 80px 4%;
    }

    #featured-contact .contact-image-outer-frame {
        min-height: 480px;
    }

    #featured-contact .floating-form-plate {
        width: 380px;
        min-width: 380px;
        margin-left: -180px;
        padding: 35px 30px;
    }
}

@media (max-width: 991px) {

    /* Break row structure into an explicit vertical stack order */
    #featured-contact .legacy-grid-row {
        display: flex !important;
        flex-direction: column !important;
    }

    #featured-contact .left-content-pane {
        width: 100% !important;
        flex: 0 0 auto !important;
        padding: 60px 40px !important;
    }

    /* --- CENTER IMAGE PANEL TABLET FIX --- */
    #featured-contact .contact-image-outer-frame {
        width: 100% !important;
        flex: 0 0 auto !important;
        display: block !important;
        /* Explicitly defining a concrete height ensures the background image cannot collapse */
        height: 380px !important;
        min-height: 380px !important;
        margin: 30px 0 !important;
        overflow: visible !important;
    }

    #featured-contact .contact-image-overflow-container {
        width: 100% !important;
        left: 0 !important;
        height: 100% !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
    }

    /* Forces the inner canvas container to span and fill the concrete parent limits */
    #featured-contact .contact-center-media-mask {
        width: 100% !important;
        height: 100% !important;
        position: relative !important;
        clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%) !important;
        -webkit-clip-path: polygon(8% 0%, 100% 0%, 92% 100%, 0% 100%) !important;
    }

    /* Softens and scales down the tracking ribbons to look clean on tablet viewports */
    #featured-contact .contact-decor-line-slant-left {
        width: 8% !important;
        left: 14px !important;
        clip-path: polygon(calc(100% - 3px) 0%, 100% 0%, 3px 100%, 0% 100%) !important;
        -webkit-clip-path: polygon(calc(100% - 3px) 0%, 100% 0%, 3px 100%, 0% 100%) !important;
    }

    #featured-contact .contact-decor-line-slant-right {
        left: auto !important;
        right: 14px !important;
        width: 8% !important;
        clip-path: polygon(100% 0%, calc(100% - 2px) 0%, 0% 100%, 2px 100%) !important;
        -webkit-clip-path: polygon(100% 0%, calc(100% - 2px) 0%, 0% 100%, 2px 100%) !important;
    }

    /* --- FORM PLACEMENT ENGINE RESET --- */
    #featured-contact .right-form-pane {
        width: 100% !important;
        flex: 0 0 auto !important;
        padding: 40px 20px 80px 20px !important;
        display: flex !important;
        justify-content: center !important;
        background-color: #ffffff;
    }

    #featured-contact .floating-form-plate {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 600px !important;
        min-width: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
}

@media (max-width: 575px) {
    #featured-contact .left-content-pane {
        padding: 40px 20px !important;
    }

    #featured-contact .hero-contact-title {
        font-size: 2.1rem;
    }

    /* --- MOBILE CANVAS DEPLOYMENT --- */
    #featured-contact .contact-image-outer-frame {
        height: 260px !important;
        min-height: 260px !important;
        margin: 15px 0 !important;
    }

    #featured-contact .contact-image-overflow-container {
        padding: 0 10px !important;
    }

    /* Removes the sharp angles on mobile screens so user imagery details stay beautifully framed */
    #featured-contact .contact-center-media-mask {
        clip-path: none !important;
        -webkit-clip-path: none !important;
    }

    /* Hides the complex vector lines on mobile viewports to prevent asset clipping conflicts */
    #featured-contact .contact-decor-line-slant-left,
    #featured-contact .contact-decor-line-slant-right {
        display: none !important;
    }

    #featured-contact .form-row-twin {
        flex-direction: column !important;
        gap: 0 !important;
    }
}




/* ==========================================================================
   PREMIUM SPORTING DARK FOOTER (MATCHING IMAGE_601F44.JPG & IMAGE_5FBA48.PNG)
   ========================================================================== */

/* 1. Base Footer Wrapper Container */
#colophon.site-footer {
    background-color: #111111;
    /* Deep matte black background */
    padding: 80px 0 40px 0 !important;
    position: relative;
    overflow: hidden;
}

/* 2. Primary Layout Restructuring */
#colophon .footer-widgets-area {
    padding-bottom: 50px;
}

/* Converts layout into a strict single line on desktop to prevent wrapping */
#colophon .footerbox .grid {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
    /* Forces all columns (including newsletter) onto row 1 */
    gap: 20px !important;
    /* Optimized spacing to keep everything on one line */
    width: 100% !important;
}

/* Individual Content Column Width Assignments (The navigation links) */
#colophon .footerbox .hentry {
    flex: 1 1 12% !important;
    min-width: 0 !important;
    /* Prevents text from forcing an early wrap */
    margin: 0 !important;
}

/* Brand Column (1st) Width Tuning */
#colophon .footerbox .hentry:first-child {
    flex: 1 1 25% !important;
    max-width: 280px !important;
    padding-right: 20px !important;
}

/* Newsletter Column (Last) Width Tuning - Pulls up to the far right of row 1 */
#colophon .footerbox .hentry:last-child {
    flex: 1 1 28% !important;
    max-width: 340px !important;
    margin-left: auto !important;
    /* Strongly anchors it to the right edge */
}

/* 3. Typography & Headings (Gold Styling Rule) */
#colophon .widget-title {
    font-family: var(--ms-font-display) !important;
    /* Connected to primary display variable */
    color: var(--theme-color);
    /* Premium muted gold accents */
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 25px !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

/* Navigation Links Style Rules */
#colophon .widget_nav_menu ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#colophon .widget_nav_menu ul li {
    margin-bottom: 12px !important;
}

#colophon .widget_nav_menu ul li a {
    font-family: var(--ms-font-body) !important;
    /* Bound to clean core body token */
    color: #999999;
    text-decoration: none !important;
    font-size: 14px;
    transition: color 0.25s ease;
    font-weight: 400;
}

#colophon .widget_nav_menu ul li a:hover {
    color: #ffffff;
}

/* Brand paragraph description text rules */
#colophon .widget_text .textwidget p {
    font-family: var(--ms-font-alt-body);
    /* Set to fluid editorial reader script */
    color: #888888;
    font-size: 14px;
    line-height: 1.6;
    margin-top: 20px;
    margin-bottom: 25px;
}

/* 4. Circular Outline Brand Social Icons */
#colophon .social-profile-icons ul {
    display: flex;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

#colophon .social-profile-icons ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #444444;
    border-radius: 50%;
    color: #aaaaaa;
    transition: all 0.3s ease;
}

#colophon .social-profile-icons ul li a svg {
    width: 16px;
    height: 16px;
}

#colophon .social-profile-icons ul li a:hover {
    border-color: var(--theme-color);
    color: var(--theme-color);
    background-color: rgba(205, 164, 94, 0.05);
}

/* 5. Minimalist Inline Newsletter Input Fields Box */
#colophon .newsletter-form p {
    display: flex !important;
    width: 100% !important;
    margin: 20px 0 0 0 !important;
    position: relative;
}

#colophon .newsletter-form-wrapper .wpcf7-form-control-wrap {
    flex-grow: 1;
}

#colophon .newsletter-form input[type="email"] {
    font-family: var(--ms-font-alt-body) !important;
    /* Connected email field string directly to secondary font asset */
    width: 100%;
    background-color: #1a1a1a;
    border: 1px solid #333333;
    color: #ffffff;
    padding: 12px 16px !important;
    font-size: 14px;
    border-radius: 0 !important;
    /* Premium sharp corners */
    outline: none;
    transition: border-color 0.3s ease;
    flex-grow: 1 !important;
    min-width: 0 !important;
    /* Critical: Stops input field from forcing layout breaking widths */
}

#colophon .newsletter-form input[type="email"]:focus {
    border-color: var(--theme-color);
}

#colophon .newsletter-form button[type="submit"] {
    font-family: var(--ms-font-body) !important;
    /* Linked target submission element to structural layout token */
    background-color: var(--theme-color);
    /* Golden Action Button Block */
    color: #111111;
    border: none !important;
    padding: 0 22px !important;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

#colophon .newsletter-form button[type="submit"]:hover {
    background-color: var(--theme-color);
}

#colophon .newsletter-form button[type="submit"] svg {
    width: 16px;
    height: 16px;
}

/* 6. Clean Divider Layout Separator Rules */
#colophon .footer-bar-divider {
    border: 0 !important;
    border-top: 1px solid #222222;
    margin: 40px 0 !important;
    width: 100%;
}

/* 7. Infinite Rotating Sponsor Ticker Track Wrapper */
.logo-marquee-container {
    overflow: hidden;
    width: 100%;
    display: flex;
    margin-bottom: 45px;
    position: relative;
}

.logo-marquee-track {
    display: flex;
    width: max-content;
    animation: slowMarqueeRotation 35s linear infinite;
}

.logo-marquee-container:hover .logo-marquee-track {
    animation-play-state: paused;
}

.logo-marquee-group {
    display: flex;
    align-items: center;
    justify-content: space-around;
    min-width: 100%;
    gap: 80px;
    padding-right: 80px;
}

.logo-marquee-group .partner-logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
}

.logo-marquee-group .partner-logo-item img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    /* Forces graphics to clean pure monochromatic white profiles */
    opacity: 0.6;
    transition: opacity 0.25s ease;
}

.logo-marquee-group .partner-logo-item img:hover {
    opacity: 1;
}

/* 8. Bottom Legal & Legal Notice Segment Alignment */
.footer-legal-copyright-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 20px;
}

.footer-legal-copyright-bar .copy-right {
    font-family: var(--ms-font-alt-body) !important;
    /* Replaced default fallbacks with secondary copy engine */
    margin: 0 !important;
    color: #666666;
    font-size: 13px !important;
}

.legal-links-nav {
    display: flex;
    gap: 24px;
}

.legal-links-nav a {
    font-family: var(--ms-font-alt-body) !important;
    /* Tied informational meta assets to secondary rule */
    color: #666666;
    text-decoration: none !important;
    font-size: 13px !important;
    transition: color 0.2s ease;
}

.legal-links-nav a:hover {
    color: var(--theme-color);
}

/* 9. Smooth Infinite Ticker Animation Frame */
@keyframes slowMarqueeRotation {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* 10. Responsive Adaptability Rules (Safe breakdown for tablet & mobile views) */
@media (max-width: 1100px) {
    #colophon .footerbox .grid {
        flex-wrap: wrap !important;
        /* Re-allows fluid wrapping when viewport screen gets tightly confined */
    }

    #colophon .footerbox .hentry {
        flex: 1 1 40% !important;
        /* Forms side by side dual columns on smaller views */
    }

    #colophon .footerbox .hentry:first-child,
    #colophon .footerbox .hentry:last-child {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 575px) {
    #colophon .footerbox .grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    #colophon .footerbox .hentry:first-child,
    #colophon .footerbox .hentry:last-child {
        grid-column: span 1 !important;
    }

    .footer-legal-copyright-bar {
        flex-direction: column-reverse;
        text-align: center;
        align-items: center;
    }

    .legal-links-nav {
        justify-content: center;
        flex-wrap: wrap;
        gap: 15px;
    }
}


/* ==========================================================
   Divider Before Second Footer
   ========================================================== */

#colophon .footerbox .hentry:nth-child(2) {
    position: relative;
    padding-left: 35px !important;
    margin-left: 15px !important;
}

#colophon .footerbox .hentry:nth-child(2)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background: var(--theme-color);
}

/* Divider before Last Footer */
#colophon .footerbox .hentry:last-child {
    position: relative;
    padding-left: 35px !important;
    margin-left: 20px !important;
}

#colophon .footerbox .hentry:last-child::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background: var(--theme-color);
}

/* Underline below Widget Titles (Footer 2 to Second Last) */
#colophon .footerbox .hentry:not(:first-child):not(:last-child) .widget-title {
    position: relative;
    padding-bottom: 14px !important;
    margin-bottom: 22px !important;
}

#colophon .footerbox .hentry:not(:first-child):not(:last-child) .widget-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 2px;
    background: var(--theme-color);
}

/* Responsive (Remove Dividers) */
@media (max-width:1100px) {

    #colophon .footerbox .hentry:first-child::after,
    #colophon .footerbox .hentry:last-child::before {
        display: none;
    }

    #colophon .footerbox .hentry:first-child,
    #colophon .footerbox .hentry:last-child {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}


/* ==========================================
   Featured Partners Section
========================================== */

#featured-partners {
    position: relative;
    padding: 0px 60px;
    background: #f5f3ee;
    overflow: hidden;
}

/* LEFT SIDE */

#featured-partners .partners-leftside {
    padding-right: 0px;
}

#featured-partners .title-section {
    display: block !important;
    text-align: left;
    padding: 0 !important;
}

/* Small Title */

#featured-partners .partner-small-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
}

#featured-partners .partner-small-title span {
    color: var(--theme-color);
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#featured-partners .small-line {
    width: 55px;
    height: 1px;
    background: var(--theme-color);
}

/* Main Title */

#featured-partners .title-section h1 {
    margin: 0 0 25px;
}

#featured-partners .dark-title {
    display: block;
    color: #111111;
    font-size: 40px;
    line-height: 1;
    font-weight: 800;
}

#featured-partners .light-title {
    display: block;
    color: var(--theme-color);
    font-size: 40px;
    line-height: 1;
    font-weight: 800;
}

/* Description */

#featured-partners .partner-description {
    max-width: 290px;
    color: #666666;
    font-size: 16px;
    line-height: 30px;
    margin-bottom: 35px;
}

/* Button */

#featured-partners .button-content {
    display: inline-block;
    border: 1px solid var(--theme-color);
    background: transparent;
}

#featured-partners .button-content a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 30px;
    color: #111;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#featured-partners .button-content i,
#featured-partners .button-content svg {
    font-size: 16px;
    color: #111111;
}

/* RIGHT SIDE */

#featured-partners .partners-rightside {
    padding-left: 30px;
}

/* Grid */

#featured-partners .partners-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    align-items: center;
}

/* Hexagon */

#featured-partners .partner-box {
    position: relative;
    height: 160px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
    padding: 20px;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.03),
        0 2px 6px rgba(0, 0, 0, 0.02);
}

#featured-partners .partner-box-wrapper {
    position: relative;
    z-index: 20;
    overflow: visible;
}

/* Logo */

#featured-partners .partner-logo img {
    max-width: 120px;
    max-height: 45px;
    width: auto;
    height: auto;
    margin-bottom: 14px;
}

/* Text */

#featured-partners .partner-text {
    display: block;
    color: #666666;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 18px;
}

/* BACKGROUND IMAGE */
#featured-partners .featured-partners-bg {
    position: absolute;
    inset: 0;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat;
    z-index: -2;
}

/* ==========================================
   Responsive
========================================== */
/* iPad Pro (1024px - 1199px) */
@media (min-width:992px) and (max-width:1199px) {

    /* Left aur right columns ke beech gap kam karo */
    #featured-partners .partners-leftside {
        padding-right: 15px;
    }

    #featured-partners .partners-rightside {
        padding-left: 10px;
    }

    /* Title ko 2 lines mein rakho */
    #featured-partners .dark-title,
    #featured-partners .light-title {
        font-size: 32px;
        line-height: 1.1;
    }

    /* Description width thodi badhao */
    #featured-partners .partner-description {
        max-width: 100%;
        line-height: 28px;
    }

    /* Desktop jaisa 4 boxes layout */
    #featured-partners .partners-grid {
        grid-template-columns: repeat(4, 1fr);
        column-gap: 15px;
        row-gap: 25px;
    }

    /* Box size thodi kam */
    #featured-partners .partner-box {
        height: 145px;
        padding: 15px;
    }

    /* Logo thoda chhota */
    #featured-partners .partner-logo img {
        max-width: 95px;
        max-height: 40px;
    }

    /* Text thoda chhota */
    #featured-partners .partner-text {
        font-size: 10px;
        line-height: 16px;
    }
}

/* Tablet */

@media(max-width:991px) {

    #featured-partners .partners-leftside {
        padding-right: 0;
        margin-bottom: 50px;
    }

    #featured-partners .partners-rightside {
        padding-left: 0;
    }

    #featured-partners .partner-description {
        max-width: 100%;
    }

    #featured-partners .dark-title,
    #featured-partners .light-title {
        font-size: 44px;
    }

    #featured-partners .partners-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

}

/* Mobile */

@media(max-width:575px) {

    #featured-partners {
        padding: 70px 20px;
    }

    #featured-partners .dark-title,
    #featured-partners .light-title {
        font-size: 35px;
    }

    #featured-partners .partner-description {
        font-size: 15px;
        line-height: 28px;
    }

    #featured-partners .button-content a {
        padding: 12px 22px;
        font-size: 13px;
    }

    #featured-partners .partners-grid {
        grid-template-columns: 1fr;
        row-gap: 20px;
    }

    #featured-partners .partner-box-wrapper {
        margin-top: 0 !important;
    }

    #featured-partners .partner-box {
        height: 140px;
    }

    #featured-partners .partner-logo img {
        max-width: 100px;
    }
}




/* ===========================
   FEATURED STADIUM SECTION
=========================== */

#featured-stadium {
    position: relative;
    padding: 100px 20px;
    overflow: hidden;
}

#featured-stadium .row {
    align-items: center;
}


#featured-stadium::after {
    content: "";
    position: absolute;
    right: 30px;
    top: 50px;
    width: 35px;
    height: 80px;
    background-image: radial-gradient(#cbd5e1 1.5px, transparent 0);
    background-size: 8px 8px;
    opacity: 0.8;
    pointer-events: none;
}



/* ===========================
   LEFT SIDE
=========================== */

#featured-stadium .stadium-left {
    position: relative;
    z-index: 2;
}

/* Small Title */

#featured-stadium .stadium-small-title-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
}

#featured-stadium .stadium-small-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--theme-color);
    /* Light Green */
    line-height: 1;
}

#featured-stadium .stadium-small-line {
    width: 60px;
    height: 2px;
    background: var(--theme-color);
    display: block;
}

/* Main Title */

#featured-stadium .stadium-title {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -1px;
    color: #0b2c21;
    text-transform: uppercase;
    margin-bottom: 25px;
    max-width: 450px;
}

/* Description */

#featured-stadium .stadium-description {
    font-size: 16px;
    font-weight: 400;
    color: #6d6d6d;
    line-height: 1.9;
    margin-bottom: 40px;
}

/* ===========================
   FEATURES
=========================== */

#featured-stadium .stadium-features {
    display: flex;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 45px;
}

#featured-stadium .stadium-feature-item {
    flex: 1;
    text-align: center;
    margin-bottom: 0;
}

#featured-stadium .stadium-feature-item:last-child {
    margin-bottom: 0;
}

/* Circle Icon */

#featured-stadium .stadium-feature-icon {
    width: 65px;
    height: 65px;
    min-width: 65px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #fff;

    display: flex;
    align-items: center;
    justify-content: center;
}

#featured-stadium .stadium-feature-item:hover .stadium-feature-icon {
    background: var(--theme-color);
}

#featured-stadium .stadium-feature-icon i,
#featured-stadium .stadium-feature-icon svg {
    font-size: 26px;
    color: #0b2c21;
    transition: all 0.4s ease;
}

#featured-stadium .stadium-feature-item:hover .stadium-feature-icon i,
#featured-stadium .stadium-feature-item:hover .stadium-feature-icon svg {
    color: #ffffff;
}

/* Feature Text */

#featured-stadium .stadium-feature-content h6 {
    font-size: 20px;
    font-weight: 700;
    color: #0b2c21;
    margin: 0 0 6px;
}

#featured-stadium .stadium-feature-content span {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #6d6d6d;
    text-transform: uppercase;
    line-height: 1.4;
}

/* ===========================
   BUTTON
=========================== */

#featured-stadium .stadium-button-wrap {
    margin-top: 15px;
}

#featured-stadium .stadium-btn {
    display: inline-flex;
    align-items: stretch;
    text-decoration: none;
}

#featured-stadium .stadium-btn-text {
    background: var(--theme-color);
    color: #fff;
    padding: 0 32px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;

    clip-path: polygon(0 0,
            95% 0,
            88% 100%,
            0 100%);
}

#featured-stadium .stadium-btn-icon {
    width: 50px;
    height: 50px;
    background: #1d1d1d;
    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-left: -27px;
    /* gap almost remove */

    clip-path: polygon(29% 0,
            100% 0,
            74% 100%,
            0 100%);
}

#featured-stadium .stadium-btn-icon i,
#featured-stadium .stadium-btn-icon svg {
    font-size: 16px;
}

#featured-stadium .stadium-btn:hover .stadium-btn-text {
    background: #0b2c21;
}

#featured-stadium .stadium-btn:hover .stadium-btn-icon {
    background: #5c7c3b;
}

/* ===========================
   STADIUM IMAGE
=========================== */

#featured-stadium .stadium-image-col {
    position: relative;
    z-index: 1;
}

#featured-stadium .stadium-image-wrapper {
    position: relative;
    overflow: hidden;
    max-width: 760px;
    margin: 0 auto;
    height: auto !important;
}

/* Image Link */

#featured-stadium .stadium-image-wrapper a {
    display: block;
}

/* Stadium Image */

#featured-stadium .stadium-image {
    width: 100%;
    height: 520px;
    object-fit: cover;
    display: block;

    clip-path: polygon(16% 0,
            100% 0,
            84% 100%,
            0 100%);
}

/* ===========================
   FLOATING EFFECT
=========================== */

#featured-stadium .stadium-tour-box {
    position: relative;
    max-width: 360px;
    margin-left: -122px;
    z-index: 10;
}

#featured-stadium .stadium-video-box,
#featured-stadium .stadium-360-box {
    margin-left: 0;
}

/* ===========================
   VIDEO BOX
=========================== */
#featured-stadium .stadium-video-box {
    position: relative;
    z-index: 5;
    width: 92%;
    margin-bottom: -45px;
}

#featured-stadium .stadium-video-box {
    position: relative;
    z-index: 5;
    width: 90%;
    min-height: 200px;

    background: #fff;

    display: flex;
    align-items: center;
    gap: 18px;

    padding: 28px 22px;

    margin-bottom: -38px;

    box-shadow: 0 15px 40px rgba(0, 0, 0, .10);

    clip-path: polygon(0 0,
            100% 0,
            88% 100%,
            0 100%);
}

#featured-stadium .stadium-video-content {
    flex: 1;
}

#featured-stadium .stadium-video-play {
    width: 54px;
    height: 54px;
    min-width: 54px;

    border-radius: 50%;

    border: 2px solid var(--theme-color);

    background: #fff;
    color: var(--theme-color);

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;
}

#featured-stadium .stadium-video-play i,
#featured-stadium .stadium-video-play svg {
    font-size: 15px;
    margin-left: 2px;
}

#featured-stadium .stadium-video-small-title {
    display: block;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.5px;
    text-transform: uppercase;

    color: var(--theme-color);

    margin-bottom: 6px;
}

#featured-stadium .stadium-video-title {
    font-size: 18px;
    line-height: 1.05;
    font-weight: 800;

    text-transform: uppercase;

    color: #111;

    margin: 0 0 8px;
}

#featured-stadium .stadium-video-description {
    font-size: 12px;
    line-height: 1.6;
    color: #666;

    margin: 0;
}

/* ===========================
   360 BOX & TYPOGRAPHY
=========================== */

#featured-stadium .stadium-360-box {
    background: #070d1f;
    min-height: 200px;

    padding: 40px 25px;

    width: 100%;
    position: relative;
    z-index: 1;

    clip-path: polygon(0 0,
            100% 0,
            88% 100%,
            0 100%);

    text-align: center;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#featured-stadium .stadium-360-wrap {
    position: relative;
    width: 200px;
    height: 100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

#featured-stadium .stadium-360-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

#featured-stadium .stadium-360-text {
    font-size: 56px;
    font-weight: 800;
    line-height: 1;
    color: var(--theme-color);
    z-index: 10;
    letter-spacing: -1px;
    margin-top: -5px;
    /* Perfect vertically center alignment inside ellipse */
}

#featured-stadium .stadium-360-svg ellipse {
    stroke: var(--theme-color);
}

#featured-stadium .stadium-360-svg polygon {
    fill: var(--theme-color);
}

/* Subtitle Styling (VIRTUAL TOUR) */
#featured-stadium .stadium-360-subtitle {
    display: block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 2px;
    margin-top: 15px;
}

#featured-stadium .stadium-360-wrap {
    position: relative;
    width: 200px;
    height: 100px;
}

#featured-stadium .stadium-360-svg {
    z-index: 1;
}

#featured-stadium .stadium-360-text {
    position: relative;
    z-index: 2;
    background: #070d1f;
    /* ellipse line hide karega */
    padding: 0 10px;
}

/* BACKGROUND IMAGE */
#featured-stadium .featured-stadium-bg {
    position: absolute;
    inset: 0;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat;
    z-index: -2;
}

/* =====================================
   IPAD MINI + IPAD AIR
===================================== */

@media (min-width:768px) and (max-width:900px) {

    #featured-stadium {
        padding: 80px 20px;
    }

    #featured-stadium .stadium-title {
        font-size: 42px;
    }

    #featured-stadium .stadium-image {
        height: 500px;
    }

    /* Button aur image ke bich gap */
    #featured-stadium .stadium-button-wrap {
        margin-bottom: 60px;
    }

    /* Bigger centered boxes */
    #featured-stadium .stadium-tour-box {
        margin: 40px auto 0;
        max-width: 450px;
        width: 100%;
    }

    #featured-stadium .stadium-video-box,
    #featured-stadium .stadium-360-box {
        width: 100%;
    }

    #featured-stadium .stadium-video-box {
        min-height: 230px;
        padding: 35px 30px;
    }

    #featured-stadium .stadium-360-box {
        min-height: 230px;
        padding: 45px 30px;
    }

}

/* =====================================
   IPAD PRO
===================================== */

@media (min-width:901px) and (max-width:1024px) {

    #featured-stadium {
        padding: 80px 20px;
    }

    #featured-stadium .stadium-image {
        height: 520px;
    }

    #featured-stadium .stadium-tour-box {
        margin-left: -70px;
        margin-top: 0;
        max-width: 360px;
    }

    #featured-stadium .stadium-video-box {
        min-height: 220px;
    }

    #featured-stadium .stadium-360-box {
        min-height: 220px;
    }

}

/* =====================================
   MOBILE
===================================== */

@media (max-width:767px) {

    #featured-stadium {
        padding: 70px 15px;
    }

    #featured-stadium .stadium-left {
        margin-bottom: 0;
    }

    #featured-stadium .stadium-title {
        font-size: 32px;
    }

    /* Button aur image ke bich gap */
    #featured-stadium .stadium-button-wrap {
        margin-bottom: 50px;
    }

    #featured-stadium .stadium-features {
        flex-wrap: wrap;
        gap: 20px;
    }

    #featured-stadium .stadium-feature-item {
        width: 100%;
    }

    #featured-stadium .stadium-image {
        height: 380px;
    }

    /* Boxes image ke niche center */
    #featured-stadium .stadium-tour-box {
        margin: 30px auto 0;
        max-width: 330px;
        width: 100%;
    }

    #featured-stadium .stadium-video-box,
    #featured-stadium .stadium-360-box {
        width: 100%;
    }

    #featured-stadium .stadium-video-box {
        flex-direction: column;
        text-align: center;
    }

    #featured-stadium .stadium-360-text {
        font-size: 48px;
    }

}

/* =====================================
   SMALL MOBILE
===================================== */

@media (max-width:575px) {

    #featured-stadium .stadium-title {
        font-size: 28px;
    }

    #featured-stadium .stadium-image {
        height: 320px;
    }

    #featured-stadium .stadium-btn {
        display: inline-flex;
        align-items: stretch;
        gap: 0;
    }

    #featured-stadium .stadium-btn-icon {
        margin-left: -27px !important;
    }

    #featured-stadium .stadium-360-text {
        font-size: 42px;
    }

}

/* page site header css  */

/* ==========================================================================
   PREMIUM ASYMMETRIC INNER PAGE SITE HEADER
   ========================================================================== */


#page-site-header {
    position: relative;
    border-bottom: none;
    background: #f7f4eb;
}

#page-site-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    z-index: 1;
}


.page-header-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    display: flex;
}

.page-site-header-inner {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 400px;
}

/* Give padding space for side badge layout if active */
.page-site-header-inner.has-badge {
    padding-left: 0px;
}

/* --------------------------------------------------------------
# Left Side Panel & Typography
--------------------------------------------------------------*/
.page-header-textpanel {
    flex: 0 0 45%;
    width: 45%;
    display: flex;
    align-items: end;
    padding: 80px 40px 60px 100px;
    box-sizing: border-box;
    z-index: 2;
}

.page-header-content-wrapper {
    width: 100%;
    text-align: left;
}

/* Eyebrow Label Text Placement */
.page-header-eyebrow {
    display: inline-flex;
    align-items: center;
    font-family: 'Oswald', 'Arial Black', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #b39359;
    /* Elegant Team Gold Tone */
    text-transform: uppercase;
    margin-bottom: 15px;
}

.page-header-eyebrow-line {
    display: inline-block;
    width: 30px;
    height: 1.5px;
    background-color: #b39359;
    margin-left: 12px;
}

/* Two Headings Format Execution */
.page-header-titlewrap .page-title {
    font-family: 'Oswald', 'Impact', sans-serif;
    font-size: 56px;
    line-height: 1.30;
    font-weight: 300;
    margin: 0 0 30px 0;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.page-header-titlewrap .page-title span {
    display: block;
}

/* Heading 1: Main Dark Slate */
.page-header-titlewrap .page-title span.main-title {
    color: #111111;
}

/* Heading 2: Accent Gold Title */
.page-header-titlewrap .page-title span.accent-title {
    color: #b39359;
}

/* Header Context Blurb Description */
.page-header-description {
    font-family: sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #444444;
    margin: 0 0 20px 0;
    max-width: 440px;
    white-space: break-spaces;
}

/* Clean Simple Breadcrumb Box Below */
.breadcrumbbox {
    font-size: 13px;
    font-weight: 600;
    color: #666666;
    margin-top: 10px;
}

/* --------------------------------------------------------------
# Right Panel: Slanted Featured Image
--------------------------------------------------------------*/






.page-header-textpanel {
    position: relative;
}

.page-header-textpanel::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: #d8d4cb;
    z-index: 2;
}

.page-header-imgpanel {
    position: relative;
}

.page-header-imgpanel::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: #d8d4cb;
    z-index: 2;
}



.page-header-imgpanel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(247, 246, 242, 0.3) 0%, rgba(0, 0, 0, 0) 40%);
    pointer-events: none;
}

/* --------------------------------------------------------------
# Left Margin - Side Rotated Badge Indicator
--------------------------------------------------------------*/
.page-header-sidebadge {
    position: absolute;
    left: 0;
    top: 48%;
    bottom: 0;
    width: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
}

.page-header-sidebadge .badge-text {
    transform: rotate(-90deg);
    white-space: nowrap;
    color: #111111;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    display: inline-block;
}

/* Elegant line extending below the rotated badge */
.page-header-sidebadge .badge-line {
    display: block;
    width: 1px;
    height: 60px;
    background-color: #b39359;
    margin-top: 45px;
}

/* --------------------------------------------------------------
# Responsiveness & Mobile Adaptations
--------------------------------------------------------------*/
@media (max-width: 1199px) {
    .page-header-titlewrap .page-title {
        font-size: 46px;
    }
}

@media (max-width: 991px) {
    .page-site-header-inner {
        min-height: 400px;
    }

    .page-header-titlewrap .page-title {
        font-size: 38px;
    }

    .page-header-textpanel {
        flex: 0 0 50%;
        width: 50%;
    }

    .page-header-imgpanel {
        flex: 0 0 55%;
        width: 55%;
    }
}

@media (max-width: 767px) {
    .page-site-header-inner {
        flex-direction: column-reverse;
        min-height: auto;
        padding-left: 0 !important;
    }

    .page-header-textpanel,
    .page-header-imgpanel {
        flex: 0 0 100%;
        width: 100%;
        margin-left: 0;
    }

    .page-header-imgpanel {
        height: 260px;
        clip-path: none;
        /* Disables diagonal slant on mobile viewports for cleaner photo framing */
    }

    .page-header-textpanel {
        padding: 80px 25px 20px;
    }

    .page-header-sidebadge {
        display: none;
        /* Hide side badge on small viewport widths to prevent collisions */
    }
}

/* Ensure the parent container can explicitly hide overflow if needed */
.page-site-header-inner {
    position: relative;
    overflow: hidden;
}



/* --------------------------------------------------------------
# Image Panel Container Rules
--------------------------------------------------------------*/
.page-header-imgpanel {
    flex: 0 0 55%;
    width: 55%;
    position: relative !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Elegant 16% slant to match your club layout architecture */
    clip-path: polygon(16% 0%, 100% 0%, 100% 100%, 0% 100%) !important;
    -webkit-clip-path: polygon(16% 0%, 100% 0%, 100% 100%, 0% 100%) !important;

    z-index: 1;
}

/* --------------------------------------------------------------
# Left Side Border Matrix (Precision Ribbon Track)
--------------------------------------------------------------*/
.page-header-divider {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 43% !important;
    /* Aligns to the left edge of the image panel wrapper */
    height: 100% !important;
    width: 17% !important;
    /* Spans just wide enough to cover the 16% slant offset */
    pointer-events: none !important;
    z-index: 10 !important;
    background-color: #b39359;
    /* Premium Gold applied directly */

    /* Dynamic 3px polygon ribbon tracking the exact 16% slant edge */
    clip-path: polygon(52% 0%, calc(52% + 3px) 0%, 3px 100%, 0% 100%) !important;
    -webkit-clip-path: polygon(52% 0%, calc(52% + 3px) 0%, 3px 100%, 0% 100%) !important;
    opacity: 0.4;
}



/* --------------------------------------------------------------
# Responsive Mobile Cleanup
--------------------------------------------------------------*/
@media (max-width: 767px) {
    .page-header-divider {
        display: none !important;
        /* Removes ribbon asset cleanly on mobile viewports */
    }

    .page-header-imgpanel {
        margin-left: 0 !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
    }
}

/* page site header css */








/* modern slider css  */


/*=========================================
=            MODERN SLIDER
=========================================*/

#featured-slider-modern {
    position: relative;
    overflow: hidden;
}

#featured-slider-modern .ns-modern-slide {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #050505;
}

#featured-slider-modern .ns-modern-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.05);
}

#featured-slider-modern .ns-modern-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        /* Header overlay */
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 255, 0.75) 6%,
            rgba(255, 255, 255, 0.30) 15%,
            rgba(255, 255, 255, 0.00) 28%),
        /* Cinematic light vignette */
        linear-gradient(90deg,
            rgba(255, 255, 255, 0.85) 0%,
            rgba(255, 255, 255, 0.45) 45%,
            rgba(255, 255, 255, 0.20) 70%,
            rgba(255, 255, 255, 0.75) 100%);
}

#featured-slider-modern .ns-modern-content {
    position: relative;
    z-index: 10;
    /* Boosted up to keep text layers completely above the player graphics */
    max-width: 900px;
    /* Wider allowance to fit button and block side-by-side smoothly */
    padding-left: 100px;
    justify-items: left;
    text-align: left;
}

#featured-slider-modern .ns-modern-label {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    color: var(--theme-color);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-family: var(--ns-font-body);
}

#featured-slider-modern .ns-modern-label span {
    width: 40px;
    height: 1px;
    background: var(--theme-color);
    display: block;
}

#featured-slider-modern .ns-modern-title {
    font-size: clamp(50px, 6.5vw, 95px);
    line-height: .95;
    font-weight: 900;
    text-transform: uppercase;
    color: #000000;
    margin: 0 0 15px;
    letter-spacing: -2px;
    max-width: 550px;
    font-family: var(--font-heading);
}

#featured-slider-modern .ns-modern-title span {
    color: var(--theme-color);
}

/* Premium filled circle dot attached directly after the text */
#featured-slider-modern .ns-modern-title span::after {
    content: "";
    display: inline-block;
    width: clamp(8px, 1vw, 12px);
    height: clamp(8px, 1vw, 12px);
    background-color: var(--theme-color);
    border-radius: 50%;
    margin-left: 6px;
    transform: translateY(-0.05em);
}

#featured-slider-modern .ns-modern-divider {
    width: 60px;
    height: 1.5px;
    background: #000000;
    opacity: .85;
    margin: 15px 0;
}

#featured-slider-modern .ns-modern-description {
    max-width: 500px;
    margin-bottom: 10px;
}

#featured-slider-modern .ns-modern-description p {
    color: #000000;
    font-size: 20px;
    line-height: 1.8;
    opacity: .85;
    margin: 0;
    font-family: var(--font-body);
}

/* UNIFIED ACTION CONTAINER ROW */
#featured-slider-modern .ns-modern-action-row {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 10px;
    flex-wrap: wrap;
}

#featured-slider-modern .ns-modern-btn {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background: var(--theme-color);
    color: #000;
    padding: 12px 24px;
    border-radius: 50px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 3px;
    text-decoration: none;
    transition: .3s;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 15px;
    font-family: var(--font-heading);
}

#featured-slider-modern .ns-modern-btn:hover {
    transform: translateY(-5px);
    color: #000;
}

#featured-slider-modern .btn-icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #000;
    color: var(--theme-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

#featured-slider-modern .ns-modern-bottom-box {
    width: 340px;
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 25px;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 5;
    flex-shrink: 0;
}

#featured-slider-modern .ns-modern-bottom-icon {
    width: 60px;
    height: 60px;
    background: var(--theme-color);
    border-radius: 50%;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

#featured-slider-modern .ns-modern-bottom-content h4 {
    color: #000000;
    margin: 0 0 4px;
    font-size: 18px;
    font-family: var(--font-heading);
}

#featured-slider-modern .ns-modern-bottom-content p {
    color: #ccc;
    margin: 0;
    font-weight: 700;
    font-size: 14px;
    font-family: var(--font-body);
}

#featured-slider-modern .ns-modern-bottom-content span {
    display: block;
    margin-top: 4px;
    color: #ccc;
    font-size: 14px;
    font-family: var(--font-body);
}

/* Slick Carousel Dots */
#featured-slider-modern .slick-dots {
    bottom: 40px;
}

#featured-slider-modern .slick-dots li button:before {
    color: var(--theme-color);
    font-size: 12px;
}

/*=========================================
=            PLAYER ELEMENT
=========================================*/

#featured-slider-modern .ns-modern-player {
    position: absolute;
    right: 4%;
    bottom: 0;
    z-index: 3;
    /* Placed cleanly behind the content layer */
}

#featured-slider-modern .ns-modern-player img {
    max-height: 900px;
    width: auto;
    display: block;
}

/*=========================================
=            RESPONSIVE MEDIA
=========================================*/

@media(max-width: 1400px) {
    #featured-slider-modern .ns-modern-content {
        padding-left: 60px;
    }
}

@media(max-width: 1200px) {
    #featured-slider-modern .ns-modern-player {
        right: 0;
    }

    #featured-slider-modern .ns-modern-player img {
        max-height: 700px;
    }
}

@media(max-width: 991px) {
    #featured-slider-modern .ns-modern-slide {
        min-height: 800px;
    }

    #featured-slider-modern .ns-modern-description p {
        font-size: 18px;
    }

    #featured-slider-modern .ns-modern-content {
        padding: 0 30px;
        max-width: 100%;
    }

    #featured-slider-modern .ns-modern-player {
        display: none;
    }

    #featured-slider-modern .ns-modern-action-row {
        gap: 25px;
    }
}

@media(max-width: 767px) {
    #featured-slider-modern .ns-modern-slide {
        min-height: 700px;
    }

    #featured-slider-modern .ns-modern-title {
        letter-spacing: -1px;
    }

    #featured-slider-modern .ns-modern-label {
        font-size: 12px;
        letter-spacing: 2px;
    }

    #featured-slider-modern .ns-modern-description p {
        font-size: 16px;
        line-height: 1.7;
    }

    #featured-slider-modern .ns-modern-btn {
        padding: 9px 18px;
        font-size: 12px;
    }

    #featured-slider-modern .ns-modern-action-row {
        flex-direction: column;
        /* Vertically stack cleanly on tight mobile views */
        align-items: flex-start;
        gap: 20px;
    }

    #featured-slider-modern .ns-modern-bottom-box {
        width: 100%;
        max-width: 340px;
    }
}



/* modern slider css */




/* modern mission css */

/* ==========================================================================
   Mission Section - Modern Design Styles (Right Side Cards Version)
   Scoped to #mission-section-modern
   ========================================================================== */

.mission-modern-wrapper {
    background-color: #0b0c10;
    width: 100%;
    position: relative;
    overflow: hidden;
    font-family: inherit;
}

/* Full Width Section with Dark Vignette */
#mission-section-modern {
    position: relative;
    min-height: 680px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 80px 20px 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}

/* Vignette Overlay */
#mission-section-modern .mission-modern-vignette {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(11, 12, 16, 0.75) 0%, rgba(11, 12, 16, 0.96) 100%),
        linear-gradient(180deg, rgba(11, 12, 16, 0.9) 0%, rgba(11, 12, 16, 0.6) 50%, rgba(11, 12, 16, 0.95) 100%);
    z-index: 1;
}

#mission-section-modern .mission-modern-container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* --------------------------------------------------------------------------
   2-Column Layout (Left: Content, Right: Cards Stacked)
   -------------------------------------------------------------------------- */
#mission-section-modern .mission-modern-split-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
}

@media (min-width: 992px) {
    #mission-section-modern .mission-modern-split-layout {
        grid-template-columns: 1.2fr 0.8fr;
        gap: 50px;
    }
}

/* Left Side Hero Area */
#mission-section-modern .mission-modern-hero {
    width: 100%;
}

/* Top Accent Label / Subtitle Kicker */
#mission-section-modern .mission-modern-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

#mission-section-modern .mission-modern-kicker .kicker-line {
    width: 30px;
    height: 2px;
    background-color: var(--theme-color);
}

#mission-section-modern .mission-modern-kicker .kicker-text {
    font-size: 13.6px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--theme-color);
    font-family: var(--font-heading);
}

/* Large Bold Headline */
#mission-section-modern .mission-modern-headline {
    font-size: 52px;
    font-weight: 900;
    line-height: 1.15;
    color: #ffffff;
    margin: 0 0 24px 0;
    letter-spacing: -0.5px;
    font-family: var(--font-heading);
}

@media (min-width: 768px) {
    #mission-section-modern .mission-modern-headline {
        font-size: 3.25rem;
    }
}

#mission-section-modern .headline-block {
    display: block;
}

#mission-section-modern .highlight-gold {
    color: var(--theme-color);
}

/* Mission Body Text */
#mission-section-modern .mission-modern-body {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #c0c5d0;
    margin-bottom: 32px;
    font-family: var(--font-body);
}

/* Action CTA Button */
#mission-section-modern .mission-modern-btn {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, var(--theme-color) 0%, var(--theme-color) 100%);
    color: #000000;
    padding: 8px 8px 8px 28px;
    border-radius: 40px;
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.25);
    font-family: var(--font-body);
}

#mission-section-modern .mission-modern-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(212, 175, 55, 0.4);
    color: #000000;
}

#mission-section-modern .mission-modern-btn .btn-icon-box {
    width: 42px;
    height: 42px;
    background-color: #000000;
    color: var(--theme-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

#mission-section-modern .mission-modern-btn:hover .btn-icon-box {
    transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   RIGHT SIDE: Glassmorphism Cards Container (Stacked Vertically)
   -------------------------------------------------------------------------- */
#mission-section-modern .mission-modern-right-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

/* Glassmorphism Card Outer */
#mission-section-modern .glass-bottom-box {
    background: rgba(22, 25, 35, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

#mission-section-modern .glass-bottom-box:hover {
    border-color: rgba(212, 175, 55, 0.5);
    transform: translateY(-3px);
}

#mission-section-modern .pillar-label {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--theme-color);
    margin-bottom: 16px;
    font-family: var(--font-heading);
}

/* Stats Card Content */
#mission-section-modern .modern-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

#mission-section-modern .modern-stat-item {
    display: flex;
    flex-direction: column;
}

#mission-section-modern .modern-stat-num {
    font-size: 1.85rem;
    font-weight: 900;
    color: #ffffff;
    line-height: 1;
    margin-bottom: 6px;
    font-family: var(--font-body);
}

#mission-section-modern .modern-stat-lbl {
    font-size: 0.75rem;
    color: #c0c5d0;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-family: var(--font-body);
}

/* Match Card Content */
#mission-section-modern .modern-teams-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 16px;
}

#mission-section-modern .modern-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

#mission-section-modern .modern-team img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

#mission-section-modern .modern-team .team-name {
    font-weight: 700;
    font-size: 0.85rem;
    color: #ffffff;
    font-family: var(--font-heading);
}

#mission-section-modern .modern-vs-badge {
    background: rgba(212, 175, 55, 0.15);
    border: 1px solid var(--theme-color);
    color: var(--theme-color);
    font-size: 0.65rem;
    font-weight: 900;
    padding: 3px 8px;
    border-radius: 20px;
    font-family: var(--font-body);
}

#mission-section-modern .modern-match-meta {
    display: flex;
    justify-content: center;
    gap: 16px;
    font-size: 0.8rem;
    color: #c0c5d0;
    margin-bottom: 16px;
    font-family: var(--font-body);
}

#mission-section-modern .modern-match-meta .meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#mission-section-modern .modern-match-meta i {
    color: var(--theme-color);
}

#mission-section-modern .modern-fixtures-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--theme-color);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.2s ease;
    font-family: var(--font-body);
}

#mission-section-modern .modern-fixtures-btn:hover {
    color: var(--theme-color);
}

/* --------------------------------------------------------------------------
   Modern Social Follow Bar
   -------------------------------------------------------------------------- */
#mission-section-modern .mission-modern-follow-bar {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 40px auto 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

#mission-section-modern .modern-follow-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #c0c5d0;
    font-family: var(--font-heading);
}

#mission-section-modern .modern-follow-icons {
    display: flex;
    align-items: center;
    gap: 14px;
}

#mission-section-modern .modern-follow-icons a {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #c0c5d0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

#mission-section-modern .modern-follow-icons a:hover {
    background: var(--theme-color);
    border-color: var(--theme-color);
    color: #000000;
    transform: translateY(-2px);
}

/* modern mission css */





/* modern partner css */

/* ==========================================================================
   Featured Partners Section - Light Mode Theme (Smaller Typography)
   ========================================================================== */

/* ==========================================================================
   Featured Partners Section - Off-White & Gold (#d5aa5d) Design
   Scoped strictly to #featured-partners-modern
   ========================================================================== */

#featured-partners-modern {
    padding: 0px 20px;
    overflow: hidden;
    font-family: var(--font-body);
}

#featured-partners-modern .fp-modern-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

#featured-partners-modern .fp-modern-content {
    width: 100%;
}

/* Flex Container placing Kicker Title on Left and Button on Right */
#featured-partners-modern .fp-modern-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 15px;
}

/* Accent Kicker with Gold Line */
#featured-partners-modern .fp-modern-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

#featured-partners-modern .fp-kicker-line {
    width: 28px;
    height: 2px;
    background-color: var(--theme-color);
    /* Accent Gold */
}

#featured-partners-modern .fp-modern-label {
    color: var(--theme-color);
    font-family: var(--font-heading);
    font-size: 13.6px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
}

#featured-partners-modern .fp-modern-btn-wrap {
    justify-self: end !important;
}

/* Button Styling (Top-Right Aligned) */
#featured-partners-modern .fp-modern-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 26px;
    background: var(--theme-color);
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    border-radius: 6px;
    white-space: nowrap;
    transition: all 0.3s ease;
}

#featured-partners-modern .fp-modern-btn:hover {
    background: var(--theme-color);
    transform: translateY(-2px);
}

/* Large Main Title */
#featured-partners-modern .fp-modern-title {
    margin: 0 0 15px 0;
    line-height: 1.05;
    max-width: 100%;
    font-family: var(--font-heading);
}

#featured-partners-modern .fp-title-1,
#featured-partners-modern .fp-title-2 {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(32px, 4.5vw, 52px);
    font-weight: 800;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}

#featured-partners-modern .fp-title-1 {
    color: #111111;
    /* Clean sharp dark title */
}

#featured-partners-modern .fp-title-2 {
    color: var(--theme-color);
    /* Gold title line */
}

/* Subtitle Description */
#featured-partners-modern .fp-modern-description {
    color: #555555;
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 100%;
    margin: 0;
}

/* 4-Column Grid for Partner Cards */
#featured-partners-modern .fp-modern-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* Clean White Card with Rounded Corners */
#featured-partners-modern .fp-modern-card {
    min-height: 95px;
    background: #ffffff;
    border: 2px solid rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
}

#featured-partners-modern .fp-modern-card:hover {
    transform: translateY(-4px);
    border-color: rgba(213, 170, 93, 0.4);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
}

#featured-partners-modern .fp-modern-card img {
    max-width: 100px;
    max-height: 40px;
    object-fit: contain;
}

#featured-partners-modern .fp-modern-card span {
    color: #222222;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-align: center;
}

/* Responsive Styles */
@media (max-width: 768px) {
    #featured-partners-modern .fp-modern-top-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

@media (max-width: 991px) {
    #featured-partners-modern .fp-modern-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    #featured-partners-modern .fp-modern-grid {
        grid-template-columns: 1fr;
    }
}


/* modern partner css */




/* modern stadium css   */


/* ==========================================
   Modern Stadium Section Styling
========================================== */

#featured-stadium-modern {
    position: relative;
    font-family: var(--font-body);
}

/* Tag / Small Title */
#featured-stadium-modern .stadium-modern-tag {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

#featured-stadium-modern .stadium-modern-tag .tag-line {
    width: 25px;
    height: 2px;
    background-color: var(--theme-color);
}

#featured-stadium-modern .stadium-modern-tag .tag-text {
    font-family: var(--font-heading);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--theme-color);
    font-weight: 700;
}

/* Main Title & Colored Last Word */
#featured-stadium-modern .stadium-modern-title {
    font-family: var(--font-heading);
    font-weight: 900;
    line-height: 1.1;
    color: #111111;
    text-transform: uppercase;
    margin-bottom: 20px;
    font-size: 48px;
    max-width: 500px;
}

#featured-stadium-modern .stadium-modern-title .highlight-word {
    color: var(--theme-color);
}

/* Description */
#featured-stadium-modern .stadium-modern-desc {
    font-family: var(--font-body);
    font-size: 16px;
    color: #555555;
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 90%;
}

/* Stats Row Container */
#featured-stadium-modern .stadium-modern-stats {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

/* Individual Stat Box (Row Layout) */
#featured-stadium-modern .stat-item {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
}

/* Icon Wrapper - Size dynamically matches total text height */
#featured-stadium-modern .stat-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    /* Matches height of Label + Value text */
    color: #111111;
    line-height: 1;
    transition: color 0.3s ease, transform 0.3s ease;
}

#featured-stadium-modern .stat-item:hover .stat-icon-wrap {
    color: #b5944d;
    /* Same highlight color as heading */
    transform: scale(1.08);
}

/* Column Container for Label & Value */
#featured-stadium-modern .stat-text-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
}

/* Label Styling (Top) */
#featured-stadium-modern .stat-label {
    font-family: var(--font-heading);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888888;
    font-weight: 600;
    margin-bottom: 3px;
}

/* Value Styling (Bottom) */
#featured-stadium-modern .stat-value {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    color: #111111;
}

/* Pill Action Button */
#featured-stadium-modern .btn-360-modern {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background-color: var(--theme-color);
    color: #111111;
    padding: 8px 24px 8px 10px;
    border-radius: 50px;
    text-decoration: none !important;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

#featured-stadium-modern .btn-360-modern:hover {
    background-color: var(--theme-color);
    transform: translateY(-2px);
}

#featured-stadium-modern .play-icon-circle {
    width: 32px;
    height: 32px;
    background-color: #111111;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

/* Right Side Image & Floating Box Container */
#featured-stadium-modern .stadium-modern-media-wrap {
    position: relative;
    padding-bottom: 40px;
}

#featured-stadium-modern .main-image-card {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

#featured-stadium-modern .main-image-card img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    display: block;
}

/* Floating Bottom Experience Card */
#featured-stadium-modern .floating-video-card {
    position: absolute;
    bottom: 0;
    left: -30px;
    background: #ffffff;
    padding: 18px 22px;
    border-radius: 0;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
    max-width: 400px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 18px;
}

#featured-stadium-modern .video-card-play {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border: 2px solid var(--theme-color);
    border-radius: 50%;
    color: var(--theme-color);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 12px;
    transition: .3s ease;
}

#featured-stadium-modern .video-card-play:hover {
    background: var(--theme-color);
    color: #ffffff;
}

#featured-stadium-modern .video-card-content {
    flex: 1;
}

#featured-stadium-modern .video-card-link {
    text-decoration: none !important;
    color: #111111;
    display: block;
}

#featured-stadium-modern .video-card-tag {
    display: block;
    font-family: var(--font-heading);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--theme-color);
    font-weight: 700;
    margin-bottom: 6px;
    line-height: 1;
}

#featured-stadium-modern .video-card-title {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 900;
    color: #111111;
    margin: 0 0 8px;
    line-height: .9;
    text-transform: uppercase;
    letter-spacing: -1px;
    max-width: 100%;
}

#featured-stadium-modern .video-card-desc {
    font-family: var(--font-body);
    font-size: 12px;
    color: #666666;
    margin: 0;
    line-height: 1.5;
    max-width: 170px;
}

/* Mobile & Tablet Adjustments */
@media (max-width: 991px) {
    #featured-stadium-modern .stadium-modern-media-wrap {
        margin-top: 50px;
    }

    #featured-stadium-modern .floating-video-card {
        left: 10px;
        bottom: -20px;
    }
}




/* modern stadium css   */







/* modern about css   */



@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=Montserrat:wght@800;900&display=swap');

/* ==========================================
   Modern About Section Styling
========================================== */

#featured-about-modern {
    position: relative;
    padding: 80px 0;
    background: transparent;
    overflow: visible;
    font-family: var(--font-body);
}

/* Left Column Styling */
#featured-about-modern .about-modern-left {
    padding-right: 25px;
}

/* Tagline Indicator */
#featured-about-modern .about-modern-tagline {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

#featured-about-modern .about-modern-tagline .tagline-dash {
    width: 20px;
    height: 2px;
    background-color: var(--theme-color);
}

#featured-about-modern .about-modern-tagline .tagline-text {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--theme-color);
    font-family: var(--font-heading);
}

/* Bold Main Title */
#featured-about-modern .about-modern-maintitle {
    font-family: var(--font-heading) !important;
    font-size: clamp(3rem, 5vw, 4.85rem);
    line-height: 0.9;
    color: #161616;
    letter-spacing: -1px;
    text-transform: uppercase;
    margin: 0 0 5px 0;
}

/* Cursive/Script Subtitle */
#featured-about-modern .about-modern-script-title {
    /* Script font stack with var(--font-body) fallback */
    font-family: 'Alex Brush', 'Mr De Haviland', cursive;
    font-style: normal;
    font-size: clamp(2rem, 5.5vw, 4rem);
    font-weight: 400;
    color: var(--theme-color);
    line-height: 0.8;
    margin: 25px 0 15px 0;
    transform: translateY(-15px) rotate(-6deg);
    letter-spacing: 1px;
    text-transform: none;
}

/* Main Description Paragraph */
#featured-about-modern .about-modern-description {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.6;
    color: #555555;
    margin-bottom: 25px;
}

/* Action Button & Note Container */
#featured-about-modern .about-modern-action-row {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* Pill Action Button */
#featured-about-modern .btn-about-pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background-color: var(--theme-color);
    color: #111111 !important;
    padding: 8px 22px 8px 10px;
    border-radius: 50px;
    text-decoration: none !important;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    box-shadow: 0 6px 18px rgba(202, 170, 97, 0.25);
    flex-shrink: 0;
}

#featured-about-modern .btn-about-pill:hover {
    background-color: var(--theme-color);
    transform: translateY(-2px);
}

#featured-about-modern .btn-icon-circle {
    width: 32px;
    height: 32px;
    background-color: #111111;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

#featured-about-modern .about-modern-btn-note {
    font-family: var(--font-body);
    font-size: 12px;
    color: #777777;
    line-height: 1.4;
    max-width: 150px;
}

/* Center Column: Big Showcase Image Frame */
#featured-about-modern .about-modern-center {
    position: relative;
    z-index: 1;
}

#featured-about-modern .about-modern-image-frame {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

#featured-about-modern .about-showcase-img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

#featured-about-modern .about-modern-image-frame:hover .about-showcase-img {
    transform: scale(1.03);
}

/* Right Column: Floating Cards Stack Overlapping 10% on Image */
#featured-about-modern .about-modern-right {
    position: relative;
    z-index: 2;
}

#featured-about-modern .about-modern-cards-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 125%;
    margin-left: -25%;
}

#featured-about-modern .modern-card-item {
    background: #ffffff;
    border-radius: 16px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    border: 1px solid #f0f0f0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#featured-about-modern .modern-card-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.14);
}

#featured-about-modern .card-icon-box {
    width: 44px;
    height: 44px;
    min-width: 44px;
    background-color: var(--theme-color);
    color: #ffffff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

#featured-about-modern .card-content-box {
    display: flex;
    flex-direction: column;
}

#featured-about-modern .card-title {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    color: #111111;
    margin: 0 0 3px 0;
}

#featured-about-modern .card-desc {
    font-family: var(--font-body);
    font-size: 12px;
    color: #777777;
    margin: 0;
    line-height: 1.4;
}

/* Responsive Fixes for Mobile & Tablet */
@media (max-width: 991px) {
    #featured-about-modern .about-modern-left {
        padding-right: 0;
        margin-bottom: 30px;
    }

    #featured-about-modern .about-modern-cards-stack {
        width: 100%;
        margin-left: 0;
        margin-top: 25px;
    }

    #featured-about-modern .about-modern-maintitle {
        font-size: 36px;
    }

    #featured-about-modern .about-modern-script-title {
        font-size: 32px;
    }

    #featured-about-modern .about-showcase-img {
        height: 350px;
    }
}

/* modern about css   */








/* modern legacy css   */



/* ==========================================================================
   MODERN LEGACY SECTION (PERFECT HORIZONTAL DOT ALIGNMENT)
   ========================================================================== */

#modern-legacy-section {
    padding: 90px 2%;
    color: #ffffff;
    font-family: var(--font-body);
    position: relative;
    box-sizing: border-box;
}

#modern-legacy-section .modern-legacy-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

/* --- Left Column --- */
#modern-legacy-section .modern-legacy-left {
    display: flex;
    flex-direction: column;
}

#modern-legacy-section .modern-subheading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    font-family: var(--font-body);
}

#modern-legacy-section .modern-subheading .subheading-dash {
    width: 20px;
    height: 2px;
    background-color: var(--theme-color);
}

#modern-legacy-section .modern-subheading .subheading-text {
    color: var(--theme-color);
    font-size: 14px;
    letter-spacing: 2px;
    font-weight: 700;
    text-transform: uppercase;
    font-family: var(--font-heading);
}

#modern-legacy-section .modern-main-title {
    font-family: var(--font-heading) !important;
    /* Replaced Impact / Arial Black layout engine */
    font-size: clamp(1.8rem, 2.8vw, 3.0rem);
    line-height: 1.1 !important;
    color: #ffffff;
    margin: 0 0 25px 0 !important;
    letter-spacing: -0.5px !important;
    text-transform: uppercase;
}

#modern-legacy-section .modern-main-title .gold-text {
    color: var(--theme-color);
}

#modern-legacy-section .modern-description {
    color: #9e9e9e;
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 30px 0;
    font-family: var(--font-body);
}

/* Raw Stats Grid Above Button */
#modern-legacy-section .raw-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 35px;
}

/* Enhanced Big Stat Icons with custom branding color alignment */
#modern-legacy-section .raw-stats-grid i.stat-icon,
#modern-legacy-section .raw-stats-grid svg.stat-icon {
    font-size: 26px !important;
    color: var(--theme-color);
    margin-bottom: 10px !important;
}


#modern-legacy-section .raw-stat-number {
    font-size: 38px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    margin-bottom: 6px;
    letter-spacing: -1px;
    font-family: var(--font-body);
}

#modern-legacy-section .raw-stat-label {
    font-size: 10px;
    color: #8a8a8a;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    line-height: 1.3;
    font-family: var(--font-heading);
}

/* Gold CTA Button */
#modern-legacy-section .modern-gold-btn {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background-color: var(--theme-color);
    color: #0d0d0d;
    padding: 6px 8px 6px 24px;
    border-radius: 40px;
    text-decoration: none;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 35px;
    transition: all 0.3s ease;
    font-family: var(--font-body);
    max-width: fit-content;
}

#modern-legacy-section .modern-gold-btn .btn-arrow {
    width: 32px;
    height: 32px;
    background-color: var(--theme-color);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

#modern-legacy-section .modern-gold-btn:hover {
    background-color: #d8b672;
    transform: translateY(-2px);
}

/* Left Bottom Banner Link */
#modern-legacy-section .modern-banner-card {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    padding: 16px 20px;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

#modern-legacy-section .modern-banner-card:hover {
    border-color: rgba(192, 160, 98, 0.3);
    background: rgba(255, 255, 255, 0.05);
}

#modern-legacy-section .banner-thumbnail {
    width: 60px;
    height: 50px;
    object-fit: cover;
    border-radius: 6px;
}

#modern-legacy-section .banner-content h4 {
    margin: 0;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-family: var(--font-heading);
}

#modern-legacy-section .banner-content p {
    margin: 3px 0 0 0;
    color: #8a8a8a;
    font-size: 12px;
    font-family: var(--font-body);
}

#modern-legacy-section .banner-action-icon {
    margin-left: auto;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 12px;
}

/* --- Right Column Layout --- */
#modern-legacy-section .modern-legacy-right {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Top Right Image Card */
#modern-legacy-section .modern-feature-image-card {
    width: 100%;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

#modern-legacy-section .modern-feature-image-card .feature-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

/* Glass Card Base Container */
#modern-legacy-section .glass-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 28px 32px;
    box-sizing: border-box;
}

#modern-legacy-section .card-subtitle {
    display: block;
    color: var(--theme-color);
    font-size: 11px;
    letter-spacing: 2px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 24px;
    font-family: var(--font-body);
}

/* --- PIXEL PERFECT HORIZONTAL TIMELINE --- */
#modern-legacy-section .horiz-timeline-container {
    position: relative;
    height: 150px;
    /* Fixed height container to give room above/below line */
    margin-bottom: 24px;
}

/* The Horizontal Axis Line fixed exactly in the vertical center */
#modern-legacy-section .horiz-axis-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-50%);
    z-index: 1;
}

/* Grid overlay for 4 nodes */
#modern-legacy-section .horiz-nodes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: 100%;
    position: relative;
    z-index: 2;
}

#modern-legacy-section .horiz-node {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* ABSOLUTE CENTERED DOT ON THE AXIS LINE */
#modern-legacy-section .exact-line-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background-color: var(--theme-color);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(192, 160, 98, 0.9);
    z-index: 3;
}

/* Text and Year positions pinned relative to top 50% line */
#modern-legacy-section .node-text-top {
    position: absolute;
    bottom: calc(50% + 14px);
    width: 90%;
}

#modern-legacy-section .node-year-bottom {
    position: absolute;
    top: calc(50% + 14px);
    font-size: 12px;
    color: #ffffff;
    font-weight: 600;
}

#modern-legacy-section .node-year-top {
    position: absolute;
    bottom: calc(50% + 14px);
    font-size: 12px;
    color: #ffffff;
    font-weight: 600;
}

#modern-legacy-section .node-text-bottom {
    position: absolute;
    top: calc(50% + 14px);
    width: 90%;
}

/* Typography Details */
#modern-legacy-section .node-text-top h4,
#modern-legacy-section .node-text-bottom h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    font-family: var(--font-heading);
}

#modern-legacy-section .node-text-top p,
#modern-legacy-section .node-text-bottom p {
    margin: 2px 0 0 0;
    font-size: 12px;
    color: #777777;
    font-family: var(--font-body);
}

#modern-legacy-section .view-all-achievements {
    font-family: var(--ms-font-body) !important;
    /* Integrated primary custom link family */
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    color: #ffffff;
    padding: 10px 24px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    letter-spacing: 1.5px !important;
    white-space: nowrap !important;
}

#modern-legacy-section .view-all-achievements i.achieve-btn-icon,
#modern-legacy-section .view-all-achievements svg.achieve-btn-icon {
    font-size: 10px !important;
    transition: transform 0.3s ease !important;
}

#modern-legacy-section .view-all-achievements:hover i.achieve-btn-icon,
#modern-legacy-section .view-all-achievements:hover svg.achieve-btn-icon {
    transform: translateX(4px) !important;
    color: var(--theme-color);
}

#modern-legacy-section .view-all-achievements:hover {
    color: var(--theme-color);
}

/* --- Responsive Layout --- */
@media (max-width: 1024px) {
    #modern-legacy-section .modern-legacy-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    #modern-legacy-section .modern-main-title {
        font-size: 44px;
    }
}

@media (max-width: 600px) {
    #modern-legacy-section .raw-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    #modern-legacy-section .horiz-timeline-container {
        height: auto;
        padding-left: 20px;
        /* Space for the left-aligned vertical axis line */
    }

    /* Convert horizontal line into a vertical timeline axis */
    #modern-legacy-section .horiz-axis-line {
        display: block;
        top: 0;
        bottom: 0;
        left: 5px;
        right: auto;
        width: 2px;
        height: 100%;
        transform: none;
    }

    /* Stack nodes vertically */
    #modern-legacy-section .horiz-nodes-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    #modern-legacy-section .horiz-node {
        align-items: flex-start;
        text-align: left;
        padding-left: 15px;
    }

    /* Align dots onto the vertical axis line */
    #modern-legacy-section .exact-line-dot {
        display: block;
        top: 8px;
        left: -15px;
        transform: translate(-50%, 0);
    }

    /* Reset absolute positions to stack content cleanly top-to-bottom */
    #modern-legacy-section .node-text-top,
    #modern-legacy-section .node-text-bottom,
    #modern-legacy-section .node-year-top,
    #modern-legacy-section .node-year-bottom {
        position: relative;
        top: auto;
        bottom: auto;
        width: 100%;
    }

    /* Keep node ordering consistent on mobile (Year first, then title & description) */
    #modern-legacy-section .node-year-top,
    #modern-legacy-section .node-year-bottom {
        order: 1;
        margin-bottom: 4px;
    }

    #modern-legacy-section .node-text-top,
    #modern-legacy-section .node-text-bottom {
        order: 2;
    }
}





/* modern legacy css   */





/* modern club css   */





/* ==========================================================================
   MODERN CLUB SECTION STYLES (40/60 Partition)
   ========================================================================== */

#featured-club-modern.club-modern-section {
    padding: 9px 0;
    width: 100%;
    position: relative;
    overflow: hidden;
}

#featured-club-modern .club-modern-container {
    width: 100%;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

/* --- Left Column Content (40%) --- */
#featured-club-modern .club-modern-left {
    flex: 0 0 40%;
    max-width: 40%;
    font-family: var(--font-body);
}

#featured-club-modern .club-modern-small-title-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

#featured-club-modern .club-modern-small-line {
    width: 30px;
    height: 2px;
    background-color: var(--theme-color);
    display: inline-block;
}

#featured-club-modern .club-modern-small-title {
    font-family: var(--font-body);
    color: var(--theme-color);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
}

#featured-club-modern .club-modern-main-title {
    font-family: var(--font-heading);
    line-height: 1.15;
    color: #111111;
    margin-bottom: 20px;
}

#featured-club-modern .club-modern-highlight-title {
    display: block;
    color: var(--theme-color);
}

#featured-club-modern .club-modern-description {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    color: #666666;
    margin-bottom: 30px;
}

#featured-club-modern .club-modern-btn {
    font-family: var(--font-body);
    display: inline-flex;
    align-items: center;
    background-color: var(--theme-color);
    color: #ffffff;
    padding: 6px 24px 6px 8px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

#featured-club-modern .club-modern-btn:hover {
    background-color: var(--theme-color);
    color: #ffffff;
}

#featured-club-modern .club-modern-btn-icon {
    width: 36px;
    height: 36px;
    background-color: #111111;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

/* --- Right Column Layout (60%) --- */
#featured-club-modern .club-modern-right {
    flex: 0 0 60%;
    max-width: 60%;
    position: relative;
    display: flex;
    align-items: center;
    min-height: 560px;
    box-sizing: border-box;
    font-family: var(--font-body);
}

/* Main Image Wrapper (~50% of Right Column) */
#featured-club-modern .club-modern-image-wrap {
    width: 60%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
}

#featured-club-modern .club-modern-img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: block;
}

/* Cards Stack shifted 7% to the Right */
#featured-club-modern .club-modern-cards-stack {
    position: absolute;
    right: 0%;
    /* Shifted 7% to the right */
    top: 50%;
    transform: translateY(-50%);
    width: 60%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Card Section Heading Above 1st Card */
#featured-club-modern .club-cards-heading-wrap {
    margin-bottom: 12px;
    width: 100%;
    text-align: right;
    padding-right: 5px;
}

#featured-club-modern .club-cards-heading-text {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 800;
    color: #111111;
    /* Solid Black Header */
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
}

/* Black Colored Dash Line using ::after */
#featured-club-modern .club-cards-heading-text::after {
    content: "";
    display: inline-block;
    width: 20px;
    height: 2px;
    background-color: #111111;
    /* Black Dash Line */
    border-radius: 2px;
}

/* Staircase Cards Container */
#featured-club-modern .club-modern-stairs-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

/* Base Card Style */
#featured-club-modern .club-modern-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    box-sizing: border-box;
}

#featured-club-modern .club-modern-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
}

#featured-club-modern .club-modern-card-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    background-color: var(--theme-color);
    color: #ffffff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

#featured-club-modern .club-modern-card-body h5 {
    font-family: var(--font-heading);
    margin: 0 0 2px 0;
    font-size: 14px;
    font-weight: 700;
    color: #111111;
}

#featured-club-modern .club-modern-card-body p {
    font-family: var(--font-body);
    margin: 0;
    font-size: 12px;
    line-height: 1.35;
    color: #666666;
}

/* Staircase Shifts (Top-Right to Bottom-Left) */
#featured-club-modern .stair-tr-bl-1 {
    margin-right: 0px;
    margin-left: 60px;
}

#featured-club-modern .stair-tr-bl-2 {
    margin-right: 20px;
    margin-left: 40px;
}

#featured-club-modern .stair-tr-bl-3 {
    margin-right: 40px;
    margin-left: 20px;
}

#featured-club-modern .stair-tr-bl-4 {
    margin-right: 60px;
    margin-left: 0px;
}

/* Responsive Adjustments */
@media (max-width: 991px) {
    #featured-club-modern .club-modern-container {
        flex-direction: column;
        padding: 0 20px;
        gap: 40px;
    }

    #featured-club-modern .club-modern-left,
    #featured-club-modern .club-modern-right {
        max-width: 100%;
        flex: 0 0 100%;
        width: 100%;
    }

    #featured-club-modern .club-modern-right {
        flex-direction: column;
        min-height: auto;
    }

    #featured-club-modern .club-cards-heading-wrap {
        text-align: left;
        padding-right: 0;
    }

    #featured-club-modern .club-modern-image-wrap {
        width: 100%;
    }

    #featured-club-modern .club-modern-cards-stack {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        width: 100%;
        margin-top: 25px;
    }

    #featured-club-modern .stair-tr-bl-1,
    #featured-club-modern .stair-tr-bl-2,
    #featured-club-modern .stair-tr-bl-3,
    #featured-club-modern .stair-tr-bl-4 {
        margin-right: 0;
        margin-left: 0;
    }
}



/* modern club css   */







/* modern team css   */



/* ==========================================================================
   MODERN TEAM SECTION STYLES
   ========================================================================== */

#featured-modern-team.featured-team-modern {
    padding: 80px 0;
    width: 100%;
    position: relative;
    overflow: hidden;
}

#featured-modern-team .team-modern-wrapper {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

#featured-modern-team .team-modern-container {
    display: flex;
    gap: 30px;
    width: 100%;
}

/* --- Left Column Layout --- */
#featured-modern-team .team-modern-left {
    flex: 0 0 28%;
    max-width: 28%;
    font-family: var(--font-body);
}

#featured-modern-team .team-modern-label-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

#featured-modern-team .team-modern-line {
    width: 30px;
    height: 2px;
    background-color: var(--theme-color);
    display: inline-block;
}

#featured-modern-team .team-modern-label {
    font-family: var(--font-body);
    color: var(--theme-color);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

#featured-modern-team .team-modern-main-title {
    font-family: var(--font-heading);
    font-size: 36px;
    line-height: 1.05;
    color: #111111;
    margin: 0 0 24px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 900;
}

#featured-modern-team .team-modern-main-title .block-line {
    display: block;
}

#featured-modern-team .team-modern-main-title .highlight-text {
    color: var(--theme-color);
}

#featured-modern-team .team-modern-description {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    color: #666666;
    margin-bottom: 30px;
}

/* --- Gold Pill Button with Circular Arrow --- */
#featured-modern-team .team-modern-pill-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--theme-color);
    /* Gold background */
    color: #111111;
    /* Dark text color */
    border-radius: 50px;
    /* Full pill shape */
    padding: 6px 6px 6px 28px;
    /* Space inside the pill */
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    gap: 20px;
}

/* Button Text */
#featured-modern-team .team-modern-pill-btn .btn-text {
    color: #111111;
}

/* Dark Circular Icon Container */
#featured-modern-team .team-modern-pill-btn .btn-arrow-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background-color: #111111;
    /* Dark inner circle */
    border-radius: 50%;
    color: #ffffff;
    /* White arrow icon */
    font-size: 14px;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Hover Effects */
#featured-modern-team .team-modern-pill-btn:hover {
    background-color: var(--theme-color);
    /* Slightly darker gold on hover */
}

#featured-modern-team .team-modern-pill-btn:hover .btn-arrow-circle {
    transform: translateX(3px);
    /* Subtle arrow nudge */
}

/* --- Right Column Carousel Stage --- */
#featured-modern-team .team-modern-right {
    flex: 0 0 72%;
    max-width: 72%;
    position: relative;
    overflow: hidden;
}

#featured-modern-team #team-carousel-stage {
    width: 100%;
    overflow: hidden;
    clip-path: none !important;
    transform: none !important;
    overflow: hidden;
    width: 100%;
    padding-left: 0 !important;
    margin: 0 !important;
}

#featured-modern-team #team-slider-track {
    display: flex;
    gap: 0px;
    transition: transform 0.3s ease;
    transform: none !important;
}

/* --- Card Item Design --- */
#featured-modern-team .northside-card.modern-card {
    flex: 0 0 calc((100% - (var(--dynamic-columns) - 1) * 20px) / var(--dynamic-columns));
    box-sizing: border-box;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    background: #1e1e1e;
}

#featured-modern-team .modern-card-inner {
    position: relative;
    width: 100%;
    height: var(--card-img-height, 380px);
    border-radius: 18px;
    overflow: hidden;
}

#featured-modern-team .modern-card-image-wrap {
    width: 100%;
    height: 100%;
    position: relative;
}

#featured-modern-team .modern-card-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center top;
    transition: transform 0.5s ease;
}

#featured-modern-team .northside-card.modern-card:hover .modern-card-image {
    transform: scale(1.05);
}

#featured-modern-team .modern-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.85) 100%);
    pointer-events: none;
}

/* Player Number Overlay */
#featured-modern-team .modern-card-number {
    position: absolute;
    top: 15px;
    right: 20px;
    font-family: var(--font-heading);
    font-size: 38px;
    font-weight: 700;
    color: var(--theme-color);
    line-height: 1;
    z-index: 2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Player Name and Position Overlay */
#featured-modern-team .modern-card-content {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    z-index: 2;
}

#featured-modern-team .modern-card-position {
    display: block;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    color: var(--theme-color);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

#featured-modern-team .modern-card-name {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 22px;
    line-height: 1.1;
    text-transform: var(--team-title-case, uppercase);
}

#featured-modern-team .modern-card-name a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

#featured-modern-team .modern-card-name a:hover {
    color: var(--theme-color);
}

/* --- Navigation & Pagination Panel (Horizontal Alignment) --- */
#featured-modern-team .modern-nav-panel {
    display: flex;
    flex-direction: row;
    /* Forces all items into a single horizontal row */
    align-items: center;
    /* Centers controls vertically */
    justify-content: flex-end;
    /* Aligns controls to the right side */
    gap: 12px;
    /* Consistent spacing between buttons and pagination */
    margin-top: 25px;
    width: 100%;
    padding: 0 50px 0 10px;
}

#featured-modern-team .modern-nav-panel button {
    background: #111111;
    color: #ffffff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    transition: background-color 0.3s ease, opacity 0.3s ease;
    flex-shrink: 0;
    /* Prevents buttons from squeezing */
}

#featured-modern-team .modern-nav-panel button:hover {
    background: var(--theme-color);
}

#featured-modern-team .slider-numeric-pagination {
    display: inline-flex;
    /* Keeps pagination numbers inline horizontally */
    flex-direction: row;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    color: #111111;
    margin-left: 8px;
    white-space: nowrap;
    /* Prevents text breaking into multiple lines */
}

#featured-modern-team .slider-numeric-pagination span {
    display: inline-block !important;
    /* Overrides any display:block coming from general/classic styles */
    margin: 0 !important;
}

#featured-modern-team .slider-numeric-pagination .divider {
    color: #999999;
}

/* --- Responsive Layout --- */
@media (max-width: 1023px) {
    #featured-modern-team .team-modern-container {
        flex-direction: column;
    }

    #featured-modern-team .team-modern-left,
    #featured-modern-team .team-modern-right {
        flex: 0 0 100%;
        max-width: 100%;
    }

    #featured-modern-team .team-modern-main-title {
        font-size: 36px;
    }

    #featured-modern-team .northside-card.modern-card {
        flex: 0 0 calc((100% - 20px) / 2);
    }
}

@media (max-width: 639px) {
    #featured-modern-team .northside-card.modern-card {
        flex: 0 0 100%;
    }

    #featured-modern-team .team-modern-wrapper {
        padding: 0 20px;
    }
}

#featured-modern-team .slider-numeric-pagination {
    color: #111111;
}

#featured-modern-team .slider-numeric-pagination #slider-current {
    color: var(--theme-color);
}

#featured-modern-team .slider-numeric-pagination #slider-total {
    color: #111111;
}




/* modern team css   */





/* modern post/blog css   */





/* --- Modern Featured Posts Section --- */
#featured-posts-modern {
    padding: 20px 40px;
    width: 100%;
    box-sizing: border-box;
}

#featured-posts-modern .modern-posts-container {
    margin: 0 auto;
}

/* Header Area */
#featured-posts-modern .modern-posts-header {
    align-items: flex-end;
    margin-bottom: 30px;
}

/* Subtitle with Black Dash Line */
#featured-posts-modern .modern-subtitle {
    font-family: var(--ms-font-body) !important;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--theme-color);
    margin-bottom: 1rem;
    display: inline-block;
}

#featured-posts-modern .modern-subtitle::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 2px;
    background-color: #111111;
    margin-right: 8px;
    vertical-align: middle;
}

#featured-posts-modern .modern-title {
    font-family: var(--ms-font-display) !important;
    font-size: 2.75rem;
    font-weight: 900;
    line-height: 1.0;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    margin: 0 0 1.5rem 0;
    color: #111111;
    display: block;
}

/* Colors ONLY the last 2 words in brand gold */
#featured-posts-modern .modern-title .highlight-end {
    color: var(--theme-color);
}

/* Dot Accent */
#featured-posts-modern .modern-title::after {
    content: "";
    display: inline-block;
    margin-left: 2px;
    width: 6px;
    height: 6px;
    background-color: var(--theme-color);
    border-radius: 50%;
    vertical-align: baseline;
}

#featured-posts-modern .header-left p {
    font-family: var(--ms-font-alt-body) !important;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.6;
    color: #6b7280;
    margin-bottom: 15px;
}

/* Header Action Button */
#featured-posts-modern .modern-pill-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--theme-color);
    color: #111111;
    border-radius: 50px;
    padding: 6px 6px 6px 24px;
    text-decoration: none;
    font-family: var(--font-body, sans-serif);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    gap: 16px;
}

#featured-posts-modern .modern-pill-btn .btn-arrow-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background-color: #111111;
    border-radius: 50%;
    color: #ffffff;
    font-size: 13px;
    transition: transform 0.3s ease;
}

#featured-posts-modern .modern-pill-btn:hover {
    background-color: var(--theme-color);
}

#featured-posts-modern .modern-pill-btn:hover .btn-arrow-circle {
    transform: translateX(3px);
}

/* Grid Layout */
#featured-posts-modern .modern-posts-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 24px;
}

/* --- Left Hero Card --- */
#featured-posts-modern .modern-hero-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 100%;
    min-height: 440px;
    background-color: #111111;
}

#featured-posts-modern .hero-card-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

#featured-posts-modern .hero-image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#featured-posts-modern .hero-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

#featured-posts-modern .modern-hero-card:hover .hero-image-wrapper img {
    transform: scale(1.04);
}

#featured-posts-modern .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.88) 100%);
}

#featured-posts-modern .hero-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 32px;
    box-sizing: border-box;
    z-index: 2;
}

#featured-posts-modern .hero-badge {
    display: inline-block;
    background-color: var(--theme-color);
    color: #111111;
    font-family: var(--font-body, sans-serif);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 12px;
}

#featured-posts-modern .hero-title {
    font-family: var(--font-heading, sans-serif);
    font-size: 26px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.25;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

/* Hover Effect for Hero Card Title */
#featured-posts-modern .modern-hero-card:hover .hero-title {
    color: var(--theme-color);
}

#featured-posts-modern .hero-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body, sans-serif);
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 1px;
    margin-bottom: 14px;
}

/* --- Read More Styling for Hero Card --- */
#featured-posts-modern .modern-hero-card .read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body, sans-serif);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #9ca3af;
    /* Greyish initial color */
    transition: color 0.3s ease, transform 0.3s ease;
}

#featured-posts-modern .modern-hero-card .read-more i {
    transition: transform 0.3s ease;
}

/* Hero Hover State: Read More Turns Pure White */
#featured-posts-modern .modern-hero-card:hover .read-more {
    color: #ffffff;
}

#featured-posts-modern .modern-hero-card:hover .read-more i {
    transform: translateX(4px);
}

/* --- Right Side Cards --- */
#featured-posts-modern .modern-side-posts {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#featured-posts-modern .modern-side-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 16px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#featured-posts-modern .modern-side-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

#featured-posts-modern .side-card-link {
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
}

#featured-posts-modern .side-thumb {
    width: 100px;
    height: 100px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background-color: #e8ded1;
}

#featured-posts-modern .side-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

#featured-posts-modern .modern-side-card:hover .side-thumb img {
    transform: scale(1.05);
}

#featured-posts-modern .side-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#featured-posts-modern .side-cat {
    font-family: var(--font-body, sans-serif);
    font-size: 11px;
    font-weight: 700;
    color: var(--theme-color);
    letter-spacing: 1.5px;
}

#featured-posts-modern .side-title {
    font-family: var(--font-heading, sans-serif);
    font-size: 15px;
    font-weight: 700;
    color: #111111;
    line-height: 1.35;
    margin: 0;
    transition: color 0.3s ease;
}

/* Hover Effect for Side Card Title */
#featured-posts-modern .modern-side-card:hover .side-title {
    color: var(--theme-color);
}

#featured-posts-modern .side-meta {
    font-family: var(--font-body, sans-serif);
    font-size: 12px;
    color: #888888;
    margin-bottom: 2px;
}

/* --- Read More Styling for Side Cards --- */
#featured-posts-modern .modern-side-card .read-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body, sans-serif);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #888888;
    /* Greyish default color */
    transition: color 0.3s ease;
    margin-top: 2px;
}

#featured-posts-modern .modern-side-card .read-more i {
    transition: transform 0.3s ease;
}

/* Side Card Hover State: Read More Turns Pure Black (#111111) */
#featured-posts-modern .modern-side-card:hover .read-more {
    color: #111111;
}

#featured-posts-modern .modern-side-card:hover .read-more i {
    transform: translateX(3px);
}

/* Responsive Adjustments */
@media (max-width: 991px) {
    #featured-posts-modern .modern-posts-grid {
        grid-template-columns: 1fr;
    }

    #featured-posts-modern .modern-hero-card {
        min-height: 380px;
    }
}








/* modern post/blog css   */






/* modern contact css   */




/* --- Modern Contact Section (White Base / Black Floating Card) --- */
#featured-contact-modern {
    padding: 60px 40px;
    width: 100%;
    box-sizing: border-box;
}

#featured-contact-modern .modern-contact-container {
    max-width: 1240px;
    margin: 0 auto;
}

/* Dark/Black Outer Card Housing */
#featured-contact-modern .modern-contact-card {
    background-color: #111111;
    /* Dark Black Box */
    border-radius: 24px;
    padding: 50px 45px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

/* Two-Column Grid Alignment */
#featured-contact-modern .modern-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

/* --- Left Side: Info Pane --- */
#featured-contact-modern .modern-contact-subtitle {
    font-family: var(--ms-font-body, sans-serif);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--theme-color);
    margin-bottom: 0.75rem;
    display: inline-block;
}

#featured-contact-modern .modern-contact-subtitle::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 2px;
    background-color: var(--theme-color);
    margin-right: 8px;
    vertical-align: middle;
}

#featured-contact-modern .modern-contact-title {
    font-family: var(--ms-font-display, sans-serif) !important;
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    margin: 0 0 1rem 0;
}

#featured-contact-modern .modern-contact-title .white-text {
    color: #ffffff;
    display: block;
}

#featured-contact-modern .modern-contact-title .gold-text {
    color: var(--theme-color);
    display: block;
}

#featured-contact-modern .modern-contact-desc {
    font-family: var(--ms-font-alt-body, sans-serif);
    font-size: 0.9rem;
    line-height: 1.6;
    color: #a1a1aa;
    margin-bottom: 30px;
}

/* Matrix Layout for Contact Details */
#featured-contact-modern .modern-contact-matrix {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

#featured-contact-modern .matrix-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

#featured-contact-modern .matrix-item .icon-box {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background-color: rgba(192, 155, 90, 0.12);
    color: var(--theme-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

#featured-contact-modern .matrix-text .matrix-label {
    display: block;
    font-family: var(--font-body, sans-serif);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--theme-color);
    margin-bottom: 2px;
}

#featured-contact-modern .matrix-text address,
#featured-contact-modern .matrix-text p,
#featured-contact-modern .matrix-text a {
    font-family: var(--font-body, sans-serif);
    font-size: 0.875rem;
    color: #e4e4e7;
    text-decoration: none;
    font-style: normal;
    margin: 0;
    line-height: 1.4;
    transition: color 0.3s ease;
}

#featured-contact-modern .matrix-text a:hover {
    color: var(--theme-color);
}

/* --- Right Side: Modern Form Styling --- */
#featured-contact-modern .modern-contact-form-pane {
    background: #18181b;
    border: 1px solid #27272a;
    border-radius: 18px;
    padding: 36px;
}

#featured-contact-modern .modern-form-heading {
    font-family: var(--font-heading, sans-serif);
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 24px;
}

/* Contact Form 7 Field Adjustments inside the Dark Box */
#featured-contact-modern .modern-form-wrapper input[type="text"],
#featured-contact-modern .modern-form-wrapper input[type="email"],
#featured-contact-modern .modern-form-wrapper textarea {
    width: 100%;
    background-color: #09090b;
    border: 1px solid #27272a;
    border-radius: 8px;
    padding: 12px 16px;
    color: #ffffff;
    font-size: 14px;
    box-sizing: border-box;
    margin-bottom: 16px;
    outline: none;
    transition: border-color 0.3s ease;
}

#featured-contact-modern .modern-form-wrapper input:focus,
#featured-contact-modern .modern-form-wrapper textarea:focus {
    border-color: var(--theme-color);
}

#featured-contact-modern .modern-form-wrapper textarea {
    min-height: 110px;
    resize: vertical;
}

/* Custom Contact Form Submit Button Layout */
#featured-contact-modern .modern-form-wrapper .button-group,
#featured-contact-modern .modern-form-wrapper .wpcf7-submit-wrapper {
    margin-top: 15px;
}

/* Base Submit Button Style */
#featured-contact-modern .custom-submit-btn,
#featured-contact-modern .modern-form-wrapper button[type="submit"],
#featured-contact-modern .modern-form-wrapper input[type="submit"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 52px;
    /* Fixed height for precise centering */
    background-color: var(--theme-color);
    /* Muted Gold/Tan Color */
    color: #0d0d0d;
    border: none;
    border-radius: 50px;
    padding: 6px 6px 6px 28px;
    font-family: var(--font-body, sans-serif);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none !important;
    /* Removes text underline */
    cursor: pointer;
    transition: all 0.3s ease;
    box-sizing: border-box;
    line-height: 1;
    max-width: fit-content;
}

/* Fix for Button Text */
#featured-contact-modern .custom-submit-btn span,
#featured-contact-modern .modern-form-wrapper button[type="submit"] span {
    text-decoration: none !important;
    display: inline-block;
    line-height: 1;
    color: #0d0d0d;
}

/* Inner Icon Circle */
#featured-contact-modern .custom-submit-btn i,
#featured-contact-modern .modern-form-wrapper button[type="submit"] i,
#featured-contact-modern .custom-submit-btn svg,
#featured-contact-modern .modern-form-wrapper button[type="submit"] svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background-color: #0d0d0d;
    /* Dark Inner Circle */
    border-radius: 50%;
    color: #ffffff;
    /* White Arrow */
    font-size: 14px;
    line-height: 1;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    margin: 0;
    padding: 10px;
}

/* Hover States */
#featured-contact-modern .custom-submit-btn:hover,
#featured-contact-modern .modern-form-wrapper button[type="submit"]:hover {
    background-color: var(--theme-color);
    text-decoration: none !important;
}

#featured-contact-modern .custom-submit-btn:hover i,
#featured-contact-modern .modern-form-wrapper button[type="submit"]:hover i,
#featured-contact-modern .custom-submit-btn:hover svg,
#featured-contact-modern .modern-form-wrapper button[type="submit"]:hover svg {
    transform: translateX(3px);
}

/* Dual Column Inputs Layout for Form */
#featured-contact-modern .form-row-twin {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* --- Responsive Layout --- */
@media (max-width: 991px) {
    #featured-contact-modern .modern-contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    #featured-contact-modern .modern-contact-card {
        padding: 30px 24px;
    }
}

@media (max-width: 575px) {
    #featured-contact-modern .modern-contact-matrix {
        grid-template-columns: 1fr;
    }

    #featured-contact-modern .form-row-twin {
        grid-template-columns: 1fr;
    }
}

/* --- Comprehensive Mobile & Small Screen Media Queries --- */

/* Tablet & Mobile Adjustments (under 991px) */
@media (max-width: 991px) {
    #featured-contact-modern {
        padding: 40px 15px !important;
    }

    #featured-contact-modern .modern-contact-card {
        padding: 35px 20px !important;
    }

    #featured-contact-modern .modern-contact-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }
}

/* Small Mobile Screens (iPhone 5 / SE - 480px and below) */
@media (max-width: 480px) {

    /* Container Padding */
    #featured-contact-modern {
        padding: 20px 10px !important;
        overflow: hidden;
        /* Prevents horizontal scrollbars */
    }

    #featured-contact-modern .modern-contact-card {
        padding: 24px 16px !important;
        border-radius: 16px !important;
    }

    /* Headings & Subtitles */
    #featured-contact-modern .modern-contact-title {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
    }

    #featured-contact-modern .modern-contact-desc {
        font-size: 0.85rem !important;
        margin-bottom: 20px !important;
    }

    /* Single Column Contact Details Matrix */
    #featured-contact-modern .modern-contact-matrix {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    #featured-contact-modern .matrix-item {
        gap: 10px !important;
    }

    #featured-contact-modern .matrix-item .icon-box {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }

    /* Prevent Address and Email Overflow */
    #featured-contact-modern .matrix-text address,
    #featured-contact-modern .matrix-text p,
    #featured-contact-modern .matrix-text a {
        font-size: 0.8rem !important;
        word-break: break-word !important;
        /* Forces long emails/addresses to wrap cleanly */
        overflow-wrap: anywhere !important;
    }

    /* Form Container Padding Adjustments */
    #featured-contact-modern .modern-contact-form-pane {
        padding: 20px 16px !important;
        border-radius: 14px !important;
    }

    #featured-contact-modern .modern-form-heading {
        font-size: 16px !important;
        margin-bottom: 16px !important;
    }

    /* Form Field Sizes */
    #featured-contact-modern .modern-form-wrapper input[type="text"],
    #featured-contact-modern .modern-form-wrapper input[type="email"],
    #featured-contact-modern .modern-form-wrapper textarea {
        padding: 10px 12px !important;
        font-size: 13px !important;
        margin-bottom: 12px !important;
    }

    /* Twin Fields Collapse to Stack */
    #featured-contact-modern .form-row-twin {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    /* Button Fitting */
    #featured-contact-modern .custom-submit-btn,
    #featured-contact-modern .modern-form-wrapper button[type="submit"] {
        padding: 4px 4px 4px 18px !important;
        height: 46px !important;
        font-size: 11px !important;
        letter-spacing: 1px !important;
    }

    #featured-contact-modern .custom-submit-btn i,
    #featured-contact-modern .modern-form-wrapper button[type="submit"] i {
        width: 34px !important;
        height: 34px !important;
        font-size: 12px !important;
    }
}













/* ==========================================================
   FEATURED SHOP SECTION
========================================================== */
#featured-shop {
    position: relative;
    padding: 80px 0;
    background-color: #f2f2ef;
    overflow: hidden;
}

#featured-shop .wn-featured-shop {
    position: relative;
    width: 100%;
    min-height: 430px;
    overflow: hidden;


    background-size: cover;
    background-position: center;

    font-family: inherit;
}


/* subtle paper texture */

#featured-shop .wn-featured-shop::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        radial-gradient(rgba(0, 0, 0, 0.055) 0.6px,
            transparent 0.6px);

    background-size: 5px 5px;

    opacity: 0.35;
    pointer-events: none;
}


#featured-shop .wn-shop-inner {
    position: relative;
    z-index: 2;

    display: flex;
    width: 100%;
    min-height: 430px;
}


/* ==========================================================
   LEFT PROMO
========================================================== */

#featured-shop .wn-shop-promo {
    position: relative;

    width: 31%;
    min-width: 320px;

    display: flex;
    align-items: center;

    padding: 55px 45px 55px 80px;

    background: rgba(242, 242, 239, 0.95);

    z-index: 5;
}


/* vertical collection */

#featured-shop .wn-shop-season {
    position: absolute;
    left: 25px;
    top: 50%;

    transform: translateY(-50%);

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 7px;

    font-size: 9px;
    font-weight: 700;

    text-align: center;
}


#featured-shop .wn-shop-season-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);

    letter-spacing: 1px;

    margin-bottom: 10px;
}


#featured-shop .wn-shop-season-line {
    width: 1px;
    height: 32px;

    background: #9c9c95;

    margin-bottom: 4px;
}


#featured-shop .wn-shop-season strong {
    font-size: 15px;
    line-height: 16px;

    color: var(--theme-color);
}


/* promo content */

#featured-shop .wn-shop-promo-content {
    width: 100%;
    max-width: 390px;
}


#featured-shop .wn-shop-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 10px;

    color: var(--theme-color);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1px;
}


#featured-shop .wn-shop-eyebrow span {
    width: 25px;
    height: 1px;

    background: #c4b27b;
}


/* heading */

#featured-shop .wn-shop-heading {
    margin: 0;

    color: #171717;

    font-size: clamp(32px, 3vw, 48px);
    font-weight: 900;

    line-height: 0.95;

    letter-spacing: -1.5px;

    text-transform: uppercase;
}


#featured-shop .wn-shop-heading span {
    display: block;

    margin-top: 5px;

    color: var(--theme-color);
}


#featured-shop .wn-shop-description {
    max-width: 270px;

    margin: 20px 0 25px;

    color: #676767;

    font-size: 12px;
    line-height: 1.65;
}


/* shop now */

#featured-shop .wn-shop-now {
    display: inline-flex;
    align-items: stretch;
    background: #111;
    color: #fff;
    text-decoration: none;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.7px;
    transition: all 0.25s ease;
}

#featured-shop .wn-shop-now span {
    display: flex;
    align-items: center;
    padding: 14px 18px;
}

#featured-shop .wn-shop-now b {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    background: var(--theme-color);
    color: #fff;
    font-size: 17px;
}

#featured-shop .wn-shop-now:hover {
    transform: translateY(-2px);
    color: #fff;
}


/* ==========================================================
   PRODUCTS AREA
========================================================== */

#featured-shop .wn-shop-products-area {
    position: relative;

    flex: 1;

    min-width: 0;

    padding: 30px 45px 35px 0;
}


/* top navigation */

#featured-shop .wn-shop-products-header {
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 18px;

    position: relative;

    z-index: 10;
}


#featured-shop .wn-shop-arrows {
    display: flex;
    gap: 8px;
}


#featured-shop .wn-shop-arrow {
    width: 30px;
    height: 30px;

    border: 0;
    border-radius: 50%;

    background: #e7e7e4;

    color: #171717;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 13px;

    transition: all 0.2s ease;
}


#featured-shop .wn-shop-arrow:hover {
    background: #111;
    color: #fff;
}


#featured-shop .wn-shop-next {
    background: #171717;
    color: #fff;
}


#featured-shop .wn-view-all {
    display: flex;
    align-items: center;
    gap: 10px;

    color: #171717;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 0.8px;

    text-decoration: none;
}


#featured-shop .wn-view-all span {
    width: 28px;
    height: 1px;

    background: var(--theme-color);
}


/* ==========================================================
   PRODUCT GRID
========================================================== */

#featured-shop .wn-shop-products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: 350px;
    margin-top: -2px;
}


/* ==========================================================
   INDIVIDUAL PRODUCT
========================================================== */

#featured-shop .wn-shop-product {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background: rgba(225, 225, 222, 0.75);
    clip-path: polygon(14% 0,
            100% 0,
            86% 100%,
            0 100%);
    transition: all 0.35s ease;
}


#featured-shop .wn-shop-product:hover {
    transform: translateY(-5px);
    z-index: 5;
}

#featured-shop .wn-product-card {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}


/* image */

#featured-shop .wn-product-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 25px 18px 5px;
    text-decoration: none;
}


#featured-shop .wn-product-image img {
    width: 100%;
    height: 225px;
    object-fit: contain;
    filter: drop-shadow(0 15px 10px rgba(0, 0, 0, 0.15));
    transition: transform 0.4s ease;
}


#featured-shop .wn-shop-product:hover .wn-product-image img {
    transform: scale(1.06) translateY(-5px);
}


/* product info */

#featured-shop .wn-product-info {
    padding: 0 25px 18px 25px;
    position: relative;
    z-index: 3;
}


#featured-shop .wn-product-category {
    margin-bottom: 3px;
    color: #676767;
    font-size: 7px;
    font-weight: 700;
    text-transform: uppercase;
}

#featured-shop .wn-product-category a {
    color: inherit;
    text-decoration: none;
}

#featured-shop .wn-product-title {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
    font-family: var(--ms-font-body);
}

#featured-shop .wn-product-title a {
    color: #171717;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    font-family: var(--ms-font-body);
}

#featured-shop .wn-product-bottom {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 7px;
    gap: 16px;
    padding-bottom: 8px;
}

#featured-shop .wn-product-bottom::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%;
    border-bottom: 1px solid var(--theme-color);

}

#featured-shop .wn-product-price {
    font-size: 12px;
    font-weight: 800;
    color: #171717;
}

#featured-shop .wn-product-price del {
    display: none;
}


#featured-shop .wn-product-price ins {
    text-decoration: none;
}


#featured-shop .wn-product-arrow {
    color: #171717;

    text-decoration: none;

    font-size: 16px;

    transition: transform 0.2s ease;
}


#featured-shop .wn-product-arrow:hover {
    transform: translateX(5px);

    color: var(--theme-color);
}


/* ==========================================================
   NO PRODUCTS
========================================================== */

#featured-shop .wn-no-products {
    padding: 80px 20px;

    text-align: center;

    color: #555;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1100px) {

    #featured-shop .wn-shop-promo {
        width: 34%;
        min-width: 290px;

        padding-left: 65px;
        padding-right: 25px;
    }

    #featured-shop .wn-shop-products-area {
        padding-right: 25px;
    }

    #featured-shop .wn-shop-products {
        grid-template-columns: repeat(3, 1fr);
    }

    #featured-shop .wn-shop-product-4 {
        display: none;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 767px) {

    #featured-shop .wn-shop-inner {
        display: block;
    }


    #featured-shop .wn-shop-promo {
        width: 100%;
        min-width: 0;
        min-height: 350px;
        padding: 55px 25px 45px 65px;
    }


    #featured-shop .wn-shop-season {
        left: 20px;
    }

    #featured-shop .wn-shop-products-area {
        padding: 20px 15px 35px;
        background: #e9e9e6;
    }

    #featured-shop .wn-shop-products-header {
        justify-content: space-between;
    }

    #featured-shop .wn-shop-products {
        grid-template-columns: repeat(2, 1fr);
        height: auto;
        gap: 5px;
        margin-top: 10px;
    }


    #featured-shop .wn-shop-product {
        min-height: 310px;
        clip-path: none;
        border-left: 0;
    }

    #featured-shop .wn-product-image {
        min-height: 210px;
        padding: 15px;
    }

    #featured-shop .wn-product-image img {
        height: 190px;
    }

    #featured-shop .wn-product-info {
        padding: 0 15px 18px;
    }

    #featured-shop .wn-shop-product-3,
    #featured-shop .wn-shop-product-4 {
        display: none;
    }

}


@media (max-width: 480px) {

    #featured-shop .wn-shop-heading {
        font-size: 34px;
    }


    #featured-shop .wn-shop-description {
        font-size: 11px;
    }


    #featured-shop .wn-shop-products {
        grid-template-columns: 1fr;
    }


    #featured-shop .wn-shop-product {
        min-height: 340px;
    }


    #featured-shop .wn-shop-product-3,
    #featured-shop .wn-shop-product-4 {
        display: block;
    }

}











/* //  ****************************
//  Woo Commeerce code start    //
//  ************************** // */
/* Woo Commerce Css*/
.woocommerce .variations input[type="radio"] {
    display: none;
}

.woocommerce div.product form.cart .variations .value label {
    padding: 0px 8px 0 8px;
    border: 1px solid #393438;
    border-radius: 5px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
    background-color: transparent !important;
}

.woocommerce-variation-add-to-cart {
    display: flex;
    align-items: center;
    gap: 10px;
}

.quantity {
    display: flex;
    align-items: center;
    position: relative;
    max-width: 120px;
}

.quantity input[type="number"] {
    text-align: center;
    width: 50px;
    height: 40px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.quantity-buttons {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 0;
    top: 0;
}

.quantity-buttons button {
    background: #e4e4e9;
    color: #819496;
    border: none;
    width: 30px;
    height: 20px;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
}

.quantity-buttons button.minus {
    border-top: 1px solid #fff;
}

.related.products ul.products {
    display: flex;
    /*    flex-wrap: wrap;*/
    justify-content: space-between;
}

.related.products ul.products li.product {
    width: 20%;
    /*  Adjust width based on columns  */
    margin-bottom: 20px;
}

#primary.single-product {
    width: 100%;
    float: none;
}


.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    /* / Adjust spacing between products / */
}

.woocommerce ul.products li.product {
    width: 100% !important;
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.woocommerce .related ul.products {
    grid-template-columns: repeat(4, 1fr) !important;
}

.product-main-content #primary {
    width: 100%;
    float: left;
}

/* / Responsive: 2 products per row on tablets / */
@media (max-width: 1024px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
    }

    .woocommerce .related ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* / Responsive: 1 product per row on mobile / */
@media (max-width: 768px) {

    .woocommerce ul.products,
    .woocommerce .related ul.products {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}

.product-main-content #primary {
    width: 100%;
    float: none;
}

.woocommerce-product-gallery .woocommerce-product-gallery__wrapper img {
    /* height: auto !important; */
    height: auto;
}

.woocommerce div.product div.images .flex-control-thumbs li {
    width: 29%;
    margin: 20px 10px 10px 10px;
}

.woocommerce div.product div.images .flex-control-thumbs li img {
    /* height: 120px; */
    width: 100%;
    height: 204px;
}

/* //  ****************************
//  Woo Commeerce code  end   //
//  ************************** // */


/* shop page side bar */
.woocommerce .widget_layered_nav_filters ul,
.woocommerce ul.product_list_widget,
#woocommerce_price_filter-2 form .price_slider_wrapper {
    padding: 0 30px !important;
}

/* Shop single page CSS */

#content .entry-content .woocommerce ol li {
    padding: 0;
    width: 100%;
}

.woocommerce div.product div.images .woocommerce-product-gallery__image img {
    width: 100% !important;
    height: 478px !important;
    object-fit: contain !important;
    border-radius: 10px;
}

.woocommerce-product-gallery__wrapper {
    width: 100% !important;
}

.woocommerce-product-gallery__image {
    width: 100% !important;
}

.woocommerce div.product div.images .flex-control-thumbs {
    display: flex !important;
    gap: 10px;
}

.woocommerce div.product div.images .flex-control-thumbs li {
    width: 29% !important;
    margin: 20px 10px 10px 0 !important;
}

.woocommerce div.product div.images .flex-control-thumbs li img {
    width: 100% !important;
    height: 160px !important;
    object-fit: cover !important;
    cursor: pointer;
}

#main .entry-content .woocommerce ol,
#secondary .entry-content .woocommerce ol {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

#main .entry-content .woocommerce .single-product section,
#secondary .entry-content .woocommerce .single-product section {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
}

#main .entry-content .woocommerce .single-product section h2,
#secondary .entry-content .woocommerce .single-product section h2 {
    text-align-last: center;
}

.woocommerce .custom-short-description p {
    margin: 12px 10px 12px 30px !important;
    font-family: var(--ms-font-body) !important;
    font-size: 18px !important;
    color: #2D2D2D !important;
    position: relative;
    /* Ensures relative positioning for absolute child */
}

.woocommerce .custom-short-description h5 {
    font-size: 18px;
    font-family: var(--ms-font-body) !important;
    letter-spacing: 0px;
    color: #2D2D2D;
    margin: 1rem 0 2.5rem 0;
}

.swatch-attribute_weight .variation-label span {
    display: contents !important;
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin-right: 5px;
    background-color: #f7f4eb;
}

.woocommerce div.product form.cart .reset_variations {
    color: #1E4543;
    background-color: var(--theme-color);
    padding: 4px 14px;
    margin: 0rem 1.5rem 0 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.swatch-attribute_pa_color .variation-label span.swatch-box {
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 14% !important;
    vertical-align: middle !important;
    margin-right: 5px !important;
}

.swatch-attribute_pa_color .variation-label {
    background: #F5F5F5;
    border-radius: 5px;
}

.woocommerce .custom-short-description p::before {
    content: '\f058';
    color: #1E4543;
    display: inline-block;
    width: 20px;
    /* Adjust as needed */
    height: 20px;
    /* Adjust as needed */
    font-family: 'Fontawesome';
    position: absolute;
    margin-left: -30px;
}

.woocommerce .product_meta {
    display: none;
}

.woocommerce div.product .woocommerce-tabs .panel {
    background-color: #f7f4eb;
    border-radius: 14px;
}

.woocommerce table.shop_attributes th {
    padding: 18px 30px 0 40px !important;
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
    display: none;
}

.woocommerce div.product .woocommerce-tabs .panel p {
    color: #2E2828 !important;
    padding: 0 25px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    margin-right: 20px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
.woocommerce div.product .woocommerce-tabs ul.tabs li:focus {
    background-color: #f7f4eb !important;
    color: #fff !important;
    border-radius: 7px;
}

/* Ensure the anchor text inside active tabs also changes color */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li:focus a {
    color: var(--theme-color) !important;
}

.price .woocommerce-Price-amount:nth-child(0) span {
    margin-left: 35px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
    display: none;
}

.woocommerce #content div.product div.images,
.woocommerce div.product div.images,
.woocommerce-page #content div.product div.images,
.woocommerce-page div.product div.images {
    width: 43.3%;
}

.woocommerce p.stars a::before {
    color: #ffa500;
}

/* Shop Page CSS */
.woocommerce div.product .product_title {
    font-size: 32px !important;
    font-family: var(--ms-font-body) !important;
    letter-spacing: 0px;
    color: #000000;
    text-align: left;
    margin-bottom: 32px;
}

.woocommerce .entry-summary .price {
    margin: 0px 0px 10px 0px !important;
}

.woocommerce div.product form.cart .variations th label,
.entry-summary .price strong,
.woocommerce-variation-add-to-cart .quantity-label {
    font-size: 16px !important;
    color: #1E4543;
    background: transparent linear-gradient(270deg, #1E454300 0%, rgba(6, 14, 13, 0.09) 100%) no-repeat;
    padding: 6px 16px;
    border-radius: 10px;
    text-transform: uppercase;
    font-family: var(--ms-font-body) !important;
}

.woocommerce .woocommerce-variation-price {
    margin-bottom: 12px;
    margin-top: -14px;
    display: none;
}

.woocommerce .star-rating span::before {
    content: "SSSSS";
    top: 0;
    position: absolute;
    left: 0;
    color: #ffa500;
}

.woocommerce .star-rating::before {
    content: "sssss";
    color: #cfc8d8;
    float: left;
    top: 0;
    left: 0;
    position: absolute;
    color: #ffa500;
}

.woocommerce ul.products li.product .star-rating,
.woocommerce ul.products li.product .button {
    display: none;
}

.woocommerce .quantity .qty {
    padding: 6px 10px 6px 0px !important;
    width: 4.631em;
    color: #1E4543;
    background-color: #f7f4eb;
    text-align: center;
    border-radius: 2px;
}

.quantity-buttons button.minus,
.quantity-buttons button.plus {
    background-color: #f7f4eb;
}

.woo-share-buttons strong {
    font-size: 26px;
    text-align: left;
    font-family: var(--ms-font-body) !important;
    letter-spacing: 0px;
    color: #000000;
}

.woo-share-buttons a svg {
    background-color: var(--theme-color);
    padding: 6px;
    font-size: 30px;
    border-radius: 4px;
    margin-left: 7px;
}

.woocommerce .svg-inline--fa {
    vertical-align: 0 !important;
}

.woocommerce div.product form.cart .value .variation-label {
    padding: 5px 14px !important;
}

.woocommerce div.product form.cart .variations tr:nth-child(1) td label {
    padding: 3px 5px 3px 5px !important;
    border: none;
}

.woocommerce div.product p.price {
    display: flex !important;
    align-items: center;
    gap: 10px;
}

.woocommerce div.product p.price ins {
    order: 1 !important;
}

.woocommerce div.product p.price del {
    order: 2 !important;
}

#main .woocommerce-variation-price .price {
    display: flex !important;
    align-items: center;
    gap: 10px;
}

/* Current price FIRST */
#main .woocommerce-variation-price .price ins {
    order: 1 !important;
    text-decoration: none !important;
}

/* Current price size */
#main .woocommerce-variation-price .price ins .woocommerce-Price-amount bdi {
    color: var(--theme-color) !important;
    font-size: 37px !important;
    font-weight: 700 !important;
}

/* Original price SECOND */
#main .woocommerce-variation-price .price del {
    order: 2 !important;
    text-decoration: none !important;
}

/* Original price */
#main .woocommerce-variation-price .price del .woocommerce-Price-amount bdi {
    color: #000 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    text-decoration: line-through !important;
}

#respond .comment-reply-title {
    padding: 10px 0 0 20px !important;
}

#comment-form-rating-label {
    padding-left: 20px !important;
}

.woocommerce .products ul::after,
.woocommerce .products ul::before,
.woocommerce ul.products::after,
.woocommerce ul.products::before,
#main .entry-content .woocommerce .products .onsale,
#secondary .entry-content .woocommerce .products li .onsale,
#main .entry-content .woocommerce ol li:before,
#secondary .entry-content .woocommerce ol li:before,
#main .entry-content .woocommerce ol li::after,
#secondary .entry-content .woocommerce ol li::after,
#content .container .product-main-content #primary #main .woocommerce-breadcrumb {
    display: none;
}

#main .entry-content .woocommerce ol li img,
#secondary .entry-content .woocommerce ol li img {
    width: 100%;
    height: 204px;
}

#main .entry-content .woocommerce-result-count {
    margin: 0;
}

.woocommerce .woocommerce-ordering select {
    border-radius: 21px;
    padding: 8px 8px 8px 15px;
    color: var(--theme-color);
    background-color: #f7f4eb;
}

.woocommerce ul.products li.product a img {
    width: 100%;
    height: 332px;
    border-top-left-radius: 11px;
    border-top-right-radius: 11px;
    margin: 0;
    padding: 20px 10px 10px 10px;
}

#primary #main .entry-content .columns-4 {
    column-count: unset;
}

#main .woocommerce .products li {
    width: 100%;
}

#main .woocommerce .products li .product_type_simple {
    display: none;
}

#main .entry-content .woocommerce ul li:before,
#secondary .entry-content .woocommerce ul li:before {
    display: none;
}

/* Ensure product items fit inside the grid */
#main .woocommerce .products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

#main .woocommerce section .products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.shop-main-content ul li a h2,
#content #main .product-type-variable ul li a h2 {
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    font-family: var(--ms-font-body) !important;
    letter-spacing: 0px;
    color: var(--theme-color) !important;
    margin-top: -1px;
    position: relative;
    padding: 18px 0;
    margin-bottom: -5px;
    width: 100%;
    z-index: 0;
}

#content .shop-main-content ul.products li.product strong,
ul.products li.product strong,
.woocommerce .products li .product_type_simple {
    display: none !important;
}

.entry-content .woocommerce a .price li a ins span,
#secondary .entry-content .woocommerce a .price li a ins span {
    display: inherit;
}

#content .shop-main-content a .price .amount bdi,
ul li a .price .amount bdi {
    font-size: 21px;
    text-align: center;
    font-family: var(--ms-font-body) !important;
    letter-spacing: 0px;
    color: var(--theme-color) !important;
    text-transform: capitalize;
}

.woocommerce ul.products li.product .price del {
    position: relative;
    display: inline-block;
    text-decoration: none !important;
    color: #a58a45 !important;
}

.woocommerce ul.products li.product .price del::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    background: #a58a45;
    transform: translateY(-50%);
    pointer-events: none;
}

.woocommerce ul.products li.product .price del span,
.woocommerce ul.products li.product .price del bdi {
    text-decoration: none !important;
    color: #a58a45 !important;

}

.woocommerce ul.products li.product .price ins {
    text-decoration: none !important;
}

.woocommerce ul.products li.product .price {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.woocommerce ul.products li.product .price del {
    order: 2 !important;

}

.woocommerce ul.products li.product .price del span bdi {
    font-size: 18px !important;
}

.woocommerce ul.products li.product .price ins {
    order: 1 !important;
    text-decoration: none !important;
}

.woocommerce ul.products li.product .price ins .amount,
.woocommerce ul.products li.product .price ins bdi {
    color: #a58a45 !important;
    text-decoration: none !important;
}

ul li .add_to_cart_button {
    display: none;
}

#content .shop-main-content ul.products li.product .price,
ul.products li.product .price {
    width: 100%;
    text-align-last: center;
    padding-bottom: 15px;
    border-bottom-left-radius: 11px;
    border-bottom-right-radius: 11px;
}

.woocommerce .products li {
    width: 100%;
}

.woocommerce section.related h1 {
    font-size: 30px;
    text-align: center;
    font-family: var(--ms-font-body) !important;
    font-weight: bold;
    letter-spacing: 0px;
    color: #000000;
    text-transform: uppercase;
}

.woocommerce section.related h2 {
    font-size: 50px;
    text-align: center;
    font-family: var(--ms-font-body) !important;
    font-weight: bold;
    letter-spacing: 0px;
    color: #000000;
    text-transform: uppercase;
    padding-bottom: 50px;
}

/* Product gallery */
.woocommerce-product-gallery__wrapper {
    position: relative !important;
}

.wc-block-cart .wc-block-cart__submit-container a {
    color: #0b0e14 !important;
}

.wc-block-components-product-metadata .wc-block-components-product-metadata__description>p {
    margin: 0 !important;
}

.wp-block-woocommerce-cart table td {
    padding: 8px !important;
}

/* Main gallery images */
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image {
    width: 100% !important;
}

/* Selected main image */
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img {
    width: 100% !important;
    height: 478px !important;
    object-fit: contain !important;
    border-radius: 10px;
}

/* Thumbnail */
.woocommerce div.product div.images .flex-control-thumbs {
    display: flex !important;
    gap: 10px !important;
}

.woocommerce div.product div.images .flex-control-thumbs li {
    width: 29% !important;
    margin: 20px 10px 10px 0 !important;
    cursor: pointer;
}

.woocommerce div.product div.images .flex-control-thumbs li img {
    width: 100% !important;
    height: 160px !important;
    object-fit: cover !important;
    cursor: pointer;
}

@media (max-width: 1160px) {
    .woocommerce div.product div.images .flex-control-thumbs li {
        width: 28% !important;
        margin: 15px 5px 5px 10px !important;
    }

    .woocommerce div.product div.images .flex-control-thumbs li img {
        height: 140px !important;
    }

    .woocommerce div.product .product_title {
        font-size: 26px !important;
    }

    .woocommerce div.product form.cart .value .variation-label {
        padding: 5px 10px !important;
        margin: 5px 0px 0 5px !important;
    }
}

/* Tablets - 2 columns */
@media (max-width: 1124px) {

    .woocommerce ul.products,
    .shop-main-content .woocommerce ul.products {
        display: grid;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px;
        /* Optional spacing */
    }
}

/* Mobile - 1 column */
@media (max-width: 768px) {

    .woocommerce ul.products,
    .woocommerce section .products {
        display: grid;
        grid-template-columns: repeat(1, 1fr) !important;
        gap: 20px;
        /* Optional spacing */
    }

    .woocommerce div.product .product_title {
        font-size: 18px !important;
    }

    .woocommerce div.product form.cart .value .variation-label {
        padding: 4px 7px !important;
    }

    .woocommerce #content div.product div.images,
    .woocommerce div.product div.images,
    .woocommerce-page #content div.product div.images,
    .woocommerce-page div.product div.images {
        width: 100%;
    }
}




.woocommerce-page table tr {
    background-color: transparent !important;

}

.woocommerce-page table tr {
    margin: 10px 0 0 0 !important;
}

.woocommerce-page table tr th {
    padding: 0 !important;
}

.woocommerce-page table tr td.value {
    display: flex !important;
}

.woocommerce div.product form.cart .variations td {
    padding: 6px !important;
    line-height: 1.5em !important;
    border: none !important;
}

.woocommerce div.product form.cart .variations {
    margin: 0 !important;
}

.woocommerce div.product form.cart .variations {
    border: none !important;
}

.woocommerce div.product form.cart .variations th label {
    margin-bottom: .7rem;
}



/* =========================================================
   WOOCOMMERCE SIDEBAR - CLEAN PROFESSIONAL FORMAT
   ========================================================= */

/* Sidebar overall */
.woocommerce .sidebar,
.woocommerce-page .sidebar,
.woocommerce .widget-area,
.woocommerce-page .widget-area {
    width: 100%;
}

/* Every sidebar widget */
.woocommerce .widget-area .widget,
.woocommerce-page .widget-area .widget {
    margin: 0 0 25px;
    padding: 25px 20px;
    background: #f8f5ed;
    border: 1px solid #e3dfd5;
}

/* Widget title */
.woocommerce .widget-area .widget-title,
.woocommerce-page .widget-area .widget-title {
    margin: 0 0 18px;
    padding: 0;
    color: #c09a52;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .5px;
    text-transform: uppercase;
}

/* =========================================================
   PRODUCT CATEGORIES
   ========================================================= */

.woocommerce .widget_product_categories ul,
.woocommerce-page .widget_product_categories ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.woocommerce .widget_product_categories ul li,
.woocommerce-page .widget_product_categories ul li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.woocommerce .widget_product_categories ul li a,
.woocommerce-page .widget_product_categories ul li a {
    display: block;
    padding: 5px 0;
    color: #111;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.woocommerce .widget_product_categories ul li a:hover,
.woocommerce-page .widget_product_categories ul li a:hover {
    color: #c09a52;
}


/* =========================================================
   PRODUCT SEARCH
   ========================================================= */

.woocommerce .widget_product_search form,
.woocommerce-page .widget_product_search form {
    display: flex;
    flex-wrap: nowrap;
    margin: 0;
}

.woocommerce .widget_product_search .search-field,
.woocommerce-page .widget_product_search .search-field {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #b99a60;
    border-radius: 0;
    background: #fff;
    color: #333;
    font-size: 14px;
    outline: none;
}

.woocommerce .widget_product_search .search-field:focus,
.woocommerce-page .widget_product_search .search-field:focus {
    border-color: #a67d29;
}

/* Hide WooCommerce search button if only input is required */
.woocommerce .widget_product_search button,
.woocommerce-page .widget_product_search button {
    display: none;
}


/* =========================================================
   RECENTLY VIEWED PRODUCTS
   ========================================================= */

.woocommerce .widget_recently_viewed_products ul.product_list_widget,
.woocommerce-page .widget_recently_viewed_products ul.product_list_widget,
.woocommerce .widget_top_rated_products ul.product_list_widget,
.woocommerce-page .widget_top_rated_products ul.product_list_widget {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Each product */
.woocommerce .widget_recently_viewed_products ul.product_list_widget li,
.woocommerce-page .widget_recently_viewed_products ul.product_list_widget li {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 58px;
    margin: 0;
    padding: 7px 0;
    border-bottom: 1px solid #ddd8ce;
}

/* Remove border from last item */
.woocommerce .widget_recently_viewed_products ul.product_list_widget li:last-child,
.woocommerce-page .widget_recently_viewed_products ul.product_list_widget li:last-child {
    border-bottom: 0;
}

/* Product image */
.woocommerce .widget_recently_viewed_products ul.product_list_widget li img,
.woocommerce-page .widget_recently_viewed_products ul.product_list_widget li img {
    float: none;
    width: 45px;
    height: 55px;
    margin: 0 12px 0 0;
    object-fit: cover;
}

/* Product name */
.woocommerce .widget_recently_viewed_products ul.product_list_widget li a,
.woocommerce-page .widget_recently_viewed_products ul.product_list_widget li a {
    display: block;
    flex: 1;
    margin: 0;
    padding: 0;
    color: #111;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
}

/* Price */
.woocommerce .widget_recently_viewed_products ul.product_list_widget li .woocommerce-Price-amount,
.woocommerce-page .widget_recently_viewed_products ul.product_list_widget li .woocommerce-Price-amount {
    color: #222;
    font-size: 12px;
    font-weight: 500;
}

/* Price wrapper */
.woocommerce .widget_recently_viewed_products ul.product_list_widget li .product-title+.woocommerce-Price-amount,
.woocommerce-page .widget_recently_viewed_products ul.product_list_widget li .product-title+.woocommerce-Price-amount {
    margin-left: 5px;
}


/* =========================================================
   FILTER BY PRICE
   ========================================================= */

.woocommerce .widget_price_filter .price_slider_wrapper,
.woocommerce-page .widget_price_filter .price_slider_wrapper {
    padding: 5px 0 0;
}

/* Slider */
.woocommerce .widget_price_filter .ui-slider {
    height: 5px;
    margin: 12px 8px 20px;
    border: 0;
    border-radius: 5px;
    background: #ddd;
}

/* Slider selected area */
.woocommerce .widget_price_filter .ui-slider .ui-slider-range {
    background: #8b4eb8;
    border-radius: 5px;
}

/* Slider handles */
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle {
    top: -5px;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    border: 0;
    border-radius: 50%;
    background: #8b4eb8;
    cursor: pointer;
}

/* Filter button + price */
.woocommerce .widget_price_filter .price_slider_amount,
.woocommerce-page .widget_price_filter .price_slider_amount {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* Filter button */
.woocommerce .widget_price_filter .button,
.woocommerce-page .widget_price_filter .button {
    padding: 8px 14px;
    border: 0;
    border-radius: 3px;
    background: #eeeef4;
    color: #555;
    font-size: 13px;
    font-weight: 700;
    text-transform: none;
}

.woocommerce .widget_price_filter .button:hover,
.woocommerce-page .widget_price_filter .button:hover {
    background: #8b4eb8;
    color: #fff;
}

/* Price text */
.woocommerce .widget_price_filter .price_label,
.woocommerce-page .widget_price_filter .price_label {
    color: #555;
    font-size: 13px;
    white-space: nowrap;
}


/* =========================================================
   GENERAL SIDEBAR LINKS
   ========================================================= */

.woocommerce .widget-area a,
.woocommerce-page .widget-area a {
    transition: all .2s ease;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .woocommerce .widget-area .widget,
    .woocommerce-page .widget-area .widget {
        margin-bottom: 18px;
        padding: 20px 16px;
    }

    .woocommerce .widget-area .widget-title,
    .woocommerce-page .widget-area .widget-title {
        font-size: 14px;
    }

    .woocommerce .widget_recently_viewed_products ul.product_list_widget li img,
    .woocommerce-page .widget_recently_viewed_products ul.product_list_widget li img {
        width: 42px;
        height: 50px;
    }

    .woocommerce .widget_recently_viewed_products ul.product_list_widget li a,
    .woocommerce-page .widget_recently_viewed_products ul.product_list_widget li a {
        font-size: 12px;
    }

}

/* =========================================================
   WOOCOMMERCE MY ACCOUNT
   ========================================================= */

.woocommerce-account .woocommerce {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 30px;
    max-width: 1200px;
    margin: 50px auto;
    padding: 0 20px;
}


/* =========================================================
   MY ACCOUNT SIDEBAR
   ========================================================= */

.woocommerce-account .woocommerce-MyAccount-navigation {
    width: 100%;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    padding: 10px;
    height: fit-content;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #eeeeee;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child {
    border-bottom: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 14px 15px;

    color: #333;
    background: transparent;

    font-size: 14px;
    font-weight: 500;

    text-decoration: none;

    border-radius: 7px;

    transition: all 0.3s ease;
}


/* Hover */

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    color: #fff;
    background: #918342;
}


/* Active */

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active>a {
    color: #fff;
    background: #918342;
    font-weight: 600;
}


/* =========================================================
   ACCOUNT CONTENT
   ========================================================= */

.woocommerce-account .woocommerce-MyAccount-content {
    width: 100%;
    background: #fff;

    border: 1px solid #e8e8e8;
    border-radius: 10px;

    padding: 30px;

    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.woocommerce-account .woocommerce-MyAccount-content p {
    color: #555;
    font-size: 15px;
    line-height: 1.7;
}

.woocommerce-account .woocommerce-MyAccount-content a {
    color: #918342;
    text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-content a:hover {
    text-decoration: underline;
}


/* =========================================================
   HEADINGS
   ========================================================= */

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
    color: #222;
    font-weight: 600;
    margin-bottom: 20px;
}


/* =========================================================
   TABLES
   ========================================================= */

.woocommerce-account .woocommerce-orders-table,
.woocommerce-account .woocommerce-table {
    width: 100%;
    border-collapse: collapse;
}

.woocommerce-account .woocommerce-orders-table th,
.woocommerce-account .woocommerce-orders-table td,
.woocommerce-account .woocommerce-table th,
.woocommerce-account .woocommerce-table td {
    padding: 14px;
    border-bottom: 1px solid #eee;
    text-align: left;
}

.woocommerce-account .woocommerce-orders-table th,
.woocommerce-account .woocommerce-table th {
    color: #222;
    font-size: 13px;
    font-weight: 600;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.woocommerce-account .button,
.woocommerce-account button,
.woocommerce-account input[type="submit"] {
    display: inline-block;

    padding: 11px 20px;

    border: 0;
    border-radius: 6px;

    background: #918342;
    color: #fff !important;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;
}

.woocommerce-account .button:hover,
.woocommerce-account button:hover,
.woocommerce-account input[type="submit"]:hover {
    background: #2c352e;
    color: #fff !important;
}


/* =========================================================
   FORM FIELDS
   ========================================================= */

.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content select,
.woocommerce-account .woocommerce-MyAccount-content textarea {
    width: 100%;
    padding: 12px 14px;

    border: 1px solid #ddd;
    border-radius: 6px;

    background: #fff;

    font-size: 14px;

    outline: none;

    transition: border-color 0.3s ease;
}

.woocommerce-account .woocommerce-MyAccount-content input:focus,
.woocommerce-account .woocommerce-MyAccount-content select:focus,
.woocommerce-account .woocommerce-MyAccount-content textarea:focus {
    border-color: #918342;
}


/* =========================================================
   DASHBOARD NOTICE
   ========================================================= */

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message {
    border-top-color: #918342;
    background: #f8f7f2;
    color: #333;
}


/* =========================================================
   RESPONSIVE TABLET
   ========================================================= */

@media (max-width: 991px) {

    .woocommerce-account .woocommerce {
        grid-template-columns: 210px 1fr;
        gap: 20px;
    }

    .woocommerce-account .woocommerce-MyAccount-content {
        padding: 22px;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
        padding: 12px;
        font-size: 13px;
    }
}


/* =========================================================
   RESPONSIVE MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .woocommerce-account .woocommerce {
        display: block;
        margin: 30px auto;
        padding: 0 15px;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation {
        margin-bottom: 20px;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul li {
        border: 0;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
        padding: 10px 12px;
        border: 1px solid #e5e5e5;
        font-size: 12px;
    }

    .woocommerce-account .woocommerce-MyAccount-content {
        padding: 20px 15px;
    }

    .woocommerce-account .woocommerce-orders-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

.woocommerce-account .woocommerce::after,
.woocommerce-account .woocommerce::before {
    display: none;
}



/* ==========================================================================
   Contact Page - supplied design
   ========================================================================== */

.webnotick-contact-page {
    --contact-gold: #a47a20;
    --contact-gold-dark: #8d681b;
    --contact-black: #101010;
    --contact-text: #222;
    --contact-border: #e4e0d8;
    --contact-soft: #f5f3ef;
    --contact-white: #fff;

    position: relative;
    overflow: hidden;
    color: var(--contact-text);
    font-family: inherit;
}

.webnotick-contact-page *,
.webnotick-contact-page *::before,
.webnotick-contact-page *::after {
    box-sizing: border-box;
}

.webnotick-contact-page .contact-main {
    position: relative;
    overflow: hidden;
}

.webnotick-contact-page .contact-layout {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1400px;
    min-height: 760px;
    margin: 0 auto;
}

/* Left content */
.webnotick-contact-page .contact-content {
    position: relative;
    z-index: 5;
    width: 48%;
    padding: 10px;
}

.webnotick-contact-page .contact-breadcrumb {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 28px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.webnotick-contact-page .contact-breadcrumb a {
    color: #161616;
    text-decoration: none;
}

.webnotick-contact-page .contact-breadcrumb .separator {
    color: #777;
    font-size: 18px;
}

.webnotick-contact-page .contact-breadcrumb .current {
    color: var(--contact-gold);
}

.webnotick-contact-page .contact-title {
    margin: 0;
    color: var(--contact-black);
    font-size: clamp(36px, 3.6vw, 55px);
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: -.035em;
    text-transform: uppercase;
}

.webnotick-contact-page .contact-title span {
    display: block;
    color: var(--contact-gold);
}

.webnotick-contact-page .gold-line {
    width: 72px;
    height: 3px;
    margin: 24px 0 25px;
    border: 0;
    background: var(--contact-gold);
}

.webnotick-contact-page .gold-line::after {
    content: "";
    display: block;
    width: 22px;
    height: 1px;
    margin-left: 72px;
    margin-top: 1px;
    background: #d1b36c;
}

.webnotick-contact-page .contact-intro {
    max-width: 540px;
    margin: 0 0 48px;
    color: #333;
    font-size: 16px;
    line-height: 1.8;
}

/* Information grid */
.webnotick-contact-page .contact-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 28px;
    max-width: 610px;
    padding-top: 25px;
    border-top: 1px solid #ddd;
}

.webnotick-contact-page .contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.webnotick-contact-page .contact-info-icon {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f1eee8;
    color: var(--contact-gold);
    font-size: 23px;
}

.webnotick-contact-page .contact-info-text h3 {
    margin: 0 0 9px;
    color: var(--contact-gold-dark);
    font-size: 15px;
    line-height: 1.2;
    font-weight: 800;
    text-transform: uppercase;
}

.webnotick-contact-page .contact-info-text p {
    margin: 0;
    color: #222;
    font-size: 14px;
    line-height: 1.75;
}

.webnotick-contact-page .contact-info-text a {
    color: #222;
    text-decoration: none;
}

.webnotick-contact-page .contact-info-text a:hover {
    color: var(--contact-gold);
}

/* Social */
.webnotick-contact-page .contact-social {
    margin-top: 55px;
}

.webnotick-contact-page .contact-social-heading {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 18px;
}

.webnotick-contact-page .contact-social-heading h3 {
    flex: 0 0 auto;
    margin: 0;
    color: var(--contact-gold-dark);
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
}

.webnotick-contact-page .contact-social-heading span {
    display: block;
    width: 190px;
    height: 1px;
    background: #cfc9bd;
}

.webnotick-contact-page .contact-social-links {
    display: flex;
    gap: 14px;
}

.webnotick-contact-page .contact-social-links a {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #bda875;
    border-radius: 50%;
    color: var(--contact-gold-dark);
    font-size: 14px;
    text-decoration: none;
    transition: .25s ease;
}

.webnotick-contact-page .contact-social-links a:hover {
    background: var(--contact-gold);
    border-color: var(--contact-gold);
    color: #fff;
}

/* Image area */
.webnotick-contact-page .contact-image-wrap {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0%;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* clip-path: polygon(21% 0, 100% 0, 100% 100%, 0 100%); */
    clip-path: polygon(46% 65%, 60% 0, 94% 0, 71% 100%, 47% 100%, 54% 65%);
}

.webnotick-contact-page .contact-image-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, .08) 0%,
            rgba(0, 0, 0, .02) 45%,
            rgba(0, 0, 0, .14) 100%);
    pointer-events: none;
}

.webnotick-contact-page .contact-image {
    width: 100%;
    height: 100%;
    min-height: 760px;
    display: block;
    object-fit: cover;
    object-position: center center;
}

/* Form card */
.webnotick-contact-page .contact-form-card {
    position: absolute;
    z-index: 10;
    top: 215px;
    right: 0;
    width: 410px;
    min-height: 465px;
    padding: 34px 40px 38px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 16px 42px rgba(0, 0, 0, .10);
}

.webnotick-contact-page .contact-form-title {
    margin: 0;
    color: var(--contact-black);
    font-size: 24px;
    line-height: 1.2;
    font-weight: 900;
    text-transform: uppercase;
}

.webnotick-contact-page .form-title-line {
    width: 45px;
    height: 2px;
    margin: 13px 0 22px;
    border: 0;
    background: var(--contact-gold);
}

.webnotick-contact-page .contact-form-card form {
    margin: 0;
}

/* =========================================================
   CONTACT FORM - NAME + EMAIL SAME ROW
   ========================================================= */

.custom-contact-form .form-row-twin {
    display: flex;
    gap: 20px;
    width: 100%;
}

.custom-contact-form .form-row-twin .form-group {
    flex: 1;
    width: 50%;
}

.custom-contact-form .form-group p {
    margin: 0;
}

.custom-contact-form .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

.custom-contact-form input,
.custom-contact-form textarea {
    width: 100%;
    box-sizing: border-box;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .custom-contact-form .form-row-twin {
        display: block;
    }

    .custom-contact-form .form-row-twin .form-group {
        width: 100%;
        margin-bottom: 20px;
    }
}

.webnotick-contact-page .contact-form-card input,
.webnotick-contact-page .contact-form-card textarea,
.webnotick-contact-page .contact-form-card select {
    width: 100%;
    border: 1px solid #dedede;
    border-radius: 0;
    outline: none;
    background: #fff;
    color: #222;
    box-shadow: none;
    font-size: 14px;
    font-family: inherit;
}

.webnotick-contact-page .contact-form-card input,
.webnotick-contact-page .contact-form-card select {
    height: 48px;
    padding: 0 16px;
}

.webnotick-contact-page .contact-form-card textarea {
    height: 100px !important;
    padding: 14px 16px;
    resize: vertical;
}

.webnotick-contact-page .contact-form-card input:focus,
.webnotick-contact-page .contact-form-card textarea:focus,
.webnotick-contact-page .contact-form-card select:focus {
    border-color: var(--contact-gold);
}

.webnotick-contact-page .contact-form-card input::placeholder,
.webnotick-contact-page .contact-form-card textarea::placeholder {
    color: #8d8d8d;
}

.webnotick-contact-page .contact-form-card .wpcf7-form-control-wrap {
    display: block;
    margin-bottom: 14px;
}

.webnotick-contact-page .contact-form-card .wpcf7-not-valid-tip {
    margin-top: 4px;
    font-size: 12px;
}

.webnotick-contact-page .contact-form-card .wpcf7-submit {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    margin-top: 8px;
    padding: 0 48px 0 20px;
    border: 0;
    border-radius: 0;
    background: var(--contact-gold);
    color: #fff;
    font-size: 14px;
    gap: 7px;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
    transition: .25s ease;
}

.webnotick-contact-page .contact-form-card .wpcf7-submit:hover {
    background: var(--contact-gold-dark);
}

/* Adds an arrow after Contact Form 7 submit button */
.webnotick-contact-page .contact-submit-wrap {
    position: relative;
}

.webnotick-contact-page .contact-submit-wrap::after {
    content: "\2192";
    position: absolute;
    right: 18px;
    top: 50%;
    z-index: 2;
    color: #fff;
    font-size: 23px;
    line-height: 1;
    transform: translateY(-50%);
    pointer-events: none;
}

/* Bottom service strip */
.webnotick-contact-page .contact-feature-strip {
    position: relative;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid #e1ddd4;
}

.webnotick-contact-page .contact-feature {
    min-height: 125px;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 25px 42px;
}

.webnotick-contact-page .contact-feature+.contact-feature {
    border-left: 1px solid #ddd7cb;
}

.webnotick-contact-page .contact-feature-icon {
    flex: 0 0 58px;
    width: 58px;
    color: var(--contact-gold);
    font-size: 42px;
    text-align: center;
}

.webnotick-contact-page .contact-feature h3 {
    margin: 0 0 7px;
    color: var(--contact-gold-dark);
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
}

.webnotick-contact-page .contact-feature p {
    margin: 0;
    color: #333;
    font-size: 13px;
    line-height: 1.65;
}

/* Tablet */
@media (max-width: 1199px) {
    .webnotick-contact-page .contact-main {
        min-height: auto;
        padding: 50px 30px 80px;
    }

    .webnotick-contact-page .contact-layout {
        min-height: 800px;
    }

    .webnotick-contact-page .contact-content {
        width: 54%;
        padding-left: 5%;
    }

    .webnotick-contact-page .contact-image-wrap {
        right: 16%;
        width: 55%;
    }

    .webnotick-contact-page .contact-form-card {
        width: 390px;
    }

    .webnotick-contact-page .contact-feature {
        padding: 22px 25px;
    }
}

/* Mobile */
@media (max-width: 991px) {
    .webnotick-contact-page .contact-main {
        padding: 45px 20px 50px;
    }

    .webnotick-contact-page .contact-layout {
        min-height: auto;
        display: flex;
        flex-direction: column;
    }

    .webnotick-contact-page .contact-content {
        width: 100%;
        padding: 0 10px 40px;
    }

    .webnotick-contact-page .contact-title {
        max-width: 650px;
    }

    .webnotick-contact-page .contact-intro {
        max-width: 650px;
    }

    .webnotick-contact-page .contact-info-grid {
        max-width: 700px;
    }

    .webnotick-contact-page .contact-image-wrap {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        height: 520px;
        min-height: 520px;
        clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%);
    }

    .webnotick-contact-page .contact-image {
        min-height: 520px;
    }

    .webnotick-contact-page .contact-form-card {
        position: relative;
        top: auto;
        right: auto;
        width: calc(100% - 35px);
        max-width: 500px;
        margin: -130px 15px 0 auto;
    }

    .webnotick-contact-page .contact-feature-strip {
        width: calc(100% - 40px);
        margin: 0 auto 35px;
        grid-template-columns: 1fr;
    }

    .webnotick-contact-page .contact-feature+.contact-feature {
        border-left: 0;
        border-top: 1px solid #ddd7cb;
    }
}

@media (max-width: 600px) {
    .webnotick-contact-page .contact-main {
        padding: 35px 15px 35px;
    }

    .webnotick-contact-page .contact-breadcrumb {
        font-size: 12px;
    }

    .webnotick-contact-page .contact-title {
        font-size: 39px;
    }

    .webnotick-contact-page .contact-intro {
        font-size: 14px;
        line-height: 1.7;
        margin-bottom: 30px;
    }

    .webnotick-contact-page .contact-info-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .webnotick-contact-page .contact-social {
        margin-top: 35px;
    }

    .webnotick-contact-page .contact-social-heading span {
        width: 80px;
    }

    .webnotick-contact-page .contact-image-wrap {
        height: 400px;
        min-height: 400px;
        clip-path: none;
    }

    .webnotick-contact-page .contact-image {
        min-height: 400px;
    }

    .webnotick-contact-page .contact-form-card {
        width: calc(100% - 20px);
        margin: -70px 10px 0;
        padding: 28px 22px 30px;
    }

    .webnotick-contact-page .contact-form-title {
        font-size: 21px;
    }

    .webnotick-contact-page .contact-feature-strip {
        width: calc(100% - 20px);
    }

    .webnotick-contact-page .contact-feature {
        min-height: 110px;
        padding: 20px;
        gap: 15px;
    }

    .webnotick-contact-page .contact-feature-icon {
        flex-basis: 45px;
        width: 45px;
        font-size: 32px;
    }

    #comments {
        padding: .5rem;
    }
}





















/* ==========================================================================
   MATCH TICKETS SYSTEM (NO SHIPPING FLOW STYLES)
   ========================================================================== */
/* ==========================================================
   MATCH TICKETS - PREMIUM CREAM & GOLD DESIGN
   ========================================================== */

.match-tickets-page-wrapper {
    background: #f8f5ed !important;
    color: #0b0e14 !important;
    min-height: 100vh;
    padding-bottom: 80px;
    font-family: var(--font-body);
}

/* ==========================================================
   HERO
   ========================================================== */

.tickets-hero-header {
    background:
        radial-gradient(circle at 15% 10%,
            rgba(224, 169, 43, 0.08),
            transparent 30%),
        radial-gradient(circle at 85% 15%,
            rgba(224, 169, 43, 0.08),
            transparent 30%),
        #f8f5ed !important;

    border: 0 !important;
    padding: 65px 20px 45px;
    text-align: center;
}

.tickets-hero-container {
    max-width: 1100px;
    margin: auto;
}

.tickets-hero-header .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    background: #fffaf0 !important;
    color: #a27c2e !important;

    border: 1px solid #c7a451 !important;

    padding: 8px 20px;
    border-radius: 50px;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 1px;
    text-transform: uppercase;

    margin-bottom: 22px;
}

.tickets-hero-header .hero-title {
    font-family: var(--font-heading);

    font-size: clamp(36px, 5vw, 58px);

    line-height: 1.05;

    font-weight: 900;

    color: #080b10 !important;

    text-transform: uppercase;

    margin: 0 0 18px;

    letter-spacing: -1px;
}

.tickets-hero-header .hero-description {
    max-width: 850px;

    margin: auto;

    font-size: 17px;

    line-height: 1.6;

    color: #91a2b5 !important;
}

/* ==========================================================
   MAIN CONTAINER
   ========================================================== */

.tickets-container {
    max-width: 1200px;

    margin: 30px auto 0;

    padding: 0 20px;
}

/* ==========================================================
   UPCOMING TITLE
   ========================================================== */

.fixtures-list-title {
    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 25px;

    font-weight: 900;

    color: #080b10 !important;

    text-transform: uppercase;

    margin: 0 0 25px;
}

.fixtures-list-title i {
    color: #c0922e !important;
}

/* ==========================================================
   MATCH LIST
   ========================================================== */

.match-ticket-cards-grid {
    display: flex;

    flex-direction: column;

    gap: 20px;
}

/* ==========================================================
   MATCH CARD
   ========================================================== */

.match-ticket-card {
    position: relative;

    display: flex;

    align-items: center;

    background: #ffffff !important;

    border: 1px solid #e2d3ac !important;

    border-radius: 14px;

    padding: 25px 28px;

    gap: 25px;

    overflow: hidden;

    box-shadow:
        0 7px 25px rgba(26, 31, 38, 0.06);

    transition: all 0.3s ease;
}

/* Gold top accent */

.match-ticket-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 35px;
    right: 35px;

    height: 3px;

    background: linear-gradient(90deg,
            transparent,
            #d2a33a,
            transparent);
}

/* Right decorative gold corner */

.match-ticket-card::after {
    content: "★";

    position: absolute;

    right: 0;
    top: 0;

    width: 42px;
    height: 52px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #d4a63b;

    color: #ffffff;

    font-size: 17px;

    clip-path: polygon(0 0,
            100% 0,
            100% 100%,
            50% 82%,
            0 100%);
}

.match-ticket-card:hover {
    transform: translateY(-4px);

    border-color: #c49a42 !important;

    box-shadow:
        0 15px 35px rgba(26, 31, 38, 0.10);
}

/* ==========================================================
   DATE BOX
   ========================================================== */

.card-date-badge {
    width: 100px;
    min-width: 100px;
    height: 100px;

    padding: 0 !important;

    /* display: flex !important; */
    /* flex-direction: column; */
    align-items: center;
    justify-content: center;

    background: #ffffff !important;
    border: 1px solid #d2a33a !important;
    border-radius: 13px;
    overflow: hidden;

    box-shadow: 0 4px 12px rgba(210, 163, 58, 0.12);
}

.card-date-badge .month {
    width: 100%;

    display: block;

    background: #d2a33a;

    color: #ffffff !important;

    text-align: center;

    padding: 11px 0;

    font-size: 13px;

    font-weight: 900;

    letter-spacing: 1px;

    text-transform: uppercase;
}

.card-date-badge .day {
    display: block;
    text-align: center;
    font-size: 34px;

    font-weight: 900;

    color: #080b10 !important;

    line-height: 1;

    margin-top: 8px;
}

/* ==========================================================
   MATCH INFORMATION
   ========================================================== */

.card-match-info {
    flex: 1;

    min-width: 0;
}

.card-match-info .competition-tag {
    display: block;

    font-size: 12px;

    font-weight: 800;

    color: #bd8c29 !important;

    letter-spacing: 1px;

    text-transform: uppercase;

    margin-bottom: 5px;
}

.card-match-info .teams {
    font-size: 23px;

    font-weight: 900;

    color: #080b10 !important;

    line-height: 1.25;

    margin: 0 0 9px;
}

.card-match-info .teams .vs {
    color: #bd8c29 !important;

    font-size: 14px;

    margin: 0 5px;
}

.card-match-info .venue {
    font-size: 14px;

    color: #93a1b1 !important;

    margin: 0 0 9px;
}

.card-match-info .venue i {
    color: #d19d2e !important;

    margin-right: 4px;
}

/* Available seats */

.card-match-info .available-seats,
.match-ticket-card .seat-available {
    font-size: 14px;

    color: #22b978 !important;

    font-weight: 500;
}

.card-match-info .available-seats i,
.match-ticket-card .seat-available i {
    color: #22b978 !important;

    margin-right: 5px;
}

/* ==========================================================
   PRICE / CTA
   ========================================================== */

.card-ticket-cta {
    display: block;

    align-items: center;

    gap: 25px;

    padding-left: 30px;

    padding-right: 15px;

    border-left: 1px solid #e5ddcb;
}

.card-ticket-cta .price-from {
    min-width: 90px;

    text-align: center;

    font-size: 13px;

    color: #8997a8 !important;

    line-height: 1.2;
}

.card-ticket-cta .price-from strong {
    display: block;

    margin-top: 5px;

    font-size: 20px;

    font-weight: 900;

    color: #080b10 !important;
}

/* ==========================================================
   BOOK TICKET
   ========================================================== */

.btn-select-seats {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 150px;
    background: #ffffff !important;
    color: #a37b24 !important;
    border: 2px solid #a37b24 !important;
    border-radius: 50px !important;
    padding: 7px 22px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .3px;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: all .3s ease !important;
    margin-top: 10px;
}

.btn-select-seats:hover {
    background: #a37b24 !important;

    color: #ffffff !important;

    border-color: #a37b24 !important;

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(163, 123, 36, .25);
}

.btn-select-seats i {
    color: inherit !important;
}

/* ==========================================================
   BOOKING SECTION
   ========================================================== */

.webnotick-ticket-booking-wrapper {
    background: #ffffff !important;

    border: 1px solid #dfd4bc !important;

    border-radius: 14px;

    overflow: hidden;

    box-shadow:
        0 8px 30px rgba(20, 25, 30, .06);

    margin-bottom: 50px;
}

.ticket-header-banner {
    background:
        linear-gradient(135deg,
            #fffdf8,
            #f7f2e7) !important;

    padding: 30px;

    border-bottom: 1px solid #e3dac8;

    position: relative;
}

.ticket-match-badge {
    display: inline-block;

    background: #c5962f !important;

    color: #ffffff !important;

    padding: 6px 12px;

    border-radius: 5px;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;
}

.ticket-match-title {
    font-size: 32px;

    font-weight: 900;

    color: #080b10 !important;

    margin: 12px 0;
}

.ticket-match-meta {
    display: flex;

    flex-wrap: wrap;

    gap: 20px;

    color: #8d9bab !important;

    font-size: 14px;
}

.ticket-match-meta i {
    color: #c5962f !important;

    margin-right: 5px;
}

/* ==========================================================
   FORM
   ========================================================== */

.webnotick-ticket-form {
    padding: 30px;
}

.ticket-step-block {
    margin-bottom: 35px;
}

.step-title {
    display: flex;

    align-items: center;

    gap: 12px;

    color: #080b10 !important;

    font-size: 18px;

    font-weight: 900;

    text-transform: uppercase;

    margin-bottom: 20px;
}

.step-title .step-num {
    width: 30px;
    height: 30px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    background: #c5962f !important;

    color: #ffffff !important;

    border-radius: 50%;

    font-size: 13px;

    font-weight: 900;
}

/* ==========================================================
   TICKET TYPE
   ========================================================== */

.ticket-type-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(240px, 1fr));

    gap: 15px;
}

.ticket-type-card {
    background: #ffffff !important;

    border: 2px solid #ded6c6 !important;

    border-radius: 10px;

    padding: 20px;

    transition: all .25s ease;
}

.ticket-type-card:hover {
    border-color: #c5962f !important;

    transform: translateY(-3px);

    box-shadow:
        0 8px 20px rgba(20, 25, 30, .07);
}

.ticket-type-card.active {
    background: #fffaf0 !important;

    border-color: #c5962f !important;
}

.ticket-type-card .type-name {
    color: #080b10 !important;

    font-weight: 800;
}

.ticket-type-card .type-desc {
    color: #8997a8 !important;
}

.ticket-type-card .type-price {
    color: #b18227 !important;

    font-size: 21px;

    font-weight: 900;
}

/* ==========================================================
   SEAT SELECTION
   ========================================================== */

.seat-selection-container {
    background: #ffffff !important;

    border: 1px solid #ded6c6 !important;

    border-radius: 10px;

    padding: 24px;
}

.control-group label {
    color: #303944 !important;

    font-weight: 700;
}

.seat-select-input {
    width: 100%;

    background: #ffffff !important;

    color: #0b0e14 !important;

    border: 1px solid #ccd3da !important;

    padding: 11px 14px;

    border-radius: 7px;

    outline: none;
}

.seat-select-input:focus {
    border-color: #c5962f !important;

    box-shadow:
        0 0 0 3px rgba(197, 150, 47, .10);
}

.seat-select-input option {
    background: #ffffff;

    color: #0b0e14;
}

.seat-visual-summary {
    background: #fffaf0 !important;

    border: 1px dashed #c5962f !important;

    padding: 15px 20px;

    border-radius: 8px;
}

.summary-details .summary-label {
    color: #8997a8 !important;
}

.summary-details strong {
    color: #080b10 !important;
}

/* ==========================================================
   ACTION BAR
   ========================================================== */

.ticket-action-bar {
    background: #faf7ef !important;

    border-top: 1px solid #e1d9c8;

    padding: 25px 30px;

    margin: 30px -30px -30px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    flex-wrap: wrap;
}

.ticket-total-display .total-label {
    color: #8997a8 !important;
}

.ticket-total-display .total-amount {
    color: #b18227 !important;

    font-size: 32px;

    font-weight: 900;
}

/* ==========================================================
   BUY BUTTON
   ========================================================== */

.btn-buy-ticket {
    background: #c5962f !important;

    color: #ffffff !important;

    border: none !important;

    border-radius: 50px !important;

    padding: 14px 30px !important;

    font-size: 16px !important;

    font-weight: 800 !important;

    transition: all .3s ease !important;
}

.btn-buy-ticket:hover {
    background: #9e7827 !important;

    color: #ffffff !important;

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(197, 150, 47, .25);
}

/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 768px) {

    .tickets-hero-header {
        padding: 50px 20px 35px;
    }

    .tickets-container {
        padding: 0 15px;
    }

    .fixtures-list-title {
        font-size: 21px;
    }

    .match-ticket-card {
        flex-direction: column;

        align-items: stretch;

        padding: 20px;

        gap: 18px;
    }

    .card-date-badge {
        width: 80px;

        min-width: 80px;

        height: 85px;
    }

    .card-date-badge .day {
        font-size: 27px;
    }

    .card-match-info .teams {
        font-size: 19px;
    }

    .card-ticket-cta {
        width: 100%;
        border-left: none;
        border-top: 1px solid #e5ddcb;
        padding: 18px 0 0;
    }

    .ticket-action-bar {
        flex-direction: column;

        align-items: stretch;

        text-align: center;
    }

    .btn-buy-ticket {
        justify-content: center;
    }
}

/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media (max-width: 480px) {

    .tickets-hero-header .hero-title {
        font-size: 30px;
    }

    .tickets-hero-header .hero-description {
        font-size: 14px;
    }

    .fixtures-list-title {
        font-size: 19px;
    }

    .match-ticket-card {
        padding: 16px;
    }

    .card-ticket-cta {
        align-items: stretch;
    }

    .card-ticket-cta .price-from {
        text-align: left;
    }

    .btn-select-seats {
        width: 100%;
    }
}

/* ==========================================================
   REMOVE NUMBER INPUT SPINNER / UP-DOWN ARROWS
   ========================================================== */

.match-tickets-page-wrapper input[type="number"] {
    -webkit-appearance: none !important;
    -moz-appearance: textfield !important;
    appearance: none !important;
}

/* Chrome / Edge / Safari */
.match-tickets-page-wrapper input[type="number"]::-webkit-inner-spin-button,
.match-tickets-page-wrapper input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: none !important;
    margin: 0 !important;
}

/* Firefox */
.match-tickets-page-wrapper input[type="number"] {
    -moz-appearance: textfield !important;
}





.score-match-bottom {
    border-radius: 0.5rem;
    margin-bottom: 2rem;
    width: 100%;
    min-height: 260px;
    position: relative;
    overflow: hidden;
    background-color: #17263d;
    background-size: cover;
    background-position: center;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.score-match-bottom-inner {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
    padding: 35px 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.score-match-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 16px;
    margin-bottom: 18px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 30px;
    background: rgba(255, 255, 255, .10);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    backdrop-filter: blur(5px);
}

.score-match-teams {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.score-match-team {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-width: 300px;
}

.score-team-name {
    color: #ffffff;
    font-size: 30px;
    line-height: 1.1;
    font-weight: 800;
    white-space: nowrap;
    text-shadow:
        0 2px 10px rgba(0, 0, 0, .3);
}

.score-team-logo {
    width: 75px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.score-team-logo img {
    width: 70px;
    height: 70px;
    max-width: 70px;
    max-height: 70px;
    object-fit: contain;
    display: block;
    filter:
        drop-shadow(0 4px 8px rgba(0, 0, 0, .35));
}

.score-match-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 55px;
    color: var(--theme-color);
    ;
    font-size: 30px;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
    text-shadow:
        0 2px 8px rgba(0, 0, 0, .35);
}

.score-match-details {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 35px;
    margin-top: 25px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
}

.score-match-detail {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.score-match-icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.score-match-icon i,
.score-match-icon svg {
    font-size: 15px;
    line-height: 1;
    color: #ffffff;
}

.score-match-bottom:hover .score-team-logo img {
    transform: scale(1.05);
    transition:
        transform .25s ease;
}

@media (max-width:900px) {
    .score-match-bottom {
        min-height: 250px;
    }

    .score-match-bottom-inner {
        padding: 35px 25px;
    }

    .score-match-team {
        min-width: 0;
        gap: 12px;
    }

    .score-team-name {
        font-size: 24px;
    }

    .score-team-logo {
        width: 65px;
        height: 65px;
    }

    .score-team-logo img {
        width: 60px;
        height: 60px;
    }

    .score-match-vs {
        font-size: 26px;
        min-width: 40px;
    }
}

@media (max-width:650px) {

    .score-match-bottom {

        min-height: auto;

        margin-top: 35px;
    }


    .score-match-bottom-inner {

        padding: 30px 15px;
    }


    .score-match-label {

        margin-bottom: 15px;

        font-size: 10px;
    }


    .score-match-teams {

        gap: 10px;
    }


    .score-match-team {

        flex-direction: column;

        gap: 7px;

        min-width: 0;

        flex: 1;
    }


    .score-team-left {

        flex-direction: column-reverse;
    }


    .score-team-name {

        font-size: 17px;

        text-align: center;

        white-space: normal;
    }


    .score-team-logo {

        width: 55px;

        height: 55px;
    }


    .score-team-logo img {

        width: 52px;

        height: 52px;
    }


    .score-match-vs {

        font-size: 22px;

        min-width: 30px;
    }


    .score-match-details {

        flex-direction: column;

        gap: 10px;

        margin-top: 20px;

        font-size: 12px;
    }
}

@media (max-width:400px) {
    .score-team-name {
        font-size: 15px;
    }

    .score-team-logo {
        width: 48px;
        height: 48px;
    }

    .score-team-logo img {
        width: 45px;
        height: 45px;
    }

    .score-match-vs {
        font-size: 19px;
    }

}

/* ==========================================================
   SCORE DASHBOARD
   ========================================================== */

.score-dashboard-page {
    width: 100%;
    min-height: 100vh;

    background: transparent;

    color: var(--theme-color);

    font-family: var(--font-body);
}

.score-dashboard-overlay {
    width: 100%;
    min-height: 100vh;
    padding: 0px 10px 0px;
}

.score-dashboard-container {
    width: 100%;
    margin: 0 auto;
}


/* ==========================================================
   INTRO
   ========================================================== */

.score-intro {
    max-width: 760px;

    margin-left: auto;
    margin-bottom: 35px;
}

.score-intro p {
    margin: 0;

    color: var(--theme-color);

    font-size: 16px;
    line-height: 1.7;
}

.score-intro a {
    color: var(--theme-color);

    text-decoration: underline;
}

.score-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 405px;
    gap: 32px;
    align-items: start;
}

.score-section-title {
    min-height: 64px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    background: var(--theme-color);
    color: #ffffff;
    font-size: 17px;
    letter-spacing: .5px;
    font-weight: 600;
     font-family: var(--font-body);
}
.score-standing-header span ,
.score-fixture-header span {
        letter-spacing: .5px;
    font-weight: 600;
     font-family: var(--font-body);
}
.score-standing-header,
.score-fixture-header {
    background: var(--theme-color);
    color: #ffffff;
    font-weight: 800;
     font-family: var(--font-body);
}

.score-standing-header,
.score-fixture-header {
    background: #242424;
}

.score-standing-header {
    display: grid;
    grid-template-columns:
      46px minmax(100px, 1fr) 42px 42px 42px 46px;
    align-items: center;
    min-height: 54px;
    padding: 0 12px;
    font-size: 13px;
     font-family: var(--font-body);
}

.score-standing-list {
    background: #ffffff; font-family: var(--font-body);
}

.score-standing-row {
    display: grid;
    grid-template-columns:
        46px minmax(100px, 1fr) 42px 42px 42px 46px;
    align-items: center;
    min-height: 69px;
    padding: 0 12px;
    background: #ffffff;
    color: #263746; font-family: var(--font-body);
    border-bottom: 1px solid #dddddd;
}

.standing-club {
    display: flex;
    align-items: center;
    gap: 10px; font-family: var(--font-body);
}

.standing-club img {
    width: 30px;
    height: 30px;

    object-fit: contain;
}

.standing-club strong {
    color: #202b38;
    font-size: 13px; font-family: var(--font-body);
}

.standing-points {
    color: var(--theme-color);
    font-weight: 800; font-family: var(--font-body);
}

.score-fixture-header {
    display: grid;
    grid-template-columns:
        1.75fr 1.45fr 1fr 1fr .65fr;
    align-items: center;
    min-height: 54px;
    padding: 0 12px; font-family: var(--font-body);
    font-size: 12px;
}

.score-fixture-list {
    background: #ffffff;
}
.score-standing-row div ,
   .score-fixture-row div{
        padding: 0 5px;
    }
.score-fixture-row {
    display: grid;

    grid-template-columns:
        1.75fr 1.45fr 1fr 1fr .65fr;

    align-items: center;

    min-height: 69px;

    padding: 0 12px;

    background: #ffffff;

    color: #263746;

    border-bottom: 1px solid #eeeeee;
}


.fixture-event {
    color: #111827;
 font-family: var(--font-body);
    font-weight: 800;
}

.fixture-time {
    color: #111827;
 font-family: var(--font-body);
    font-weight: 800;
}

.fixture-venue {
    color: #526679;
}

.fixture-article a {
    color: var(--theme-color);

    font-weight: 600; font-family: var(--font-body);

    text-decoration: none;
}

.fixture-article a:hover {
    color: var(--theme-color);
 font-family: var(--font-body);
    text-decoration: underline;
}

@media (max-width: 1024px) {

    .score-dashboard-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .score-intro {
        max-width: 100%;

        margin-left: 0;
    }
}


@media (max-width: 650px) {

    .score-dashboard-overlay {
        padding: 20px 10px 40px;
    }

    .score-standing-header {
        grid-template-columns:
            40px minmax(90px, 1fr) 28px 28px 28px 38px;

        padding: 0 15px;

        font-size: 11px;
    }

    .score-standing-row {
        grid-template-columns:
            40px minmax(90px, 1fr) 28px 28px 28px 38px;
        padding: 0 15px;
        font-size: 12px;
    }

    .score-fixture-header {
        display: none;
    }

    .score-fixture-row {
        grid-template-columns: 1fr 1fr;

        gap: 8px 15px;

        padding: 16px;
    }
 

    .fixture-date {
        grid-column: 1 / -1;
    }

    .fixture-event {
        grid-column: 1 / -1;
    }

    .fixture-article {
        grid-column: 1 / -1;
    }
}


.stadium-video-section {
    width: 100%;
    margin: 50px 0 0;
    padding: 0;
    overflow: hidden;
    border-radius: 0.5rem;
}

.stadium-video-section .stadium-video-wrapper {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
}

.stadium-video-section .stadium-video-poster {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
    background: #111;
    cursor: pointer;
}

.stadium-video-section .stadium-video-thumbnail {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.stadium-video-section .stadium-video-play {

    position: absolute;

    top: 50%;

    left: 50%;

    z-index: 3;

    width: 90px;

    height: 90px;

    padding: 0;

    margin: 0;

    border: 0;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    transform:
        translate(-50%, -50%);

    cursor: pointer;

    box-shadow:
        0 8px 30px rgba(0, 0, 0, .35);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background-color .25s ease,
        color .25s ease;

}

.stadium-video-section .stadium-video-play i {

    margin-left: 5px;

    font-size: 36px;

    line-height: 1;

    transition:
        color .25s ease;

}

.stadium-video-section .stadium-video-poster:hover .stadium-video-play {

    transform:
        translate(-50%, -50%) scale(1.08);

}

.stadium-video-section .stadium-video-poster:hover .stadium-video-play {

    transform:
        translate(-50%, -50%) scale(1.08);

    box-shadow:
        0 12px 40px rgba(0, 0, 0, .45);

}

.stadium-video-section .stadium-video-playing {
    position: relative;
    width: 100%;
    height: 500px;
    background: #000;
    overflow: hidden;
}

.stadium-video-section .stadium-video-playing iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

@media (max-width:900px) {

    .stadium-video-section .stadium-video-poster,
    .stadium-video-section .stadium-video-playing {
        height: 400px;
    }

    .stadium-video-section .stadium-video-play {
        width: 75px;
        height: 75px;
    }

    .stadium-video-section .stadium-video-play i {
        font-size: 22px;
    }
}

@media (max-width:600px) {

    .stadium-video-section .stadium-video-section {
        margin-top: 30px;
    }

    .stadium-video-section .stadium-video-poster,
    .stadium-video-section .stadium-video-playing {
        height: 240px;
    }

    .stadium-video-section .stadium-video-play {
        width: 65px;
        height: 65px;
    }

    .stadium-video-section .stadium-video-play i {
        font-size: 19px;
    }
}