/* ========================================================================= */
/* 0. ROOT VARIABLES (Configuration) */
/* ========================================================================= */
:root {


        /* org theme */
    /* my theme */
    --site-bg: #EEF4FA;
    /* Main Site Background Colour */
    --content-bg: #fff;
    /* Important Box Background Colour */
    --brand: #0f6fff;
    --brand-2: #3aa1ff;
    --extra-color: #D81B60;
    --acent: #3AA1FF;
    --text: #0e1726;
    --muted: #6b7280;
    --border: rgba(13, 34, 51, 0.08);
    --shadow-strong: rgba(10, 25, 45, 0.08);
    --shadow-soft: rgba(10, 25, 45, 0.05);
    --sidebar-bg: #F4F8FF;
    --footer-bg: #F0F3F7;
    /* Buttons (light defaults) */
    --btn-primary: #0F6FFF;
    --btn-primary-hover: #0d5be6;
    --btn-secondary-border: rgba(15, 111, 255, 0.12);
    --btn-accent: #3AA1FF;
    --btn-success: #16A34A;
    --btn-warning: #F59E0B;
    --btn-danger: #EF4444;
    --site-max-width: 1200px;



    /* --- Spacing Scale (rem) --- */
    --space-unit: 0.5rem;
    --space-1: var(--space-unit);     /* 0.5rem (8px) */
    --space-2: calc(2 * var(--space-unit)); /* 1.0rem (16px) */
    --space-3: calc(3 * var(--space-unit)); /* 1.5rem (24px) */
    --space-4: calc(4 * var(--space-unit)); /* 2.0rem (32px) */
    --space-5: calc(6 * var(--space-unit)); /* 3.0rem (48px) */

    /* --- Primary & Semantic Colors --- */
    --color-primary: #007bff;   /* Main Brand Color (Blue) */
    --color-secondary: #6c757d; /* Secondary Text/UI Color (Gray) */
    --color-success: #28a745;   /* Success/Positive (Green) */
    --color-danger: #dc3545;    /* Danger/Error (Red) */

    /* --- Site Specific Colors (NEW) --- */
    --color-site: #f4f4f7;      /* Overall Site Background Color */
    --color-header: #343a40;    /* Header/Navigation Background (Dark) */
    --color-footer: #6c757d;    /* Footer Background (Secondary Gray) */
    --color-box-bg: #ffffff;    /* Default Card/Box Background */
    --color-box-border: #dee2e6; /* Default Card/Box Border */
    
    --color-white: #ffffff;
    --color-dark: #343a40;

    /* --- Font Sizes (rem) --- */
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.5rem;
    --fs-xxl: 2rem; 
}

.box { background: var(--content-bg) !important; }
.box-shadow { box-shadow: 0 14px 34px var(--shadow-strong) !important; }

/* ========================================================================= */
/* 1. LAYOUT, DISPLAY & FLEXBOX UTILITIES (d-*, flex-*) */
/* ========================================================================= */

/* Display Property */
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-none { display: none !important; }
.d-flex { display: flex !important; }

/* Width & Height (NEW) */
.w-25 { width: 25% !important; }
.w-30 { width: 30% !important; }
.w-50 { width: 50% !important; }
.w-70 { width: 70% !important; }
.w-75 { width: 75% !important; }
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; } /* Full height of parent */
.h-auto { height: auto !important; }

/* Base: Mobile (100% width) */
.w-full { flex: 1 0 100% !important; }

/* Tablet/Laptop: 50% width */
@media only screen and (min-width: 768px) {
    .md\:w-50 { 
        flex: 0 0 calc(50% - 10px) !important; /* 50% minus half the gap */
    }
}

/* Flex Direction & Wrap */
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }

/* Justify Content (Main Axis) */
.justify-start { justify-content: flex-start !important; }
.justify-end { justify-content: flex-end !important; }
.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-around { justify-content: space-around !important; }

