/*
Theme Name: SKT Ortho
Theme URI: https://www.sktthemes.org/shop/skt-ortho/
Author: sonalsinha21
Author URI: https://profiles.wordpress.org/sonalsinha21/
Description: SKT Ortho is an orthopaedic theme. It is designed for orthopedic doctors, bone specialists, joint care centres, physiotherapists and musculoskeletal healthcare services. It offers a clean and modern layout that helps medical professionals present treatments, services and specialist information clearly. The theme is responsive and works smoothly across mobile phones, tablets and desktop devices.It supports easy customization so you can change colours, fonts, images and page sections without coding. SKT Ortho is suitable for bone and joint care websites, orthopaedic hospitals, skeletal treatment centres and health clinics. Its user friendly design helps build trust and encourages patients to book consultations. Documentation: https://www.sktthemesdemo.net/documentation/skt-doctor-doc/
Template: skt-doctor
Version: 1.0
Requires at least: 5.6
Tested up to: 6.9
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: skt-ortho
Tags: two-columns, right-sidebar, full-width-template, custom-background, custom-colors, custom-menu, sticky-post, theme-options, threaded-comments, featured-images, footer-widgets, translation-ready, rtl-language-support, custom-logo, editor-style, custom-header, blog, e-commerce

SKT Ortho is a child theme of SKT Skincare. SKT Skincare is based on Underscores, which is distributed under the terms of the GNU GPL v2 or later.

SKT Ortho WordPress Theme, Copyright 2026 SKT Themes (sktthemes.org)
SKT Ortho is distributed under the terms of the GNU GPL v2 or later.
*/

/* ==========================================================================
   TABLE OF CONTENTS
   01. CSS Variables & Reset
   02. Typography
   03. Layout (container, content, sidebar)
   04. Header & Navigation
   05. Inner Page Banner
   06. Buttons & Links
   07. Forms & Inputs
   08. Blog (lists, single post, post meta)
   09. Pagination & Post Navigation
   10. Sidebar & Widgets
   11. Comments
   12. Footer & Copyright
   13. Block Editor / Gutenberg
   14. WooCommerce essentials
   15. Tables, Code, Blockquote
   16. Accessibility & Utilities
   ========================================================================== */


/* ==========================================================================
   01. CSS Variables & Reset
   ========================================================================== */
:root {
    --sps-primary: #3facf9;
    --sps-primary-dark: #0C225F;
	--sps-primary-white: #ffffff;
	--sps-primary-black: #000000;
    --sps-secondary: #051d3a;
    --sps-text: #4a4a4a;
    --sps-text-dark: #1a1a1a;
    --sps-muted: #7a7a7a;
    --sps-border: #e8e8e8;
    --sps-bg: #ffffff;
    --sps-bg-alt: #f7f7f8;
    --sps-footer-bg: #f2f2f6;
    --sps-footer-text: #080808;
    --sps-copyright-bg: #060a18;
    --sps-footer-border: #dccdbf;
    --sps-icon-bg: #151515;
    --sps-icon-hover: #4fbcff;
    --sps-icon-size: 58px;
    --sps-spacing-y: 35px;	

    --sps-radius: 10px;
    --sps-radius-sm: 6px;
    --sps-radius-pill: 999px;

    --sps-shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.06);
    --sps-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    --sps-shadow-lg: 0 18px 50px rgba(15, 23, 42, 0.10);

    --sps-transition: 0.25s ease;

    --sps-container: 1200px;

    --sps-font-body: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --sps-font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --sps-font-display: 'Poppins', sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background-color: var(--sps-bg);
    color: var(--sps-text);
    font-family: var(--sps-font-body);
    font-size: 16px;
    line-height: 1.7;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@view-transition {
  navigation: auto;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

iframe {
    max-width: 100%;
}

hr {
    border: 0;
    border-top: 1px solid var(--sps-border);
    margin: 30px 0;
}

::selection {
    background-color: var(--sps-primary);
    color: #fff;
}


/* ==========================================================================
   02. Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--sps-font-heading);
    color: var(--sps-text-dark);
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 18px;
}

h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }

p {
    margin: 0 0 18px;
}

a {
    color: var(--sps-primary);
    text-decoration: none;
    transition: color var(--sps-transition);
}

a:hover,
a:focus {
    color: var(--sps-text-dark);
    text-decoration: underline;
}

a:focus-visible {
    outline: 2px solid var(--sps-primary);
    outline-offset: 2px;
}

strong, b { font-weight: 600; }
em, i    { font-style: italic; }


/* ==========================================================================
   03. Layout
   ========================================================================== */
.container {
    width: 100%;
    max-width: var(--sps-container);
    margin: 0 auto;
    padding: 0;
    position: relative;
}

#main-set {
    position: relative;
    z-index: 5;
}

#content_navigator {
    width: 100%;
}

.page_content {
    padding: 40px 0 40px 0;
    display: flex;
    flex-wrap: wrap;
}

body.tax-product_cat .page_content {
	display:inherit;
}

.site-main {
    flex: 1 1 0;
    min-width: 0;
    float: none;
    width: 70%;
	margin-right:25px;
}

#sitefull,
.full-main {
    flex: 0 1 100%;
    width: 100% !important;
    float: none;
}

.clear {
    clear: both;
}


/* ==========================================================================
   04. Header & Navigation
   ========================================================================== */
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 80px;
}
   
.header {
    width: 100%;
    background-color: var(--sps-bg);
    box-shadow: var(--sps-shadow-sm);
    position: relative;
    z-index: 100;
    border: 0;
    border-radius: 0;
	margin:0;
	padding:0;
}

.head-bar {
    padding: 0;
    margin: 0;
    width: 100%;
}

