/* homepage-main.css - Non-critical styles defer */

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 0.5;
    }
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(-12deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.05) rotate(3deg);
    }
    70% {
        transform: scale(0.95) rotate(-1deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

@keyframes float {
    0%, 100% { 
        transform: translateY(0) rotate(0deg) scale(1); 
    }
    25% { 
        transform: translateY(-8px) rotate(1deg) scale(1); 
    }
    50% { 
        transform: translateY(0) rotate(0deg) scale(1); 
    }
    75% { 
        transform: translateY(-4px) rotate(-1deg) scale(1); 
    }
}

@keyframes subtle-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.85;
        transform: scale(1.02);
    }
}

@keyframes pulse-tap {
    0%, 100% {
        transform: scale(1);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}

@keyframes fillProgress {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .logo-scroller-track,
    .slider_track {
        animation: none;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.cb-logo-grid.has-margins {
    display: none;
}

/* ============================================
   CUSTOM CURSOR
   ============================================ */

#customCursor {
  position: fixed;
  width: 40px;
  height: 40px;
  pointer-events: none;
  z-index: 999999;
  transform: translate(-50%, -50%);
  transition: transform 0.08s ease, opacity 0.15s ease;
  opacity: 0;            /* don't force visible */
  visibility: hidden;    /* don't force visible */
  display: none;         /* off until activated by JS */
}

html.custom-cursor-active #customCursor {
  display: block;
  opacity: 1;
  visibility: visible;
}

#customCursor svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.4)) drop-shadow(0 0 25px rgba(237, 137, 54, 0.6));
}

#customCursor svg path { transition: fill 0.08s ease; }

#customCursor.hover { transform: translate(-50%, -50%) scale(1.3) rotate(-10deg); }
#customCursor.hover svg path { fill: #fc6e37; }
#customCursor.clicking { transform: translate(-50%, -50%) scale(0.9); }

/* Hide the native cursor only when we know the custom one is active */
html.custom-cursor-active button,
html.custom-cursor-active a,
html.custom-cursor-active .feature-card { cursor: none; }

/* Touch or reduced-pointer devices: never show custom cursor */
@media (hover: none) and (pointer: coarse) {
  #customCursor { display: none !important; }
  html.custom-cursor-active button,
  html.custom-cursor-active a,
  html.custom-cursor-active .feature-card { cursor: auto !important; }
}

/* Small screens: ensure normal cursor */
@media (max-width: 768px) {
  #customCursor { display: none !important; }
  html.custom-cursor-active button,
  html.custom-cursor-active a,
  html.custom-cursor-active .feature-card { cursor: auto !important; }
}  

/* ============================================
   HERO SECTION - NON-CRITICAL HOMEPAGE
   ============================================ */
.hero-wrapper.scrolled {
    padding-top: 100px;
    background: #f0f0f0;
}

.hero-container {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-container.contracted {
    max-width: 1800px;
    margin: 0 auto;
    min-height: 80vh;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

.hero-inner {
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.contracted .hero-inner {
    height: 80vh;
}

.pattern-bg {
    position: absolute;
    right: 8%;
    top: 50%;
    transform: translateY(-50%);
    width: 55%;
    max-width: 900px;
    height: 80%;
    max-height: 700px;
    z-index: 2;
    opacity: 0.5;
    animation: fadeIn 1.5s ease 0.2s both;
    pointer-events: none;
}

.pattern-bg svg {
    width: 100%;
    height: 100%;
}

.hero-content {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.hero-content-inner {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding-xl);
    width: 100%;
}

.hero-text-form {
    position: relative;
    z-index: 3;
    max-width: 600px;
    color: white;
    animation: fadeInUp 0.8s ease;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.cta-button svg {
    width: 16px;
    height: 14px;
    fill: currentColor;
}

.cta-button.no-logo {
    padding: 16px 40px;
}

.trust-indicators {
    margin-top: 40px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.avatar-group {
    display: flex;
    margin-right: 10px;
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid #e56b3e;
    margin-left: -15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    overflow: hidden;
    background: #ff6b35;
}

/* Mobile override */
@media (max-width: 768px) {
    .avatar {
        background: black;
        border: 3px solid #0e2222;
    }
}

.avatar:first-child {
    margin-left: 0;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.person-image {
    position: absolute;
    right: 12%;
    bottom: 0;
    width: 46%;
    max-width: 780px;
    height: 90%;
    z-index: 2;
    animation: fadeInRight 1s ease 0.3s both;
}

.person-image img {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom right;
}

:root {
    --container-max-width: 1800px;
    --container-padding-xxs: 20px;
    --container-padding-xs: 52px;
    --container-padding-s: 100px;
    --container-padding-md: 225px;
    --container-padding-mdl: 250px;
    --container-padding-l: 270px;
    --container-padding-xl: 300px;
}

/* Responsive padding adjustments */
@media (min-width: 768px) and (max-width: 1279px) {
    .hero-content-inner {
        padding: 0 20px;
    }
    .person-image {
        right: 4%;
        width: 70%;
    }
    .badge-skills-certs {
        right: 150px !important;
        top: 650px !important;
    }
}

@media (min-width: 1280px) and (max-width: 1439px) {
    .hero-content-inner {
        padding: 0 var(--container-padding-xxs);
    }
    .person-image {
        right: 4%;
        width: 70%;
    }
    .badge-skills-certs {
        right: 400px !important;
        top: 650px !important;
    }
}

@media (min-width: 1440px) and (max-width: 1534px) {
    .hero-content-inner {
        padding: 0 var(--container-padding-xs);
    }
    .person-image {
        right: 4%;
        width: 70%;
    }
    .badge-skills-certs {
        right: 400px !important;
        top: 650px !important;
    }
}

@media (min-width: 1535px) and (max-width: 1700px) {
    .hero-content-inner {
        padding: 0 var(--container-padding-s);
    }
    .person-image {
        right: 8%;
        width: 46%;
    }
    .badge-skills-certs {
        right: 450px !important;
    }
}

@media (min-width: 1701px) and (max-width: 1919px) {
    .hero-content-inner {
        padding: 0 var(--container-padding-md);
    }
    .person-image {
        right: 8%;
        width: 46%;
    }
    .badge-skills-certs {
        right: 450px !important;
    }
}

@media (min-width: 1920px) and (max-width: 2559px) {
    .hero-content-inner {
        padding: 0 var(--container-padding-mdl);
    }
    .person-image {
        right: 8%;
        width: 46%;
    }
    .badge-skills-certs {
        right: 450px !important;
    }
}

@media (min-width: 2560px) and (max-width: 3839px) {
    .hero-content-inner {
        padding: 0 var(--container-padding-l);
    }
    .person-image {
        right: 8%;
        width: 46%;
    }
    .badge-skills-certs {
        right: 450px !important;
    }
}

@media (min-width: 3840px) {
    .hero-content-inner {
        padding: 0 var(--container-padding-xl);
    }
    .person-image {
        right: 8%;
        width: 46%;
    }
    .badge-skills-certs {
        right: 450px !important;
    }
}

/* Auditorium */
.auditorium {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 150px;
    z-index: 2;
    overflow: hidden;
    animation: fadeInUp 1.2s ease 0.5s both;
    transition: opacity 0.4s ease, transform 0.4s ease, bottom 0.4s ease;
}

.hero-wrapper.scrolled .auditorium {
    opacity: 0;
    transform: translateY(100px);
    pointer-events: none;
}

.auditorium.hidden {
    opacity: 0;
    transform: translateY(100px);
}

.auditorium img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    opacity: 0.9;
    transition: transform 0.3s ease;
}

/* ============================================
   LOGO SCROLLER SECTION
   ============================================ */
.logo-scroller-section {
    background: #122B2E;
    padding: 25px 0;
    overflow: hidden;
    position: absolute;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    top: calc(100% + 150px);
    left: 0;
    z-index: 10;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
}

.hero-wrapper.scrolled .logo-scroller-section {
    position: absolute;
    top: auto;
    bottom: 0;
    border-radius: 0 0 10px 10px;
    background: #122B2E;
    backdrop-filter: blur(10px);
    width: 100%;
    left: 0;
    height: 150px;
}

.hero-wrapper.scrolled .hero-container {
    min-height: calc(80vh + 120px);
}

.logo-scroller-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px 0 0 10px;
}

.logo-scroller-layout {
    display: flex;
    align-items: center;
    gap: 60px;
}

.logo-scroller-text {
    flex: 0 0 380px;
    padding-right: 40px;
}

.logo-scroller-heading {
    font-size: 28px !important;
    font-weight: 700;
    color: var(--white);
    margin: 0;
    line-height: 1.3 !important;
    letter-spacing: -0.02em;
    position: relative;
}

.logo-scroller-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -20px;
    width: 60px;
    height: 3px;
    background: var(--orange-primary);
    border-radius: 2px;
}

.logo-scroller-wrapper:focus-within .logo-scroller-track { animation-play-state: paused; }

.logo-scroller-wrapper {
    flex: 1;
    position: relative;
    overflow: hidden;
    mask-image: linear-gradient(
        to right,
        transparent,
        black 5%,
        black 95%,
        transparent
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent,
        black 5%,
        black 95%,
        transparent
    );
}

.logo-scroller-track {
    display: flex;
    animation: scroll 35s linear infinite;
    width: fit-content;
}

.logo-scroller-slide {
    display: flex;
    align-items: center;
    gap: 30px;
    padding-right: 30px;
    padding-top: 5px;
}

.logo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 25px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    min-width: 160px;
    height: 70px;
}

.logo-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--orange-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 107, 53, 0.15);
}

