/**
 * Future Roto Plast — global professional theme
 * Loaded last to unify contrast, typography, and brand blue (#0074B7).
 */

:root {
  --brand-blue: #0074b7;
  --brand-blue-hover: #005a8e;
  --brand-blue-soft: #e8f4fc;
  --text-primary: #1a1a1a;
  --text-body: #444444;
  --text-muted: #5c6370;
  --surface: #ffffff;
  --surface-alt: #f5f9fc;
  --surface-muted: #f0f2f5;
  --border: #dde2e8;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --header-bg: #2c2f32;
  --header-surface: #3e4347;
  --header-text: #eaecee;
  --header-text-muted: #d3d5d8;
  --header-border: rgba(255, 255, 255, 0.1);
}

/* —— Base typography —— */
body {
  color: var(--text-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-primary);
  line-height: 1.25;
}

p,
li,
.stat p {
  color: var(--text-body);
}

/* —— Dark header —— */
.info-bar {
  background: var(--header-bg) !important;
  color: var(--header-text) !important;
  border-bottom: 1px solid var(--header-border) !important;
}

.info-container {
  background-color: var(--header-surface) !important;
}

.info-container span,
.info-container a,
.info-links a {
  color: var(--header-text) !important;
  font-weight: 500;
}

.info-container a:hover,
.info-links a:hover {
  color: var(--brand-blue) !important;
}

.info-container i,
.info-links a i {
  color: var(--brand-blue) !important;
}

/* —— Dark navigation —— */
.navbar {
  background: var(--header-bg) !important;
  color: var(--header-text) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2) !important;
  border-bottom: 1px solid var(--header-border) !important;
}

.nav-logo img,
.footer .logo img {
  filter: brightness(1.65) contrast(1.3) !important;
}

.nav-links a {
  color: var(--header-text) !important;
  font-weight: 500;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--brand-blue) !important;
}

.burger {
  background: var(--header-surface) !important;
  color: var(--header-text) !important;
}

@media (max-width: 768px) {
  .nav-links {
    background: var(--header-bg) !important;
  }
}

.dropdown-menu {
  background: var(--header-surface) !important;
  border: 1px solid var(--header-border) !important;
  border-radius: 6px;
}

.dropdown-menu li a {
  color: var(--header-text) !important;
}

.dropdown-menu li a:hover {
  background: var(--brand-blue) !important;
  color: #ffffff !important;
}

.get-in-touch-btn {
  color: #ffffff !important;
  font-weight: 600;
}

/* —— Hero (video / gradient pages) —— */
.hero h1,
.hero-cont h1 {
  color: var(--text-primary) !important;
}

.hero p,
.hero-cont p {
  color: var(--text-body) !important;
}

.hero .hero-content h1 {
  color: #ffffff !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

.hero .hero-content p {
  color: rgba(255, 255, 255, 0.92) !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
}

/* —— Stats —— */
.stats {
  background: var(--surface-alt) !important;
}

.stat h2,
.stat .plus {
  color: var(--brand-blue) !important;
}

.stat p {
  color: var(--text-body) !important;
  font-weight: 500;
}

.divider {
  background: rgba(0, 116, 183, 0.2) !important;
}

/* —— About company overlay box (homepage) —— */
.content-box {
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
}

.content-box h3 {
  color: var(--brand-blue) !important;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.content-box h2 {
  color: var(--text-primary) !important;
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.content-box h2 span {
  color: var(--brand-blue) !important;
}

.content-box p {
  color: var(--text-body) !important;
  font-size: 0.95rem !important;
}

.content-box strong {
  color: var(--brand-blue) !important;
  font-weight: 600;
}

.content-box .btn {
  background: var(--brand-blue) !important;
  color: #ffffff !important;
  font-weight: 600;
  padding: 0.65rem 1.35rem;
}

.content-box .btn:hover {
  background: var(--brand-blue-hover) !important;
}

/* Contact drawer — enquiry form */
.contact-form .form-label {
  color: var(--text-primary) !important;
}

.radio-option span {
  color: var(--text-body) !important;
}

.form-actions .submit-btn,
.form-actions .whatsapp-btn {
  margin-top: 0 !important;
}

/* —— Vision / Mission / Values —— */
.vmv-section .bg::after {
  background: rgba(0, 45, 70, 0.55) !important;
}

.vmv-tabs {
  background: rgba(255, 255, 255, 0.92) !important;
  border-right: 1px solid var(--border);
}

.vmv-tabs button {
  color: var(--text-body) !important;
  font-weight: 500;
}

.vmv-tabs button:hover,
.vmv-tabs button.active {
  color: var(--brand-blue) !important;
  border-bottom-color: var(--brand-blue) !important;
}

.vmv-content {
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--text-body) !important;
}

.vmv-content h2 {
  color: var(--brand-blue) !important;
  font-weight: 700;
}

.vmv-content p {
  color: var(--text-body) !important;
}

/* —— Video section —— */
.video-section h2 {
  color: var(--brand-blue) !important;
  font-weight: 700;
}

.video-section p,
.section-header p {
  color: var(--text-body) !important;
}

.section-header h2 {
  color: var(--text-primary) !important;
}

/* —— Product showcase —— */
.sidebar-title {
  color: var(--brand-blue) !important;
  font-weight: 700;
}

.categories li {
  color: var(--text-body) !important;
  font-weight: 500;
}

.categories li:hover,
.categories li.active {
  color: var(--brand-blue) !important;
}

.product-info h1 {
  color: var(--text-primary) !important;
}

.product-info p,
.product-info .product-description {
  color: var(--text-body) !important;
}

.product-info .product-price {
  color: var(--brand-blue) !important;
}

/* —— About page —— */
.heading {
  color: var(--text-muted) !important;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
}

.main-about h2,
.about-content h3,
.director-content h3,
.our-infra>div>div:nth-child(2)>h2 {
  color: var(--text-primary) !important;
}

.main-about p,
.about-content p,
.director-content p,
.value-item p {
  color: var(--text-body) !important;
}

.our-infra .heading {
  color: var(--text-muted) !important;
}

.value-item h2 {
  color: var(--text-primary) !important;
}

/* Quality block — white text on brand blue */
.quality-section {
  border-radius: 8px;
  box-shadow: var(--shadow-md);
}

.quality-content h2,
.quality-content p {
  color: #ffffff !important;
}

.know-more-btn {
  color: var(--brand-blue) !important;
  font-weight: 600;
}

.know-more-btn:hover {
  background: #ffffff !important;
  color: var(--brand-blue-hover) !important;
}

.read-more-btn:hover {
  color: #ffffff !important;
}

/* —— Contact page —— */
.page-hero h1,
.contact-hero h1 {
  color: var(--text-primary) !important;
}

.contact-card h3,
.contact-person h3 {
  color: var(--brand-blue) !important;
}

.contact-card p,
.contact-card a,
.contact-person p {
  color: var(--brand-blue-soft) !important;
}

.contact-card .role,
.contact-person .role {
  color: var(--text-primary) !important;
  font-weight: 600;
}

/* —— Dark footer —— */
.footer {
  background: var(--header-bg) !important;
  color: var(--header-text) !important;
  border-top: 1px solid var(--header-border) !important;
}

.footer-section h3 {
  color: var(--brand-blue) !important;
}

.footer-section ul li a {
  color: var(--header-text-muted) !important;
}

.footer-section ul li a:hover {
  color: var(--brand-blue) !important;
}

.about-text,
.contact-info li,
.footer-bottom {
  color: var(--header-text-muted) !important;
}

.footer-bottom {
  border-top-color: var(--header-border) !important;
}

.social-icons a {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--header-text) !important;
}

.social-icons a:hover {
  background: var(--brand-blue) !important;
  color: #ffffff !important;
}

.contact-info li i {
  color: var(--brand-blue) !important;
}

.footer p,
.footer-section p,
#contact-section p {
  color: var(--header-text-muted) !important;
}