.head-bar > .container {
    max-width: var(--sps-container);  
    width: 100%;
    margin: 0 auto;
    padding: 12px 0 12px 0;
    box-sizing: border-box;
}

.header > .container,
.head-bar > .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    min-height: 90px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.transheader {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgba(5, 29, 58, 0.35);
    box-shadow: none;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.transheader .site-title a,
.transheader .site-description,
.transheader .main-navigation a {
    color: #fff;
}

body.search .transheader,
body.error404 .transheader,
body.inner .transheader {
    position: relative !important;
    background-color: var(--sps-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.search .transheader .site-title a,
body.error404 .transheader .site-title a,
body.inner .transheader .site-title a,
body.search .transheader .main-navigation a,
body.error404 .transheader .main-navigation a,
body.inner .transheader .main-navigation a {
    color: var(--sps-text-dark);
}

/* Logo */
.logo {
    display: flex;
	flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex-shrink: 0;
	padding:0;
	margin:0;
	min-height:100% !important;
}

.logo p.site-title{
	font-size:26px;
}

.logo img,
.custom-logo {
    max-height: 52px;
}

#logo-main {
    display: flex;
    flex-direction: column;
    text-align: left;
}

#logo-main a {
    text-decoration: none;
    color: inherit;
}

.site-title {
    font-family: var(--sps-font-display);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.1;
    margin: 0;
    letter-spacing: 0.2px;
}

.site-title a {
    color: var(--sps-text-dark);
}

.site-description {
    font-size: 13px;
    color: var(--sps-muted);
    margin: 4px 0 0;
    line-height: 1.2;
}

/* Primary Navigation */
#navigation {
    flex: 1;
    display: flex;
    justify-content: end;
	font-family: var(--sps-font-display);
}

.leftnavig {
    margin-right: auto;
}

.primary-menu {
    display: flex;
    align-items: center;
    gap: 28px;
}

/* =====================================================================
   MAIN NAVIGATION  (desktop default)
   ===================================================================== */
.main-navigation {
    display: flex;
    align-items: center;
    position: relative;
}

/* Top-level UL only */
.main-navigation > div > ul,
.main-navigation > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 2px;
}

.main-navigation li {
    position: relative;
    list-style: none;
}

.main-navigation a {
    display: block;
    padding: 10px 16px;
    color: var(--sps-text-dark);
    font-size: 17px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color var(--sps-transition), color var(--sps-transition);
}

.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a,
.main-navigation .current-menu-ancestor > a {
    color: var(--sps-primary);
}

/* ---------------------------------------------------------------------
   SUB-MENU (desktop dropdown)
   --------------------------------------------------------------------- */
.main-navigation ul ul {
    position: absolute;
    top: calc(100% + 21px);  
    left: 0;
    min-width: 240px;
    background-color: #fff;
    display: block;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--sps-transition), transform var(--sps-transition), visibility var(--sps-transition);
    z-index: 9999;
}

.main-navigation ul ul::before {
    content: "";
    position: absolute;
    top: -21px;        
    left: 0;
    right: 0;
    height: 21px;
    background: transparent;
}

.main-navigation ul ul li {
    width: 100%;
}

.main-navigation li:hover > ul,
.main-navigation li.focus > ul,
.main-navigation li.dropdown-open > ul,
.main-navigation li:focus-within > ul {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.main-navigation ul ul a {
    padding: 10px 16px;
    color: #282828;
    border-radius: 0;
    width: 100%;
}

.main-navigation ul ul a:hover,
.main-navigation ul ul a:focus {
    background-color: #3facf9;
    color: #ffffff;
}

/* Nested sub-menus open to the side */
.main-navigation ul ul ul {
    top: 0;
    left: 100%;
    margin-left: 0;
    transform: translateX(8px);
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul,
.main-navigation ul ul li.dropdown-open > ul,
.main-navigation ul ul li:focus-within > ul {
    transform: translateX(0);
}

.main-navigation ul li a { line-height: inherit; }

/* ---------------------------------------------------------------------
   DROPDOWN CARET BUTTON 
   --------------------------------------------------------------------- */
.main-navigation .dropdown-toggle {
    display: none;
    position: absolute;
    top: 4px;
    right: 4px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.main-navigation .dropdown-toggle .dropdown-icon {
    display: block;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--sps-transition);
}

.main-navigation .dropdown-open > .dropdown-toggle .dropdown-icon {
    transform: rotate(-135deg);
}

/* Caret indicator on parent items (desktop) */
.main-navigation > div > ul > .menu-item-has-children > a::after,
.main-navigation > ul > .menu-item-has-children > a::after,
.main-navigation > div > ul > .page_item_has_children > a::after,
.main-navigation > ul > .page_item_has_children > a::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    vertical-align: middle;
    transition: transform var(--sps-transition);
}

/* ---------------------------------------------------------------------
   MENU TOGGLE (hamburger - mobile)
   --------------------------------------------------------------------- */
.menu-toggle {
    display: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 8px;
    margin: 0;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    border-radius: var(--sps-radius-sm);
}

.menu-toggle:hover,
.menu-toggle:focus {
    background-color: var(--sps-bg-alt);
}

.menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--sps-text-dark);
    border-radius: 2px;
    transition: transform var(--sps-transition), opacity var(--sps-transition), background var(--sps-transition);
}

.toggled .menu-toggle span {
    background: var(--sps-primary);
}

/* Header button */
.srcrt {
    flex-shrink: 0;
}

.skt-header-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 25px 35px;
    font-size: 17px;
    font-weight: 500;
    border-radius: 999px;
	text-transform:uppercase;
	font-family: var(--sps-font-display);
    background: #0C225F;
    color: var(--sps-primary-white);
    transition: all 0.25s ease;
}

