/* 
========================================================================
   WESTERN CAREER PATH - PREMIUM RESPONSIVE STYLESHEET (responsive.css)
   Breakpoints: 1024px | 768px | 425px | 375px | 320px
========================================================================
*/

/* ========================================================================
   UNIVERSAL MOBILE AND FLUID LAYOUT HELPERS (Apply globally)
======================================================================== */
* {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  background-color: #020617; 
}

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

iframe, video, canvas {
  max-width: 100% !important;
}

* {
  -webkit-tap-highlight-color: transparent;
}

/* Touch-friendly interactive elements accessibility (PageSpeed best practices) */
@media (max-width: 768px) {
  .btn, .social-circle-btn, .team-social-btn, .newsletter-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .nav-item {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hamburger-btn {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .form-control, select, textarea {
    min-height: 44px;
  }
}

/* ========================================================================
   LARGE TABLET / IPAD PRO & SMALL LAPTOPS (max-width: 1024px)
======================================================================== */
@media (max-width: 1024px) {
  .container {
    max-width: 960px;
    padding: 0 1.5rem;
  }

  .hero-title {
    font-size: clamp(2rem, 4.5vw + 1rem, 3.5rem);
  }

  /* Hero section reflow */
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
    text-align: center;
  }

  .hero-subtitle {
    margin-left: auto;
    margin-right: auto;
    max-width: 560px;
  }

  .hero-btns {
    justify-content: center;
  }

  .hero-badge-container {
    justify-content: center;
  }

  .hero-media-wrapper {
    max-width: 420px;
    margin: 0 auto;
  }

  .hero-img-box img {
    height: clamp(240px, 35vw, 420px);
  }

  /* Stats grid reflow */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  .stat-item:nth-child(2)::after {
    display: none;
  }

  /* Grid reflows */
  .services-grid,
  .wcu-grid,
  .countries-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Consultation section reflow */
  .consultation-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .consultation-info-header h2 {
    font-size: 2.25rem;
  }

  /* Footer reflow */
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
  }

  /* Inner Pages - About Story Grid */
  .about-story-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }

  .about-hq-map-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }

  .about-divisions-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  /* Inner Pages - Services */
  .services-main-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .vip-card {
    grid-column: span 1 !important;
  }

  .detailed-service-card {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
    padding: 2.5rem !important;
  }

  .detailed-service-card:nth-child(even) {
    grid-template-columns: 1fr !important;
  }

  .detailed-service-card:nth-child(even) .service-detail-info {
    grid-column: 1 !important;
  }

  .detailed-service-card:nth-child(even) .service-detail-media {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  /* Inner Pages - Countries Accordions & Packages */
  .dropdown-details-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .packages-main-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }

  .europe-benefits-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.25rem !important;
  }

  .country-profile-card {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }

  .country-profile-card:nth-child(even) {
    grid-template-columns: 1fr !important;
  }

  .country-profile-media {
    min-height: 350px !important;
    height: 350px !important;
  }

  .country-profile-info {
    padding: 2.5rem !important;
  }

  /* Inner Pages - Contact */
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
  }

  .hq-map-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
}

