/* Global Variables & Resets */
:root {
    --primary-orange: #FF9A3D;
    --primary-orange-dark: #e8862d;
    --primary-orange-light: #fff0e0;
    --text-dark: #1F1F1F;
    --text-light: #6c757d;
    --bg-light: #F4F4F4;
    --white: #FFFFFF;
    --gradient-orange: linear-gradient(135deg, #FFB66D 0%, #FF8C2B 100%);
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Inter', sans-serif;
    --shadow-sm: 0 5px 15px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 10px 25px rgba(0, 0, 0, 0.08);
    --transition-fast: 0.3s ease;
}

html,
body {
    overflow-x: hidden;
    width: 100%;
}

body {
    font-family: var(--font-body);
    color: var(--text-dark);
    /* For component loading fade-in */
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

body.loaded {
    opacity: 1;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 600;
}

a {
    text-decoration: none;
}

/* Utilities */
.text-orange {
    color: var(--primary-orange) !important;
}

.bg-orange {
    background-color: var(--primary-orange) !important;
}

.bg-orange-light {
    background-color: var(--primary-orange-light) !important;
}

.btn-primary {
    background: var(--gradient-orange);
    border: none;
    color: white;
    transition: var(--transition-fast);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #FF8C2B 0%, #FFB66D 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 140, 43, 0.3);
}

.btn-outline-orange {
    border: 2px solid var(--primary-orange);
    color: var(--primary-orange);
    background: transparent;
    transition: var(--transition-fast);
}

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

/* Animations */
.btn-hover-scale:hover {
    transform: scale(1.05);
}

.hover-text-orange:hover {
    color: var(--primary-orange) !important;
}

.transition-colors {
    transition: color 0.3s ease;
}

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

.hover-scale:hover {
    transform: scale(1.2);
}

/* Component Styles (Navbar & Footer common) */
.navbar {
    padding: 15px 0;
    transition: padding 0.3s ease, box-shadow 0.3s ease;
}

.navbar.shadow-md {
    padding: 10px 0;
}

.nav-link {
    color: var(--text-dark) !important;
    position: relative;
}

.nav-link:hover,
.nav-link.active {
    color: var(--primary-orange) !important;
}

/* Nav Link Underline animation */
.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 5px;
    left: 0;
    background-color: var(--primary-orange);
    transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

/* Common Page Header */
.page-header {
    background: linear-gradient(135deg, rgba(255, 154, 61, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
    padding: 140px 0 60px;
    /* Account for fixed navbar */
    margin-bottom: 40px;
}

.breadcrumb-item a {
    color: var(--primary-orange);
}

.breadcrumb-item.active {
    color: var(--text-light);
}

/* Prevent Image Selection/Copying */
img {
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
    /* Disables right click effectively on many browsers for images specifically if wrapped */
}

/* Allow pointer events for specific interaction if needed, but keeping generally disabled for protection */
a img {
    pointer-events: auto;
    /* Allow clicking linked images */
}