/**
Theme Name: Astra
Theme URI: https://wpastra.com/
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 6,000+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
Version: 4.13.3
Requires at least: 5.3
WC requires at least: 3.0
WC tested up to: 10.7.0
Tested up to: 7.0
Requires PHP: 5.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra
Domain Path: /languages
Tags: custom-menu, custom-logo, entertainment, one-column, two-columns, left-sidebar, e-commerce, right-sidebar, custom-colors, editor-style, featured-images, full-width-template, microformats, post-formats, rtl-language-support, theme-options, threaded-comments, translation-ready, blog
AMP: true

Astra WordPress Theme, Copyright 2020 WPAstra.
Astra is distributed under the terms of the GNU GPL.

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

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

Astra icon font is based on IcoMoon-Free vector icon by Keyamoon.
IcoMoon-Free vector icon distributed under terms of CC BY 4.0 or GPL. (https://creativecommons.org/licenses/by/4.0/ or https://www.gnu.org/licenses/gpl.html)
Source: http://keyamoon.com/

Flexibility is a JavaScript polyfill for Flexbox By Jonathan Neal, 10up. (https://github.com/jonathantneal/flexibility)
Licensed under MIT ( https://github.com/jonathantneal/flexibility/blob/master/LICENSE.md )

Screenshot image is a collage of actual sites created using the Astra WordPress Theme.

Icons used in the Screenshot image are all licensed under Creative Commons ( CC BY 4.0 ) License ( https://fontawesome.com/license/free )
https://fontawesome.com/v5.15/icons/store?style=solid
https://fontawesome.com/v5.15/icons/shopping-cart?style=solid
https://fontawesome.com/v5.15/icons/pen-square?style=solid
https://fontawesome.com/v5.15/icons/user-tie?style=solid
https://fontawesome.com/v5.15/icons/user-tie?style=solid

Illustrations used in the Screenshot images are all licensed under Creative Commons ( CC0 ) License ( https://gumroad.com/l/humaaans )
https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/standing-24.png
https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/sitting-2.png

Hand-drawn illustrations used are created by Brainstorm Force and released under Creative Commons ( CC0 ) License.
https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/girl-with-image-container.png
https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/boy-with-code-container.png
https://websitedemos.net/web-design-agency-08/wp-content/uploads/sites/796/2021/05/web-browser.png

The same site as screenshot can be imported from here https://websitedemos.net/web-design-agency-08/.

For more information, refer to this document on how to create a page like in the screenshot - https://wpastra.com/docs/replicating-the-screenshot/.

Astra default breadcrumb is based on Breadcrumb Trail by Justin Tadlock. (https://github.com/justintadlock/breadcrumb-trail)
Breadcrumb Trail is distributed under the terms of the GNU GPL v2 or later.

Astra local fonts feature is based on Webfonts Loader by WordPress Themes Team (WPTT). (https://github.com/WPTT/webfont-loader)
Licensed under MIT ( https://github.com/WPTT/webfont-loader/blob/master/LICENSE )

/* Note: The CSS files are loaded from assets/css/ folder. */


/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display';
}

.comments-area{
  display: none;
}

/* Body Content */
body, p, span, li, a {
  font-family: 'Inter', Manrope;
}

/* ===================================
   HEADER
=================================== */

.custom-header{
   width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
    height: 70px;
    position: fixed;
    top: 0px;
    z-index: 9999;
}

*{
    box-sizing:border-box;
}

.container{
    max-width:1200px;
    margin:auto;
    padding:12px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

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

/* LOGO */

.header-logo a{
    display:flex;
    align-items:center;
    gap:10px;
}

.header-logo img{
    width:45px;
}

.header-logo h2{
    margin:0;
    font-size:14px;
    color:#0F3D7A;
    font-family:Montserrat,sans-serif;
}

.header-logo p{
    margin:0;
    font-size:11px;
    color:#A6742E;
    font-style:italic;
    font-weight:bold;
    width:124px;
}

/* NAVIGATION */

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

.nav a{
    text-decoration:none;
    color:#475569;
    font-size:14px;
    font-weight:600;
    transition:.3s;
}

.nav a:hover{
    color:#0F3D7A;
}

.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 120%;
  left: 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  padding: 10px 0;
  min-width: 180px;

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.25s ease;
}

.dropdown-menu a {
  display: block;
  padding: 10px 15px;
  color:rgb(71, 85, 105);
  text-decoration: none;
}