/* ========================================================================
   SMALL TABLET PORTRAIT / MOBILE WIDE (max-width: 768px)
======================================================================= */
@media (max-width: 768px) {
  .container {
    max-width: 100%;
    padding: 0 15px;
  }

  .section-padding {
    padding: 4rem 0;
  }

  .section-title {
    font-size: 2rem;
  }

  .section-header {
    margin-bottom: 2.5rem;
  }

  /* Mobile Typography Resizing Overrides (Inline-style overrides) */
  .inner-hero h1 {
    font-size: var(--font-size-h1) !important;
  }

  .section-title, h2 {
    font-size: var(--font-size-h2) !important;
  }

  h3 {
    font-size: var(--font-size-h3) !important;
  }

  /* Sticky Header Menu drawer */
  .header-nav {
    padding: 1rem 0;
  }

  .hamburger-btn {
    display: flex;
  }

  /* Premium Hamburger Menu Drawer Overlay - Using fixed width and off-canvas values to prevent viewport leak */
  .nav-links {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100vh;
    background: rgba(15, 23, 42, 0.98);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    padding: 3rem 2rem;
    transition: right 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 999;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.4);
  }

  .nav-links.active {
    right: 0;
  }

  .nav-item {
    font-size: 1.15rem;
    width: 100%;
    text-align: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .nav-item:last-child {
    border-bottom: none;
  }

  .btn-login-nav {
    width: 100%;
    text-align: center;
    justify-content: center;
    margin-top: 1rem;
  }

  /* Hamburger transition animations */
  .hamburger-btn.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 5px);
  }
  .hamburger-btn.active span:nth-child(2) {
    opacity: 0;
  }
  .hamburger-btn.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
  }

  /* Hero Section adjustments */
  .hero-title {
    font-size: 2.5rem;
    letter-spacing: -0.5px;
  }

  .hero-section {
    padding-top: 7.5rem;
  }

  .hero-btns {
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
  }

  .hero-btns .btn {
    width: 100%;
    max-width: 320px;
  }

  /* Hide absolute floating cards on small screens to prevent overflow */
  .floating-card {
    display: none !important; 
  }

  /* Constrain decorative background sphere sizing on mobile to prevent overflow */
  .accent-glow-sphere {
    width: 260px !important;
    height: 260px !important;
    filter: blur(80px) !important;
    max-width: 100vw !important;
  }

  /* Disable translation-based animations on mobile to prevent translateX overflow */
  .reveal-left, .reveal-right {
    transform: none !important;
    transition: opacity 0.8s ease-in-out !important;
  }

  /* Stats Section spacing */
  .stats-section {
    margin-top: -2.5rem;
  }

  .stats-grid {
    padding: 2rem 1.5rem;
  }

  .stat-num {
    font-size: 2.5rem;
  }

  /* Home grids reflow */
  .services-grid,
  .wcu-grid,
  .countries-grid {
    grid-template-columns: 1fr;
  }

  .country-card {
    height: 300px;
  }

  .country-card p,
  .country-card .btn {
    transform: translateY(0) !important;
    opacity: 1 !important;
  }

  /* Testimonials and Carousel styling */
  .testimonial-card {
    padding: 2.5rem 1.5rem;
  }

  .testimonial-text {
    font-size: 1.05rem;
  }

  .quote-icon {
    font-size: 3rem;
    left: 1.5rem;
    top: 1rem;
  }

  /* Form handling */
  .form-wrapper {
    padding: 2rem 1.5rem;
  }

  .form-row-2 {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  /* Footer bottom adjustments */
  .footer-bottom {
    flex-direction: column;
    gap: 1.25rem;
    text-align: center;
  }

  .footer-bottom-links {
    justify-content: center;
  }

  /* Inner Page Hero */
  .inner-hero {
    padding: 8rem 0 4rem 0;
  }

  /* Prevent text overflow in code blocks and card containers */
  .glass-card, .glass-panel {
    word-break: break-word;
    overflow-wrap: break-word;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* Table horizontal scroll wrapper safety */
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* About Page - Team and HQ adjustments */
  .team-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }

  .about-countries-list-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  .about-wcu-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .mv-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* Experience Timeline Mobile Reconstruction (Left align line/dots to prevent layout breaks) */
  .timeline-container {
    padding: 1.5rem 0 !important;
  }

  .timeline-line {
    left: 20px !important;
    transform: none !important;
  }

  .timeline-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    margin-bottom: 2.5rem !important;
  }

  .timeline-dot {
    left: 20px !important;
    top: 25px !important;
    transform: translateX(-50%) !important;
  }

  .timeline-content {
    width: 100% !important;
    text-align: left !important;
    padding-left: 45px !important;
    padding-right: 0 !important;
  }

  /* Services page lists collapse */
  .benefits-list {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  .card-includes-list {
    gap: 0.5rem !important;
  }

  .card-title-area {
    padding-right: 0 !important;
  }

  .card-price-badge {
    position: static !important;
    margin-bottom: 1rem !important;
    display: inline-block !important;
    width: fit-content !important;
  }

  /* Countries Page dropdown details & benefits */
  .europe-benefits-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  .country-header-left {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  .country-subtitle {
    margin-left: 0 !important;
    margin-top: 0.25rem !important;
  }

  .europe-country-header {
    padding: 1.25rem 1.75rem !important;
  }

  .dropdown-content-inner {
    padding: 1.75rem !important;
  }

  /* Jobs Page grids collapsing */
  .industries-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem !important;
  }

  .registration-form-grid {
    grid-template-columns: 1fr !important;
  }

  .benefits-grid {
    grid-template-columns: 1fr !important;
  }

  /* Contact Page Grid collapse */
  .offices-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }

  .why-us-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }
}