.skt-header-button:hover,
.skt-header-button:focus {
    background: #3facf9;
	text-decoration:none;
	color: #fff;
}

.hedbtn-details a,
.skt-header-button a {
    color: #fff;
    text-decoration: none;
}


/* ==========================================================================
   05. Inner Page Banner
   ========================================================================== */
.inner-banner-thumb {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: var(--sps-secondary);
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner-banner-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    opacity: 0.55;
}

.inner-banner-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 29, 58, 0.6), rgba(5, 29, 58, 0.3));
    z-index: 2;
}

.banner-container {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: var(--sps-container);
    margin: 0 auto;
    padding: 50px 20px;
    text-align: center;
}

.banner-container h1 {
    color: #fff;
    font-family: 'Playfair Display';
	font-size: 50px;
	font-weight:700;
    margin: 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}


/* ==========================================================================
   06. Buttons & Links
   ========================================================================== */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.wp-block-button__link,
a.read-more-btn,
.rdmore a,
.aboutmore {
    display: inline-block;
    background-color: var(--sps-primary);
    color: #fff;
    border: 0;
    padding: 12px 26px;
    font-family: var(--sps-font-body);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    border-radius: var(--sps-radius-pill);
    cursor: pointer;
    transition: background-color var(--sps-transition), transform var(--sps-transition), box-shadow var(--sps-transition);
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.button:hover,
.wp-block-button__link:hover,
a.read-more-btn:hover,
.rdmore a:hover,
.aboutmore:hover {
    background-color: var(--sps-primary-dark);
    color: #fff;
    text-decoration: none;
}

button:focus-visible,
input[type="submit"]:focus-visible,
.button:focus-visible {
    outline: 2px solid var(--sps-primary);
    outline-offset: 3px;
}

a.ReadMore {
    display: inline-block;
    margin-top: 18px;
    padding: 10px 22px;
    color: var(--sps-text-dark);
    border: 1px solid var(--sps-text-dark);
    border-radius: var(--sps-radius-pill);
    background-color: transparent;
    text-decoration: none;
    font-weight: 500;
    transition: all var(--sps-transition);
}

a.ReadMore:hover {
    background-color: var(--sps-text-dark);
    color: #fff;
    text-decoration: none;
}


/* ==========================================================================
   07. Forms & Inputs
   ========================================================================== */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="month"],
input[type="week"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea,
select {
    width: 100%;
    max-width: 100%;
    padding: 11px 14px;
    font-family: var(--sps-font-body);
    font-size: 15px;
    color: var(--sps-text-dark);
    background-color: #fff;
    border: 1px solid var(--sps-border);
    border-radius: var(--sps-radius-sm);
    line-height: 1.4;
    transition: border-color var(--sps-transition), box-shadow var(--sps-transition);
    -webkit-appearance: none;
    appearance: none;
}

input:focus,
textarea:focus,
select:focus {
    outline: 0;
    border-color: var(--sps-primary);
    box-shadow: 0 0 0 3px rgba(203, 109, 70, 0.15);
}

textarea {
    min-height: 140px;
    resize: vertical;
}

label {
    display: inline-block;
    margin-bottom: 6px;
    font-weight: 500;
    color: var(--sps-text-dark);
    font-size: 14px;
}

/* Search form */
.wp-block-search,
.search-form {
    display: flex;
    gap: 8px;
}

.wp-block-search__input,
.search-field {
    flex: 1;
}

.wp-block-search__button,
input.search-submit {
    background-color: var(--sps-primary);
    color: #fff;
    border: 0;
    padding: 0 18px;
    border-radius: var(--sps-radius-sm);
    cursor: pointer;
}

.wp-block-search__button:hover,
input.search-submit:hover {
    background-color: var(--sps-primary-dark);
}


/* ==========================================================================
   08. Blog
   ========================================================================== */
.blog-post {
    margin: 0;
}

.blogpost-wrap-wsb {
    display: grid;
    gap: 30px;
}

body.home article.post,
body.home article.hentry,
body.home .blog_lists {
    background-color: #fff;
    border: 1px solid var(--sps-border);
    border-radius: var(--sps-radius);
    overflow: hidden;
    transition: transform var(--sps-transition), box-shadow var(--sps-transition);
    padding: 0;
    margin: 0 0 40px;
    box-shadow: var(--sps-shadow-sm);
}

article.post,
article.hentry,
.blog_lists {
    background-color: #fff;
    border: 1px solid var(--sps-border);
    border-radius: var(--sps-radius);
    overflow: hidden;
    transition: transform var(--sps-transition), box-shadow var(--sps-transition);
    padding: 0;
    margin: 0 0 8px;
    box-shadow: var(--sps-shadow-sm);
}

article.post:hover,
article.hentry:hover,
.blog_lists:hover {
    box-shadow: var(--sps-shadow);
}

article.post .post-thumb,
article.hentry .post-thumb {
    width: 100%;
    max-height: none;
    margin: 0;
    float: none;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

article.post .post-thumb img,
article.hentry .post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

article.post:hover .post-thumb img,
article.hentry:hover .post-thumb img {
    transform: scale(1.04);
}

article.post .entry-header,
article.hentry .entry-header,
article.post .entry-content,
article.hentry .entry-content,
article.post .entry-summary,
article.hentry .entry-summary,
article.post .rdmore,
article.hentry .rdmore {
    padding:20px 25px;
}

.blog-post article.post .entry-content{
	padding:0 25px;
}

article.post .entry-header,
article.hentry .entry-header {
    padding-top: 22px;
    padding-bottom: 0;
}

article.post .rdmore,
article.hentry .rdmore {
    padding-bottom: 24px;
    padding-top: 8px;
}

.entry-title {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 10px;
    line-height: 1.3;
}

.entry-title a {
    color: var(--sps-text-dark);
    text-decoration: none;
}

.entry-title a:hover {
    color: var(--sps-primary);
    text-decoration: none;
}

.postmeta {
    color: var(--sps-muted);
    font-size: 13px;
    padding: 0 0 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.postmeta a {
    color: var(--sps-primary);
    text-decoration: none;
	margin:0 0 0 10px;
}

.postmeta a:hover {
    color: var(--sps-text-dark);
    text-decoration: underline;
}

.post-date,
.post-comment,
.post-categories,
.post-tags {
    display: inline-flex;
    align-items: center;
    color: var(--sps-muted);
}

.entry-content,
.entry-summary {
    font-size: 16px;
    line-height: 1.75;
    color: var(--sps-text);
}

.entry-content a {
    color: var(--sps-primary);
    text-decoration: underline;
}

.entry-content a:hover {
    color: var(--sps-text-dark);
}

.entry-content ul,
.entry-content ol {
    padding-left: 22px;
    margin: 0 0 18px;
}

.entry-content li {
    line-height: 1.8;
    margin-bottom: 6px;
}

.entry-content img {
    border-radius: var(--sps-radius-sm);
}

/* Single post */
article.single-post {
    padding: 26px 22px;
}

article.single-post:hover {
    box-shadow: none;
}

article.single-post .entry-header,
article.single-post .entry-content,
article.single-post .postmeta {
    padding-left: 0;
    padding-right: 0;
}

/* Sticky post highlight */
.sticky {
    border-left: 4px solid var(--sps-primary);
    border-bottom: 0;
}

/* Read more link */
.rdmore a {
    background-color: transparent;
    color: var(--sps-primary);
    padding: 8px 0;
    box-shadow: none;
    border-radius: 0;
    font-weight: 600;
    border-bottom: 2px solid var(--sps-primary);
}

.rdmore a:hover {
    background: transparent;
    color: var(--sps-text-dark);
    border-bottom-color: var(--sps-text-dark);
    transform: none;
    box-shadow: none;
}

/* Page header (search, archive titles) */
.page-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--sps-border);
}

.page-header .page-title {
    margin: 0;
    font-size: 26px;
}

/* No results / 404 */
.no-results,
.error-404 {
    background-color: #fff;
    border: 1px solid var(--sps-border);
    border-radius: var(--sps-radius);
    padding: 40px;
    box-shadow: var(--sps-shadow-sm);
}

/* ==========================================================================
   09. Pagination & Post Navigation
   ========================================================================== */
.pagination,
.posts-navigation,
.post-navigation {
    margin: 30px 0 30px;
    display: block;
    clear: both;
}

.pagination .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
    margin: 0;
}