.dropdown-menu a:hover {
  background: #f5f5f5;
}

.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown i{
   font-size: 11px;
}

/* RIGHT AREA */

.right{
    display:flex;
    align-items:center;
    gap:10px;
}

.right select{
   width: 121px;
    height: 33px;
    border: 2px solid #C48A3A;
    border-radius: 32px;
    padding: 0 16px;
}

/* BUTTONS */

.login{
    border:2px solid #C48A3A;
    padding:6px 16px;
    border-radius:20px;
    background:transparent;
    color:#0F3D7A;
    text-decoration:none;
    font-size:12px;
    font-weight:bold;
    white-space:nowrap;
}

.cta{
    background:#0d2c6c;
    color:#fff;
    padding:8px 15px;
    border-radius:20px;
    text-decoration:none;
    font-size:13px;
    white-space:nowrap;
}

.cta:hover{
    color:#fff;
}

/* MENU BUTTON */

.menu-toggle{
    display:none;
    width:42px;
    height:42px;
    align-items:center;
    justify-content:center;
    border:1px solid lightgray;
    border-radius:50%;
    font-size:24px;
    color:#0F3D7A;
    cursor:pointer;
    background:#fff;
}
/* MOBILE */

@media (max-width:900px){

    /* Menu Button */
    .menu-toggle{
    display:flex !important;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    border-radius:50%;
    font-size:22px;
    cursor:pointer;
    margin-left:auto;
    margin-bottom:0;
}

    .right select,
.right .login,
.right .cta {
    display:none;
}

.header-logo h2 {
    margin: 0;
    font-size: 16px;
    color: #0F3D7A;
    font-family: Montserrat, sans-serif;
}

.header-logo p {
    margin: 0;
    font-size: 12px;
    color: #A6742E;
    font-style: italic;
    font-weight: bold;
    width: 124px;
}

.login{
    border:1px solid #0F3D7A;
    padding:6px 16px;
    border-radius:20px;
    background:transparent;
    color:#0F3D7A;
    text-decoration:none;
    font-size:16px;
    font-weight:bold;
    white-space:nowrap;
}

    .right{
        display:flex;
        align-items:center;
        margin-left:auto;
        transform: translate(4px, -5px);
        
    }

    /* Mobile Menu */
    .container{
        flex-wrap:wrap;
        position:relative;
    }
    
    .custom-header{
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
    height: 70px;
    position: fixed;
    top: -2px;
    z-index: 9999;
}
    
    .nav{
    display:none;
    width:100%;
    flex-direction:column;
    gap:0;
    margin-top:10px;
    background:#fff;
    }

header.custom-header .container{
    position:relative;
}

    .nav.active{
    display:flex !important;
    position:absolute;
    top:58px;
    left:0;
    width:100%;
    z-index:999;
    border-top:1px solid #eee;
    }

    .nav a{
        width:100%;
        padding:14px;
        border-bottom:1px solid #eee;
        background:#fff;
    }
    
.header-logo{
    transform: translateX(-10px);
}

.menu-toggle:hover{
background-color:white;
color:#0F3D7A;
border:1px solid lightgray;
}

}

.language-switcher{
    width:120px;
    height:38px;
    padding-left:35px;
    border:1px solid #d1d5db;
    border-radius:8px;
    background-color:#f8fafc;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 6H11M7 4V8' stroke='%23000000' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M4.5 10C5.5 12.5 7.5 14.5 10 16' stroke='%23000000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.5 14C6.5 12.5 8 10.5 9 8.5' stroke='%23000000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15 18L18 9L21 18' stroke='%23000000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.5 15H19.5' stroke='%23000000' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:2px center;
    color:black;
}

.language-switcher:focus{
    border-color:lightgray;
}
















/* ===================================
  MIDDLE-CONTENT (CARDS)
=================================== */

:root{
    --primary:#0F3D7A;
    --gold:#C48A3A;
}

/* GRID */
.insights-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.insights-header{
    text-align: center;
    margin-top: 100px;
    margin-bottom: 70px;
}

.insights-header h2 {
    font-size: 65px;

    background: linear-gradient(
        90deg,
        #0F3D7A,
        #2A5DA8,
        #C48A3A,
        #E0B46A,
        #C48A3A,
        #2A5DA8,
        #0F3D7A
    );

    background-size: 200% auto;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    display: inline-block;

    animation: gradientShift 4s ease-in-out infinite;
}

