/*
Theme Name: Serene Overseas Custom Theme
Theme URI: https://www.sereneoverseas.com
Author: Serene Overseas Development Team
Author URI: https://www.sereneoverseas.com
Description: Custom WordPress theme designed for Serene Overseas Private Limited, built on Tailwind CSS CDN and custom animations.
Version: 1.0.0
Text Domain: serene-theme
*/

/* ==========================================================================
   SERENE OVERSEAS — SHARED DESIGN SYSTEM
   Used by every page. Tailwind (CDN) handles utility classes; this file
   holds design tokens and the small set of custom/animated components
   that Tailwind utilities alone can't express.
   ========================================================================== */

:root {
  --navy: #1d1d1d;
  --navy-light: #061128;
  --navy-dark: #101217;
  --pink: #c70e0d;
  --pink-light: #fce9ee;
  --pink-dark: #a50c0c;
  --mist: #f8f9fa;
  --ink: #0f1b33;
  --line: #ddd;
}
.serene-apply .sa-next,
.serene-apply .sa-submit {
  background: var(--navy);
  color: #fff;
  margin-left: auto;
  border-radius: 20px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--ink);
  background: #fff;
  overflow-x: hidden;
}
h1,
h2,
h3,
h4,
.font-display {
  font-family: "Fraunces", serif;
}

/* ---------- Decorative shapes ---------- */
.hero-blob {
  border-radius: 200px 200px 200px 40px;
}
.hero-blob-2 {
  border-radius: 40px 200px 40px 200px;
}

.r-card {
  border-radius: 32px;
}
.r-card-lg {
  border-radius: 48px;
}
.r-btn {
  border-radius: 999px;
}
.r-panel {
  border-radius: 100px 32px 100px 32px;
}

.stamp {
  position: relative;
  border: 2px dashed rgba(222, 35, 83, 0.55);
  border-radius: 999px;
  transform: rotate(-6deg);
}
.perforated {
  position: relative;
}
.perforated::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background-image: radial-gradient(
    circle,
    rgba(15, 27, 51, 0.18) 2px,
    transparent 2.4px
  );
  background-size: 1px 14px;
  background-repeat: repeat-y;
}
.stub-notch::before,
.stub-notch::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 50%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.stub-notch::before {
  top: -11px;
}
.stub-notch::after {
  bottom: -11px;
}

.timeline-line {
  background: repeating-linear-gradient(
    90deg,
    var(--pink) 0 10px,
    transparent 10px 18px
  );
  height: 3px;
}

.grain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}

/* Inner-page hero treatment (contact / blog / blog-single / country pages) */
.page-hero {
  position: relative;
  overflow: hidden;
}
.page-hero .grain {
  opacity: 0.2;
}
.page-hero-glow-a {
  position: absolute;
  top: -8rem;
  left: -8rem;
  width: 24rem;
  height: 24rem;
  background: radial-gradient(circle, rgba(222, 35, 83, 0.18), transparent 70%);
  border-radius: 9999px;
  filter: blur(60px);
  pointer-events: none;
}
.page-hero-glow-b {
  position: absolute;
  bottom: -6rem;
  right: -6rem;
  width: 22rem;
  height: 22rem;
  background: radial-gradient(circle, rgba(18, 59, 140, 0.35), transparent 70%);
  border-radius: 9999px;
  filter: blur(60px);
  pointer-events: none;
}

/* ---------- Interaction / motion ---------- */
.has-dropdown:hover .dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
}
.dropdown-panel {
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 4px) scale(0.98);
  transition:
    opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.lift {
  transition:
    transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.35s ease;
}
.lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px -20px rgba(0, 32, 91, 0.2);
}

.test-track {
  transition: transform 0.5s ease;
}
.badge-tab-btn.active {
  background: var(--pink);
  color: #fff;
  box-shadow: 0 10px 25px -5px rgba(222, 35, 83, 0.4);
}
.country-item-btn.active {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--pink);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(222, 35, 83, 0.18);
  animation: countryPulse 0.6s ease;
}
@keyframes countryPulse {
  0% {
    transform: scale(0.94);
  }
  60% {
    transform: scale(1.03);
  }
  100% {
    transform: scale(1);
  }
}

.marquee-track {
  animation: marquee 28s linear infinite;
}
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ---------- Shared header/footer bits ---------- */
.brand-logo-img {
  height: 2.75rem;
  width: auto;
  object-fit: contain;
}
.footer-logo-img {
  height: 2.5rem;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.serene-apply .sa-field input,
.serene-apply .sa-field select,
.serene-apply .sa-field textarea {
  border-radius: 50px;
}
.serene-apply .sa-field textarea {
  border-radius: 20px;
}