.pagination .nav-links a,
.pagination .nav-links span,
.posts-navigation .nav-links a,
.post-navigation .nav-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    background-color: #fff;
    color: var(--sps-text-dark);
    border: 1px solid var(--sps-border);
    border-radius: var(--sps-radius-sm);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: all var(--sps-transition);
}

.pagination .nav-links a:hover,
.pagination .nav-links span.current,
.posts-navigation .nav-links a:hover,
.post-navigation .nav-links a:hover {
    background-color: var(--sps-primary);
    border-color: var(--sps-primary);
    color: #fff;
    text-decoration: none;
}

.pagination .nav-links span.dots {
    background: transparent;
    border-color: transparent;
}


/* ==========================================================================
   10. Sidebar & Widgets
   ========================================================================== */
#sidebar ol.wp-block-latest-comments{
	padding-left:0px;
}   

#sidebar {
    width: 320px;
    flex: 0 0 320px;
    float: none;
    overflow: visible;
    font-size: 15px;
}

#sidebar aside.widget,
.widget {
    background-color: #fff;
    border: 1px solid var(--sps-border);
    border-radius: var(--sps-radius);
    padding: 24px !important;
    margin-bottom: 24px;
    box-shadow: var(--sps-shadow-sm) !important;
    box-sizing: border-box;
}

#sidebar aside .wp-block-search {
    display: flex;
    flex-wrap: wrap;
}

#sidebar aside .wp-block-search__label {
    flex: 0 0 100%;
    width: 100%;
    margin-bottom: 8px;
}

#sidebar aside .wp-block-search__inside-wrapper {
    display: flex;
    flex: 0 0 100%;
    width: 100%;
}

#sidebar h2,
#sidebar h3,
#sidebar h4,
#sidebar h5,
#sidebar h6,
#sidebar .widget-title,
#sidebar .wp-block-search__label,
#sidebar label {
    color: var(--sps-text-dark);
    font-family: 'Playfair Display';
    font-size: 26px;
    font-weight: 700;
    margin: 0;
    padding: 0;
    position: relative;
    border: 0 !important;
    display: block;
}

#sidebar h3.widget-title.titleborder span {
    border: 0;
}

.titleborder span:after {
    display: none;
}

#sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#sidebar ul li {
    list-style: none;
    padding: 8px 0;
    border-bottom: 1px solid var(--sps-bg-alt);
    margin: 0;
}

#sidebar ul li:last-child {
    border-bottom: 0;
}

#sidebar ul li a {
    color: var(--sps-text);
    text-decoration: none;
    display: inline-block;
    line-height: 1.5;
}

#sidebar ul li a:hover {
    color: var(--sps-primary);
    text-decoration: none;
}

#sidebar .widget li ul.children,
#sidebar .widget li ul.sub-menu {
    padding: 8px 0 0 14px;
    margin-top: 6px;
    border-top: 1px solid var(--sps-bg-alt);
    list-style: none;
}

#sidebar .wp-block-search__input {
    border: 1px solid var(--sps-border);
    padding: 9px 12px;
    border-radius: var(--sps-radius-sm);
}

