/*
* Project Name             :  Agreen - Car Modification WordPress Theme
* Author                   :  technoqube.com
* Version                  :  1.0
* Design and Developed by  :  TechnoQube
*/


/* ==================================================
Table Of Content - start
================================================== */
/* 

1 - Template Global Settings
    * 1.01 - Template Reset & Global Variables   
    * 1.02 - Body 
    * 1.03 - Headings
    * 1.04 - General
    * 1.05 - Container
    * 1.06 - Main Content Area  
    * 1.07 - Custom Scrollbar 

2 - Template Layout
    * 2.01 - Header   
    * 2.02 - Section Title  
    * 2.03 - Breadcrumb  
    * 2.04 - Footer  
    * 2.05 - Sidebar  

3 - Template UI Components
    * 3.01 - Button Core    
    * 3.02 - Pagination  
    * 3.03 - Custom CSS 

4 - Template Effects & Interactions
    * 4.01 - Loading  
    * 4.02 - Back To Top

5 - Template Content Modules
    * 5.01 - Blog  
    * 5.02 - Portfolio Box  
    * 5.03 - Isotope Portfolio
    * 5.04 - Portfolio Slider  
    * 5.05 - Portfolio Single  
    * 5.06 - Service Box  
    * 5.07 - Service Single  
    * 5.08 - Process Step  
    * 5.09 - Team  
    * 5.10 - Testimonial  
    * 5.11 - Pricing Plan  
    * 5.12 - Counter  
    * 5.13 - Accordion  
    * 5.14 - After-Before  
    * 5.15 - Youtube Video
    * 5.16 - Section Shape
    * 5.17 - Insta Gallery
    * 5.18 - Icon List
    * 5.19 - Branch Location Map
    * 5.20 - Search Page

6 - Template Sliders & Carousels
    * 6.01 - OWL Carousel  

7 - Template Forms & Media
    * 7.01 - Form  

8 - Elementor Widgets
    * 8.01 - Elementor Editor 

/* Table Of Content - End
================================================== */


/* ==================================================
1.01 - ROOT VARIABLES (Design System)
================================================== */

:root {
/* 🌿 Brand Colors */
--primary-color: #2E7D32;
--primary-dark: #1B5E20;

/* 📝 Text Colors */
--dark-color: #212121;
--secondary-color: #616161;

/* 🧱 Background */
--grey-color: #F5F5F5;
--white-color: #ffffff;
--border-color: #E0E0E0;

/* 🎯 CTA */
--cta-color: #F9A825;
--cta-hover: #F57F17;

/* 🌱 Accent */
--accent-color: #C7DC49;

/* 🔤 Typography */
--body-fonts: 'Poppins', sans-serif;
--title-fonts: 'Poppins', sans-serif;

/* 🔲 Border Radius */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-round: 50px;
 --border-radius: 20px;
    --big-border-radius: 900px;

/* ⚡ Transition */
--transition: all 0.3s ease;
}

/* ==================================================
1.02 - BODY
================================================== */

body {
background: var(--white-color);
font-family: var(--body-fonts);
font-size: 16px;
font-weight: 400;
line-height: 1.7;
color: var(--secondary-color);
overflow-x: hidden;
}

/* ==================================================
1.03 - GLOBAL ELEMENTS
================================================== */

a,
.button {
color: var(--primary-color);
text-decoration: none;
transition: var(--transition);
}

a:hover {
color: var(--primary-dark);
}

p {
margin-bottom: 20px;
}

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

hr {
border: none;
border-bottom: 1px solid var(--border-color);
}

strong {
font-weight: 600;
}

/* ==================================================
1.04 - HEADINGS
================================================== */

h1, h2, h3, h4, h5, h6 {
font-family: var(--title-fonts);
color: var(--dark-color);
font-weight: 600;
margin: 0;
}

h1 { font-size: 56px; line-height: 1.2; }
h2 { font-size: 44px; line-height: 1.25; }
h3 { font-size: 34px; line-height: 1.3; }
h4 { font-size: 28px; line-height: 1.35; }
h5 { font-size: 22px; line-height: 1.4; }
h6 { font-size: 18px; line-height: 1.45; }

/* ==================================================
1.05 - RESPONSIVE TYPOGRAPHY
================================================== */

@media (max-width: 1023px) {
h1 { font-size: 44px; }
h2 { font-size: 36px; }
h3 { font-size: 28px; }
}

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

/* ==================================================
1.06 - FORMS
================================================== */

input,
textarea,
select {
width: 100%;
font-size: 16px;
padding: 12px 15px;
border-radius: var(--radius-md);
border: 1px solid var(--border-color);
background: var(--grey-color);
color: var(--dark-color);
transition: var(--transition);
}

input:focus,
textarea:focus,
select:focus {
border-color: var(--primary-color);
outline: none;
}

/* ==================================================
1.07 - BUTTONS
================================================== */

.btn {
display: inline-block;
padding: 12px 24px;
border-radius: var(--radius-md);
font-weight: 500;
transition: var(--transition);
cursor: pointer;
}

.btn-primary {
background: var(--primary-color);
color: var(--white-color);
}

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

.btn-cta {
background: var(--cta-color);
color: var(--dark-color);
}

.btn-cta:hover {
background: var(--cta-hover);
}

/* ==================================================
1.08 - LAYOUT
================================================== */

.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 15px;
}

.content-area .site-main {
padding: 100px 0;
}

/* ==================================================
1.09 - SCROLLBAR
================================================== */

html::-webkit-scrollbar {
width: 8px;
}

html::-webkit-scrollbar-track {
background: var(--grey-color);
}

html::-webkit-scrollbar-thumb {
background: var(--primary-color);
border-radius: 10px;
}