/*
Theme Name: Astra Child
Template: astra
Author: Bhavesh Sondagar
Description: A child theme for Astra
Version: 1.0.0
*/

/* ==========================================================================
 CSS VARIABLES & ROOT STYLES
 ========================================================================== */
:root{
 --primary-50: #f0f9ff;
 --primary-100: #e0f2fe;
 --primary-200: #bae6fd;
 --primary-300: #7dd3fc;
 --primary-400: #38bdf8;
 --primary-500: #0ea5e9;
 --primary-600: #0284c7;
 --primary-700: #0369a1;
 --primary-800: #075985;
 --primary-900: #0c4a6e;
 --accent-500: #ef4444;
 --accent-600: #dc2626;
 --accent-700: #b91c1c;
 --success-500: #10b981;
 --success-600: #059669;
 --success-700: #047857;
 --gray-50: #f9fafb;
 --gray-100: #f3f4f6;
 --gray-200: #e5e7eb;
 --gray-300: #d1d5db;
 --gray-400: #9ca3af;
 --gray-500: #6b7280;
 --gray-600: #4b5563;
 --gray-700: #374151;
 --gray-800: #1f2937;
 --gray-900: #111827;
 --warning-500: #f59e0b;
 --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
 --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 
 
 --primary-color: #2563eb;
 --primary-dark: #1d4ed8;
 --accent-color: #dc2626;
 --accent-light: #fef2f2;
 --text-primary: #1f2937;
 --text-secondary: #6b7280;
 --text-muted: #9ca3af;
 --bg-primary: #ffffff;
 --bg-secondary: #f8fafc;
 --bg-muted: #f1f5f9;
 --border-color: #e5e7eb;
 --border-light: #f3f4f6;
 --radius-sm: 0.375rem;
 --radius-md: 0.5rem;
 --radius-lg: 0.75rem;
 --radius-xl: 1rem;
 --radius-2xl: 1.5rem;
}

/* ==========================================================================
 BASE STYLES
 ========================================================================== */
body{
 font-family: 'Inter', system-ui, -apple-system, sans-serif;
 line-height: 1.5;
 margin: 0;
 padding: 0;
 background-color: var(--gray-50);
 color: var(--gray-700);
}

/* ==========================================================================
 HEADER STYLES
 ========================================================================== */