#sidebar .wp-block-search__button {
    border: 0;
    background-color: var(--sps-primary);
    color: #fff;
    padding: 0 16px;
    cursor: pointer;
}

#sidebar .wp-block-search__button:hover {
    background-color: var(--sps-primary-dark);
}

#sidebar p:empty {
    display: none;
}

/* Tag cloud */
.tagcloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tagcloud a {
    display: inline-block;
    background-color: var(--sps-bg-alt);
    color: var(--sps-text-dark) !important;
    font-size: 13px !important;
    padding: 6px 12px;
    border-radius: var(--sps-radius-pill);
    text-decoration: none;
    transition: background-color var(--sps-transition), color var(--sps-transition);
}

.tagcloud a:hover {
    background-color: var(--sps-primary);
    color: #fff !important;
    text-decoration: none;
}

/* Calendar widget */
.widget_calendar table {
    width: 100%;
    border-collapse: collapse;
}

.widget_calendar th,
.widget_calendar td {
    padding: 6px;
    text-align: center;
    border: 1px solid var(--sps-border);
    font-size: 13px;
}

.widget_calendar th {
    background-color: var(--sps-bg-alt);
}


/* ==========================================================================
   11. Comments
   ========================================================================== */
#comments {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 2px solid var(--sps-border);
}

.comments-title {
    font-size: 22px;
    margin-bottom: 24px;
}

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

.comment-list li {
    list-style: none;
    margin-bottom: 20px;
}

.comment-list .children {
    list-style: none;
    padding: 0;
    margin-left: 30px;
    margin-top: 20px;
}

.comment-body {
    background-color: #fff;
    border: 1px solid var(--sps-border);
    border-radius: var(--sps-radius);
    padding: 20px;
    box-shadow: var(--sps-shadow-sm);
}

.comment-author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.comment-author.vcard{
	float:none;
}

.comment-author .avatar {
    border-radius: 50%;
    border: 2px solid var(--sps-border);
}

.comment-author .fn {
    font-weight: 600;
    color: var(--sps-text-dark);
    font-style: normal;
}

.comment-metadata {
    font-size: 13px;
    color: var(--sps-muted);
    margin-bottom: 10px;
}

.comment-metadata a {
    color: var(--sps-muted);
    text-decoration: none;
}

.reply {
    margin-top: 10px;
}

.reply .comment-reply-link {
    display: inline-block;
    padding: 6px 14px;
    background-color: var(--sps-bg-alt);
    color: var(--sps-text-dark);
    border-radius: var(--sps-radius-pill);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

.reply .comment-reply-link:hover {
    background-color: var(--sps-primary);
    color: #fff;
}

.comment-form-cookies-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.comment-form-cookies-consent input[type="checkbox"] {
    width: auto;
    margin: 6px 0 0;
    float: none;
}

.comment-form-cookies-consent label {
    margin: 0;
    font-weight: 400;
    color: var(--sps-text);
}

.comment-respond {
    margin-top: 30px;
    background-color: #fff;
    border: 1px solid var(--sps-border);
    border-radius: var(--sps-radius);
    padding: 24px;
    box-shadow: var(--sps-shadow-sm);
}

.comment-reply-title {
    margin-top: 0;
    font-size: 20px;
}

.comment-form p {
    margin-bottom: 14px;
}

.comment-form label {
    display: block;
    margin-bottom: 6px;
}


/* ==========================================================================
   12. Footer & Copyright
   ========================================================================== */
#footer {
    background-color: var(--sps-footer-bg);
    background-image: none;
    color: var(--sps-footer-text);
    padding: 50px 0 0 0;
}

#footer-wrapper {
    width: 100%;
}

/* =========================================
   GENERIC (Reset tweaks if needed)
========================================= */
.social-icons br {
    display: none;
}

/* =========================================
   OBJECTS (Layout)
========================================= */
.o-footer {
    background-color: var(--sps-footer-bg);
}

.o-layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

/* Left / Right alignment */
.o-layout__left {
    text-align: left;
}

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

/* =========================================
   COMPONENTS (Footer UI)
========================================= */

/* Logo */
.c-footer-logo {
    padding: 0 0 var(--sps-spacing-y) 0;
}

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

/* Social */
.c-footer-social {
    padding: 0 0 var(--sps-spacing-y) 0;
}

/* Social Icons Wrapper */
.c-social-icons {
    display: inline-flex;
    gap: 4px;
}

/* Social Icon */
.c-social-icons__link {
    width: var(--sps-icon-size);
    height: var(--sps-icon-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--sps-icon-bg) !important;
    transition: 0.3s ease;
}

/* Hover */
.c-social-icons__link:hover {
    background-color: var(--sps-icon-hover) !important;
}

/* =========================================
   COMPONENT MODIFIERS (Icons)
========================================= */

.c-social-icons__link--fb {
    background: url(images/icon-fb.png) no-repeat center center;
}

.c-social-icons__link--tw {
    background: url(images/icon-tw.png) no-repeat center center;
}

.c-social-icons__link--in {
    background: url(images/icon-in.png) no-repeat center center;
}

.c-social-icons__link--insta {
    background: url(images/icon-insta.png) no-repeat center center;
}

.c-social-icons__link--yt {
    background: url(images/icon-youtube.png) no-repeat center center;
}

.u-clear {
    clear: both;
}

.footerarea {
    background: transparent;
    padding: 0;
}
.footer.ftr-widg {
    border: 1px solid #f2f2f6;
    background: none;
	background-color:#FFF;
	padding:40px 40px 0 40px;
	border-radius:30px;
	margin-bottom:50px;
}
.footer-all {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
    align-items: flex-start;
}
.footer-lft,
.footer-rght {
    width: auto;
    float: none;
}
.footer-rght {
    display: contents;
}
.rfl-row {
    display: contents;
}
.rfl-row .cols-3 {
    width: auto;
    float: none;
}