@keyframes gradientShift {
    0% {
        background-position: 0% center;
    }
    50% {
        background-position: 120% center;
    }
    100% {
        background-position: 0% center;
    }
}

.insights-header p{
color: #64748b;
font-size: 22px;
}

/* CARD */
.insight-card{
    display:grid;
    position:relative;
    grid-template-columns:80px 1fr;
    background:#fff;
    border:1px solid #E5E7EB;
    border-radius:20px;
    overflow:hidden;
    min-height:auto;
    text-decoration:none;
    color:inherit;
    transition:all .3s ease;
}

.insight-card:hover{
    transform:translateY(-6px);
    border-color:var(--gold);
    box-shadow:0 18px 40px rgba(0,0,0,.08);
}

/* LEFT CATEGORY */
.tag {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 100%;
  font-size: 16px;
  color: white;
  display: flex;
  align-items: center;
  font-weight: 600;
  text-transform: uppercase;
  justify-content: center;
  writing-mode: sideways-lr;
  background-color: #C48A3A;
  padding: 10px;
}

/* RTL FIX */
html[dir="rtl"] .tag {
  left: auto;
  right: 0;
}
.tag svg{
transform: rotate(270deg);
    margin-top: 5px;
}

/* RIGHT SIDE FLOW FIX */
.insight-card h3,
.insight-card p{
    grid-column:2;
       margin-left:100px;
}

/* TITLE (STABLE HEIGHT CONTROL) */
.insight-card h3{
    margin:24px 24px 10px;
    color:var(--primary);
    font-size:25px;
    font-weight:700;
    line-height:1.3;
}

/* DESCRIPTION */
.insight-card p{
    margin:0 24px 24px;
    color:#64748B;
    font-size:17px;
    line-height:1.6;
}

/* IMAGE SAFETY */
.card-image{
    display:none;
}


/* RESPONSIVE */
@media(max-width:768px){
    .insights-grid{
        grid-template-columns:1fr;
    }

    .insight-card{
        grid-template-columns:60px 1fr;
    }
    
    .insight-card p {
    margin: 0 40px 24px;
    color: #64748B;
    font-size: 26px;
    line-height: 1.6;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 19px;
    direction: ltr;
}

  .insight-card h3{
    margin:24px 40px 10px;
    color:var(--primary);
    font-size:30px;
    font-weight:700;
    line-height:1.3;
}
}










/* ===============================
    FOOTER 
   =============================== */

.custom-footer {
  background: #030B17;
  color: #fff;
  padding: 60px 5%;
      margin-top: 70px;
}

/* TOP SECTION */
.footer-container {
  display: flex;
  justify-content: space-between;
  gap: 50px;
  flex-wrap: wrap;
}

.footer-left {
  flex: 1;
  min-width: 280px;
}

.footer-logo a{
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translateX(-3px);
}

.footer-logo img{
  width: 42px;
  margin-bottom: 26px;
}

.footer-logo h3{
  font-size: 14px;
  letter-spacing: 3px;
  color: #D9A85A;
}

.footer-logo p{
  font-size: 12px;
  color: #aaa;
  width: 140px;
}

.footer-left h1 {
  font-size: 30px;
  line-height: 1.2;
  color: white;
  margin: 5px 0;
  font-weight: 700;
}

.desc {
  color: rgba(255, 255, 255, 0.65);
  width: 525px;
  font-size: 15px;
}

/* LINKS */
.footer-links {
  display: flex;
  gap: 125px;
  flex-wrap: wrap;
}

.footer-links h4 {
  font-size: 15px;
  letter-spacing: 2px;
  color:goldenrod;
  margin-bottom: 15px;
}

.footer-links a,
.footer-links p {
  display: block;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 10px;
  text-decoration: none;
  font-size: 14px;
  transition: 0.3s;
}

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

/* CTA BOX */
.footer-cta {
  margin-top: 60px;
  background-color: rgba(196, 138, 58, 0.1);
  border-radius: 25px;
  padding: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  border: 1px solid rgba(196, 138, 58, 0.2);
}

.cta-left {
  display: flex;
  gap: 20px;
  align-items: center;
}

.icon {
     background: #C48A3A;
    padding: 15px;
    border-radius: 14px;
    margin-bottom: 33px;
    font-size: 0px;
}

.small {
  font-size: 12px;
  letter-spacing: 2px;
  color: #caa85d !important;
}