.header-main{
 background: rgba(255, 255, 255, 0.95);
 backdrop-filter: blur(20px);
 border-bottom: 1px solid var(--gray-200);
 position: sticky;
 top: 0;
 z-index: 50;
 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-scrolled{
 background: rgba(255, 255, 255, 0.98);
 box-shadow: var(--shadow-lg);
}

.header-container{
 max-width: 1280px;
 margin: 0 auto;
 padding: 0 1.5rem;
}

.header-content{
 display: flex;
 align-items: center;
 justify-content: space-between;
 height: 3.5rem;
 position: relative;
}

/* ==========================================================================
 LOGO STYLES
 ========================================================================== */
.logo-container{
 display: flex;
 align-items: center;
 flex-shrink: 0;
}

.logo-link{
 display: flex;
 align-items: center;
 text-decoration: none;
 transition: all 0.3s ease;
 position: relative;
}

.logo-link:hover{
 transform: scale(1.02);
}

.logo-text{
 font-size: 1.375rem;
 font-weight: 800;
 background: linear-gradient(135deg, var(--primary-600) 0%, var(--accent-600) 100%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 background-clip: text;
 letter-spacing: -0.025em;
 position: relative;
}

.logo-text::after{
 content: '';
 position: absolute;
 bottom: -2px;
 left: 0;
 width: 0;
 height: 2px;
 background: linear-gradient(90deg, var(--primary-600), var(--accent-600));
 transition: width 0.3s ease;
}

.logo-link:hover .logo-text::after{
 width: 100%;
}

/* ==========================================================================
 NAVIGATION STYLES
 ========================================================================== */
.nav-desktop{
 display: none;
 align-items: center;
 gap: 2rem;
 margin: 0 2rem;
}

.nav-menu{
 display: flex;
 align-items: center;
 gap: 0.5rem;
 list-style: none;
 margin: 0;
 padding: 0;
}

.nav-item{
 position: relative;
}

.nav-link{
 display: flex;
 align-items: center;
 gap: 0.5rem;
 padding: 0.5rem 1rem;
 color: var(--gray-700);
 text-decoration: none;
 font-weight: 500;
 font-size: 0.875rem;
 border-radius: 0.75rem;
 transition: all 0.2s ease;
 position: relative;
 white-space: nowrap;
}

.nav-link:hover{
 color: var(--primary-600);
 background-color: var(--primary-50);
 transform: translateY(-1px);
}

.nav-link.active{
 color: var(--primary-600);
 background-color: var(--primary-50);
 box-shadow: var(--shadow-sm);
}

.nav-link::before{
 content: '';
 position: absolute;
 bottom: 0;
 left: 50%;
 width: 0;
 height: 2px;
 background: linear-gradient(90deg, var(--primary-600), var(--accent-600));
 transition: all 0.3s ease;
 transform: translateX(-50%);
 border-radius: 1px;
}

.nav-link:hover::before,
.nav-link.active::before{
 width: 60%;
}

/* ==========================================================================
 SPONSORED PHONE NUMBER STYLES
 ========================================================================== */
.phone-number-container{
 display: flex;
 align-items: center;
 gap: 0.75rem;
 margin-left: 1rem;
}

.phone-number{
 display: flex;
 align-items: center;
 gap: 0.5rem;
 padding: 0.625rem 1rem;
 background: linear-gradient(135deg, var(--success-500) 0%, var(--success-600) 100%);
 color: white;
 text-decoration: none;
 font-weight: 700;
 font-size: 0.875rem;
 border-radius: 1.5rem;
 transition: all 0.3s ease;
 box-shadow: var(--shadow-md);
 position: relative;
 overflow: hidden;
 white-space: nowrap;
}

.phone-number::before{
 content: '';
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 100%;
 background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
 transition: left 0.5s ease;
}

.phone-number:hover{
 transform: translateY(-2px);
 box-shadow: var(--shadow-lg);
 background: linear-gradient(135deg, var(--success-600) 0%, var(--success-700) 100%);
}

.phone-number:hover::before{
 left: 100%;
}

.phone-icon{
 font-size: 1rem;
 animation: pulse 2s infinite;
}

@keyframes pulse{
 0%, 100%{transform: scale(1)}
 50%{transform: scale(1.1)}
}

.phone-label{
 font-size: 0.75rem;
 font-weight: 600;
 color: var(--success-700);
 text-transform: uppercase;
 letter-spacing: 0.05em;
}

/* ==========================================================================
 ACTION BUTTONS
 ========================================================================== */
.header-actions{
 display: flex;
 align-items: center;
 gap: 0.75rem;
}

.btn-primary{
 display: inline-flex;
 align-items: center;
 gap: 0.5rem;
 padding: 0.5rem 1.25rem;
 background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
 color: white;
 text-decoration: none;
 font-weight: 600;
 font-size: 0.875rem;
 border-radius: 1.5rem;
 transition: all 0.3s ease;
 box-shadow: var(--shadow-sm);
 position: relative;
 overflow: hidden;
}

.btn-primary::before{
 content: '';
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 100%;
 background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
 transition: left 0.5s ease;
}

.btn-primary:hover{
 transform: translateY(-2px);
 box-shadow: var(--shadow-lg);
}

.btn-primary:hover::before{
 left: 100%;
}

.btn-secondary{
 display: inline-flex;
 align-items: center;
 gap: 0.5rem;
 padding: 0.5rem 1.25rem;
 background-color: white;
 color: var(--gray-700);
 text-decoration: none;
 font-weight: 500;
 font-size: 0.875rem;
 border: 1px solid var(--gray-300);
 border-radius: 1.5rem;
 transition: all 0.2s ease;
 box-shadow: var(--shadow-sm);
}

.btn-secondary:hover{
 background-color: var(--gray-50);
 border-color: var(--primary-300);
 color: var(--primary-600);
 transform: translateY(-1px);
 box-shadow: var(--shadow-md);
}

/* ==========================================================================
 MOBILE MENU STYLES
 ========================================================================== */
.mobile-menu-btn{
 display: flex;
 align-items: center;
 justify-content: center;
 width: 2.5rem;
 height: 2.5rem;
 background: none;
 border: none;
 color: var(--gray-600);
 cursor: pointer;
 border-radius: 0.75rem;
 transition: all 0.2s ease;
 position: relative;
}

.mobile-menu-btn:hover{
 background-color: var(--gray-100);
 color: var(--gray-900);
 transform: scale(1.05);
}

.mobile-menu-btn.active{
 background-color: var(--primary-50);
 color: var(--primary-600);
}

.mobile-menu-btn svg{
 transition: all 0.3s ease;
}

.mobile-menu{
 position: absolute;
 top: 100%;
 left: 0;
 right: 0;
 background: rgba(255, 255, 255, 0.98);
 backdrop-filter: blur(20px);
 border-top: 1px solid var(--gray-200);
 box-shadow: var(--shadow-xl);
 opacity: 0;
 visibility: hidden;
 transform: translateY(-10px);
 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 border-radius: 0 0 1rem 1rem;
}

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

.mobile-menu-content{
 padding: 1.5rem;
}

.mobile-nav{
 list-style: none;
 margin: 0;
 padding: 0;
}

.mobile-nav-item{
 margin-bottom: 0.25rem;
}

.mobile-nav-link{
 display: block;
 padding: 0.875rem 1rem;
 color: var(--gray-700);
 text-decoration: none;
 font-weight: 500;
 border-radius: 0.75rem;
 transition: all 0.2s ease;
 position: relative;
 overflow: hidden;
}

.mobile-nav-link::before{
 content: '';
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 100%;
 background: linear-gradient(90deg, transparent, var(--primary-50), transparent);
 transition: left 0.3s ease;
}

.mobile-nav-link:hover{
 background-color: var(--primary-50);
 color: var(--primary-600);
 transform: translateX(4px);
}

.mobile-nav-link:hover::before{
 left: 100%;
}


.mobile-phone-section{
 margin-top: 1.5rem;
 padding-top: 1.5rem;
 border-top: 1px solid var(--gray-200);
}

.mobile-phone-number{
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 0.5rem;
 padding: 1rem;
 background: linear-gradient(135deg, var(--success-500) 0%, var(--success-600) 100%);
 color: white;
 text-decoration: none;
 font-weight: 700;
 font-size: 1.125rem;
 border-radius: 1rem;
 transition: all 0.3s ease;
 box-shadow: var(--shadow-md);
 margin-bottom: 0.75rem;
}

.mobile-phone-number:hover{
 transform: translateY(-2px);
 box-shadow: var(--shadow-lg);
 background: linear-gradient(135deg, var(--success-600) 0%, var(--success-700) 100%);
}

.mobile-phone-label{
 text-align: center;
 font-size: 0.75rem;
 font-weight: 600;
 color: var(--success-700);
 text-transform: uppercase;
 letter-spacing: 0.05em;
}

/* ==========================================================================
 TEMPLATE LAYOUT STYLES
 ========================================================================== */

.blog-container,
.page-container,
.category-container,
.tag-container{
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 1.5rem;
}

/* ==========================================================================
 BREADCRUMB STYLES
 ========================================================================== */
.breadcrumb{
 margin: 2rem 0;
 padding: 1rem 0;
}

.breadcrumb-list{
 display: flex;
 align-items: center;
 list-style: none;
 margin: 0;
 padding: 0;
 font-size: 0.875rem;
}

.breadcrumb-item{
 display: flex;
 align-items: center;
}

.breadcrumb-link{
 color: var(--text-secondary);
 text-decoration: none;
 transition: color 0.2s ease;
}

.breadcrumb-link:hover{
 color: var(--primary-color);
}

.breadcrumb-separator{
 margin: 0 0.5rem;
 color: var(--text-muted);
}

.breadcrumb-current{
 color: var(--text-primary);
 font-weight: 500;
}

.blog-layout,
.page-layout,
.category-layout,
.tag-layout{
 display: grid;
 grid-template-columns: 1fr 350px;
 gap: 3rem;
 margin-top: 2rem;
}


.blog-main,
.page-main,
.category-main,
.tag-main{
 background: var(--bg-primary);
 border-radius: var(--radius-2xl);
 box-shadow: var(--shadow-lg);
 overflow: hidden;
}


.blog-header,
.page-header,
.category-header,
.tag-header{
 padding: 3rem 3rem 2rem;
 border-bottom: 1px solid var(--border-light);
 background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}

.page-header::before{
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 4px;
 background: linear-gradient(90deg, var(--primary-color) 0%, var(--accent-color) 100%);
}


.blog-title,
.page-title,
.category-title,
.tag-title{
 font-size: 2.5rem;
 font-weight: 800;
 line-height: 1.2;
 color: var(--text-primary);
 margin-bottom: 1rem;
 letter-spacing: -0.025em;
}

.page-subtitle{
 color: var(--text-secondary);
 font-size: 1.125rem;
 line-height: 1.6;
 margin: 0;
}

.category-description,
.tag-description{
 font-size: 1.125rem;
 line-height: 1.7;
 color: var(--text-secondary);
 margin-bottom: 1.5rem;
}


.blog-meta,
.page-meta,
.category-meta,
.tag-meta{
 display: flex;
 align-items: center;
 gap: 1.5rem;
 color: var(--text-secondary);
 font-size: 0.875rem;
}

.blog-meta-item,
.page-meta-item,
.category-meta-item,
.tag-meta-item{
 display: flex;
 align-items: center;
 gap: 0.5rem;
}

.blog-meta-icon,
.page-meta-icon,
.category-meta-icon,
.tag-meta-icon{
 width: 1rem;
 height: 1rem;
 color: var(--text-muted);
}

.reading-time,
.post-count{
 background: var(--accent-light);
 color: var(--accent-color);
 padding: 0.25rem 0.75rem;
 border-radius: var(--radius-md);
 font-weight: 500;
 font-size: 0.75rem;
}


.blog-content,
.page-content,
.category-content,
.tag-content{
 padding: 2.5rem 3rem;
}


.prose,
.page-prose{
 font-size: 1.125rem;
 line-height: 1.8;
 color: var(--text-primary);
}

.prose p,
.page-prose p{
 margin-bottom: 1.75rem;
 color: var(--text-primary);
}

.prose h2,
.page-prose h2{
 font-size: 1.875rem;
 font-weight: 700;
 line-height: 1.3;
 margin: 3rem 0 1.5rem;
 color: var(--text-primary);
 letter-spacing: -0.025em;
}

.prose h3,
.page-prose h3{
 font-size: 1.5rem;
 font-weight: 600;
 line-height: 1.4;
 margin: 2.5rem 0 1rem;
 color: var(--text-primary);
}

.prose h4,
.page-prose h4{
 font-size: 1.25rem;
 font-weight: 600;
 line-height: 1.4;
 margin: 2rem 0 1rem;
 color: var(--text-primary);
}

.prose ul, .prose ol,
.page-prose ul, .page-prose ol{
 margin: 1.5rem 0;
 padding-left: 1.5rem;
}

.prose li,
.page-prose li{
 margin-bottom: 0.75rem;
 color: var(--text-primary);
}

.prose ul li,
.page-prose ul li{
 list-style-type: disc;
}

.prose ol li,
.page-prose ol li{
 list-style-type: decimal;
}

.prose blockquote,
.page-prose blockquote{
 margin: 2rem 0;
 padding: 1.5rem 2rem;
 background: var(--bg-secondary);
 border-left: 4px solid var(--primary-color);
 border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
 font-style: italic;
 color: var(--text-primary);
}

.prose a,
.page-prose a{
 color: var(--primary-color);
 text-decoration: underline;
 text-decoration-thickness: 2px;
 text-underline-offset: 4px;
 transition: all 0.2s ease;
}

.prose a:hover,
.page-prose a:hover{
 color: var(--primary-dark);
 text-decoration-thickness: 3px;
}

.prose img,
.page-prose img{
 margin: 2.5rem 0;
 border-radius: var(--radius-lg);
 box-shadow: var(--shadow-md);
 max-width: 100%;
 height: auto;
}

/* ==========================================================================
 POST CARD STYLES
 ========================================================================== */
.posts-grid{
 padding: 2.5rem 3rem;
}

.post-card{
 background: var(--bg-primary);
 border: 1px solid var(--border-light);
 border-radius: var(--radius-xl);
 overflow: hidden;
 transition: all 0.3s ease;
 margin-bottom: 2rem;
}

.post-card:hover{
 box-shadow: var(--shadow-xl);
 transform: translateY(-2px);
}

.post-image{
 position: relative;
 width: 100%;
 height: 240px;
 overflow: hidden;
}

.post-image img{
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform 0.3s ease;
}

.post-card:hover .post-image img{
 transform: scale(1.05);
}

.post-content{
 padding: 2rem;
}

.post-title{
 font-size: 1.5rem;
 font-weight: 700;
 line-height: 1.3;
 color: var(--text-primary);
 margin-bottom: 1rem;
 letter-spacing: -0.025em;
}

.post-title a{
 color: inherit;
 text-decoration: none;
 transition: color 0.2s ease;
}

.post-title a:hover{
 color: var(--primary-color);
}

.post-excerpt{
 font-size: 1rem;
 line-height: 1.7;
 color: var(--text-secondary);
 margin-bottom: 1.5rem;
}

.post-meta{
 display: flex;
 align-items: center;
 gap: 1rem;
 font-size: 0.875rem;
 color: var(--text-muted);
}

.post-meta-item{
 display: flex;
 align-items: center;
 gap: 0.5rem;
}

.post-meta-icon{
 width: 1rem;
 height: 1rem;
}

.read-more{
 display: inline-flex;
 align-items: center;
 gap: 0.5rem;
 color: var(--primary-color);
 text-decoration: none;
 font-weight: 500;
 font-size: 0.875rem;
 transition: all 0.2s ease;
 margin-top: 1rem;
}

.read-more:hover{
 color: var(--primary-dark);
 transform: translateX(4px);
}

.read-more-icon{
 transition: transform 0.2s ease;
}

.read-more:hover .read-more-icon{
 transform: translateX(4px);
}

/* ==========================================================================
 SIDEBAR STYLES
 ========================================================================== */
.blog-sidebar{
 display: flex;
 flex-direction: column;
 gap: 1.5rem;
}

.sidebar-widget{
 background: var(--bg-primary);
 border-radius: var(--radius-xl);
 box-shadow: var(--shadow-md);
 overflow: hidden;
}

.sidebar-header{
 padding: 1.5rem;
 border-bottom: 1px solid var(--border-light);
 background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}

.sidebar-title{
 font-size: 1.25rem;
 font-weight: 700;
 color: var(--text-primary);
 margin: 0;
}

.sponsored-header .widget-title{
 color: var(--accent-color);
}

.sponsored-cta-content{
 padding: 1.5rem;
}


.widget-content{
 padding: 1.5rem;
}


.search-form{
 display: flex;
 gap: 0.5rem;
}

.search-input{
 flex: 1;
 padding: 0.75rem 1rem;
 border: 1px solid var(--border-color);
 border-radius: var(--radius-md);
 font-size: 0.875rem;
 transition: border-color 0.2s ease;
}

.search-input:focus{
 outline: none;
 border-color: var(--primary-color);
 box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.search-button{
 padding: 0.75rem;
 background: var(--primary-color);
 color: white;
 border: none;
 border-radius: var(--radius-md);
 cursor: pointer;
 transition: background-color 0.2s ease;
}

.search-button:hover{
 background: var(--primary-dark);
}


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

.category-item{
 border-bottom: 1px solid var(--border-light);
}

.category-item:last-child{
 border-bottom: none;
}

.category-link{
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 0.75rem 0;
 color: var(--text-primary);
 text-decoration: none;
 transition: color 0.2s ease;
}

.category-link:hover{
 color: var(--primary-color);
}

.category-count{
 background: var(--gray-100);
 color: var(--text-secondary);
 padding: 0.25rem 0.5rem;
 border-radius: var(--radius-sm);
 font-size: 0.75rem;
 font-weight: 500;
}


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

.related-item{
 border-bottom: 1px solid var(--border-light);
}

.related-item:last-child{
 border-bottom: none;
}

.related-link{
 display: block;
 padding: 0.75rem 0;
 color: var(--text-primary);
 text-decoration: none;
 font-size: 0.875rem;
 line-height: 1.5;
 transition: color 0.2s ease;
}

.related-link:hover{
 color: var(--primary-color);
}


.blog-footer{
 padding: 2rem 3rem;
 border-top: 1px solid var(--border-light);
 background: var(--bg-secondary);
}

.blog-tags{
 margin-bottom: 2rem;
}

.tags-title{
 font-size: 1.125rem;
 font-weight: 600;
 color: var(--text-primary);
 margin-bottom: 1rem;
}

.tags-list{
 display: flex;
 flex-wrap: wrap;
 gap: 0.5rem;
}

.tag-link{
 display: inline-block;
 padding: 0.5rem 1rem;
 background: var(--primary-50);
 color: var(--primary-600);
 text-decoration: none;
 border-radius: var(--radius-md);
 font-size: 0.875rem;
 font-weight: 500;
 transition: all 0.2s ease;
}

.tag-link:hover{
 background: var(--primary-100);
 color: var(--primary-700);
 transform: translateY(-1px);
}


.blog-navigation{
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 1rem;
}

.nav-link{
 display: flex;
 align-items: center;
 gap: 0.5rem;
 padding: 0.75rem 1.5rem;
 background: var(--bg-primary);
 color: var(--text-primary);
 text-decoration: none;
 border-radius: var(--radius-md);
 font-weight: 500;
 transition: all 0.2s ease;
 border: 1px solid var(--border-color);
}

.nav-link:hover{
 background: var(--primary-50);
 color: var(--primary-600);
 border-color: var(--primary-200);
 transform: translateY(-1px);
}

.nav-link.prev{
 flex-direction: row;
}

.nav-link.next{
 flex-direction: row-reverse;
}

.nav-icon{
 width: 1.25rem;
 height: 1.25rem;
}

/* ==========================================================================
 ARCHIVE DENTISTS STYLES
 ========================================================================== */
.gradient-bg{
 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.card-hover{
 transition: all 0.3s ease;
}

.card-hover:hover{
 transform: translateY(-4px);
 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.filter-active{
 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 color: white;
}

.city-cloud-item{
 transition: all 0.3s ease;
}

.city-cloud-item:hover{
 transform: scale(1.05);
}


.map-container{
 height: 300px;
 width: 100%;
 border-radius: 1rem;
 overflow: hidden;
}

.large-map-container{
 height: 500px;
 width: 100%;
 border-radius: 1rem;
 overflow: hidden;
}

.search-suggestions{
 position: absolute;
 top: 100%;
 left: 0;
 right: 0;
 background: white;
 border-radius: 0.75rem;
 box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
 z-index: 50;
 max-height: 300px;
 overflow-y: auto;
}

.search-suggestion-item{
 padding: 0.75rem 1rem;
 cursor: pointer;
 transition: background-color 0.2s;
}

.search-suggestion-item:hover{
 background-color: #f3f4f6;
}

.search-suggestion-item:first-child{
 border-radius: 0.75rem 0.75rem 0 0;
}

.search-suggestion-item:last-child{
 border-radius: 0 0 0.75rem 0.75rem;
}

/* ==========================================================================
 SPONSORED CTA WIDGET STYLES
 ========================================================================== */
.sponsored-cta-widget{
 position: relative;
 overflow: hidden;
}

.sponsored-cta-widget::before{
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: linear-gradient(135deg, rgba(59, 130, 246, 0.03) 0%, rgba(147, 51, 234, 0.03) 100%);
 pointer-events: none;
}


.sponsored-cta-widget:hover .fa-phone{
 animation: gentle-pulse 2s infinite;
}

@keyframes gentle-pulse{
 0%, 100%{transform: scale(1)}
 50%{transform: scale(1.05)}
}

/* ==========================================================================
 FOOTER STYLES
 ========================================================================== */
.footer{
 background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
 color: #e2e8f0;
 margin-top: 4rem;
 position: relative;
}

.footer::before{
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 1px;
 background: linear-gradient(90deg, transparent 0%, #3b82f6 50%, transparent 100%);
}

.footer-container{
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 1.5rem;
}

.footer-content{
 display: grid;
 grid-template-columns: 2fr 1fr 1fr 1.5fr;
 gap: 3rem;
 padding: 3rem 0 2rem;
}


.footer-about{
 max-width: 400px;
}

.footer-logo{
 margin-bottom: 1.5rem;
}

.footer-title{
 font-size: 1.5rem;
 font-weight: 700;
 color: #ffffff;
 margin: 0;
 letter-spacing: -0.025em;
}

.footer-description{
 color: #94a3b8;
 line-height: 1.6;
 margin-bottom: 2rem;
 font-size: 0.95rem;
}

.footer-trust-badge{
 text-align: center;
 margin-bottom: 1.5rem;
}

.footer-social{
 display: flex;
 gap: 1rem;
}

.social-link{
 display: flex;
 align-items: center;
 justify-content: center;
 width: 2.5rem;
 height: 2.5rem;
 background: rgba(59, 130, 246, 0.1);
 color: #60a5fa;
 border-radius: 0.5rem;
 transition: all 0.3s ease;
 border: 1px solid rgba(59, 130, 246, 0.2);
}

.social-link:hover{
 background: #3b82f6;
 color: #ffffff;
 transform: translateY(-2px);
 box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.social-icon{
 width: 1.25rem;
 height: 1.25rem;
}


.footer-section{
 display: flex;
 flex-direction: column;
}

.footer-heading{
 font-size: 1.125rem;
 font-weight: 600;
 color: #ffffff;
 margin: 0 0 1.5rem 0;
 letter-spacing: -0.025em;
}

.footer-links{
 list-style: none;
 padding: 0;
 margin: 0;
 display: flex;
 flex-direction: column;
 gap: 0.75rem;
}

.footer-link{
 color: #94a3b8;
 text-decoration: none;
 font-size: 0.95rem;
 transition: all 0.3s ease;
 position: relative;
 padding-left: 0;
}

.footer-link::before{
 content: '';
 position: absolute;
 left: 0;
 top: 50%;
 width: 0;
 height: 2px;
 background: #3b82f6;
 transition: width 0.3s ease;
 transform: translateY(-50%);
}

.footer-link:hover{
 color: #ffffff;
 padding-left: 1rem;
}

.footer-link:hover::before{
 width: 0.75rem;
}


.footer-contact{
 display: flex;
 flex-direction: column;
 gap: 1rem;
 margin-bottom: 2rem;
}

.contact-item{
 display: flex;
 align-items: center;
 gap: 0.75rem;
}

.contact-icon{
 width: 1.25rem;
 height: 1.25rem;
 color: #60a5fa;
 flex-shrink: 0;
}

.contact-link{
 color: #94a3b8;
 text-decoration: none;
 transition: color 0.3s ease;
}

.contact-link:hover{
 color: #ffffff;
}

.contact-text{
 color: #94a3b8;
 line-height: 1.5;
}


.newsletter-signup{
 background: rgba(59, 130, 246, 0.05);
 border: 1px solid rgba(59, 130, 246, 0.1);
 border-radius: 0.75rem;
 padding: 1.5rem;
 margin-top: 1rem;
}

.newsletter-title{
 font-size: 1rem;
 font-weight: 600;
 color: #ffffff;
 margin: 0 0 0.5rem 0;
}

.newsletter-description{
 color: #94a3b8;
 font-size: 0.875rem;
 margin: 0 0 1rem 0;
 line-height: 1.5;
}

.newsletter-form{
 margin: 0;
}

.newsletter-input-group{
 display: flex;
 gap: 0.5rem;
}

.newsletter-input{
 flex: 1;
 padding: 0.75rem 1rem;
 border: 1px solid rgba(148, 163, 184, 0.3);
 border-radius: 0.5rem;
 background: rgba(15, 23, 42, 0.5);
 color: #ffffff;
 font-size: 0.875rem;
 transition: all 0.3s ease;
}

.newsletter-input::placeholder{
 color: #64748b;
}

.newsletter-input:focus{
 outline: none;
 border-color: #3b82f6;
 box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.newsletter-button{
 display: flex;
 align-items: center;
 justify-content: center;
 width: 2.75rem;
 height: 2.75rem;
 background: #3b82f6;
 color: #ffffff;
 border: none;
 border-radius: 0.5rem;
 cursor: pointer;
 transition: all 0.3s ease;
}

.newsletter-button:hover{
 background: #2563eb;
 transform: translateY(-1px);
 box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.newsletter-icon{
 width: 1rem;
 height: 1rem;
}


.footer-bottom{
 border-top: 1px solid rgba(148, 163, 184, 0.2);
 padding: 2rem 0;
}

.footer-bottom-content{
 display: flex;
 justify-content: space-between;
 align-items: center;
 flex-wrap: wrap;
 gap: 1rem;
}

.footer-copyright{
 color: #64748b;
 font-size: 0.875rem;
}

.footer-legal{
 display: flex;
 align-items: center;
 gap: 1rem;
 flex-wrap: wrap;
}

.legal-link{
 color: #64748b;
 text-decoration: none;
 font-size: 0.875rem;
 transition: color 0.3s ease;
}

.legal-link:hover{
 color: #94a3b8;
}

.legal-separator{
 color: #475569;
 font-size: 0.75rem;
}

/* ==========================================================================
 FAQ & SCROLL PROGRESS STYLES
 ========================================================================== */
.faq-item{
 transition: all 0.3s ease;
}

.faq-item:hover{
 transform: translateY(-2px);
 box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.faq-content{
 max-height: 0;
 overflow: hidden;
 transition: max-height 0.5s ease-out, opacity 0.3s ease-out;
 opacity: 0;
 transform: translateY(-10px);
}

.faq-content.active{
 max-height: 1000px;
 opacity: 1;
 transform: translateY(0);
}

.faq-icon{
 transition: transform 0.3s ease;
}

.rotate-180{
 transform: rotate(180deg);
}

.section-fade{
 opacity: 0;
 transform: translateY(20px);
 transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.section-fade.is-visible{
 opacity: 1;
 transform: translateY(0);
}

.scroll-progress{
 position: fixed;
 top: 0;
 left: 0;
 width: 0%;
 height: 3px;
 background: linear-gradient(to right, #0ea5e9, #38bdf8);
 z-index: 1000;
 transition: width 0.2s ease-out;
}

/* ==========================================================================
 ANIMATIONS
 ========================================================================== */
.fade-in{
 animation: fadeIn 0.3s ease-in-out;
}

.slide-down{
 animation: slideDown 0.3s ease-out;
}

@keyframes fadeIn{
 from{opacity: 0; transform: translateY(-10px)}
 to{opacity: 1; transform: translateY(0)}
}

@keyframes slideDown{
 from{opacity: 0; transform: translateY(-20px)}
 to{opacity: 1; transform: translateY(0)}
}

/* ==========================================================================
 FORM STYLES
 ========================================================================== */
.listing-type-group{
 margin-bottom: 2rem;
}

.listing-type-grid{
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 1.5rem;
 margin-top: 0.5rem;
}

.listing-option{
 border-radius: 1rem;
 padding: 1.5rem;
 cursor: pointer;
 transition: all 0.3s ease;
}

.listing-free{
 border: 3px solid #10b981;
 background: #f0fdf4;
}

.listing-premium{
 border: 3px solid #f59e0b;
 background: #fffbeb;
}

.listing-header{
 display: flex;
 align-items: center;
 gap: 0.5rem;
 margin-bottom: 1rem;
}

.listing-title{
 font-weight: 700;
 margin: 0;
 font-size: 1.125rem;
}

.listing-free .listing-title{
 color: #10b981;
}

.listing-premium .listing-title{
 color: #f59e0b;
}

.listing-features{
 font-size: 0.875rem;
 color: #6b7280;
 line-height: 1.6;
}

.feature-item{
 margin-bottom: 0.5rem;
}

.listing-badge{
 margin-top: 1rem;
 padding: 0.75rem;
 border-radius: 0.5rem;
 text-align: center;
}

.listing-badge-free{
 background: #dcfce7;
}

.listing-badge-free strong{
 color: #10b981;
}

.listing-badge-premium{
 background: #fef3c7;
}

.listing-badge-premium strong{
 color: #f59e0b;
}

/* ==========================================================================
 UTILITY CLASSES
 ========================================================================== */
.hidden{display: none}
.block{display: block}
.flex{display: flex}
.items-center{align-items: center}
.justify-center{justify-content: center}
.justify-between{justify-content: space-between}
.gap-2{gap: 0.5rem}
.gap-3{gap: 0.75rem}
.gap-4{gap: 1rem}
.text-sm{font-size: 0.875rem}
.text-base{font-size: 1rem}
.font-medium{font-weight: 500}
.font-semibold{font-weight: 600}
.rounded-lg{border-radius: 0.5rem}
.rounded-full{border-radius: 9999px}
.shadow-sm{box-shadow: var(--shadow-sm)}
.transition{transition: all 0.2s ease}
.relative{position: relative}
.absolute{position: absolute}
.top-1\/2{top: 50%}
.transform{transform: translateY(-50%)}
.w-4{width: 1rem}
.h-4{height: 1rem}
.w-6{width: 1.5rem}
.h-6{height: 1.5rem}
.text-center{text-align: center}
.border-t{border-top-width: 1px}
.border-gray-200{border-color: var(--gray-200)}
.pt-4{padding-top: 1rem}
.mt-4{margin-top: 1rem}
.flex-col{flex-direction: column}
.inline{display: inline}
.mr-2{margin-right: 0.5rem}
.left-3{left: 0.75rem}
.text-gray-400{color: var(--gray-400)}
.text-muted{color: var(--text-muted)}
.text-primary-color{color: var(--primary-color)}

/* ==========================================================================
 RESPONSIVE DESIGN
 ========================================================================== */
@media (min-width: 768px){
 .nav-desktop{
 display: flex;
 }
 
 .mobile-menu-btn{
 display: none;
 }
}

@media (max-width: 768px){
 .header-container{
 padding: 0 1rem;
 }
 
 .header-content{
 height: 3rem;
 }
 
 .logo-text{
 font-size: 1.25rem;
 }

 .phone-number-container{
 display: none;
 }
 
 
 .blog-layout,
 .page-layout,
 .category-layout,
 .tag-layout{
 grid-template-columns: 1fr;
 gap: 2rem;
 }
 
 .blog-container,
 .page-container,
 .category-container,
 .tag-container{
 padding: 0 1rem;
 }
 
 .blog-header,
 .page-header,
 .category-header,
 .tag-header{
 padding: 2rem 1.5rem 1.5rem;
 }
 
 .blog-title,
 .page-title,
 .category-title,
 .tag-title{
 font-size: 2rem;
 }
 
 .blog-content,
 .page-content,
 .category-content,
 .tag-content,
 .posts-grid{
 padding: 1.5rem;
 }
 
 
 .footer-content{
 grid-template-columns: 1fr;
 gap: 2rem;
 }
 
 .footer-container{
 padding: 0 1rem;
 }
 
 .footer-bottom-content{
 flex-direction: column;
 text-align: center;
 gap: 1rem;
 }
 
 .footer-legal{
 justify-content: center;
 }
 
 .newsletter-input-group{
 flex-direction: column;
 }
 
 .newsletter-button{
 width: 100%;
 height: 2.75rem;
 }
 
 .scroll-progress{
 height: 2px;
 }

 
 .blog-footer{
 padding: 1.5rem;
 }

 .blog-navigation{
 flex-direction: column;
 gap: 1rem;
 }

 .nav-link{
 justify-content: center;
 }

 .breadcrumb-list{
 flex-wrap: wrap;
 gap: 0.25rem;
 }

 .widget-content{
 padding: 1rem;
 }

 .search-form{
 flex-direction: column;
 }

 .search-button{
 width: 100%;
 }

 .blog-meta{
 flex-direction: column;
 gap: 1rem;
 align-items: flex-start;
 }
}

@media (max-width: 1024px){
 .footer-content{
 grid-template-columns: 1fr 1fr;
 gap: 2rem;
 }
 
 .footer-about{
 grid-column: 1 / -1;
 max-width: none;
 }
}

/* ==========================================================================
 WORDPRESS CONTENT AREA STYLES
 ========================================================================== */
.entry-content{
 max-width: 100%;
 overflow-x: hidden;
}

/* ==========================================================================
 TABLE STYLES
 ========================================================================== */
.entry-content table{
 width: 100%;
 margin: 2rem 0;
 border-collapse: separate;
 border-spacing: 0;
 background-color: #fff;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 border-radius: 0.5rem;
 overflow: hidden;
 font-size: 1rem;
 line-height: 1.5;
}

.entry-content table th{
 background-color: #f8f9fa;
 font-weight: 600;
 text-align: left;
 padding: 1rem 1.5rem;
 border-bottom: 2px solid #e9ecef;
 color: #374151;
 font-size: 1.1rem;
}

.entry-content table td{
 padding: 1rem 1.5rem;
 border-bottom: 1px solid #e9ecef;
 vertical-align: top;
 color: #4b5563;
}

.entry-content table tr:last-child td{
 border-bottom: none;
}

.entry-content table tr:hover td{
 background-color: #f9fafb;
}


.entry-content table thead th{
 text-transform: uppercase;
 letter-spacing: 0.05em;
 font-size: 0.875rem;
 color: #6b7280;
}


.entry-content table td:first-child,
.entry-content table th:first-child{
 padding-left: 2rem;
}

.entry-content table td:last-child,
.entry-content table th:last-child{
 padding-right: 2rem;
}


.entry-content table tr:nth-child(even) td{
 background-color: #f9fafb;
}


.entry-content table a{
 color: #3b82f6;
 text-decoration: none;
 transition: color 0.2s;
}

.entry-content table a:hover{
 color: #2563eb;
 text-decoration: underline;
}


@media (max-width: 768px){
 .entry-content table{
 display: block;
 width: 100%;
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
 margin: 1.5rem 0;
 }
 
 .entry-content table thead{
 display: none;
 }
 
 .entry-content table tbody{
 display: block;
 width: 100%;
 }
 
 .entry-content table tr{
 display: block;
 margin-bottom: 1rem;
 border: 1px solid #e9ecef;
 border-radius: 0.5rem;
 background-color: #fff;
 }
 
 .entry-content table td{
 display: block;
 text-align: right;
 padding: 0.75rem 1rem;
 border-bottom: 1px solid #e9ecef;
 position: relative;
 padding-left: 50%;
 }
 
 .entry-content table td:before{
 content: attr(data-label);
 position: absolute;
 left: 1rem;
 width: 45%;
 padding-right: 1rem;
 font-weight: 600;
 text-align: left;
 color: #374151;
 }
 
 .entry-content table td:last-child{
 border-bottom: none;
 }
}