/* Align Items (Cross Axis) */
.items-start { align-items: flex-start !important; }
.items-end { align-items: flex-end !important; }
.items-center { align-items: center !important; }
.items-baseline { align-items: baseline !important; }
.items-stretch { align-items: stretch !important; }

/* Align Text  */
.text-center { text-align: center !important; }

/* Gap Utilities (NEW) */
.gap-1 { gap: var(--space-1) !important; }
.gap-2 { gap: var(--space-2) !important; }
.gap-3 { gap: var(--space-3) !important; }
.gap-15{ gap: 15px;}

/* Column Gap Utilities (NEW) */
.col-gap-1 { column-gap: var(--space-1) !important; }
.col-gap-3 { column-gap: var(--space-3) !important; }
.row-gap-0 { row-gap: 0px !important; }

/* --- Position (Missing) --- */
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }


/* ========================================================================= */
/* 2. SPACING UTILITIES (p-*, m-*) */
/* ========================================================================= */

/* P-x: Padding All Sides */
.p-0 { padding: 0 !important; }
.p-1 { padding: var(--space-1) !important; }
.p-2 { padding: var(--space-2) !important; }
.p-3 { padding: var(--space-3) !important; }
.p-4 { padding: var(--space-4) !important; }
.p-5 { padding: 5px !important; }
.p-20 { padding: 66;}


/* PX-x: Padding X-Axis (Left & Right) */
.px-1 { padding-left: var(--space-1) !important; padding-right: var(--space-1) !important; }
.px-3 { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }
.px-5 { padding-left: var(--space-5) !important; padding-right: var(--space-5) !important; }
.px-20 { padding-left: 20px !important; padding-right: 20px !important; }


/* PY-x: Padding Y-Axis (Top & Bottom) */
.py-1 { padding-top: var(--space-1) !important; padding-bottom: var(--space-1) !important; }
.py-2 { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
.py-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }

/* PT/PB/PL/PR: Single Side Padding */
.pt-3 { padding-top: var(--space-3) !important; }
.pb-1 { padding-bottom: var(--space-1) !important; }
.pb-2 { padding-bottom: var(--space-2) !important; }
.pb-3 { padding-bottom: var(--space-3) !important; }
.pl-2 { padding-left: var(--space-2) !important; }
.pr-2 { padding-right: var(--space-2) !important; }

