/* ============================================
   Oceanquip - Modern Frontend Theme
   Inspired by clean hotel/resort layout in reference
   Applies to home, equipment, blog and common sections
   ============================================ */

:root {
  --fz-hero: clamp(32px, 6vw, 68px);
  --fz-hero-sub: clamp(14px, 2.2vw, 20px);
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px rgba(0,0,0,.12);
  --shadow-soft: 0 4px 20px rgba(0,0,0,.08);
  --shadow-strong: 0 16px 40px rgba(0,0,0,.18);
  --primary: var(--color-primary, #0ea5e9);
  --secondary: var(--color-secondary, #6366f1);
  --text: #0f172a;
  --muted: #475569;
  --bg: #ffffff;
  --bg-alt: #f8fafc;
}

/* Typography */
body {
  font-family: 'Raleway', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text);
}

h1, h2, h3, h4, h5, h6 { color: var(--text); letter-spacing: -0.02em; font-family: 'Raleway', sans-serif; }
.section-title h2 { letter-spacing: -0.02em; }
.section-title .sub-title { color: var(--primary); font-weight: 600; }

/* Enforce Raleway across key UI elements */
.header-navigation .main-menu > ul > li > a,
button, .btn, .main-btn, .btn-link, .search-btn, .newsletter-btn,
input, select, textarea, .form_control, .nice-select {
  font-family: 'Raleway', sans-serif !important;
}

/* Links and buttons */
.main-btn,
.btn-link,
.search-btn,
.newsletter-btn,
.pricing-item .main-btn {
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  border: 0;
  color: #fff !important;
  padding: 12px 22px !important;
  box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease, background .3s ease;
}

.main-btn:hover,
.btn-link:hover,
.search-btn:hover,
.newsletter-btn:hover,
.pricing-item .main-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

/* Header - transparent over hero, solid otherwise */
.header-navigation {
  position: relative;
  z-index: 10;
  padding: 18px 20px;
  background: transparent;
}
.header-navigation .primary-menu { max-width: 1250px; margin: 0 auto; }
.header-navigation .brand-logo img { height: 42px; width: auto; }

/* Home: transparent header over hero */
.home .header-navigation { position: absolute; top: 0; left: 0; right: 0; background: transparent; box-shadow: none; }
.home .header-navigation:not(.sticky) .main-menu > ul > li > a { color: #ffffff; opacity: .9; }
.home .header-navigation:not(.sticky) .main-menu > ul > li > a:hover { opacity: 1; }

/* Sticky and inner pages: glass surface + dark text */
body:not(.home) .header-navigation,
.header-navigation.sticky,
.breadcrumbs-area_v2_active .header-navigation {
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  box-shadow: var(--shadow-soft);
}
body:not(.home) .header-navigation .main-menu > ul > li > a,
.header-navigation.sticky .main-menu > ul > li > a,
.breadcrumbs-area_v2_active .header-navigation .main-menu > ul > li > a { color: var(--text); opacity: 1; }

/* Subtle underline on hover like reference */
.header-navigation .main-menu > ul > li > a { position: relative; font-weight: 600; }
.header-navigation .main-menu > ul > li > a::after {
  content: ""; position: absolute; left: 0; right: auto; bottom: -8px; width: 24px; height: 2px; background: currentColor; opacity: 0; transform: translateX(0); transition: opacity .2s ease;
}
.header-navigation .main-menu > ul > li > a:hover::after { opacity: .9; }

/* When not on hero, give header a clean solid surface */
body:not(.home) .header-navigation,
.breadcrumbs-area_v2_active .header-navigation {
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  box-shadow: var(--shadow-soft);
}
body:not(.home) .header-navigation .main-menu > ul > li > a,
.breadcrumbs-area_v2_active .header-navigation .main-menu > ul > li > a { color: var(--text); }

/* Hero area */
.hero-area { position: relative; }
.hero-area .single-hero-slider { position: relative; min-height: 76vh; display: flex; align-items: center; }
.hero-area .single-hero-slider::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.25) 30%, rgba(0,0,0,0.45) 100%);
}
.hero-area .hero-content { position: relative; z-index: 1; color: #fff; }
.hero-area .hero-content h1 { font-size: var(--fz-hero); font-weight: 700; line-height: 1.05; }
.hero-area .hero-content p { font-size: var(--fz-hero-sub); opacity: .95; }

/* Ensure bg cover helpers always behave as covers */
.bg_cover, .bg-cover { background-position: center center !important; background-size: cover !important; background-repeat: no-repeat !important; }

/* Hero search */
.hero-search-wrapper { margin-top: 24px; }
.hero-search-wrapper .form_group .form_control,
.hero-search-wrapper .form_group select.form_control {
  border-radius: 12px; border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.2); color: #fff;
}
.hero-search-wrapper .form_group .form_control::placeholder { color: rgba(255,255,255,.85); }
.hero-search-wrapper .search-btn { padding: 14px 22px !important; }