.footer-section p strong,
#contact-section p strong {
  color: var(--brand-blue) !important;
}

.footer-section p a,
#contact-section p a {
  color: var(--header-text) !important;
}

.footer-section p a:hover,
#contact-section p a:hover {
  color: var(--brand-blue) !important;
}

/* Product detail page — blue hero block */
.hero-section .hero-content h1 {
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.hero-section .hero-content .subtitle {
  color: rgba(255, 255, 255, 0.92) !important;
  text-shadow: none;
}

.hero-section .highlight-item h3 {
  color: var(--brand-blue) !important;
}

.hero-section .highlight-item p {
  color: var(--text-body) !important;
  text-shadow: none;
}

/* Homepage products showcase */
.products-showcase .product-info h1 {
  color: var(--text-primary) !important;
}

.products-showcase .product-info p,
.products-showcase .spec-item {
  color: var(--text-muted) !important;
}

.products-showcase .view-products-btn {
  color: #ffffff !important;
}

/* Products page — featured slider overlay */
.products-page .page-header p {
  color: var(--text-muted) !important;
}

.slide-content h3 {
  color: #ffffff !important;
}

.slide-content p {
  color: rgba(255, 255, 255, 0.9) !important;
}

.view-product-btn {
  color: #ffffff !important;
}

.view-product-btn:hover {
  color: #ffffff !important;
}

/* —— Contact modal (scoped; full styles in contact-drawer.css) —— */
.contact-modal .form-group input,
.contact-modal .form-group select,
.contact-modal .form-group textarea {
  color: var(--text-primary) !important;
}

/* —— Policies / image cards —— */
.policy-card {
  box-shadow: var(--shadow-md);
}

.policy-image::before {
  background: rgba(0, 0, 0, 0.55) !important;
}

.policy-content,
.policy-content h3,
.policy-content p {
  color: #ffffff !important;
}

.policy-content .read-more-btn,
.policy-content a {
  color: #ffffff !important;
  border-color: #ffffff !important;
}

/* —— Contact page cards —— */
.contact-name {
  color: var(--brand-blue) !important;
}

.contact-designation {
  color: var(--text-primary) !important;
}

.phone,
.email,
.phone a,
.email a {
  color: var(--text-body) !important;
}

.phone i,
.email i,
.contact-icon i {
  color: var(--brand-blue) !important;
}

.address-section h2,
.location-info h2,
.visit-heading {
  color: var(--brand-blue) !important;
}

.address-section p,
.location-details p,
.location-info li {
  color: var(--text-body) !important;
}

/* —— Global map section —— */
.map-section h2,
.map-title,
.global-presence h2 {
  color: var(--text-primary) !important;
  font-weight: 700;
}

/* —— Highlight spans in headings —— */
.main-about h2 span,
.about-content strong,
strong[style*="0074"] {
  color: var(--brand-blue) !important;
}