.cta-left h2 {
  margin: 5px 0;
  color: white;
}

.cta-left p {
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 0px;
  font-size: 16px;
}

/* BUTTON */
.cta-btn {
  background: #fff !important;
  color: #0F3D7A !important;
  padding: 14px 22px;
  border-radius: 16px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: 0.3s;
}

.cta-btn:hover {
  background:#D9A85A !important;
  color:white !important;
}

/* BOTTOM */
.footer-bottom {
  border-top: 1px solid #1a2a3a;
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
      margin-bottom: -60px;
  color: #aaa;
  font-size: 15px;
}

.footer-bottom a {
  margin-left: 22px;
  color: #aaa;
  text-decoration: none;
  transition: 0.3s;
}

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

/* 📱 RESPONSIVE */
@media (max-width: 768px) {

  .footer-left h1 {
    font-size: 28px;
  }

.cta-left h2 {
    margin: 5px 0;
    font-size: 32px;
    color: white;
}

  .footer-links {
    gap: 67px;
  }
  
  .cta-left p {
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 0px;
    font-size: 20px;
}
  
  .footer-links h4 {
    font-size: 16px;
    letter-spacing: 2px;
    color: goldenrod;
    margin-bottom: 15px;
}

.footer-links a{
      display: block;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 10px;
    text-decoration: none;
    font-size: 18px;
    transition: 0.3s;
}

  .footer-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  
  .footer-left h1 {
  font-size: 42px;
  line-height: 1.2;
  color: white;
  transform: translateX(0px);
  margin: 20px 0;
  font-weight: 700;
}

.icon {
     background: #C48A3A;
    padding: 15px;
    border-radius: 14px;
    margin-bottom: 33px;
    font-size: 0px;
    display:none;
}

.desc {
  color: #bbb;
        max-width: 382px;
        transform: translateX(0px);
        font-size: 18px;
}

  .cta-btn {
    width: 100%;
    text-align: center;
    font-size: 20px;
  }
  
  .footer-bottom a {
  margin-left: 2px;
  color: #aaa;
  text-decoration: none;
  transition: 0.3s;
}

  .footer-bottom {
    flex-direction: column;
    gap: 10px;
    margin-bottom:-20px;
    font-size: 19px;
  }
}

.phone-number {
  margin-left: 20px;
  display: inline-block;
}




















/* ===================================
   LANGUAGE-SWITCHER
=================================== */

body.rtl header.custom-header .container{
    display:flex !important;
    flex-direction:row-reverse !important;
    align-items:center !important;
    justify-content:space-between !important;
}

[dir="rtl"] .tag{
    flex-direction: row-reverse;
}

/* LOGO RIGHT */
body.rtl header.custom-header .header-logo{
    order:3 !important;
    margin:0 !important;
}

/* MENU CENTER */
body.rtl header.custom-header .nav{
    order:2 !important;
    display:flex !important;
    align-items:center !important;
}

/* BUTTONS LEFT */
body.rtl header.custom-header .right{
    order:1 !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    margin:0 !important;
}


/* MOBILE MENU FIX */

@media (max-width:900px){

    /* MENU DEFAULT HIDDEN */
    #navMenu{
        display:none !important;
    }
    
    [dir="rtl"] .tag{
    flex-direction: row;
}
    
    body.rtl header.custom-header .header-logo{
    order:3 !important;
    transform:translateX(0px);
    margin:0 !important;
}

/* BUTTONS LEFT */
body.rtl header.custom-header .right{
    order:1 !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    transform:translateX(0px);
    margin:0 !important;
}

body.rtl .menu-toggle{
    display:flex !important;
    align-items:center;
    justify-content:center;

    width:42px;
    height:42px;
    border-radius:50%;

    font-size:22px;
    cursor:pointer;

    margin-left:auto;
    margin-bottom:0;

    transform:translateX(-120px);
}

    /* MENU OPEN */
    #navMenu.active{
        display:flex !important;
        position:fixed !important;
        top:57px !important;
        left:0 !important;
        right:0 !important;
        width:100% !important;
        height:calc(100vh - 155px) !important;
        background:#fff !important;
        flex-direction:column !important;
        padding:5px !important;
        z-index:99999 !important;
    }

    #navMenu.active a{
        display:flex !important;
        justify-content:flex-end !important;
        min-height:52px !important;
        background:#f8fafc !important;
        font-size: 16px;
        border-radius:12px !important;
        padding:10 18px !important;
        margin-bottom:12px !important;
    }
    
    .right.active{
           position: fixed !important;
        left: 7px !important;
        right: 10px !important;
        top: 480px;
        bottom: 10px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        z-index: 100000 !important;
}