/* Hero Nice Select fixes (white text on white dropdown) */
.hero-search-wrapper .nice-select { border-radius: 12px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.2); color: #fff; }
.hero-search-wrapper .nice-select .current { color: #fff; }
.hero-search-wrapper .nice-select:after { border-color: #fff; }
.hero-search-wrapper .nice-select .list { background: #fff; color: var(--text); box-shadow: var(--shadow-soft); }
.hero-search-wrapper .nice-select .option { color: var(--text); }
.hero-search-wrapper .nice-select .option.focus,
.hero-search-wrapper .nice-select .option.selected.focus,
.hero-search-wrapper .nice-select .option:hover { background: var(--bg-alt); color: var(--text); }

/* Sections spacing and containers */
.about-area, .working-process, .features-area, .pricing-area, .testimonial-area, .blog-area,
.newsletter-area, .counter-area, .cta-area { scroll-margin-top: 80px; }

/* Cards for equipments (home sliders and listing) */
.pricing-item { border: 0 !important; border-radius: var(--radius); overflow: hidden; background: var(--bg); box-shadow: var(--shadow-soft); }
.pricing-item .pricing-img img { transition: transform .5s ease; }
.pricing-item:hover .pricing-img img { transform: scale(1.06); }
.pricing-item .pricing-info { padding: 16px 18px; }
.pricing-item .title a { color: var(--text); }
.pricing-item .vendor-name a { color: var(--primary); font-weight: 600; }
.pricing-item .price-option .span-btn { border-radius: 999px; padding: 6px 12px; font-weight: 600; }
.pricing-item .price-info h5 { font-weight: 700; color: var(--muted); }
.pricing-item .price-tag h4 { color: var(--primary); font-weight: 800; letter-spacing: -0.02em; }

/* Grid improvements */
.equipments-list-wrapper .pricing-item { margin-bottom: 28px; }
.sidebar-widget-area .widget { border: 0; border-radius: var(--radius); background: var(--bg); box-shadow: var(--shadow-soft); padding: 18px; }
.widget .widget-title { font-weight: 800; letter-spacing: -.02em; }

/* Blog cards */
.blog-post-item { border-radius: var(--radius); overflow: hidden; background: var(--bg); box-shadow: var(--shadow-soft); }
.blog-post-item .post-thumbnail img { transition: transform .5s ease; }
.blog-post-item:hover .post-thumbnail img { transform: scale(1.06); }
.blog-post-item .title a { color: var(--text); }
.blog-post-item .btn-link { background: transparent; color: var(--primary) !important; padding: 0 !important; box-shadow: none; border-radius: 0; }
.blog-post-item .btn-link:hover { text-decoration: underline; transform: none; }

/* Testimonial */
.testimonial-item { border-radius: var(--radius); background: var(--bg); box-shadow: var(--shadow-soft); }

/* CTA section text polish */
.cta-area .content-white h2, .cta-area .content-white h4 { text-shadow: 0 8px 30px rgba(0,0,0,.35); }

/* Newsletter */
.newsletter-wrapper-one { border-radius: var(--radius); background: var(--bg); box-shadow: var(--shadow-soft); padding: 28px; }
.newsletter-form .form_control { border-radius: 999px; padding: 14px 18px; }

/* Breadcrumb */
.breadcrumbs-area { background: var(--bg-alt); }
.breadcrumbs-area .breadcrumbs-content h1 { letter-spacing: -.02em; }

/* Footer */
.footer-area { color: #fff; }
.footer-area .widget .widget-title { font-weight: 800; letter-spacing: -.02em; }
.footer-area .social-link a { background: rgba(255,255,255,.12); border-radius: 50%; width: 40px; height: 40px; display: grid; place-items: center; }
.footer-area .social-link a:hover { background: rgba(255,255,255,.22); }

