/* ============================================
   GLOBAL.CSS - Base Styles & Utilities
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --primary-color: #FF6D12;
  --dark-bg: #030F3F;
  --dark-navy: #0A1931;
  --text-dark: #1a1a2e;
  --text-gray: #6c757d;
  --border-color: #D9D9D9;
  --card-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  --font-family: 'Inter', sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-dark);
  overflow-x: hidden;
  cursor: default;
}

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

a {
  text-decoration: none;
  color: inherit;
}

p { margin-bottom: 0; }

/* Utility: hide on mobile / desktop */
@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 768px) {
  .hide-desktop { display: none !important; }
}

/* Section heading shared style */
.section-heading {
  text-align: center;
  margin-bottom: 2rem;
}
.section-heading h2 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 0.5rem;
}
.section-heading hr {
  border: 2px solid var(--primary-color);
  width: 60px;
  margin: 0.75rem auto;
  opacity: 1;
}
.section-heading p {
  color: var(--text-gray);
  max-width: 640px;
  margin: 0 auto;
}

@media (max-width: 767px) {
  .container {
    padding-left: 14px;
    padding-right: 14px;
  }

  .header {
    padding: 8px 0;
  }

  .header .company-logo img {
    height: 40px;
  }

  .header_notiftication p {
    font-size: 0.75rem;
    line-height: 1.45;
  }

  .header_notiftication a {
    margin-top: 6px;
    margin-left: 0;
  }

  .JL-details-hero-btn {
    width: 100%;
    gap: 10px;
  }

  .JL-details-hero-btn1,
  .JL-details-hero-btn2 {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }
}