.logo-item img {
    max-width: 120px;
    max-height: 45px;
    width: auto;
    height: auto;
    filter: brightness(0) invert(1);
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.logo-item:hover img {
    opacity: 1;
}

.white-mask {
    filter: brightness(0) invert(1);
}

.logo-scroller-wrapper:hover .logo-scroller-track {
    animation-play-state: paused;
}

/* ============================================
   BADGE SKILLS & CERTIFICATIONS
   ============================================ */
.badge-skills-certs {
    position: absolute;
    top: 600px;
    right: 550px;
    padding: 0;
    width: 280px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    opacity: 0;
    transform: scale(0.3) rotate(-12deg);
    z-index: 99999;
}

.badge-skills-certs.appear {
    animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.badge-skills-certs.visible {
    opacity: 1;
    transform: scale(1) rotate(0);
}

.badge-skills-certs.floating {
    animation: float 6s ease-in-out infinite;
}

.skills-section {
    padding: 10px 10px 10px 10px;
    min-height: 50px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.skills-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.skills-icon {
    width: 36px;
    height: 36px;
    position: relative;
}

.progress-circle {
    width: 100%;
    height: 100%;
    position: relative;
}

.progress-circle svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.progress-circle-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 3;
}

.progress-circle-fill {
    fill: none;
    stroke: #ff6b35;
    stroke-width: 3;
    stroke-dasharray: 100.53;
    stroke-dashoffset: 100.53;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.1s linear;
}

.progress-percentage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    font-weight: 700;
    color: #ffffff;
}

.skills-content {
    flex: 1;
}

.skills-label {
    font-size: 11px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-bottom: 2px;
}

.skill-message {
    font-size: 12px;
    color: #ffffff;
    font-weight: 500;
    line-height: 1.3;
    min-height: 32px;
    display: flex;
    align-items: center;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.skill-message.changing {
    opacity: 0;
}

.badge-separator {
    height: 1px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.3) 20%, 
        rgba(255, 255, 255, 0.3) 80%, 
        transparent);
    margin: 0;
    transform: scaleX(0);
    opacity: 0;
    transition: all 0.5s ease;
}

.badge-separator.show {
    transform: scaleX(1);
    opacity: 1;
}

.certs-section {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.6s ease, opacity 0.6s ease, padding 0.6s ease;
}

.certs-section.show {
    padding: 16px 20px;
    max-height: 200px;
    opacity: 1;
}

.certs-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.certs-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.certs-icon svg {
    width: 24px;
    height: 24px;
}

.certs-label {
    font-size: 10px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.5px;
    font-weight: 600;
}

.certs-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cert-item {
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.4s ease;
}

.cert-item.show {
    opacity: 1;
    transform: translateX(0);
}

.cert-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    text-transform: uppercase;
}