/* Full Width Controls */

.right.active .language-switcher,
.right.active .login,
.right.active .cta{
    display:flex !important;
    width:100% !important;
            font-size: 16px;
    height:48px !important;
    justify-content:center !important;
    align-items:center !important;
}

body:not(.rtl) #navMenu.active a{
    justify-content:flex-start !important;
    text-align:left !important;
}

body.rtl #navMenu.active a{
    display: block !important;
    width: 100% !important;
    text-align: right !important;
}
}

















/* ===== FORCE FULL WIDTH (FINAL) ===== */

/* outer container */
.single-post .ast-container{
    max-width:100% !important;
    width:100% !important;
    padding-left:0 !important;
    padding-right:0 !important;
}

/* inner container */
.single-post .site-content .ast-container{
    max-width:100% !important;
}

/* article full width */
.single-post article{
    width:100% !important;
    margin:0 !important;
}

/* meta (author/date) */
.single-post .entry-meta{
    max-width: 900px;
    margin: 0 auto 30px auto;
}

















.sidebar-toc a {
  display: block;
  padding: 15px 25px;
  margin-bottom: 6px;
      line-height: normal;
    font-size: 17px;
  text-decoration: none;
  color: #D9A85A;
  border-radius: 6px;
  transition: 0.3s;
}

.sidebar-toc ul{
   margin: auto;
}

.sidebar-toc a.active {
  background: #C48A3A;
  color: #fff;
}

.sidebar-toc {
    position: sticky;
    top: 68px;
    border-radius:20px;
    max-height: calc(100vh - 80px); /* full screen ke andar */
    overflow-y: auto; /* scroll enable */
    background-color: #0F3D7A;
    padding: 20px 5px;
    border-left: 2px solid #eee;
}

.post-navigation,
.navigation.post-navigation,
.ast-single-post-navigation,
.nav-links {
    display: none !important;
}

#page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: white;
}



@media (max-width: 768px) {
    .sidebar-toc {
        display: none !important;
    }
}
















/* Heading Design */

.wp-block-heading{
    position: relative;
    color: #0F3D7A;
    font-size: 38px;
    font-weight: 700;
    margin-top: 70px;
    margin-bottom: 25px;
    padding-left: 22px;
}