/* MT/MB/ML/MR: Margin Single Side */
.m-0 { margin: 0 !important; }
.mt-1 { margin-top: var(--space-1) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.ml-3 { margin-left: var(--space-3) !important; }
.mr-3 { margin-right: var(--space-3) !important; }
.mt-5 { margin-top: var(--space-5) !important; }
.mb-0 { margin-bottom: 0 !important; }

/* MX-auto: Horizontal Centering */
.mx-auto { margin-left: auto !important; margin-right: auto !important; }


/* ========================================================================= */
/* 3. COLOR & BACKGROUND UTILITIES (bg-*, text-*) */
/* ========================================================================= */

/* Text Color Classes */
.text-primary { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.text-success { color: var(--color-success) !important; }
.text-danger { color: var(--color-danger) !important; }
.text-dark { color: var(--color-dark) !important; }
.text-white { color: #fff !important; }
.text-theme{ color: var(--text); }
.heading-theme{ color: #000; }
.heading-h1-theme{ color: #000; }
.heading-h2-theme{ color: #000; }
.heading-h3-theme{ color: #000; }
.heading-h4-theme{ color: #000; }
.heading-h5-theme{ color: #000; }
.heading-h6-theme{ color: #000; }


/* Background Color Classes */
.bg-primary { background-color: var(--color-primary) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }
.bg-success { background-color: var(--color-success) !important; }
.bg-light { background-color: var(--color-site) !important; } /* Using Site Color */
.bg-dark { background-color: var(--color-dark) !important; }
.bg-white { background-color: var(--color-white) !important; }
.bg-extra { background-color: var(--extra-color) !important; }

/* --- Special Backgrounds (NEW) --- */
.bg-header { background-color: var(--color-header) !important; }
.bg-footer { background-color: var(--color-footer) !important; }
.bg-box { background-color: var(--color-box-bg) !important; }


/* ========================================================================= */
/* 4. TYPOGRAPHY UTILITIES (text-*, font-*) */
/* ========================================================================= */

/* Font Size Classes */
.text-sm { font-size: var(--fs-sm) !important; }
.text-base { font-size: var(--fs-base) !important; }
.text-lg { font-size: var(--fs-lg) !important; }
.text-xl { font-size: var(--fs-xl) !important; }
.text-xxl { font-size: var(--fs-xxl) !important; }
.text-17 { font-size: 17px !important; }
.text-14 { font-size: 14px !important; }
.text-16 { font-size: 16px !important; }
.text-15 { font-size: 15px !important; }


.text-sidebar { font-size: clamp(18px, calc(24px + 1vw), 20px) !important; }
.text-sidebar-h3 { font-size: 18px !important; }

/* Font Weight */
.font-400 { font-weight: 400 !important; }
.font-500 { font-weight: 500 !important; }
.font-600 { font-weight: 600 !important; }
.font-700 { font-weight: 700 !important; }

/* Text Alignment */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

/* Text Transformation */
.uppercase { text-transform: uppercase !important; }
.lowercase { text-transform: lowercase !important; }
.capitalize { text-transform: capitalize !important; }

.line-16 { line-height: 1rem !important; }


/* ========================================================================= */
/* 5. BORDER & SHADOW UTILITIES (border-*, rounded-*, shadow-*) */
/* ========================================================================= */

/* Border All Sides */
.border { border: 1px solid var(--border) !important; }

/* Border Color */
.border-primary { border-color: var(--color-primary) !important; }
.border-dark { border-color: var(--color-dark) !important; }

/* Border Removal */
.border-0 { border: 0 !important; }
.border-top-0 { border-top: 0 !important; }
.border-bottom-0 { border-bottom: 0 !important; }

/* Border Radius */
.rounded { border-radius: 0.25rem !important; }
.rounded-circle { border-radius: 50% !important; }
.rounded-0 { border-radius: 0 !important; }
.rounded-10 { border-radius: 10px !important; }

/* Shadow */
.shadow-sm { box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important; }
.shadow-lg { box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important; }


/* ========================================================================= */
/* 6. COMPONENT BASE CLASSES (BEM Examples) */
/* ========================================================================= */

/* --- Button Component Base --- */
.btn {
    display: inline-block;
    padding: var(--space-2) var(--space-3); 
    font-size: var(--fs-base);
    line-height: 1.5;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
}

/* Modifier: Primary Button */
.btn--primary {
    color: var(--color-white);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn--primary:hover {
    background-color: #0056b3; 
    border-color: #0056b3;
}

/* Modifier: Small Button */
.btn--small {
    padding: var(--space-1) var(--space-2);
    font-size: var(--fs-sm);
}

/* --- Card Component Base (Using NEW Colors) --- */
.card {
    background-color: var(--color-box-bg);
    border: 1px solid var(--color-box-border);
    border-radius: 0.25rem;
}

.card__body {
    padding: var(--space-3);
}

.card__footer {
    padding: var(--space-2);
    border-top: 1px solid var(--color-box-border);
}

.btn-1{ background: var(--extra-color); transition: all .5s ease; color: #fff;}
.btn-1:hover{ background: var(--brand); transition: all .5s ease; }

.btn-2{ background: #0056b3; transition: all .5s ease; color: #fff;}
.btn-2:hover{ background: #004494; transition: all .5s ease; }

.btn-10 a{ 
    background: var(--site-bg); 
    transition: all .5s ease; 
    color: var(--text);
    border-radius: 0.25rem;
    padding: var(--space-1);
    font-weight: 400;
    font-size: 15px;
}
.btn-10 a:hover{ 
    background: var(--content-bg); 
    transition: all .5s ease; 
}

/* Define the animation keyframes */
.animated-h-1 {
    display: block;
    text-align: center;
    color: #fff;
    font-size: 17px !important;
    font-weight: 500;
    line-height: 30px !important;
    background: linear-gradient(10deg, rgba(100, 206, 255, 0.82) 10%, rgba(76, 0, 255, 0.83) 100%);
    border-radius: 10px 5px;
    box-shadow: 0 0 9px #c5c5c5;
    animation: sidebar-category-heading-animation 2s infinite;
}

@keyframes sidebar-category-heading-animation {
    0%,
    100% {
        transform: scale(1);
        box-shadow: rgba(51, 217, 178, 0.165) 0px 0px 0px 0px;
    }
    50% {
        transform: scale(0.988398);
        box-shadow: rgba(51, 217, 178, 0.165) 0px 0px 0px 7.67955px;
    }
}

/* ========================================================================= */
/* 7. Animation (p-*, m-*) */
/* ========================================================================= */

.transition-5{
    transition: all .5s ease
}

/* ========================================================================= */
/* 8. Decoration (p-*, m-*) */
/* ========================================================================= */

.list-none{
    list-style: none;
}


/* ========================================================================= */
/* 9. Display Condition Based on Device (bg-*, text-*) */
/* ========================================================================= */
/* --- Base: Hide on Mobile --- */
.hide-mobile {
    display: none !important;
}

/* --- Base: Show on Mobile (Default) --- */
.show-mobile {
    display: block !important;
}

/* --- Tablet/Laptop/PC Breakpoint (820px and up) --- */
@media only screen and (min-width: 820px) {
    /* Show the PC-only element */
    .md\:show-pc {
        display: block !important;
    }
    
    /* If the PC element needs to be flex */
    .md\:show-pc-flex {
        display: flex !important;
    }

    /* Hide the Mobile-only element on PC */
    .md\:hide-pc {
        display: none !important;
    }
}

/* ========================================================================= */
/* 10. RESPONSIVE UTILITIES (Media Queries for all devices) */
/* ========================================================================= */
/* 📱 Extra Small devices (small phones, < 320px) */


/* ==========================================================================
   DEVICE-BASED BACKGROUND COLORS
   Desktop-First Responsive Strategy
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DEFAULT (PC / Laptop)
   Applies to: 1024px and above
   -------------------------------------------------------------------------- */

.device-box {
  background-color: #2ecc71; /* Green → Laptop / Desktop */
  color: #ffffff;
  padding: 30px;
  text-align: center;
  font-size: 18px;
}


/* --------------------------------------------------------------------------
   2. LARGE DESKTOP / PC
   Width: 1200px and above
   -------------------------------------------------------------------------- */

@media (min-width: 1200px) {
  .device-box {
    background-color: #27ae60; /* Dark Green → Large Screens */
  }
}


/* --------------------------------------------------------------------------
   3. LAPTOP
   Width: 1024px – 1199px
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) and (min-width: 1024px) {
  .device-box {
    background-color: #2980b9; /* Blue → Laptop */
  }
}


/* --------------------------------------------------------------------------
   4. TABLET (Portrait & Landscape)
   Width: 768px – 1023px
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) and (min-width: 768px) {
  .device-box {
    background-color: #f39c12; /* Orange → Tablet */
  }
}


/* --------------------------------------------------------------------------
   5. MOBILE LANDSCAPE
   Width: 480px – 767px
   -------------------------------------------------------------------------- */

@media (max-width: 767px) and (min-width: 480px) {
  .device-box {
    background-color: #8e44ad; /* Purple → Mobile Landscape */
  }
}


/* --------------------------------------------------------------------------
   6. MOBILE PORTRAIT
   Width: 0 – 479px
   -------------------------------------------------------------------------- */

@media (max-width: 479px) {
  .device-box {
    background-color: #e74c3c; /* Red → Mobile Portrait */
  }
}


/* --------------------------------------------------------------------------
   7. OPTIONAL: ORIENTATION BASED (If Needed)
   -------------------------------------------------------------------------- */

/* Mobile Landscape override (orientation specific) */
@media (max-width: 767px) and (orientation: landscape) {
  .device-box {
    background-color: #9b59b6;
  }
}



/* ============================================ */
/* ============================================ */
/* ============================================ */
/* ============================================ */
/* ============================================ */
/* ============================================ */
/* ============================================ */
/* ============================================ */
/* ============================================ */
/* ============================================ */

/* =================================== */
/* ---------------------------
    Light-mode variables (defaults)
--------------------------- */

.testsfs {
    width: 100%;
    height: 400px;
    color: #0F6FFF;
}



/* ---------------------------
    Dark-mode: stronger contrast
--------------------------- */

@media (prefers-color-scheme: dark) {
     :root {
        --site-bg: #030617;
        /* Main Site Background Colour */
        /* Brighter brand for emphasis */
        --brand: #58a6ff;
        /* lighter / vivid blue */
        --brand-2: #2b8cff;
        /* Dark surfaces with strong contrast */
        --bg: #041025;
        /* primary surface for UI elements */
        --page-bg: #02040a;
        /* page background - near black */
        --text: #d8d8d8;
        /* very bright text for strong contrast */
        --muted: #9fb7cf;
        /* readable muted text */
        --border: rgba(255, 255, 255, 0.08);
        /* firmer border */
        --shadow-strong: rgba(2, 6, 23, 0.7);
        --shadow-soft: rgba(0, 0, 0, 0.5);
        --content-bg: #0A1A33;
        /* Important Box Background Colour */
        --sidebar-bg: #0A1A33;
        --footer-bg: #02060d;
        --btn-primary: #58A6FF;
        --btn-primary-hover: #2B8CFF;
        --btn-secondary-border: rgba(255, 255, 255, 0.06);
        --btn-accent: #7FC3FF;
        --btn-success: #34D399;
        --btn-warning: #FBBF24;
        --btn-danger: #FF6B6B;
    }
}


/* ---------------------------
    Light-mode variables (defaults)
--------------------------- */

:root {
    /* org theme */
    /* my theme */
    --site-bg: #EEF4FA;
    /* Main Site Background Colour */
    --content-bg: #fff;
    /* Important Box Background Colour */
    --brand: #0f6fff;
    --brand-2: #3aa1ff;
    --extra-color: #D81B60;
    --acent: #3AA1FF;
    --text: #0e1726;
    --muted: #6b7280;
    --border: rgba(13, 34, 51, 0.08);
    --shadow-strong: rgba(10, 25, 45, 0.08);
    --shadow-soft: rgba(10, 25, 45, 0.05);
    --sidebar-bg: #F4F8FF;
    --footer-bg: #F0F3F7;
    /* Buttons (light defaults) */
    --btn-primary: #0F6FFF;
    --btn-primary-hover: #0d5be6;
    --btn-secondary-border: rgba(15, 111, 255, 0.12);
    --btn-accent: #3AA1FF;
    --btn-success: #16A34A;
    --btn-warning: #F59E0B;
    --btn-danger: #EF4444;
    --site-max-width: 1200px;
    /* Spacing scale */
    --space-xs: 6px;
    --space-sm: 10px;
    --space-md: 10px;
    --space-lg: 24px;
    --space-xl: 40px;
    /* Typography — fluid using clamp()
     formula: clamp(min, preferred, max)
     preferred can use viewport units for fluid scaling */
    --fs-xs: clamp(0.75rem, 0.7vw + 0.45rem, 0.85rem);
    /* ~12-14px */
    --fs-sm: clamp(0.9rem, 0.9vw + 0.2rem, 1rem);
    /* ~14-16px */
    --fs-base: clamp(1rem, 1.0vw + 0.25rem, 1.125rem);
    /* ~16-18px */
    --fs-lg: clamp(1.125rem, 1.6vw + 0.2rem, 1.375rem);
    /* ~18-22px */
    --fs-xl: clamp(1.5rem, 2.4vw + 0.3rem, 2rem);
    /* ~24-32px */
    --radius: 10px;
    --header-height: 72px;
    /* Responsive font sizes */
    --fs-p: clamp(15px, 1.5vw, 18px);
    /* 18px on laptop */
    --fs-h6: clamp(17px, 1.6vw, 21px);
    /* 21px on laptop */
    --fs-h5: clamp(20px, 1.8vw, 24px);
    /* 24px on laptop */
    --fs-h4: clamp(22px, 2vw, 27px);
    /* 27px on laptop */
    --fs-h3: clamp(24px, 2.2vw, 30px);
    /* 30px on laptop */
    --fs-h2: clamp(26px, 2.4vw, 33px);
    /* 33px on laptop */
    --fs-h1: clamp(28px, 2.6vw, 36px);
    /* 36px on laptop */
}


/* ---------------------------
    Dark-mode: stronger contrast
--------------------------- */

@media (prefers-color-scheme: dark) {
     :root {
        --site-bg: #030617;
        /* Main Site Background Colour */
        /* Brighter brand for emphasis */
        --brand: #58a6ff;
        /* lighter / vivid blue */
        --brand-2: #2b8cff;
        /* Dark surfaces with strong contrast */
        --bg: #041025;
        /* primary surface for UI elements */
        --page-bg: #02040a;
        /* page background - near black */
        --text: #d8d8d8;
        /* very bright text for strong contrast */
        --muted: #9fb7cf;
        /* readable muted text */
        --border: rgba(255, 255, 255, 0.08);
        /* firmer border */
        --shadow-strong: rgba(2, 6, 23, 0.7);
        --shadow-soft: rgba(0, 0, 0, 0.5);
        --content-bg: #0A1A33;
        /* Important Box Background Colour */
        --sidebar-bg: #0A1A33;
        --footer-bg: #02060d;
        --btn-primary: #58A6FF;
        --btn-primary-hover: #2B8CFF;
        --btn-secondary-border: rgba(255, 255, 255, 0.06);
        --btn-accent: #7FC3FF;
        --btn-success: #34D399;
        --btn-warning: #FBBF24;
        --btn-danger: #FF6B6B;
    }
}


/* Good global defaults */

* {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    /* background: var(--site-bg) !important; */
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: clamp(16px, calc(14px + 0.3vw), 18px);
    line-height: 1.7;
}


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

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}


/* ========================
   Base Typography
======================== */

p {
    line-height: 1.6;
    font-size: clamp(15px, 1vw + 14px, 18px);
    cursor: default;
    margin-bottom: 1em;
    color: var(--text);
}


/* ========================
   Headings
======================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.2;
    margin: 0.8em 0 0.5em;
    cursor: default;
    color: var(--text);
    font-family: inherit;
    font-weight: 500;
}


/* Headings */

h1 {
    font-weight: 600;
    font-size: clamp(1.875rem, 1.2rem + 2vw, 2.25rem);
}

h2 {
    font-size: clamp(1.688rem, 1rem + 1.5vw, 2.063rem);
    font-weight: 600;
}

h3 {
    font-size: clamp(1.5rem, 0.9rem + 1vw, 1.875rem);
    font-weight: 600;
}

h4 {
    font-size: clamp(1.375rem, 0.8rem + 0.8vw, 1.688rem);
    font-weight: 500;
}

h5 {
    font-size: clamp(1.25rem, 0.7rem + 0.6vw, 1.5rem);
    font-weight: 500;
}

h6 {
    font-size: clamp(1.125rem, 0.6rem + 0.4vw, 1.313rem);
    font-weight: 500;
}

section h1,
article h1,
aside h1,
nav h1 {
    font-size: clamp(1.875rem, 1.2rem + 2vw, 2.25rem);
}


/* ========================
   Lists & Blockquotes
======================== */

a {
    text-decoration: none !important;
}


/* ---------- Responsive typography for headings ---------- */


/* ===============================
=============================== */


/* ==== Golobale Veriyable Class ========= */

.decoration-n {
    text-decoration: none;
}

.padding-20 {
    padding: 20px;
}

.padding-10 {
    padding: 10px;
}

.padding-5 {
    padding: 5px;
}

.padding-0 {
    padding: 0px !important;
}

.border {
    border: 1px solid var(--border);
}

.text-black {
    color: #000;
}

.text-white {
    color: #fff;
}

.shadow-strong {
    box-shadow: 0 6px 16px var(--shadow-strong);
}

.shadow-strong-border {
    box-shadow: 0 6px 16px var(--shadow-strong);
    border: 1px solid var(--border);
}

.shadow-soft {
    box-shadow: 0 10px 24px var(--shadow-soft);
}

.shadow-soft-border {
    box-shadow: 0 10px 24px var(--shadow-soft);
    border: 1px solid var(--border);
}

.box {
    background: var(--content-bg);
    box-shadow: 0 6px 16px var(--shadow-strong);
    border: 1px solid var(--border);
}

.sidebar-box {
    background: var(--sidebar-bg);
    box-shadow: 0 10px 24px var(--shadow-soft);
    border: 1px solid var(--border);
}


/* ===============================
=============================== */


/* * ========== LAYOUTS (Content + Sidebar) ========== */

*/
/* Two-column layout: sidebar + main content (flex only) */


/* Skip link */

.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip-link:focus {
    left: 12px;
    top: 12px;
    width: auto;
    height: auto;
    background: #000;
    color: #fff;
    padding: 10px;
    z-index: 1000;
    border-radius: 6px;
}


/* Small devices (portrait tablets and large phones, 600px and up) */

@media only screen and (min-width: 600px) {
    body {
        background: var(--site-bg);
    }
}


/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width: 768px) {
    body {
        background: var(--site-bg);
    }
}


/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px) {
    body {
        background: var(--site-bg);
    }
}


/* Extra large devices (large laptops and desktops, 1200px and up) */

@media only screen and (min-width: 1200px) {
    body {
        background: var(--site-bg);
    }
}


/* ==============================================
   1. Default Mobile Styles (content and sidebar are 100% width)
============================================== */


/* By default, show the first price table and hide the second one */

.price-table {
    display: block;
    /* Or 'flex', 'grid', etc., depending on its structure */
}

.price-table-2 {
    display: none;
}


/* ==============================================
   2. Desktop Styles (for screens 768px and wider)
============================================== */

@media (min-width: 768px) {
    /* When the two-column layout is active, hide the first price table... */
    .price-table {
        display: none;
    }
    /* ...and show the second price table. */
    .price-table-2 {
        display: block;
        /* Or 'flex', 'grid', etc. */
    }
}

.pp-popular-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.pp-popular-categories a {
    --tw-text-opacity: 1;
    color: rgb(55 48 163 / var(--tw-text-opacity, 1));
    font-weight: 600;
    line-height: 1rem;
    font-size: 0.75rem;
    padding: 0.125rem 0.625rem;
    --tw-bg-opacity: 1;
    border-radius: 100px;
    text-decoration: none;
    background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}

body.header-post .site-header {
    background: #ff0606 !important;
    padding-top: var(--header-height);
}

wp-singular post-template-default single single-post postid-8948 single-format-standard wp-custom-logo wp-theme-pyare-theme elementor-default elementor-kit-5 body.header-demo .site-header {
    background: #054bee !important;
}

body.header-page .site-header {
    background: #ffee00 !important;
}

body.header-elementor .site-header {
    display: none;
}


/* =========================================
   GUTENBERG WIDTH SYSTEM
========================================= */


/* Default content width */

.wp-site-blocks,
.entry-content {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}


/* Wide blocks */

.entry-content .alignwide {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}


/* Full width blocks */

.entry-content .alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: 0;
    padding-right: 0;
}


/* =========================================
   DO NOT TOUCH ELEMENTOR PAGES
========================================= */

.elementor-page .entry-content,
.elementor-page .wp-site-blocks {
    max-width: none;
    padding: 0;
}


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

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}