.footer aside.widget {
    background: transparent;
    border: 0;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 0px;
}

.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer h5,
.footer h6 {
    font-family: var(--sps-font-heading);
    font-size: 24px;
    font-weight: 700;
    color: #080808;
    margin: 0 0 22px;
    position: relative;
}

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

.footer ul li {
    padding: 6px 0;
    border: 0;
    list-style: none;
}

.footer ul li a,
.footer-row ul li a,
.footer-row .cols-3 ul li a {
    color: var(--sps-footer-text) !important;
    text-decoration: none;
    transition: color var(--sps-transition);
    display: inline-block;
}

.footer ul li a:hover,
.footer-row ul li a:hover,
.footer-row .cols-3 ul li a:hover {
    color: var(--sps-primary) !important;
    text-decoration: none;
}

.footer p {
    color: var(--sps-footer-text);
    line-height: 1.7;
    margin: 0 0 14px;
}

.footer a {
    color: var(--sps-primary);
}

.footer a:hover {
    color: #fff;
}

/* Copyright bar */
.copyright-wrapper {
    background-color: #3facf9;
    padding: 0;
    border: 0;
}

.copyright-wrapper .copyright-txt {
    background-color: transparent !important;
    color: #000;
    text-align: center;
    padding: 20px 0;
    font-size: 14px;
    border: 0;
    float: none;
}

.copyright-txt a {
    color: #fff !important;
    text-decoration: none;
}

.copyright-txt a:hover {
    color: #fff !important;
    text-decoration: underline;
}


/* ==========================================================================
   13. Block Editor / Gutenberg
   ========================================================================== */
.wp-block-quote,
.wp-block-quote.is-style-skt-ortho-plain {
    border-left: 4px solid var(--sps-primary);
    background-color: var(--sps-bg-alt);
    padding: 18px 24px;
    margin: 24px 0;
    border-radius: 0 var(--sps-radius-sm) var(--sps-radius-sm) 0;
    font-style: italic;
    color: var(--sps-text-dark);
}

.wp-block-quote.is-style-skt-ortho-plain {
    background: transparent;
    border-left-color: var(--sps-primary);
}

.wp-block-quote cite {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    color: var(--sps-muted);
    font-style: normal;
}

.wp-block-button__link {
    border-radius: var(--sps-radius-pill);
}

.wp-block-cover,
.wp-block-image {
    margin-bottom: 24px;
}

.wp-block-image img {
    border-radius: var(--sps-radius-sm);
}

.wp-block-group {
    margin-bottom: 18px;
}

.wp-block-pullquote {
    border-top: 2px solid var(--sps-primary);
    border-bottom: 2px solid var(--sps-primary);
    padding: 24px 0;
    margin: 30px 0;
    color: var(--sps-text-dark);
}

.wp-block-separator {
    border: 0;
    border-top: 1px solid var(--sps-border);
    margin: 30px auto;
    max-width: 100px;
}

.wp-block-separator.is-style-wide {
    max-width: 100%;
}

.wp-block-table table {
    width: 100%;
    border-collapse: collapse;
}

.wp-block-table th,
.wp-block-table td {
    border: 1px solid var(--sps-border);
    padding: 10px 14px;
}

.wp-block-table thead th {
    background-color: var(--sps-bg-alt);
    color: var(--sps-text-dark);
}

.wp-caption,
.wp-block-image figure {
    width: auto !important;
    margin-bottom: 20px;
}

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

.wp-caption-text,
.wp-block-image figcaption,
.gallery-caption {
    font-size: 13px;
    color: var(--sps-muted);
    background-color: var(--sps-bg-alt);
    padding: 8px 12px;
    text-align: center;
    line-height: 1.4;
    border-radius: 0 0 var(--sps-radius-sm) var(--sps-radius-sm);
    margin: 0;
}

.alignright {
    float: right;
    margin: 6px 0 18px 24px;
    clear: right;
}

.alignleft {
    float: left;
    margin: 6px 24px 18px 0;
    clear: left;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    max-width: 100%;
}

.alignwide,
.alignfull {
    margin-left: auto;
    margin-right: auto;
}

/* Page links (multipage post) */
.page-links {
    margin: 20px 0;
    font-weight: 500;
}

.page-links .post-page-numbers,
.page-links a .post-page-numbers {
    display: inline-block;
    min-width: 32px;
    padding: 4px 10px;
    margin: 0 4px;
    background-color: var(--sps-bg-alt);
    color: var(--sps-text-dark);
    text-decoration: none;
    border-radius: var(--sps-radius-sm);
    text-align: center;
}

.page-links a:hover .post-page-numbers,
.page-links .post-page-numbers.current {
    background-color: var(--sps-primary);
    color: #fff;
}


/* ==========================================================================
   14. WooCommerce essentials
   ========================================================================== */
.woocommerce ul.products li.product .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    background-color: var(--sps-primary) !important;
    color: #fff !important;
    border-radius: var(--sps-radius-pill);
    padding: 10px 22px;
    font-weight: 500;
    transition: all var(--sps-transition);
}

.woocommerce ul.products li.product .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
    background-color: var(--sps-primary-black) !important;
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
    background-color: var(--sps-secondary) !important;
}

.woocommerce ul.products li.product {
    background-color: #fff;
    border: 1px solid var(--sps-border);
    border-radius: var(--sps-radius);
    padding: 16px !important;
    box-shadow: var(--sps-shadow-sm);
    transition: transform var(--sps-transition), box-shadow var(--sps-transition);
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-3px);
    box-shadow: var(--sps-shadow);
}

.woocommerce ul.products li.product img {
    border-radius: var(--sps-radius-sm);
    margin-bottom: 12px;
}