/* ========================================================================
   LARGE MOBILE VIEWPORT (max-width: 425px)
======================================================================== */
@media (max-width: 425px) {
.container {
    width: 100%;
    max-width: 100%;
    padding: 0 15px;
    margin: 0 auto;
}

  .hero-title {
    font-size: 2.1rem;
  }

  .hero-section {
    padding-top: 6.5rem;
  }

  .hero-badge-container {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
  }

  .hero-img-box img {
    height: 250px;
  }

  /* Stats grid fully collapsed to single column on mobile */
  .stats-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  .stat-item::after {
    display: none !important;
  }

  .btn {
    padding: 0.85rem 1.75rem;
    font-size: 0.9rem;
    width: 100% !important;
  }

  /* General Grid Collapses for 425px screen width */
  .team-grid {
    grid-template-columns: 1fr !important;
  }

  .about-countries-list-grid {
    grid-template-columns: 1fr !important;
  }

  .offices-grid {
    grid-template-columns: 1fr !important;
  }

  .why-us-grid {
    grid-template-columns: 1fr !important;
  }

  .industries-grid {
    grid-template-columns: 1fr !important;
  }

  .employer-countries-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .jobs-stats-strip {
    grid-template-columns: 1fr !important;
  }

  .europe-benefits-grid {
    grid-template-columns: 1fr !important;
  }

  .packages-main-grid {
    grid-template-columns: 1fr !important;
  }

  .faq-follow-list {
    grid-template-columns: 1fr !important;
  }

  .country-name {
    font-size: 1.25rem !important;
  }

  .country-flag-icon img {
    width: 35px !important;
    height: 23px !important;
  }

  .country-profile-media {
    min-height: 240px !important;
    height: 240px !important;
  }

  .country-profile-info {
    padding: 1.5rem !important;
  }

  .country-stats-row {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .country-key-benefits ul {
    grid-template-columns: 1fr !important;
  }

  .visa-tab-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .visa-meta-table td {
    padding: 0.75rem 0 !important;
    font-size: 0.85rem !important;
  }

  .social-login-divider {
    font-size: 0.75rem;
  }
}

/* ========================================================================
   MEDIUM MOBILE VIEWPORT (max-width: 375px)
======================================================================== */
@media (max-width: 375px) {
  .hero-title {
    font-size: 1.85rem !important;
  }

  .section-title {
    font-size: 1.6rem !important;
  }

  .inner-hero h1 {
    font-size: 1.85rem !important;
  }
}

/* ========================================================================
   SMALL MOBILE VIEWPORT (max-width: 320px)
======================================================================== */
@media (max-width: 320px) {
  .container {
    padding: 0 15px;
  }

  .hero-title {
    font-size: 1.65rem !important;
  }

  .section-title {
    font-size: 1.45rem !important;
  }

  /* Full screen slide out for extra small mobile viewport */
  .nav-links {
    width: 100%;
    right: -100%;
  }

  .btn {
    font-size: 0.85rem;
    padding: 0.75rem 1.25rem;
  }
}
@media (max-width: 768px) {

  .footer-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    text-align: center;
  }

  .footer-column {
    width: 100%;
  }

  .footer-logo,
  .footer-socials {
    justify-content: center;
  }

  .footer-bottom {
    display: flex;
    margin-top: 1rem;
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }

  .footer-bottom-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }

  .footer-bottom-links a {
    display: inline-block;
  }
}

@media (max-width: 425px) {

  .footer {
    padding: 3rem 0;
  }

  .footer-grid {
    gap: 1.5rem !important;
  }

  .footer h3,
  .footer h4 {
    font-size: 1.1rem;
  }

  .footer p,
  .footer a,
  .footer li {
    font-size: 0.9rem;
  }
}
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
  }
}