.cert-badge.security {
    background: linear-gradient(135deg, #10b981, #34d399);
    color: white;
}

.cert-badge.leadership {
    background: linear-gradient(135deg, #6366f1, #818cf8);
    color: white;
}

.cert-name {
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
}

.badge-skills-certs.complete {
    box-shadow: 0 8px 32px rgba(255, 107, 53, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  .badge-skills-certs.floating { animation: none !important; }
  .badge-skills-certs.appear { animation: none !important; transform: none !important; opacity: 1 !important; }
  .course-card,
  .carousel-track,
  .logo-scroller-track,
  .slider_track { transition: none !important; }
}

/* ============================================
   CAROUSEL SECTION
   ============================================ */
:root {
    --blue: #0066ff;
    --dark-blue: #0044cc;
    --black: #000000;
    --accent: #ff6019;
    --accent-light: #ff8040;
    --gray: #666666;
    --text-primary: #1a1a1a;
    --text-secondary: #4a4a4a;
    --border-light: #e5e5e5;
    --bg-card: #f8f8f8;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel-section {
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
    position: relative;
}

.carousel-container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 80px;
    align-items: start;
    position: relative;
}

.content-panel {
    color: var(--text-primary);
    position: relative;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.content-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
}

.section-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 16px;
    color: var(--accent);
    flex-shrink: 0;
}

.carousel-section .content-panel h1.main-heading.main-heading {
    font-size: 2.5rem !important;
    line-height: 1.1 !important;
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    height: 110px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.description {
    font-size: 1.125rem;
    line-height: 1.25;
    color: var(--text-secondary);
    font-weight: 400;
    height: 70px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.carousel-track-wrapper {
    position: relative;
    overflow: hidden;
    height: 310px;
    display: flex;
    align-items: center;
    padding: 5px 0;
}

.carousel-float-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 60px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: all 0.3s ease;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.carousel-float-nav[disabled],
.carousel-float-nav[aria-disabled="true"],
.carousel-float-nav.disabled {
  opacity:.35; cursor:not-allowed; pointer-events:none; background:rgba(255,255,255,.8);
}
.carousel-float-nav:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.carousel-float-nav.prev {
    left: 0;
    border-radius: 0 4px 4px 0;
}

.carousel-float-nav.next {
    right: 0;
    border-radius: 4px 0 0 4px;
}

.carousel-float-nav svg {
    width: 20px;
    height: 20px;
    color: var(--text-primary);
    opacity: 0.6;
    transition: all 0.3s ease;
}

.carousel-float-nav:hover {
    background: var(--accent);
}

.carousel-float-nav:hover svg {
    opacity: 1;
    color: var(--white);
    transform: scale(1.1);
}

.carousel-float-nav.prev:hover svg {
    transform: scale(1.1) translateX(-1px);
}

.carousel-float-nav.next:hover svg {
    transform: scale(1.1) translateX(1px);
}

.carousel-float-nav:active svg {
    transform: scale(0.95);
}

.carousel-float-nav.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.carousel-float-nav.disabled:hover {
    background: rgba(255, 255, 255, 0.9);
}

.carousel-float-nav.disabled:hover svg {
    opacity: 0.6;
    color: var(--text-primary);
    transform: scale(1);
}

@media (min-width: 769px) {
    .carousel-float-nav {
        display: flex;
    }
}

.carousel-track {
    display: flex;
    gap: 20px;
    transition: transform 0.4s ease;
    align-items: center;
    height: 300px;
}

.course-card {
    min-width: 300px;
    max-width: 300px;
    height: 300px;
    background: #122b2e;
    border-radius: 8px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    position: relative;
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
    user-select: none;
    -webkit-user-select: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.05);
}

.course-card::before {
    content: '';
    position: absolute;
    right: 20px;
    bottom: 0px;
    width: 80px;
    height: 80px;
    background-image: url('data:image/svg+xml,%3Csvg width="142" height="120" viewBox="0 0 142 120" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cdefs%3E%3ClinearGradient id="fadeGrad" x1="0%25" y1="0%25" x2="100%25" y2="100%25"%3E%3Cstop offset="0%25" style="stop-color:%23ffffff;stop-opacity:0.9" /%3E%3Cstop offset="100%25" style="stop-color:%23ffffff;stop-opacity:0" /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d="M137.072 2.9905C138.859 1.73923 141.314 3.0174 141.314 5.19851V61.9788C141.314 61.98 141.315 61.9816 141.316 61.9817C141.319 61.9817 141.32 61.9842 141.318 61.9856L59.8984 119.018C58.112 120.269 55.6564 118.991 55.6562 116.81V61.4241C55.6563 61.4058 55.6569 61.3876 55.6572 61.3694L55.6533 61.3655V64.4241C55.6329 61.9881 53.6528 60.0198 51.2119 60.0198C51.1369 60.0198 51.0624 60.021 50.9883 60.0247V60.0159H2.69531C1.20681 60.0158 0.000153952 58.8091 0 57.3206V7.07546C0 5.58683 1.20671 4.38027 2.69531 4.38015H52.9404C54.4291 4.38015 55.6357 5.58676 55.6357 7.07546V51.6341H55.6377C55.704 54.0267 57.6636 55.9456 60.0723 55.9456C61.0595 55.9455 61.9709 55.6227 62.708 55.0774V55.0823L137.072 2.9905ZM55.6533 64.7454H55.6445C55.6496 64.6643 55.6526 64.5825 55.6533 64.5003V64.7454ZM141.354 0.00319394C141.356 0.00781664 141.353 0.0136099 141.348 0.0139361C141.341 0.0139361 141.337 0.00541128 141.343 0.00124081C141.346 -0.00104355 141.351 -4.75333e-05 141.354 0.00319394Z" fill="url(%23fadeGrad)"/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 1;
    transition: var(--transition);
    pointer-events: none;
    filter: drop-shadow(0 0 20px rgba(255, 96, 25, 0.1));
    animation: subtle-pulse 4s ease-in-out infinite;
}

.course-card::after {
    content: '';
    position: absolute;
    left: 24px;
    top: 24px;
    width: 20px;
    height: 17px;
    background-image: url('data:image/svg+xml,%3Csvg width="142" height="120" viewBox="0 0 142 120" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M137.072 2.9905C138.859 1.73923 141.314 3.0174 141.314 5.19851V61.9788C141.314 61.98 141.315 61.9816 141.316 61.9817C141.319 61.9817 141.32 61.9842 141.318 61.9856L59.8984 119.018C58.112 120.269 55.6564 118.991 55.6562 116.81V61.4241C55.6563 61.4058 55.6569 61.3876 55.6572 61.3694L55.6533 61.3655V64.4241C55.6329 61.9881 53.6528 60.0198 51.2119 60.0198C51.1369 60.0198 51.0624 60.021 50.9883 60.0247V60.0159H2.69531C1.20681 60.0158 0.000153952 58.8091 0 57.3206V7.07546C0 5.58683 1.20671 4.38027 2.69531 4.38015H52.9404C54.4291 4.38015 55.6357 5.58676 55.6357 7.07546V51.6341H55.6377C55.704 54.0267 57.6636 55.9456 60.0723 55.9456C61.0595 55.9455 61.9709 55.6227 62.708 55.0774V55.0823L137.072 2.9905ZM55.6533 64.7454H55.6445C55.6496 64.6643 55.6526 64.5825 55.6533 64.5003V64.7454ZM141.354 0.00319394C141.356 0.00781664 141.353 0.0136099 141.348 0.0139361C141.341 0.0139361 141.337 0.00541128 141.343 0.00124081C141.346 -0.00104355 141.351 -4.75333e-05 141.354 0.00319394Z" fill="%23ffffff" fill-opacity="0.95"/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0;
    transform: translateX(-5px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.2));
}

.course-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.25), 0 0 40px rgba(255, 96, 25, 0.08);
    border-color: rgba(255, 96, 25, 0.15);
}

.course-card:hover::before {
    opacity: 1;
    transform: rotate(3deg) scale(1.1);
    filter: drop-shadow(0 0 30px rgba(255, 96, 25, 0.25));
    animation: none;
}

.course-card.is-active {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    box-shadow: 0 0 24px rgba(255, 96, 25, 0.3);
    border-color: rgba(255, 96, 25, 0.2);
    background: 
        radial-gradient(circle at 80% 80%, rgba(255, 96, 25, 0.08) 0%, transparent 50%),
        linear-gradient(135deg, #122b2e 0%, #0a1416 100%);
}

.course-card.is-active::before {
    filter: drop-shadow(0 0 35px rgba(255, 96, 25, 0.3)) brightness(1.2);
    transform: scale(1.05);
}

.course-card.is-active::after {
    opacity: 1;
    transform: translateX(0);
}

.vendor-logo {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 60px;
    height: 24px;
    z-index: 2;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.vendor-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1) opacity(0.8);
}

.course-card:hover .vendor-logo img {
    filter: brightness(0) invert(1) opacity(1);
}

.card-category {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--accent);
    margin-bottom: 14px;
    margin-left: 28px;
    position: relative;
    z-index: 1;
}