.woocommerce ul.products li.product .price {
    color: var(--sps-primary);
    font-weight: 600;
}

.woocommerce .star-rating span::before {
    color: var(--sps-primary);
}

.woocommerce-product-search button[type='submit'] {
    background-color: var(--sps-primary);
    color: #fff;
    border: 0;
    padding: 10px 18px;
    border-radius: var(--sps-radius-sm);
    cursor: pointer;
}

.woocommerce-product-search button[type='submit']:hover {
    background-color: var(--sps-primary-dark);
}

.wc-block-cart__submit-button,
.wc-block-checkout__submit-button {
    background-color: var(--sps-primary);
    color: #fff !important;
    border-radius: var(--sps-radius-pill);
	text-decoration:none;
}

.wc-block-cart__submit-button:hover,
.wc-block-checkout__submit-button:hover {
    background-color: var(--sps-primary-black);
	color: #fff !important;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border-radius: var(--sps-radius-sm);
    border-top: 0;
    padding: 16px 16px 16px 55px;
}

.woocommerce-message {
    background-color: #e8f5e9;
    color: #2e7d32;
}


/* ==========================================================================
   15. Tables, Code, Blockquote
   ========================================================================== */
table:not(.wp-block-table table):not(.widget_calendar table) {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
}

th, td {
    padding: 10px 14px;
    border: 1px solid var(--sps-border);
    text-align: left;
}

th {
    background-color: var(--sps-bg-alt);
    color: var(--sps-text-dark);
    font-weight: 600;
}

code,
kbd,
pre,
samp {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 14px;
}

code,
kbd {
    background-color: var(--sps-bg-alt);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--sps-text-dark);
}

pre {
    background-color: var(--sps-bg-alt);
    padding: 18px;
    overflow-x: auto;
    border-radius: var(--sps-radius-sm);
    line-height: 1.6;
    margin: 0 0 20px;
}

blockquote {
    border-left: 4px solid var(--sps-primary);
    background-color: var(--sps-bg-alt);
    padding: 16px 22px;
    margin: 24px 0;
    color: var(--sps-text-dark);
    font-style: italic;
    border-radius: 0 var(--sps-radius-sm) var(--sps-radius-sm) 0;
}


/* ==========================================================================
   16. Accessibility & Utilities
   ========================================================================== */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    -webkit-clip-path: none;
    clip-path: none;
    color: var(--sps-text-dark);
    display: block;
    font-size: 14px;
    font-weight: 600;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 12px 22px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100001;
}

.skip-link:focus {
    left: 6px;
    top: 6px;
}

/* Edit link */
.edit-link {
    display: inline-block;
    margin: 10px 0;
    font-size: 13px;
}

.edit-link a {
    color: var(--sps-muted);
    text-decoration: underline;
}

@media (max-width: 1024px) {
    :root {
        --sps-container: 100%;
    }

    .menu-toggle {
        display: inline-flex !important;
        position: relative;
        z-index: 100002;
    }

    .main-navigation > div > ul,
    .main-navigation > ul {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        height: 100vh;
        max-height: 100vh;
        margin: 0;
        padding: 80px 0 40px;
        background-color: #051d3a;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 0;
        list-style: none;
        box-shadow: none;
        border-radius: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        z-index: 100000;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        visibility: hidden;
        pointer-events: none;
    }

    #site-navigation.toggled > div > ul,
    #site-navigation.toggled > ul,
    .main-navigation.toggled > div > ul,
    .main-navigation.toggled > ul {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
        display: flex;
    }

    /* Lock body scroll when menu is open */
    body.menu-open {
        overflow: hidden;
    }

    /* Backdrop button bar inside the open menu (close button area) */
    #site-navigation.toggled .menu-toggle,
    .main-navigation.toggled .menu-toggle {
        position: fixed;
        top: 18px;
        right: 18px;
        z-index: 100003;
        background: rgba(0,0,0,1);
        border-radius: var(--sps-radius-sm);
		border:none;
    }
    #site-navigation.toggled .menu-toggle span,
    .main-navigation.toggled .menu-toggle span {
        background: #fff !important;
    }

    .main-navigation li {
        width: 100%;
        position: relative;
        list-style: none;
    }

    .main-navigation a {
        display: block;
        width: 100%;
        padding: 14px 24px;
        border-radius: 0;
        color: #fff;
        font-size: 16px;
        font-weight: 500;
        text-decoration: none;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        background: transparent;
        text-align: left;
    }

    .main-navigation a:hover,
    .main-navigation a:focus,
    .main-navigation .current-menu-item > a,
    .main-navigation .current_page_item > a {
        background: rgba(255,255,255,0.05);
        color: #fff;
    }

    /* Show the dropdown caret button on mobile */
    .main-navigation .dropdown-toggle {
        display: inline-flex !important;
        position: absolute;
        top: 0;
        right: 0;
        width: 56px;
        height: 50px;
        background: transparent;
        border: 0;
        cursor: pointer;
        padding: 0;
        align-items: center;
        justify-content: center;
        z-index: 5;
        color: #fff;
    }
    .main-navigation .dropdown-toggle .dropdown-icon {
        width: 10px;
        height: 10px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform 0.2s ease;
    }
    .main-navigation .dropdown-open > .dropdown-toggle .dropdown-icon {
        transform: rotate(-135deg);
    }

    /* Hide the desktop ::after caret arrows on mobile */
    .main-navigation > div > ul > .menu-item-has-children > a::after,
    .main-navigation > ul > .menu-item-has-children > a::after,
    .main-navigation > div > ul > .page_item_has_children > a::after,
    .main-navigation > ul > .page_item_has_children > a::after,
    .main-navigation li.menu-item-has-children > a::after,
    .main-navigation li.page_item_has_children > a::after {
        display: none !important;
    }

    /* Sub-menus: stacked, collapsed by default, expand on .dropdown-open */
    .main-navigation ul ul {
        position: static !important;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        box-shadow: none;
        padding: 0;
        margin: 0;
        list-style: none;
        background: rgba(0,0,0,0.25);
        min-width: 0;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        border-radius: 0;
        display: block;
    }

    .main-navigation li.dropdown-open > ul {
        max-height: 2000px;
    }

    .main-navigation ul ul a {
        padding: 12px 24px 12px 44px;
        font-size: 15px;
        color: rgba(255,255,255,0.92);
    }

    .main-navigation ul ul ul a {
        padding-left: 64px;
        font-size: 14px;
        color: rgba(255,255,255,0.85);
    }

    .main-navigation ul ul ul {
        margin: 0;
        left: 0;
        transform: none;
        background: rgba(0,0,0,0.3);
    }

    /* Disable any leftover hover-based expansion on mobile */
    .main-navigation li:hover > ul {
        max-height: 0;
    }
    .main-navigation li.dropdown-open > ul,
    .main-navigation li.dropdown-open:hover > ul {
        max-height: 2000px;
    }

    .page_content {
        flex-direction: column;
        gap: 40px;
        padding: 40px 0;
    }

    #sidebar {
        width: 100%;
        flex: 1 1 100%;
    }

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

    .footer-rght {
        grid-column: 1 / -1;
    }

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