.wp-block-heading::before{
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 38px;
    border-radius: 20px;
    background: linear-gradient(180deg, #D9A85A, #C48A3A);
}

/* Paragraph */

.wp-block-paragraph{
    font-size: 20px;
    line-height: 1.5;
    color: #475569;
}

.wp-block-list:not(ol){
    list-style: none;
    padding-left: 0;
}

.wp-block-list:not(ol) li{
    position: relative;
    margin-bottom: 14px;
    padding: 16px 18px 16px 55px;
    background: #fff;
    border-left: 4px solid #D9A85A;
    border-radius: 14px;
    box-shadow:0 8px 24px rgba(15,61,122,.08);
}

.wp-block-list:not(ol) li::before{
    content: "✓";
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #0F3D7A;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

/* Ordered List Steps */

ol.wp-block-list{
    counter-reset: step;
    list-style: none;
    padding-left: 0;
}

ol.wp-block-list li{
    counter-increment: step;
    position: relative;
    margin-bottom: 16px;
    padding: 18px 18px 18px 70px;
    background: linear-gradient(135deg, #ffffff, #fafafa);
    border-radius: 16px;
    box-shadow:0 8px 24px rgba(15,61,122,.08);
}

ol.wp-block-list li::before{
    content: counter(step);
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #0F3D7A;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}


/* Section Separator */
.wp-block-heading:not(:first-child){
    border-top: 1px solid rgba(15,61,122,.08);
    padding-top: 0px !important;
}


/* Hover Effects */
ol.wp-block-list li:hover,
.wp-block-list:not(ol) li:hover{
    transform: translateY(-2px);
    transition: .3s ease;
}
/* ===== Title ===== */
.entry-title {
    font-size: 45px;
    text-align: center !important;
    font-weight: 600;
    line-height: 1.3;
    margin: 50px auto 12px;
    max-width: 900px;

    /* SHARP GRADIENT (NO FADE) */
    background: linear-gradient(
        90deg,
        #D9A85A 0%,
        #D9A85A 50%,
        #0F3D7A 50%,
        #0F3D7A 100%
    );

    background-size: 200% 100%;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: sharpMove 4s linear infinite;
}

@keyframes sharpMove {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 100% 0%;
    }
}

/* ===== Meta Info ===== */
.post-meta {
  display: flex;
  justify-content: center;  /* ⭐ YE IMPORTANT HAI */
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 14px;
  color: #475569 !important;
  margin-bottom: 20px;
}

/* Author highlight */
.post-meta span:first-child {
  color: #f74910;
  font-weight: 500;
}

/* Divider spacing */
.post-meta span {
  display: inline-block;
}

/* ===== Featured Image ===== */
.wp-post-image {
  width: 100%;
  border-radius: 16px;
  margin: 25px 0;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.featured-image {
  margin-top: 20px;
  text-align: center;
}

.featured-image img {
  max-width: 95%;
  height: auto;
  border-radius: 8px;
}

/* ===== Container spacing ===== */
#primary {
  padding-top: 40px;
  padding-bottom: 40px;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .entry-title {
    font-size: 26px;
  }

  .post-meta {
    font-size: 13px;
  }

  .wp-post-image {
    border-radius: 12px;
  }
}

/* Mobile */

@media (max-width:768px){

    .wp-block-heading{
        font-size: 30px;
        margin-top: 50px;
    }

    .wp-block-paragraph{
        font-size: 17px;
    }

    .wp-block-list{
        font-size: 17px;
    }
    
    .wp-block-paragraph {
    font-size: 20px;
  }
    
    .entry-meta{
        text-align: center;
        font-size:20px !important;
    }
}

.single-post .entry-header{
    max-width: 800px;
    margin: 0 auto;
}


/* ===== MAIN 3 COLUMN LAYOUT ===== */
.custom-layout {
  display: grid;
  grid-template-columns: 220px 1fr 300px;
  gap: 30px;
  margin-top: 30px;
  align-items: start;
}

/* ===== CENTER CONTENT ===== */
.post-content {
  max-width: 750px;
  margin: 0 auto;
}

/* ===== RIGHT CONTACT FORM ===== */
.contact-sidebar {
    position: sticky;
    top: 69px;
    border-radius: 20px;
    max-height: calc(100vh - 80px); /* screen ke andar fit */
    overflow-y: auto; /* scroll enable */
    padding-right: 5px; /* scrollbar ke liye space */
}

.contact-form {
  background: #f9f9f9;
  padding: 18px;
  border-radius: 8px;
  border: 1px solid #eee;
}

.contact-form h3 {
  margin-bottom: 15px;
  font-size: 18px;
  color: #0F3D7A;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 12px;
  border: 1px solid #D9A85A;
  border-radius: 5px;
  font-size: 14px;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color:#444444;
  opacity: 1;
}

.contact-form button {
  width: 100%;
  padding: 10px;
  background:#0F3D7A;
  color:#D9A85A;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.contact-form button:hover {
  background: #333;
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 1024px) {
  .custom-layout {
    grid-template-columns: 1fr;
  }

}

.captcha-box {
  margin-bottom: 12px;
  margin-left:5px;
  color:#444444;
  font-size: 14px;
}

.captcha-box input {
  width: 100%;
  margin-top: 6px;
  padding: 10px;
  border: 1px solid #C48A3A;
  border-radius: 6px;
  background:white;
  color:#fff;
}

.contact-form select {
  margin-bottom:15px;
  border: 1px solid #C48A3A;
}

#loader {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top: 2px solid #fff;
  border-radius: 50%;
  display: inline-block;
  animation: spin 0.7s linear infinite;
}

/* Spinner animation */
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

/* ===== POPUP ===== */
.popup {
  position: fixed;
  top: 20px;
  right: 20px;
  background: #111;
  color: #fff;
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 14px;
  z-index: 9999;
  opacity: 0;
  transform: translateY(-20px);
  pointer-events: none;
  transition: all 0.4s ease;
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.popup.show {
  opacity: 1;
  transform: translateY(0);
}

.popup.success {
  border-left: 4px solid #00c853;
}

.popup.error {
  border-left: 4px solid #ff1744;
}

.input-wrap {
  position: relative;
}

.required {
  position: absolute;
  left: 74px;
  top: 40%;
  transform: translateY(-50%);
  color: red;
  pointer-events: none;
}