.card-title {
    font-size: 2.75rem;
    font-weight: 700;
    color: var(--white);
    line-height: 0.9;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

.card-subtitle {
    font-size: 0.875rem;
    color: var(--white);
    opacity: 0.7;
    margin-bottom: auto;
    line-height: 1.3;
    position: relative;
    z-index: 1;
}

.card-details {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    position: relative;
    z-index: 1;
    transition: var(--transition);
}

.card-duration {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 6px;
}

.card-format {
    font-size: 0.6875rem;
    color: #dcdcdc;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.card-cta-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(18, 43, 46, 0.98) 0%, rgba(18, 43, 46, 0.95) 80%, transparent 100%);
    padding: 24px;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
    border-radius: 0 0 8px 8px;
    backdrop-filter: blur(10px);
}

.card-cta-buttons {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.card-cta-btn:focus-visible { outline:2px solid #fff; outline-offset:2px; }

.card-cta-btn {
    flex: 1;
    padding: 10px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: block;
}

.card-cta-btn.primary {
    background: transparent;
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.card-cta-btn.primary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-1px);
}

.card-cta-btn.secondary {
    background: var(--accent);
    color: var(--white);
}

.card-cta-btn.secondary:hover {
    background: var(--accent-light);
    transform: translateY(-1px);
}

@media (hover: hover) and (pointer: fine) {
    .course-card:hover .card-cta-overlay {
        transform: translateY(0);
    }
    
    .course-card:hover .card-details {
        opacity: 0;
        transform: translateY(-10px);
    }
}

.mobile-tap-hint {
    display: none;
}

.carousel-nav {
    display: flex;
    gap: 16px;
    height: 44px;
    flex-shrink: 0;
}

.nav-btn {
    width: 44px;
    height: 44px;
    border: 1.5px solid var(--text-primary);
    background: transparent;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    color: var(--text-primary);
}

.nav-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--white);
}

.nav-btn svg {
    width: 18px;
    height: 18px;
}

.mobile-scroll-indicators {
    display: none;
    justify-content: center;
    gap: 6px;
    margin-top: 0px;
    grid-column: 1 / -1;
}

.scroll-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-light);
    transition: all 0.3s ease;
    cursor: pointer;
}

.scroll-dot.is-active {
    width: 20px;
    border-radius: 3px;
    background: var(--accent);
}

.mobile-nav-count {
    display: none;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent);
    text-align: center;
    margin-top: 12px;
    letter-spacing: 0.05em;
}

.nav-btn:focus-visible,
.course-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ============================================
   SALES FORM SECTION
   ============================================ */
.sales-form-section {
    padding: 80px 0;
    position: relative;
    overflow: hidden;
    background: #f7f7f7;
}

.sales-form-section::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 107, 53, 0.05) 0%, transparent 70%);
    border-radius: 50%;
}

@media (max-width: 768px) {
    .sales-form-section::before {
        display: none;
    }
}

.sales-form-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.sales-form-header {
    text-align: center;
    margin-bottom: 60px;
}

.sales-form-title {
    font-size: 48px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

.sales-form-title .accent {
    color: var(--orange-primary);
}

.sales-form-content {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: center;
}

.sales-form-image {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(135deg, #ffe5db 0%, #ffcdb8 100%);
}

.sales-form-image img {
    width: 100%;
    height: auto;
    display: block;
}

.image-badge {
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 200px;
    height: 100px;
    background: rgb(0 0 0 / 48%);
    border-radius: 0 12px 12px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    color: var(--orange-primary);
}

.sales-form-wrapper {
    background: var(--orange-primary);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(255, 107, 53, 0.2);
}

.sales-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group label {
    font-size: 15px;
    font-weight: 500;
    color: var(--white);
    letter-spacing: 0em;
}

.form-group input, 
.form-group select, 
.form-group textarea {
    padding: 12px 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 0;
    color: var(--white);
    font-size: 15px;
    font-family: 'DM Sans', sans-serif;
    transition: all 0.2s;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    opacity: 1;
}

.form-group input::-webkit-input-placeholder,
.form-group textarea::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    opacity: 1;
}

.form-group input::-moz-placeholder,
.form-group textarea::-moz-placeholder {
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    opacity: 1;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.25);
    border-color: var(--white);
}

.form-group select {
    cursor: pointer;
}

.form-group select option {
    background: var(--orange-primary);
    color: var(--white);
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.form-disclaimer {
    margin-top: -8px;
}

.form-disclaimer p {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    line-height: 1.5;
}

.form-submit {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 16px 32px;
    background: var(--white);
    color: var(--orange-primary);
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 8px;
    justify-content: center;
}

.form-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    background: var(--orange-primary);
    color: white;
}

.form-submit .btn-notch-sform path {
    fill: #ff6019;
    transition: fill 0.3s ease;
}

.form-submit:hover .btn-notch-sform path {
    fill: white;
}

.btn-notch-sform {
    position: relative;
    top: -4px;
    transition: opacity 0.3s ease;
}

.spinner {
    border: 2px solid #f3f3f3;
    border-top: 2px solid #333;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    display: inline-block;
    animation: spin 0.8s linear infinite;
    margin-left: 5px;
    vertical-align: middle;
}

.form-message .success {
    color: white;
    font-weight: 600;
}

.form-message .error {
    color: red;
    font-weight: 600;
}

/* ============================================
   FEATURED IN SECTION
   ============================================ */
.featured_in {
    position: relative;
    background-color: #20373F;
    padding-bottom: 120px;
}

.featured_image_div {
    display: flex;
    position: relative;
    min-height: 800px;
}

.featured_image_div img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.featured_content_overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(to right, rgba(18, 43, 46, 0.95) 0%, rgba(18, 43, 46, 0.85) 50%, rgba(18, 43, 46, 0.3) 100%);
    padding: 80px 0;
}

.featured_content_container {
    max-width: 1800px;
    margin: 0 auto;
    padding: 80px;
    width: 100%;
}

.featured_content_grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: center;
}

.featured_headline {
    color: white;
}

.featured_headline h2 {
    font-size: clamp(42px, 4.5vw, 64px);
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
    color: white;
    letter-spacing: -0.02em;
}

.featured_headline .accent {
    color: var(--orange-primary);
}

.featured_description {
    color: white;
    display:none;
}

.featured_description p {
    font-size: 18px;
    line-height: 1.7;
    margin: 0;
    opacity: 0.95;
    display:none;
}

.featured_achievements {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.achievement_badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    transition: all 0.3s ease;
}

.achievement_badge:hover {
    background: rgba(255, 107, 53, 0.2);
    border-color: var(--orange-primary);
    transform: translateY(-2px);
}

.achievement_badge svg {
    width: 20px;
    height: 20px;
    fill: var(--orange-primary);
}

.achievement_badge span {
    color: white;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.featured_row {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    padding: 30px 0;
}

.featured_logo_container {
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 80px;
    display: flex;
    align-items: center;
    gap: 60px;
}

.featured_label {
    flex-shrink: 0;
    color: white;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.8;
    position: relative;
    padding-right: 30px;
}

.featured_label::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
}

.featured_logo_slider {
    overflow: hidden;
    white-space: nowrap;
    flex: 1;
}

.slider_track {
    display: flex;
    animation: scroll 30s linear infinite;
    gap: 80px;
}

.featured_colom {
    flex: 0 0 auto;
    padding: 20px;
}

.featured_colom img {
    width: 100%;
    max-width: 80px;
    height: 26px;
    filter: brightness(0) invert(1);
    opacity: 0.8;
}