@media (max-width: 767px) {
    h1 { font-size: 28px; }
    h2 { font-size: 24px; }
    h3 { font-size: 20px; }

    .header > .container,
    .head-bar > .container {
        min-height: 70px;
        flex-wrap: wrap;
    }

    .srcrt {
        order: 4;
        width: 100%;
        margin-left: 0;
    }

    .skt-header-button {
        display: flex;
        justify-content: center;
    }

    .banner-container {
        padding: 35px 20px;
    }

    .banner-container h1 {
        font-size: 28px;
    }

    .inner-banner-thumb {
        min-height: 160px;
    }

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

    .rfl-row {
        grid-template-columns: 1fr;
    }

    .footerarea {
        padding: 40px 0 20px;
    }

    .comment-list .children {
        margin-left: 14px;
    }

    article.post .entry-header,
    article.hentry .entry-header,
    article.post .entry-content,
    article.hentry .entry-content,
    article.post .entry-summary,
    article.hentry .entry-summary,
    article.post .rdmore,
    article.hentry .rdmore {
        padding-left: 18px;
        padding-right: 18px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 14px;
    }

    .banner-container h1 {
        font-size: 24px;
    }

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


/* ==========================================================================
   13. Block Editor / Gutenberg
   ========================================================================== */

.wp-block-image figcaption {
    font-size: 13px;
    color: #666;
    margin-top: 8px;
    text-align: center;
}

.wp-block-pullquote {
    border-top: 4px solid #f69c00;
    border-bottom: 4px solid #f69c00;
    color: #333;
    padding: 2em 0;
}

.wp-block-button__link {
    background-color: #f69c00;
    color: #fff;
    padding: 12px 30px;
    border-radius: 4px;
    transition: 0.3s;
}

.wp-block-button__link:hover {
    background-color: #333;
    color: #fff;
}

/* ==========================================================================
   14. WooCommerce essentials
   ========================================================================== */

.woocommerce span.onsale {
    background-color: #f69c00;
	min-height: 2.66em;
    min-width: 2.66em;
    line-height: 2.66;
	font-size:12px !important;
}

.woocommerce ul.products li.product .button {
    background-color: #333;
    color: #fff;
}

.woocommerce ul.products li.product .button:hover {
    background-color: #f69c00;
}

.woocommerce div.product p.price, .woocommerce div.product span.price {
    color: #f69c00;
}

.woocommerce #respond input#submit.alt, 
.woocommerce a.button.alt, 
.woocommerce button.button.alt, 
.woocommerce input.button.alt {
    background-color: #f69c00;
}

/* ==========================================================================
   15. Tables, Code, Blockquote
   ========================================================================== */

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

th, td {
    padding: 12px;
    border: 1px solid #eee;
    text-align: left;
}

code, kbd, tt, var {
    font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
    background: #f4f4f4;
    padding: 2px 4px;
}

blockquote {
    font-style: italic;
    border-left: 5px solid #f69c00;
    margin: 20px 0;
    padding: 10px 20px;
    background: #fafafa;
}

/* ==========================================================================
   16. Accessibility & Utilities
   ========================================================================== */

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

.screen-reader-text:focus {
    background-color: #eee;
    clip: auto !important;
    clip-path: none;
    color: #444;
    display: block;
    font-size: 1em;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

.alignleft { float: left; margin: 6px 24px 18px 0; }
.alignright { float: right; margin: 6px 0 18px 24px; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; text-align: center; }

/* ==========================================================================
   RTL — minimal flips for right-to-left languages
   ========================================================================== */
body.rtl .alignright { float: left; margin: 6px 24px 18px 0; }
body.rtl .alignleft  { float: right; margin: 6px 0 18px 24px; }
body.rtl #logo-main  { text-align: right; }

body.rtl #sidebar h2::after,
body.rtl #sidebar h3::after,
body.rtl #sidebar h4::after,
body.rtl #sidebar h5::after,
body.rtl #sidebar h6::after,
body.rtl #sidebar .widget-title::after,
body.rtl #sidebar .wp-block-search__label::after,
body.rtl .footer h2::after,
body.rtl .footer h3::after,
body.rtl .footer h4::after,
body.rtl .footer h5::after,
body.rtl .footer h6::after,
body.rtl .footer .widget-title::after {
    left: auto;
    right: 0;
}