.progress-control-container {
    width: 100%;
    max-width: 1800px;
    margin: 100px auto 0;
    padding: 0 80px;
    position: relative;
}

.progress-line-wrapper {
    position: relative;
    height: 2px;
    margin-bottom: 60px;
    display: flex;
    gap: 45px;
}

.progress-line-bg {
    position: relative;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    flex: 1;
}

.progress-line-active {
    display: none;
}

.progress-segment {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--orange-primary);
    width: 0;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-segment.filled {
    width: 100%;
}

.progress-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
}

.progress-tab {
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.progress-tab h3 {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 16px 0;
    letter-spacing: -0.02em;
    transition: color 0.3s ease;
}

.progress-tab p {
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.progress-tab.active p {
    color: white;
}

.progress-tab.active {
    color: white;
}

.progress-tab.active h3 {
    color: white;
}

.progress-tab.active p {
    opacity: 1;
}

.progress-tab:hover h3 {
    color: var(--orange-primary);
}

.progress-tab.active:hover h3 {
    color: white;
}

.progress-line-active.animating {
    animation: fillProgress 5s linear;
}

/* ============================================
   FEATURED REVIEWS SECTION
   ============================================ */
.featured_reviews {
    background-color: #20373F;
    padding: 20px;
}

.featured_reviews_main {
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 20px;
}

.featd_revie_title {
    display: flex;
    padding: 82px 0px 70px 0px;
    gap: 65px;
}

.featured_join {
    width: 50%;
    font-size: 16px;
    color: #ffffff8c;
    font-weight: 400;
}

.featured_join_content {
    width: 50%;
}

.featured_join_content h2 {
    font-size: 48px !important;
    font-weight: 500;
    color: white;
    line-height: 51px !important;
}

.slider-wrapper {
    display: flex;
    overflow: hidden;
    position: relative;
    width: 60%;
    padding: 29px 29px 29px 0px;
}

.slides {
    display: flex;
    transition: transform 0.6s ease;
}

.slide {
    flex: 0 0 50%;
    box-sizing: border-box;
    padding: 0px 30px;
    padding-right: 0px !important;
}

.review-box {
    padding: 24px 50px 24px 24px;
    border-radius: 10px;
    min-height: 480px;
    border: 1px solid #FFFFFF1A;
    height: 480px;
    display: flex;
    flex-direction: column;
}

.stars {
    color: #ff6600;
    font-size: 21px;
    margin-bottom: 10px;
}

.review-text {
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 20px;
    font-weight: 400;
    color: white;
}

.reviewer {
    display: flex;
    align-items: center;
    font-size: 14px;
    opacity: 0.9;
    margin-top: auto;
}

.reviewer img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
    background-color: white;
}

.reviewer span {
    font-size: 14px;
    font-weight: 400;
    color: #FFFFFF;
}

.featured_reviews_slider {
    background-color: #0B1B1C;
    border-radius: 11px;
    display: flex;
    justify-content: space-between;
}

.background_layer {
    background-image: url(/wp-content/uploads/2025/09/Ellipse-4.svg);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 28px 20px;
    border-radius: 11px;
    width: 40%;
}

.background_layer .reviews_box_title {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.reviews_box_title h2 {
    color: #FFFFFF;
    font-size: 48px !important;
    font-weight: 400 !important;
    line-height: 54px !important;
    margin-bottom: 35px;
}

.reviews_trust_section {
    flex: 1;
    display: flex;
    align-items: center;
}

.reviews_claint {
    display: flex;
    gap: 13px;
    align-items: center;
}

.reviews_claint p {
    font-size: 14px;
    font-weight: 400;
    color: #FFFFFF;
}

.slider-controls-container {
    margin-top: auto;
    padding-top: 20px;
}

.slider-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.slider-controls button {
    background: none;
    border: 1px solid #fff;
    color: #fff;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    font-size: 18px;
    cursor: pointer;
    transition: 0.3s;
}

.slider-controls button:hover {
    background: #ff6600;
    border-color: #ff6600;
}

.slide-counter {
    font-size: 17px;
    opacity: 0.7;
    color: white;
}

.slider_prev_nex {
    display: flex;
    gap: 13px;
}

/* ============================================
   WHAT'S NEW SECTION
   ============================================ */
.whats-new-section {
    padding: 80px 20px;
    background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Tablet - 769px to 1024px */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .whats-new-section {
    padding: 25px 20px;
  }
}

/* Mobile - 768px and below */
@media screen and (max-width: 768px) {
  .whats-new-section {
    padding: 20px 20px;
  }
}
.section-container {
    max-width: 1400px;
    margin: 0 auto;
}

.section-header {
    text-align: center;
    margin-bottom: 50px;
}

/* ========================================
   SECTION TITLE - Final Production Version
   For TrainingCamp Homepage
   ======================================== */

.section-title {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 2.5rem;  /* 40px - Better for mobile */
  font-weight: 500;
  color: #122B2E;
  margin-bottom: 1rem;
  letter-spacing: -0.08em;
  line-height: 1.1;
  transition: all 0.3s ease;
}

/* Desktop - 1200px and up */
@media screen and (min-width: 1200px) {
  .section-title {
    font-size: 4rem;  /* 64px - Larger on desktop */
    line-height: 1.08;
    margin-bottom: 1.25rem;
  }
}

/* Desktop Medium - 1024px to 1199px */
@media screen and (min-width: 1024px) and (max-width: 1199px) {
  .section-title {
    font-size: 3.25rem;  /* 44px */
    line-height: 1.1;
    margin-bottom: 1rem;
  }
}

/* Tablet - 768px to 1023px */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .section-title {
    font-size: 3rem;  /* 36px */
    line-height: 1.08;
    margin-bottom: 0.875rem;
  }
}

/* Mobile Large - 481px to 767px */
@media screen and (min-width: 481px) and (max-width: 767px) {
  .section-title {
    font-size: 2.75rem;  /* 30px */
    line-height: 1.15;
    margin-bottom: 0.75rem;
  }
}

/* Mobile Small - 480px and below */
@media screen and (max-width: 480px) {
  .section-title {
    font-size: 2.64rem;  /* 26px */
    line-height: 1.2;
    margin-bottom: 0.66rem;
  }
}

/* ========================================
   CONTEXTUAL VARIANTS
   Based on TrainingCamp sections
   ======================================== */

/* Hero Section Title (Largest) */
.hero-title {
  font-family: 'DM Sans', sans-serif;
  font-weight: 900;
  color: #1a1a1a;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

@media screen and (min-width: 1200px) {
  .hero-title {
    font-size: 3.75rem;  /* 60px */
    margin-bottom: 1.5rem;
  }
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
  .hero-title {
    font-size: 3rem;  /* 48px */
    margin-bottom: 1.25rem;
  }
}

@media screen and (max-width: 767px) {
  .hero-title {
    font-size: 2.25rem;  /* 36px */
    margin-bottom: 1rem;
    letter-spacing: -0.025em;
  }
}

/* Stats/Numbers Section */
.section-title--stats {
  text-align: center;
  margin-bottom: 2rem;
}

/* Features/Benefits Sections */
.section-title--features {
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5rem;
}

/* Courses/Programs Grid Section */
.section-title--courses {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}

/* Dark Background Variant */
.section-title--dark-bg {
  color: #ffffff;
}

/* With Subtitle Support */
.section-title-group {
  margin-bottom: 2rem;
}

.section-title-group .section-title {
  margin-bottom: 0.5rem;
}

/* Add a parent class or be more specific */
.section .section-subtitle,
.section-subtitle {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  color: #366269;
  line-height: 1.5;
  letter-spacing: -0.02em;
  transition: all 0.3s ease;
  padding-bottom:25px;
}

/* Desktop - 1200px and up */
@media screen and (min-width: 1200px) {
  .section .section-subtitle,
  .section-subtitle {
    font-size: 1rem;
    line-height: 1.65;
  }
}

/* Desktop Medium - 1024px to 1199px */
@media screen and (min-width: 1024px) and (max-width: 1199px) {
  .section .section-subtitle,
  .section-subtitle {
    font-size: 0.9375rem;
    line-height: 1.6;
  }
}

/* Tablet - 768px to 1023px */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .section .section-subtitle,
  .section-subtitle {
    font-size: 0.75rem;
    line-height: 1.6;
  }
}

/* Mobile Large - 481px to 767px */
@media screen and (min-width: 481px) and (max-width: 767px) {
  .section .section-subtitle,
  .section-subtitle {
    font-size: 0.7rem;
    line-height: 1.55;
  }
}

/* Mobile Small - 480px and below */
@media screen and (max-width: 480px) {
  .section .section-subtitle,
  .section-subtitle {
    font-size: 0.68rem;
    line-height: 1.5;
  }
}

/* Orange Accent Word (for emphasis) */
.section-title .accent {
  color: var(--orange-primary, #ff6019);
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* Prevent layout shift */
.section-title {
  min-height: 1em;
  display: block;
}

/* Optional: Smooth entrance animation */
.section-title[data-animate="true"] {
  animation: titleFadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
}

@keyframes titleFadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
  from {
    opacity: 0;
    transform: translateY(20px);
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .section-title[data-animate="true"] {
    animation: none;
    opacity: 1;
  }
}

.view-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 32px;
    background-color: #ebeff0;
    color: #ff6019;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    /* box-shadow: 0 2px 4px rgba(231, 76, 60, 0.2); */
}
.view-all-btn:hover {
    background-color: #ff6019;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(231, 76, 60, 0.3);
    color: white;
    gap: 12px;
}
.view-all-btn::after {
    content: '';
    width: 7px;
    height: 6px;
    background-image: url("data:image/svg+xml,%3Csvg width='7' height='6' viewBox='0 0 7 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.39711 0.25L6.89711 5.44615L0.147114 1.54904L5.39711 0.25Z' fill='%23ff6019'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: background-image 0.3s ease;
}
.view-all-btn:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg width='7' height='6' viewBox='0 0 7 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.39711 0.25L6.89711 5.44615L0.147114 1.54904L5.39711 0.25Z' fill='white'/%3E%3C/svg%3E");
}

.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

.article-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}

.article-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

.article-image {
    width: 100%;
    height: 200px;
    position: relative;
    overflow: hidden;
    background-color: #f3f4f6;
}

.article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.article-card:hover .article-image img {
    transform: scale(1.1);
}

.article-content {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.article-title {
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 12px;
    line-height: 1.4;
    flex-grow: 1;
}

.article-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #6b7280;
    margin-top: auto;
}

.learn-more {
    color: #FF6019;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: gap 0.3s ease;
}

.learn-more:hover {
    gap: 8px;
    color: #366269;
}

.learn-more::after {
    content: '';
    width: 7px;
    height: 6px;
    background-image: url("data:image/svg+xml,%3Csvg width='7' height='6' viewBox='0 0 7 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.39711 0.25L6.89711 5.44615L0.147114 1.54904L5.39711 0.25Z' fill='%23FF6019'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: translateY(-2px);
}

.learn-more:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg width='7' height='6' viewBox='0 0 7 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.39711 0.25L6.89711 5.44615L0.147114 1.54904L5.39711 0.25Z' fill='%23366269'/%3E%3C/svg%3E");
}

/* ============================================
   CONTENT AFTER HERO
   ============================================ */
.content-after-hero {
    margin-top: 0;
    transition: margin-top 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   MOBILE RESPONSIVE STYLES
   ============================================ */

/* Mobile adjustments for all sections are included above in their respective sections */
/* This section contains only cross-cutting mobile styles */

@media (max-width: 768px) {
    :root {
        --container-padding-xl: 20px;
    }
    
    /* Carousel mobile responsive */
    .carousel-section {
        padding: 20px 15px;

    }

    .slider_track {
        gap:10px;
    }

    .featured_in {
        padding-bottom:150px;
    }
    
    .carousel-container {
        grid-template-columns: 1fr;
        gap: 15px;
        align-items: center;
    }
    
    .content-panel {
        text-align: center;
        height: auto;
        display: block;
        justify-content: unset;
    }
    
    /* Mobile carousel specific styles */
    .carousel-track-wrapper {
        overflow-x: auto !important;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        overscroll-behavior-x: contain;
        margin: 0 -5px;
        padding: 5px 5px;
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }
    
    /* Hide scrollbar for Chrome, Safari and Opera */
    .carousel-track-wrapper::-webkit-scrollbar {
        display: none !important;
    }
    
    .carousel-track {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 16px;
        height: auto;
        width: max-content !important;
        padding: 10px 20px;
        will-change: transform;
    }
    
    .course-card {
        flex: 0 0 auto !important;
        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;
        height: 280px !important;
        scroll-snap-align: start !important;  /* Changed from center for better alignment */
        scroll-snap-stop: always !important;  /* Added to ensure proper snapping */
        display: flex !important;
        flex-direction: column !important;
    }
    
    .course-card:hover {
        will-change: transform, box-shadow;
    }
    
    /* Mobile CTA overlay behavior - tap to show */
    .course-card.show-cta .card-cta-overlay {
        transform: translateY(0);
    }
    
    .course-card.show-cta .card-details {
        opacity: 0;
        transform: translateY(-10px);
    }
    
    /* Mobile navigation elements */
    .mobile-scroll-indicators {
        display: flex;
    }
    
    .mobile-nav-count {
        display: block;
    }
    
    /* Ensure nav buttons are tappable on mobile */
    .carousel-nav .nav-btn {
        min-width: 44px;
        min-height: 44px;
        touch-action: manipulation;
    }
    
    /* Better touch targets for dots */
    .scroll-dot {
        min-width: 10px;
        min-height: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        cursor: pointer;
    }
    
    .scroll-dot::after {
        content: '';
        position: absolute;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.3);
    }
    
    .scroll-dot.is-active::after {
        background: var(--accent);
        width: 20px;
        border-radius: 4px;
    }
    
    /* Hide floating nav arrows on mobile */
    .carousel-float-nav {
        display: none !important;
    }
    
    /* Logo scroller mobile */
    .logo-scroller-text {
        flex: 0 0 120px;
        padding-right: 20px;
    }

    .logo-scroller-section {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        height: auto !important;
        position: relative !important;
        transform: none !important;
        z-index: 1;
        pointer-events: auto;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        padding: 10px 0;
        margin-bottom: 0px;
    }
    
    /* Hero mobile adjustments */
    .hero-wrapper,
    .hero-wrapper.scrolled {
        padding-top: 0;
    }
    
    .gradient-bg {
        display: none;
    }
    
    .hero-inner {
        min-height: 75vh;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 0 20px 120px 20px;
    }
    
    .pattern-bg,
    .person-image,
    .badge-skills-certs,
    .auditorium {
        display: none;
    }
    
    .hero-text-form {
        max-width: 100%;
        text-align: left;
        width: 100%;
        padding: 450px 0 0 0;
    }
    
    .trust-indicators {
        margin-top:20px;
    }

    .cta-button {
        width: 100%;
        padding: 18px 24px;
        font-size: 16px;
        justify-content: center;
        border-radius: 12px;
        margin-bottom: 30px;
        max-width: 90%;
    }
    
    /* Sales form mobile */
    .sales-form-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    /* Featured section mobile */
    .featured_content_grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .progress-line-wrapper {
        display: none;
    }
    
    .progress-tabs {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    /* Reviews mobile */
    .featd_revie_title {
        display: block;
        padding: 40px 0;
    }
    
    .featured_join,
    .featured_join_content {
        width: 100%;
    }
    
    .background_layer {
        width: 100% !important;
    }
    
    .slider-wrapper {
        width: 100%;
    }
    
    .slide {
        flex: 0 0 100%;
    }
    
    .content-after-hero {
        margin-top: 0;
        padding-top: 80px;
    }
}

@media (max-width: 480px) {
    .course-card {
        width: calc(100vw - 40px) !important;
        min-width: calc(100vw - 40px) !important;
        max-width: calc(100vw - 40px) !important;
    }
}

@media (min-width: 1200px) and (max-width: 1534px) {
    .carousel-container {
        grid-template-columns: 350px 1fr;
        gap: 60px;
    }
    
    .carousel-section .content-panel h1.main-heading.main-heading {
        font-size: 2.25rem !important;
    }
}

@media (min-width: 1024px) and (max-width: 1199px) {
    .content-panel {
        text-align: center;
        height: auto;
        display: block;
    }
    
    .carousel-nav {
        justify-content: center;
        margin-top: 32px;
    }
}

@media (max-width: 480px) {
    .logo-scroller-text {
        flex: 0 0 100px;
        padding-right: 15px;
    }
    
    .logo-scroller-section {
        padding: 10px 0;
    }
}

/* === Sales form: switch outer layout to Flex; keep inner rows as Grid === */
.sales-form-section .sales-form-content{
  display: flex;                  /* was grid */
  align-items: stretch;           /* match heights */
  gap: clamp(24px, 4vw, 60px);    /* replaces fixed 60px */
  /* Keep your container max-width rules as-is (.sales-form-container) */
  /* If a master CSS fights this, add !important to display/gap */
}

.sales-form-section .sales-form-image{
  flex: 1 1 42%;
  position: relative;             /* you already have this */
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(135deg, #ffe5db 0%, #ffcdb8 100%);
  min-width: 280px;               /* guard against collapsing on smaller laptops */
}

.sales-form-section .sales-form-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;              /* ensures visual parity with equal-height columns */
  display: block;
}

.sales-form-section .image-badge{
  display:none;
}

/* Keep your orange panel & form styles; just make wrapper flex-friendly */
.sales-form-section .sales-form-wrapper{
  flex: 1 1 58%;
  background: var(--orange-primary);
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(255, 107, 53, 0.2);
  min-width: 320px;
  display: flex;                  /* so the form can stretch */
}

.sales-form-section .sales-form{
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

/* Your .form-row grid stays exactly as-is; keeping it here for clarity */
.sales-form-section .form-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.sales-form-section .form-group.full-width{ grid-column: 1 / -1; }

/* --- Responsive: stack columns on mobile/tablet --- */
@media (max-width: 900px){
  .sales-form-section .sales-form-content{
    flex-direction: column;   /* was grid-template-columns: 1fr */
    gap: 30px;
  }
  .sales-form-section .sales-form-image,
  .sales-form-section .sales-form-wrapper{
    flex-basis: auto;
    min-width: 0;             /* allow shrink */
  }
}

/* Optional: small screens—make the hero image height consistent */
@media (max-width: 768px){
/* container height can be anything you like */

.sales-form-section .sales-form-image{
  height: 550px; /* or clamp(240px, 32vh, 420px) */
  position: relative;
  overflow: hidden;
}

/* make sure the top (head) stays visible */
.sales-form-section .sales-form-image img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 0;   /* center horizontally, TOP vertically */
  /* shorthand: object-position: center top; */
}
  .sales-form-section .form-row{
    grid-template-columns: 1fr;  /* you already set this elsewhere; keep for safety */
    gap: 15px;
  }
}

a.sf-disclaimer-link {
    color: #FFFFFF;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
    font-weight: 500;
}

a.sf-disclaimer-link:hover {
    color: #366269;
}

/* ================================
   INTL PHONE SUPPORT — FULL BLOCK
   Bottom-border style, visible dropdown, placeholders & hover rules
   ================================ */

:root {
  --sf-placeholder: rgba(255, 255, 255, 0.6);     /* 60% white */
  --sf-border-default: rgba(255, 255, 255, 0.6);  /* 1px semi-transparent white */
  --sf-text: #1a2332;
}

/* Let dropdown escape clipping */
.sales-form-section,
.sales-form-section .sales-form-container,
.sales-form-section .sales-form-content,
.sales-form-section .sales-form-wrapper {
  overflow: visible;
}

/* ============ Phone container (code + input) ============ */
.sales-form-section .phone-input-container {
  position: relative;
  display: flex;
  align-items: stretch;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--sf-border-default); /* 1px semi-transparent */
  border-radius: 0;
  transition: border-color .25s ease;
  z-index: 1;
}

/* Hover/focus: keep 1px, turn fully white */
.sales-form-section .phone-input-container:hover {
  border-bottom-color: #fff;
  box-shadow: none;
}
.sales-form-section .phone-input-container.focused {
  border-bottom-color: #fff;
  box-shadow: none;
}

/* Country selector (inline, transparent) */
.sales-form-section .country-code-selector {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 10px 12px 0;
  cursor: pointer;
  user-select: none;
  background: transparent;
  border: none;
  border-right: 0;
  transition: color .2s ease;
  z-index: 2;
}

/* Selected country text: white @ 60% */
.sales-form-section .selected-country {
  color: var(--sf-placeholder) !important;
}

/* Dropdown arrow: pure white */
.sales-form-section .dropdown-arrow {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #fff; /* <- requested white */
  margin-left: 2px;
  transition: transform .2s ease;
}
.sales-form-section .country-code-selector.open .dropdown-arrow { transform: rotate(180deg); }

/* ============ Country dropdown (kept white) ============ */
.sales-form-section .country-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 250px;
  max-height: 350px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.12);
  overflow: auto;
  z-index: 99999;
  display: none;
  flex-direction: column;
}
.sales-form-section .country-dropdown.open { display: flex; }

.sales-form-section .country-search {
  flex-shrink: 0;
  background: #fff;
  padding: 10px;
  border-bottom: 1px solid #f0f0f0;
}
.sales-form-section .country-search input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: all .2s ease;
  font-family: "DM Sans", sans-serif;
  background: #fff;
  color: #1a2332;
}
/* Country-search placeholder: black */
.sales-form-section .country-search input::placeholder { color: #000; opacity: 1; }
.sales-form-section .country-search input::-webkit-input-placeholder { color: #000; }
.sales-form-section .country-search input::-moz-placeholder { color: #000; }
.sales-form-section .country-search input:-ms-input-placeholder { color: #000; }
.sales-form-section .country-search input::-ms-input-placeholder { color: #000; }

.sales-form-section .country-list {
  list-style: none;
  overflow-y: auto;
  flex: 1;
  margin: 0;
  padding: 0;
  background: #fff;
}
.sales-form-section .country-option {
  padding: 12px 16px;
  cursor: pointer;
  font-size: 14px;
  color: #1a2332;
  transition: background .15s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
}
.sales-form-section .country-option:hover { background: #fff5f0; }
.sales-form-section .country-option.selected { background: var(--orange-primary); color: #fff; }
.sales-form-section .country-option.selected .country-code { color: rgba(255,255,255,0.9); }
.sales-form-section .country-option .country-name { flex: 1; font-weight: 500; }
.sales-form-section .country-option .country-code { color: #666; font-size: 13px; font-weight: 500; }

.sales-form-section .country-group-header {
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 700;
  color: #999;
  text-transform: uppercase;
  letter-spacing: .8px;
  background: #f7f7f7;
  position: sticky;
  top: 0;
  border-bottom: 1px solid #e0e0e0;
}

/* ============ Phone text input (transparent) ============ */
.sales-form-section .phone-number-input {
  flex: 1;
  padding: 12px 0 12px 10px;
  border: none;
  outline: none;
  font-size: 15px;
  color: var(--sf-text);
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  background: transparent;
}
/* Phone placeholder: white @ 60% */
.sales-form-section .phone-number-input::placeholder { color: var(--sf-placeholder); opacity: 1; }
.sales-form-section .phone-number-input::-webkit-input-placeholder { color: var(--sf-placeholder); }
.sales-form-section .phone-number-input::-moz-placeholder { color: var(--sf-placeholder); }
.sales-form-section .phone-number-input:-ms-input-placeholder { color: var(--sf-placeholder); }
.sales-form-section .phone-number-input::-ms-input-placeholder { color: var(--sf-placeholder); }

/* ============ Make OTHER inputs match the phone rules ============ */
.sales-form-section .sales-form input[type="text"]:not(#phone), 
.sales-form-section .sales-form input[type="email"], 
.sales-form-section .sales-form input[type="tel"]:not(#phone), 
.sales-form-section .sales-form select, 
.sales-form-section .sales-form textarea
{
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--sf-border-default);
  border-radius: 0;
}

/* Hover/focus: keep 1px, change to full white */
.sales-form-section .sales-form input[type="text"]:hover,
.sales-form-section .sales-form input[type="email"]:hover,
.sales-form-section .sales-form input[type="tel"]:not(#phone):hover,
.sales-form-section .sales-form select:hover,
.sales-form-section .sales-form textarea:hover {
  border-bottom-color: #fff;
}
.sales-form-section .sales-form input[type="text"]:focus,
.sales-form-section .sales-form input[type="email"]:focus,
.sales-form-section .sales-form input[type="tel"]:not(#phone):focus,
.sales-form-section .sales-form select:focus,
.sales-form-section .sales-form textarea:focus {
  border-bottom-color: #fff;
  outline: none;
}

/* “Please select” placeholder look for <select> */
.sales-form-section .sales-form select:required:invalid { color: var(--sf-placeholder); }
.sales-form-section .sales-form select option[value=""] { color: var(--sf-placeholder); }
.sales-form-section .sales-form select option:not([value=""]) { color: #ffffff91; }

/* Optional: wrapper hover/focus also lights child bottom border */
.sales-form-section .form-group:hover > input,
.sales-form-section .form-group:hover > select,
.sales-form-section .form-group:hover > textarea,
.sales-form-section .form-group:focus-within > input,
.sales-form-section .form-group:focus-within > select,
.sales-form-section .form-group:focus-within > textarea {
  border-bottom-color: #fff;
}

/* ============ Autofill resets (keep transparent bg) ============ */
/* WebKit/Blink (Chrome/Edge/Safari) */
.sales-form-section .sales-form input:not(#countrySearch):-webkit-autofill,
.sales-form-section .sales-form textarea:-webkit-autofill,
.sales-form-section .sales-form select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color: var(--sf-text) !important;
  transition: background-color 9999s ease-out, color 9999s ease-out;
  background-clip: padding-box;
}

#countrySearch::placeholder {
  color: rgba(0, 0, 0, 0.5); /* black at 50% */
  opacity: 1; /* Prevent browsers from applying additional opacity */
}

.sales-form-section .sales-form input:not(#countrySearch):-webkit-autofill::first-line {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--sf-text);
}

/* Firefox (Gecko) */
.sales-form-section .sales-form input:not(#countrySearch):-moz-autofill,
.sales-form-section .sales-form textarea:-moz-autofill,
.sales-form-section .sales-form select:-moz-autofill {
  box-shadow: 0 0 0 1000px transparent inset !important;
  -moz-appearance: none !important;
  background-color: transparent !important;
  color: var(--sf-text) !important;
}

/* Responsive */
@media (max-width: 768px) {
  .sales-form-section .country-dropdown { width: 200px; max-height: 300px; }
  .sales-form-section .phone-number-input { font-size: 16px; } /* Prevent iOS zoom */
}

/* Autofill text should be white (and keep our transparent background) */
:root {
  --sf-text-autofill: #fff; /* white text for autofilled inputs */
}

/* WebKit/Blink (Chrome, Edge, Safari) */
.sales-form-section .sales-form input:not(#countrySearch):-webkit-autofill,
.sales-form-section .sales-form textarea:-webkit-autofill,
.sales-form-section .sales-form select:-webkit-autofill {
  /* remove the UA yellow/white paint */
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  box-shadow: 0 0 0 1000px transparent inset !important;

  /* force autofill text color to white */
  -webkit-text-fill-color: var(--sf-text-autofill) !important;
  caret-color: var(--sf-text-autofill);

  /* stop autofill bg fade-in effect */
  transition: background-color 9999s ease-out, color 9999s ease-out;
  background-clip: padding-box;
}

/* Keep first-line consistent when autofilled (WebKit quirk) */
.sales-form-section .sales-form input:not(#countrySearch):-webkit-autofill::first-line {
  color: var(--sf-text-autofill) !important;
}

/* Firefox (Gecko) */
.sales-form-section .sales-form input:not(#countrySearch):-moz-autofill,
.sales-form-section .sales-form textarea:-moz-autofill,
.sales-form-section .sales-form select:-moz-autofill {
  box-shadow: 0 0 0 1000px transparent inset !important;
  -moz-appearance: none !important;
  background-color: transparent !important;
  color: var(--sf-text-autofill) !important;
  caret-color: var(--sf-text-autofill);
}
/* Autocomplete detection for Chrome */
@keyframes onAutoFillStart { from {/**/} to {/**/} }
input:-webkit-autofill { animation-name: onAutoFillStart; }