/* Custom CSS for Orasi Media Landing Page */
@font-face {
  font-family: 'GeneralSans-regular';
  src: url('../fonts/GeneralSans-Regular.woff2') format('woff2'),
       url('../fonts/GeneralSans-Regular.woff') format('woff'),
       url('../fonts/GeneralSans-Regular.ttf') format('truetype');
  font-weight: 200;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'GeneralSans-semibold';
  src: url('../fonts/GeneralSans-Semibold.woff2') format('woff2'),
       url('../fonts/GeneralSans-Semibold.woff') format('woff'),
       url('../fonts/GeneralSans-Semibold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}

/* Global Styles */
:root {
    --primary-color: #FFB900;
    --secondary-color: #FEE685;
    --accent-color: #461901;
    --dark-bg: #000000;
    --dark-surface: #171717;
    --darker-surface: #0A0A0A;
    --text-light: #FFFFFF;
    --text-light-secondary: #E5E5E5;
    --text-light-muted: #A3A3A3;
    --text-light-disabled: #525252;
    --border-dark: #262626;
    --font-regular: 'GeneralSans-Regular', sans-serif;
    --font-semibold: 'GeneralSans-semibold', sans-serif;
}

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

body {
    font-family: var(--font-regular) !important;
    background-color: var(--dark-bg) !important;
    color: var(--text-light);
    line-height: 1.5;
    overflow-x: hidden;
}

/* Navigation Styles */
.custom-nav {
    background-color: var(--dark-bg);
    padding: 24px 64px;
    border-bottom: none;
}

.navbar-brand-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.logo-img {
    height: 50px;
    object-fit: cover;
}

.brand-text {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-light);
    line-height: 24px;
}

.nav-menu-items {
    display: flex;
    gap: 32px;
    align-items: center;
}

.nav-link {
    font-size: 16px;
    line-height: 24px;
    color: var(--text-light-muted) !important;
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav-link.active {
    font-weight: 600;
    color: var(--text-light) !important;
}

.nav-link:hover {
    color: var(--primary-color) !important;
}

/* Hero Section */
.hero-section {
    position: relative;
    padding: 128px 64px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.72;
}

.hero-container {
    display: flex;
    flex-direction: column;
    gap: 256px;
    width: 100%;
    align-items: center;
}

.hero-content {
    display: flex;
    flex-direction: column;
    gap: 64px;
    align-items: center;
    text-align: center;
}

.hero-text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    max-width: 900px;
}

.hero-subtitle {
    font-size: 24px;
    line-height: 24px;
    color: var(--text-light-secondary);
    margin: 0;
}

.hero-title {
    font-size: 64px;
    line-height: 72px;
    font-weight: 600;
    color: var(--text-light);
    margin: 0;
    font-family: var(--font-semibold);
}

.hero-description {
    font-size: 16px;
    line-height: 24px;
    color: var(--text-light-muted);
    max-width: 612px;
    margin: 0;
}

/* Custom Button Styles */
.custom-btn-primary {
    background: var(--primary-color);
    border: none;
    border-radius: 4px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 4px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    color: var(--accent-color);
    transition: all 0.3s ease;
    box-shadow: 
        0px 1px 4px 0px rgba(255, 210, 48, 0.32),
        0px 8px 24px 0px rgba(254, 154, 0, 0.24);
}

.custom-btn-primary:hover {
    background: #E6A600;
    transform: translateY(-2px);
    box-shadow: 
        0px 2px 8px 0px rgba(255, 210, 48, 0.4),
        0px 12px 32px 0px rgba(254, 154, 0, 0.32);
}

.custom-btn-primary .material-icons {
    font-size: 24px;
}

/* Metrics Section */
.metrics-container {
    display: flex;
    gap: 24px;
    width: 100%;
    max-width: 1200px;
}

.metric-card {
    flex: 1;
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 24px 12px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.metric-card h3 {
    font-size: 24px;
    line-height: 24px;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 8px;
}

.metric-card p {
    font-size: 16px;
    line-height: 24px;
    color: var(--text-light);
    margin: 0;
}

/* Solutions Section */
.solutions-section {
    padding: 64px;
    background-color: var(--dark-bg);
}

.solutions-header {
    padding: 256px 0;
    text-align: center;
}

.solutions-title {
    font-size: 48px;
    line-height: 56px;
    font-weight: 600;
    color: var(--text-light);
    font-family: var(--font-semibold);
}

.solution-container {
    padding: 256px 0;
    text-align: center;
    align-items: center;
    justify-content: center;
    display: flex;
}

.solution-step {
    position: relative;
    padding: 196px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 220px;
}

.solution-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1312px;
    height: 1312px;
    z-index: -1;
}

.ring-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.88;
}

.solution-content {
    max-width: 900px;
    text-align: center;
}
.solution-step .solution-content .custom-btn-primary { display: inline-flex; align-items: center; gap: 6px;}

.solution-text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    margin-bottom: 30px;
}

.solution-subtitle {
    font-size: 24px;
    line-height: 24px;
    font-weight: 600;
    color: var(--secondary-color);
    margin: 0;
    font-family: var(--font-semibold);
}

.solution-title {
    font-size: 40px;
    line-height: 48px;
    font-weight: 400;
    color: var(--text-light);
    margin: 0;
}

.solution-description {
    font-size: 16px;
    line-height: 24px;
    color: var(--text-light-muted);
    margin: 0;
}

.solution-icon img {
    width: 64px;
    height: 64px;
    transform: scaleY(-1);
}

/* Stepper Styles */
.stepper-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    opacity: 0.64;
}

.stepper-labels {
    display: flex;
    justify-content: space-between;
    width: 776px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

.stepper-label {
    color: var(--text-light-disabled);
    text-align: center;
}

.stepper-label.active {
    color: var(--primary-color);
}

.stepper-line {
    position: relative;
    width: 776px;
    height: 8px;
}

.stepper-progress {
    position: absolute;
    top: 50%;
    left: 0;
    height: 2px;
    background: var(--primary-color);
    transform: translateY(-50%);
    transition: width 0.3s ease;
}

.stepper-dot {
    position: absolute;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-dark);
    transform: translate(-50%, -50%);
    transition: background-color 0.3s ease;
}

.stepper-dot.active,
.stepper-dot.completed {
    background: var(--primary-color);
}

/* Solution End */
.solution-end {
    padding: 256px 64px 64px;
    display: flex;
    flex-direction: column;
    gap: 96px;
    align-items: center;
    text-align: center;
}

.ring-end-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.ring-end {
    width: 754px;
    height: 754px;
    object-fit: cover;
    transform: rotate(180deg) scaleY(-1);
}

/* Service Cards Section */
.cards-section {
    padding: 256px 64px 196px;
    background-color: var(--dark-bg);
}

.service-card {
    background: var(--dark-surface);
    border-radius: 8px;
    padding: 12px;
    border: none;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.service-card.featured {
    background: #262626;
}

.card-image {
    height: 310px;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
}

.service-card:not(.featured) .card-image img {
    mix-blend-mode: luminosity;
}

.card-content {
    padding: 0px;
    display: flex;
    flex-direction: column;
    gap: 48px;
    flex-grow: 1;
}

.card-content h5 {
    font-size: 20px;
    line-height: 24px;
    font-weight: 600;
    color: var(--text-light);
    margin: 0;
}

.card-content p {
    font-size: 16px;
    line-height: 24px;
    color: var(--text-light-muted);
    margin: 0;
    flex-grow: 1;
}

.card-btn {
    width: 100%;
    padding: 12px;
    border-radius: 4px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    transition: all 0.3s ease;
}

.featured-btn {
    background: var(--primary-color);
    color: var(--accent-color);
}

.card-btn:not(.featured-btn) {
    background: #E5E5E5;
    color: #262626;
}

.card-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.card-btn .material-icons {
    font-size: 24px;
}
/* Production Hub Page Styles */
.production-hero-section {
  position: relative;
  overflow: hidden;
  color: #fff;
  text-align: center;
  padding: 120px 20px 160px !important;
}

.production-hero-bg { overflow: hidden; position: absolute; left: 50%; transform: translateX(-50%) rotate(180deg); width: 100%; max-width: 1600px; z-index: 0; top: 322px; bottom: 0; }
.production-bg-img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: auto;
  opacity: 0.7;
  object-fit: cover;
  pointer-events: none;
}
.production-hero-container { }
.production-hero-container {
  position: relative;
  z-index: 2;
  max-width: 960px;
  margin: 0 auto;
}

.production-hero-text-wrapper {
  margin-bottom: 40px;
}

.production-hero-subtitle {
  font-size: 20px;
  color: #cfcfcf;
  margin-bottom: 16px;
}

.production-hero-title {
  font-size: 65px;
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 24px;
}

.production-hero-description {
  font-size: 13px;
  line-height: 1.6;
  color: #d1d1d1;
  max-width: 520px;
  margin: 0 auto;
  font-weight: normal;
}

/* Challenge & Solution Section */
.challenge-solution-section {
    background-color: var(--dark-bg);
}

.challenge-solution-container {
    padding: 128px 64px;
}
.challenge-solution-section .challenge-solution-container .challenge-solution-card .card-header-icon span { color: #FFB900;}

.challenge-solution-card {
    background: #0A0A0A;
    border: 1px solid #262626;
    border-radius: 8px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: 100%;
}

.card-header-icon {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.card-header-icon .material-icons {
    font-size: 24px;
    color: var(--primary-color);
    margin-top: 2px;
}

.card-header-icon h3 {
    font-size: 20px;
    line-height: 24px;
    font-weight: 600;
    color: var(--text-light);
    margin: 0;
    white-space: nowrap;
}

.challenge-solution-card p {
    font-size: 16px;
    line-height: 24px;
    color: var(--text-light-muted);
    margin: 0;
}

/* Features Section */
.production-features-section {
    background-color: var(--dark-bg);
}

.production-features-container {
    padding: 0px 110px;
    display: flex;
    flex-direction: column;
    gap: 128px;
}

.features-header {
    text-align: center;
}

.features-header h2 {
    font-size: 40px;
    line-height: 48px;
    font-weight: 600;
    color: var(--text-light);
    margin: 0;
    white-space: nowrap;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.production-feature-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.feature-image {
    aspect-ratio: 1;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #262626;
}

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

.feature-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.feature-content h4 {
    font-size: 20px;
    line-height: 24px;
    font-weight: 600;
    color: var(--text-light);
    margin: 0;
}

.feature-content p {
    font-size: 16px;
    line-height: 24px;
    color: var(--text-light-muted);
    margin: 0;
}

/* Target Audience Section */
.target-audience-section {
    background-color: var(--dark-bg);
}

.target-audience-container {
    padding: 128px 64px;
    display: flex;
    justify-content: center;
}

.target-audience-card {
    background: #0F0F0F;
    border: 1px solid #404040;
    border-radius: 4px;
    padding: 24px;
    width: 100%;
    max-width: none;
}

.target-section,
.metrics-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0 24px;
}

.target-section h3,
.metrics-section h3 {
    font-size: 20px;
    line-height: 24px;
    font-weight: 600;
    color: var(--text-light);
    margin: 0;
}

.target-list,
.metrics-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.target-item,
.metric-item {
    display: flex;
    gap: 8px;
    align-items: center;
}

.target-item .material-icons {
    font-size: 24px;
    color: var(--primary-color);
    flex-shrink: 0;
}

.metric-item .material-icons {
    font-size: 24px;
    color: var(--primary-color);
    flex-shrink: 0;
}

.target-item p,
.metric-item p {
    font-size: 16px;
    line-height: 24px;
    color: var(--text-light-muted);
    margin: 0;
    flex: 1;
}

/* Production CTA Section */
/* === Base Section === */
.production-cta-section {
  position: relative;
  overflow: hidden;
  border-radius: 16px;color: #fff;
}

.production-cta-bg {
  position: absolute;
  inset: 0;
  background: url("../images/get-started.png")
    center/cover no-repeat;
  transform: rotate(0deg);
  opacity: 0.85;
  z-index: 0;
}

/* === Content Wrapper === */
.production-cta-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 160px 20px;
  text-align: center;
}

.production-cta-content {
  max-width: 960px;
  margin: 0 auto;
}

/* === Text === */
.cta-subtitle {
  font-size: 20px;
  font-weight: 600;
  color: #f4c542;
  margin-bottom: 16px;
}

.cta-title {
  font-size: 52px;
  line-height: 1.2;
  font-weight: 400;
  color: #fff;
  margin-bottom: 40px;
}

/* === Responsive === */
@media (max-width: 992px) {
  .production-cta-container {
    padding: 120px 40px;
  }
  .cta-title {
    font-size: 40px;
  }
}

@media (max-width: 768px) {
  .production-cta-container {
    padding: 100px 24px;
  }
  .cta-title {
    font-size: 32px;
  }
  .cta-subtitle {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .cta-title {
    font-size: 26px;
  }
  .cta-subtitle {
    font-size: 16px;
  }
  .custom-btn-primary {
    font-size: 16px;
    padding: 12px 24px;
  }
}

/* === Button === */
.custom-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(90deg, #fcb900, #ff9900);
  border: none;
  border-radius: 8px;
  padding: 14px 28px;
  color: #000;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0px 4px 20px rgba(255, 181, 0, 0.4);
}

.custom-btn-primary:hover {
  background: linear-gradient(90deg, #ffd600, #ffa700);
  transform: translateY(-2px);
  box-shadow: 0px 6px 30px rgba(255, 181, 0, 0.5);
}

.custom-btn-primary .material-icons {
  font-size: 22px;
}


/* FAQ Section */
.faq-section {
    background-color: var(--dark-bg);
    padding: 64px;
    overflow: hidden;
}

.faq-container {
    display: flex;
    flex-direction: column;
    gap: 96px;
    align-items: center;
}

.faq-header {
    text-align: center;
}

.faq-header h2 {
    font-size: 32px;
    line-height: 40px;
    font-weight: 600;
    color: var(--text-light);
    margin: 0;
    white-space: nowrap;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 1312px;
}

.faq-item {
    background: #0F0F0F;
    border: 1px solid #404040;
    border-radius: 4px;
    overflow: hidden;
}

.faq-question {
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.faq-question:hover {
    background: rgba(255, 255, 255, 0.02);
}

.faq-question h4 {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--text-light);
    margin: 0;
    flex: 1;
}

.faq-item:not(.expanded) .faq-question h4 {
    color: var(--text-light-muted);
}

.faq-icon {
    font-size: 24px;
    color: var(--text-light);
    transition: transform 0.3s ease;
}

.faq-item:not(.expanded) .faq-icon {
    color: var(--text-light);
}

.faq-answer {
    padding: 0 24px 24px;
}

.faq-answer p {
    font-size: 16px;
    line-height: 24px;
    color: var(--text-light-muted);
    margin: 0;
}


/* Footer Section */
.footer-section {
    background-color: var(--dark-bg);
    padding-top: 64px;
}

.footer-top {
    background: #0A0A0A;
    padding: 64px;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.footer-brand p {
    font-size: 16px;
    line-height: 24px;
    color: var(--text-light);
}

.footer-links h6 {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 12px;
}

.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links a {
    font-size: 16px;
    line-height: 24px;
    color: var(--text-light-muted);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--primary-color);
}

.footer-bottom {
    background: var(--dark-surface);
    padding: 24px 64px;
}

.footer-bottom p {
    font-size: 16px;
    line-height: 24px;
    color: var(--text-light-muted);
    margin: 0;
}

.footer-legal {
    display: flex;
    gap: 64px;
}

.footer-legal a {
    font-size: 16px;
    line-height: 24px;
    color: var(--text-light-muted);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-legal a:hover {
    color: var(--primary-color);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .hero-title {
        font-size: 48px;
        line-height: 56px;
    }
    
    .hero-section,
    .solutions-section,
    .cards-section {
        padding-left: 32px;
        padding-right: 32px;
    }
    
    .custom-nav {
        padding: 24px 32px;
    }
    
    .metrics-container {
        flex-wrap: wrap;
        gap: 16px;
    }
    
    .metric-card {
        min-width: calc(50% - 8px);
    }
    
    .stepper-labels,
    .stepper-line {
        width: 600px;
    }
}

@media (max-width: 768px) {
    .nav-menu-items {
        flex-direction: column;
        gap: 16px;
    }
    
    .hero-title {
        font-size: 36px;
        line-height: 42px;
    }
    
    .hero-subtitle {
        font-size: 20px;
    }
    
    .solution-title {
        font-size: 32px;
        line-height: 38px;
    }
    
    .solutions-title {
        font-size: 36px;
        line-height: 42px;
    }
    
    .metrics-container {
        flex-direction: column;
    }
    
    .metric-card {
        min-width: 100%;
    }
    
    .stepper-labels,
    .stepper-line {
        width: 400px;
        font-size: 12px;
    }
    
    .stepper-labels {
        gap: 8px;
    }
    
    .solution-step {
        gap: 120px;
    }
    
    .ring-end {
        width: 400px;
        height: 400px;
    }
    
    .footer-legal {
        gap: 32px;
        flex-wrap: wrap;
    }
}

@media (max-width: 576px) {
    .hero-section,
    .solutions-section,
    .cards-section {
        padding-left: 16px;
        padding-right: 16px;
    }
    
    .custom-nav {
        padding: 16px;
    }
    
    .hero-title {
        font-size: 28px;
        line-height: 34px;
    }
    
    .solution-title {
        font-size: 24px;
        line-height: 30px;
    }
    
    .solutions-title {
        font-size: 28px;
        line-height: 34px;
    }
    
    .stepper-labels,
    .stepper-line {
        width: 300px;
    }
    
    .footer-top,
    .footer-bottom {
        padding: 32px 16px;
    }
    
    .footer-legal {
        flex-direction: column;
        gap: 16px;
    }
}

/* About Us Page Styles */

/* About Hero Section */
.about-hero-section {
    padding: 120px 20px 160px !important;
    background-color: var(--dark-bg);
    min-height: auto;
}

.about-hero-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-hero-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    text-align: center;
    max-width: 900px;
}

.about-hero-subtitle {
    font-size: 24px;
    line-height: 24px;
    color: var(--text-light-secondary);
    margin: 0;
}

.about-hero-title {
    font-size: 64px;
    line-height: 72px;
    font-weight: 600;
    color: var(--text-light);
    margin: 0;
    font-family: var(--font-semibold);
}

.about-hero-description {
    font-size: 16px;
    line-height: 24px;
    color: var(--text-light-muted);
    margin: 0;
    max-width: 612px;
}

.about-hero-btn {
    margin-top: 32px;
}

/* About Section */
.about-section {
    padding: 96px 64px;
    background-color: var(--dark-bg);
}

.about-content {
    max-width: 100%;
    margin: 0 auto;
}

.about-section-title {
    font-size: 24px;
    line-height: 24px;
    font-weight: 600;
    color: var(--secondary-color);
    margin-bottom: 24px;
}

.about-description {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.about-description p {
    font-size: 28px;
    line-height: 40px;
    color: var(--text-light);
    margin: 0;
}

/* Team Section */
.team-section {
    padding: 96px 64px 96px;
    background-color: var(--dark-bg);
}

.team-container {
    max-width: 1312px;
    margin: 0 auto;
}

.team-title {
    font-size: 24px;
    line-height: 24px;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 48px;
}

.team-member-card {
    background: var(--darker-surface);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    gap: 24px;
    align-items: center;
    border: 1px solid var(--border-dark);
    height: 334px;
}

.team-member-card.featured {
    background: var(--dark-surface);
}

.team-member-image {
    flex: 1;
    height: 310px;
    border-radius: 4px;
    overflow: hidden;
}

.image-placeholder {
    width: 100%;
    height: 100%;
    background: var(--darker-surface);
    border: 1px solid var(--border-dark);
    border-radius: 4px;
}

.team-member-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* height: 100%; */
}

.team-member-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-grow: 1;
}

.team-member-info h5 {
    font-size: 20px;
    line-height: 24px;
    font-weight: 600;
    color: var(--text-light);
    margin: 0;
}

.job-title {
    font-size: 16px;
    line-height: 24px;
    color: var(--text-light-secondary);
    margin: 0;
}

.member-description {
    font-size: 16px;
    line-height: 24px;
    color: var(--text-light-muted);
    margin: 0;
}

.team-member-buttons {
    display: flex;
    gap: 12px;
}

.team-btn-primary {
    background: var(--primary-color);
    border: none;
    border-radius: 4px;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: var(--accent-color);
    transition: all 0.3s ease;
    box-shadow: 
        0px 1px 4px 0px rgba(255, 210, 48, 0.32),
        0px 8px 24px 0px rgba(254, 154, 0, 0.24);
}

.team-btn-secondary {
    background: var(--text-light-secondary);
    border: none;
    border-radius: 4px;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: var(--dark-bg);
    transition: all 0.3s ease;
}

.team-btn-primary:hover,
.team-btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.team-icon {
    width: 20px;
    height: 20px;
}

/* Contact Section */
.contact-section {
    padding: 96px 64px;
    background-color: var(--dark-bg);
}

.contact-header {
    max-width: 100%;
    margin: 80px auto;
}

.contact-title {
    font-size: 24px;
    line-height: 24px;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 16px;
}

.contact-description {
    font-size: 28px;
    line-height: 40px;
    color: var(--text-light);
    margin-bottom: 24px;
}

.contact-email {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.email-text {
    font-size: 20px;
    line-height: 24px;
    font-weight: 600;
    color: var(--text-light);
}

.copy-icon {
    width: 24px;
    height: 24px;
    color: var(--text-light);
}

.contact-form-container {
    max-width: 1312px;
    /* margin: 0 auto; */
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 32px;
    height: 544px;
}

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

.form-group label {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--text-light-muted);
    padding: 0 4px;
}
.access-denied .modal-dialog .modal-content { background-color: transparent; border: 1px solid var(--border-dark);}
.form-control:focus,
.form-control:active,
.form-control:focus-visible {
  border-color: #262626 !important;   /* golden/yellow border on focus */
  background-color: #020202 !important;
  color: #fff !important;
}
.form-control{ border-color: #262626 !important; background-color:#020202 !important;}
.form-control {
    background: #020202 !important;
    border: 1px solid var(--border-dark);
    border-radius: 4px;
    padding: 12px;
    font-size: 16px;
    line-height: 24px;
    color: var(--text-light-disabled);
    transition: border-color 0.3s ease;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    background: #020202;
    color: var(--text-light);
}

.form-control::placeholder {
    color: var(--text-light-disabled);
}

select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23A1A1A1' viewBox='0 0 24 24'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 24px;
    padding-right: 48px;
}

.contact-btn {
    background: var(--text-light-secondary);
    border: none;
    border-radius: 4px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: var(--dark-bg);
    transition: all 0.3s ease;
    align-self: flex-start;
}

.contact-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.map-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 544px;
}

.map-placeholder {
    flex: 1;
    background: var(--dark-surface);
    border: 1px solid var(--border-dark);
    border-radius: 4px;
}

.address-info p {
    font-size: 16px;
    line-height: 24px;
    color: var(--text-light-secondary);
    margin: 0;
}

.address-info p:first-child {
    font-weight: 600;
}

/* Responsive Design for About Us */
@media (max-width: 1200px) {
    .about-hero-title {
        font-size: 48px;
        line-height: 56px;
    }
    
    .about-description p {
        font-size: 28px;
        line-height: 36px;
    }
    
    .about-hero-section,
    .about-section,
    .team-section,
    .contact-section {
        padding-left: 32px;
        padding-right: 32px;
    }
}

@media (max-width: 768px) {
    .about-hero-title {
        font-size: 36px;
        line-height: 42px;
    }
    
    .about-description p {
        font-size: 24px;
        line-height: 32px;
    }
    
    .contact-description {
        font-size: 24px;
        line-height: 32px;
    }
    
    .team-member-card {
        flex-direction: column;
        height: auto;
        text-align: center;
    }
    
    .team-member-image {
        width: 100%;
        height: 200px;
        flex: none;
    }
    
    .team-member-buttons {
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .about-hero-section,
    .about-section,
    .team-section,
    .contact-section {
        padding-left: 16px;
        padding-right: 16px;
    }
    
    .about-hero-title {
        font-size: 28px;
        line-height: 34px;
    }
    
    .about-description p {
        font-size: 20px;
        line-height: 28px;
    }
    
    .contact-description {
        font-size: 20px;
        line-height: 28px;
    }
    
    .team-member-card {
        padding: 8px;
    }
    
    .team-member-buttons {
        flex-direction: column;
        gap: 8px;
    }
    
    .contact-form {
        height: auto;
    }
    
    .map-container {
        height: 300px;
    }
}

/* News/Blog Page Styles */

/* News Hero Section */
.news-hero-section {
    padding: 120px 20px 160px !important;
    background-color: var(--dark-bg);
    min-height: auto;
    padding-top: 96px !important;
}

.news-hero-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.news-hero-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    text-align: center;
    max-width: 900px;

}

.news-hero-subtitle {
    font-size: 24px;
    line-height: 24px;
    color: var(--text-light-secondary);
    margin: 0;
}

.news-hero-title {
    font-size: 64px;
    line-height: 72px;
    font-weight: 600;
    color: var(--text-light);
    margin: 0;
}

.news-hero-description {
    font-size: 16px;
    line-height: 24px;
    color: var(--text-light-muted);
    margin: 0;
    max-width: 612px;
}

/* Posts Section */
.posts-section {
    padding: 30px 64px;
    background-color: var(--dark-bg);
}

.search-container {
    display: flex;
    gap: 24px;
    align-items: center;
    margin-bottom: 49px;
    max-width: 1312px;
    margin-left: auto;
    margin-right: auto;
}

.search-input-group {
    flex: 1;
}

.search-field {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--dark-surface);
    border: 1px solid var(--border-dark);
    border-radius: 4px;
    padding: 12px;
    gap: 8px;
}

.search-icon {
    font-size: 24px;
    color: var(--border-dark);
}

.search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 16px;
    line-height: 24px;
    color: var(--text-light-disabled);
}

.search-input::placeholder {
    color: var(--text-light-disabled);
}

.filter-dropdown {
    position: relative;
}

.filter-btn {
    background: var(--primary-color);
    border: none;
    border-radius: 4px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: var(--accent-color);
    transition: all 0.3s ease;
    box-shadow: 
        0px 1px 4px 0px rgba(255, 210, 48, 0.32),
        0px 8px 24px 0px rgba(254, 154, 0, 0.24);
}

.filter-btn:hover {
    background: #E6A600 !important;
    transform: translateY(-2px) !important;
    box-shadow: 
        0px 2px 8px 0px rgba(255, 210, 48, 0.4),
        0px 12px 32px 0px rgba(254, 154, 0, 0.32) !important;
}
.filter-btn:focus {
    background: #E6A600 !important;
    transform: translateY(-2px) !important;
    box-shadow: 
        0px 2px 8px 0px rgba(255, 210, 48, 0.4),
        0px 12px 32px 0px rgba(254, 154, 0, 0.32) !important;
}
.filter-btn:focus-visible {
    background: #E6A600 !important;
    transform: translateY(-2px) !important;
    box-shadow: 
        0px 2px 8px 0px rgba(255, 210, 48, 0.4),
        0px 12px 32px 0px rgba(254, 154, 0, 0.32) !important;
}

.filter-btn .material-icons {
    font-size: 24px;
}

.dropdown-menu {
    background: var(--dark-surface);
    border: 1px solid var(--border-dark);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dropdown-item {
    color: var(--text-light-muted);
    font-size: 16px;
    line-height: 24px;
    padding: 8px 12px;
    transition: all 0.3s ease;
}

.dropdown-item:hover {
    background: var(--border-dark);
    color: var(--text-light);
}

/* Blog Posts */
.blog-posts-container {
    max-width: 1312px;
    margin: 0 auto;
}

.blog-card {
    background: var(--darker-surface);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: 100%;
    border: 1px solid var(--border-dark);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card.featured {
    background: var(--dark-surface);
}

.blog-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.blog-image {
    height: 310px;
    border-radius: 4px;
    overflow: hidden;
}

.blog-image .image-placeholder {
    width: 100%;
    height: 100%;
    background: var(--darker-surface);
    border: 1px solid var(--border-dark);
    border-radius: 4px;
}

.blog-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.blog-title {
    font-size: 20px;
    line-height: 24px;
    color: var(--text-light-secondary);
    margin: 0;
    height: 48px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card.featured .blog-title {
    color: var(--text-light);
}

.blog-date {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--text-light-disabled);
    margin: 0;
}

/* Responsive Design for News */
@media (max-width: 1200px) {
    .news-hero-title {
        font-size: 48px;
        line-height: 56px;
    }
    
    .news-hero-section,
    .posts-section {
        padding-left: 32px;
        padding-right: 32px;
    }
    
    .search-container {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .news-hero-title {
        font-size: 36px;
        line-height: 42px;
    }
    
    .search-container {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }
    
    .filter-dropdown {
        align-self: flex-start;
    }
    
    .blog-title {
        height: auto;
        -webkit-line-clamp: unset;
    }
}

@media (max-width: 576px) {
    .news-hero-section,
    .posts-section {
        padding-left: 16px;
        padding-right: 16px;
    }
    
    .news-hero-title {
        font-size: 28px;
        line-height: 34px;
    }
    
    .search-container {
        margin-bottom: 64px;
    }
    
    .blog-card {
        margin-bottom: 24px;
    }
}

/* Contact Page Styles */

/* Contact Hero Section */
.contact-hero-section {
    padding: 96px 64px;
    background-color: var(--dark-bg);
    min-height: auto;
}

.contact-hero-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-hero-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
    text-align: center;
    max-width: 900px;
}

.contact-hero-text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.contact-hero-subtitle {
    font-size: 24px;
    line-height: 24px;
    color: var(--text-light-secondary);
    margin: 0;
}

.contact-hero-title {
    font-size: 64px;
    line-height: 72px;
    font-weight: 600;
    color: var(--text-light);
    margin: 0;
}

.contact-hero-description {
    font-size: 16px;
    line-height: 24px;
    color: var(--text-light-muted);
    margin: 0;
    max-width: 612px;
}

/* Contact Main Section */
.contact-main-section {
    padding: 96px 64px;
    background-color: var(--dark-bg);
}

.contact-header-section {
    margin-bottom: 128px;
}

.contact-header-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 1200px;
}

.contact-header-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-section-title {
    font-size: 24px;
    line-height: 24px;
    font-weight: 600;
    color: var(--darker-surface);
    margin: 0;
}

.contact-section-description {
    font-size: 28px;
    line-height: 40px;
    color: var(--text-light);
    margin: 0;
}

.contact-email-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.contact-email-text {
    font-size: 20px;
    line-height: 24px;
    font-weight: 600;
    color: var(--text-light);
}

.copy-icon {
    font-size: 24px;
    color: var(--text-light);
    transition: color 0.3s ease;
}

.copy-icon:hover {
    color: var(--primary-color);
}

/* Contact Content Section */
.contact-content-section {
    max-width: 1312px;
    /* margin: 0 auto; */
}

/* Contact Form */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 32px;
    height: 544px;
}

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

.contact-form-label {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--text-light-muted);
    padding: 0 4px;
    margin: 0;
}

.contact-form-control {
    background: var(--dark-surface);
    border: 1px solid #262626;
    border-radius: 4px;
    padding: 12px;
    font-size: 16px;
    line-height: 24px;
    color: var(--text-light-disabled);
    transition: border-color 0.3s ease, color 0.3s ease;
    outline: none;
}

.contact-form-control:focus {
    border-color: var(--primary-color);
    color: var(--text-light);
}

.contact-form-control::placeholder {
    color: var(--text-light-disabled);
}

.contact-form-select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23A1A1A1' viewBox='0 0 24 24'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 24px;
    padding-right: 48px;
}

.contact-form-textarea {
    resize: vertical;
    min-height: 128px;
    height: 128px;
}

.contact-form-submit-btn {
    background: var(--text-light-secondary);
    border: none;
    border-radius: 4px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: var(--dark-bg);
    transition: all 0.3s ease;
    align-self: flex-start;
    cursor: pointer;
}

.contact-form-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.contact-form-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Map Container */
.contact-map-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    gap: 12px;
    height: 544px;
}

.contact-map-placeholder {
    flex: 1;
    width: 100%;
    background: var(--dark-surface);
    border: 1px solid #262626;
    border-radius: 4px;
    overflow: hidden;
    min-height: 400px;
}

.contact-map-placeholder iframe {
  width: 100%;
  height: 420px;
  border: 0;
}

.contact-address-info {
    margin-top: auto;
}

.contact-address-info p {
    font-size: 16px;
    line-height: 24px;
    color: var(--text-light-secondary);
    margin: 0;
}

.company-name {
    font-weight: 600;
    margin-bottom: 4px !important;
}

.company-address {
    margin-bottom: 0;
}

/* Responsive Design for Contact Page */
@media (max-width: 1200px) {
    .contact-hero-title {
        font-size: 48px;
        line-height: 56px;
    }
    
    .contact-section-description {
        font-size: 28px;
        line-height: 36px;
    }
    
    .contact-hero-section,
    .contact-main-section {
        padding-left: 32px;
        padding-right: 32px;
    }
}

@media (max-width: 768px) {
    .contact-hero-title {
        font-size: 36px;
        line-height: 42px;
    }
    
    .contact-section-description {
        font-size: 24px;
        line-height: 32px;
    }
    
    .contact-content-section .row {
        flex-direction: column;
        gap: 46px;
    }
    
    .contact-form {
        height: auto;
        margin-bottom: 48px;
    }
    
    .contact-map-container {
        height: 300px;
    }
    
    .contact-map-placeholder {
        min-height: 200px;
    }
}

@media (max-width: 576px) {
    .contact-hero-section,
    .contact-main-section {
        padding-left: 16px;
        padding-right: 16px;
    }
    
    .contact-hero-title {
        font-size: 28px;
        line-height: 34px;
    }
    
    .contact-section-description {
        font-size: 20px;
        line-height: 28px;
    }
    
    .contact-header-section {
        margin-bottom: 64px;
    }
    
    .contact-form {
        gap: 24px;
    }
    
    .contact-map-container {
        height: 250px;
    }
}

/* Authentication Pages Styles (Login & Register) */

/* Authentication Background */
.auth-bg-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.auth-bg-orb {
    width: 1440px;
    height: 1440px;
    object-fit: cover;
    opacity: 0.72;
    transform: rotate(180deg);
    filter: hue-rotate(35deg) saturate(1.5);
}

/* Authentication Navigation */
.auth-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 24px 64px;
    background: transparent;
}

.auth-nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
}

.auth-brand:hover {
    color: inherit;
    text-decoration: none;
}

.auth-nav-menu {
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0.8;
}

.auth-nav-text {
    font-size: 16px;
    line-height: 24px;
    color: var(--text-light-muted);
}

.auth-nav-link {
    font-size: 16px;
    line-height: 24px;
    color: var(--text-light-muted);
    text-decoration: underline;
    text-decoration-color: var(--text-light-muted);
    text-underline-position: from-font;
    transition: color 0.3s ease;
}

.auth-nav-link:hover {
    color: var(--primary-color);
    text-decoration-color: var(--primary-color);
}

/* Authentication Form Container */
.auth-form-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.auth-form-wrapper {
    width: 422px;
    max-width: calc(100vw - 32px);
    display: flex;
    flex-direction: column;
    gap: 64px;
    align-items: center;
}

.auth-form-title {
    font-size: 48px;
    line-height: 56px;
    font-weight: 400;
    color: var(--text-light);
    text-align: center;
    margin: 0;
    width: 100%;
}

/* Authentication Form */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
}

.auth-input-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.auth-input-label {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--text-light-muted);
    padding: 0 4px;
    margin: 0;
}

.auth-input {
    background: var(--dark-surface);
    border: 1px solid var(--border-dark);
    border-radius: 4px;
    padding: 12px;
    font-size: 16px;
    line-height: 24px;
    color: var(--text-light);
    transition: border-color 0.3s ease;
    outline: none;
    width: 100%;
}

.auth-input::placeholder {
    color: var(--text-light-disabled);
}

.auth-input:focus {
    border-color: var(--primary-color);
}

/* Authentication Buttons */
.auth-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.auth-btn-primary {
    background: var(--primary-color);
    border: none;
    border-radius: 4px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: var(--accent-color);
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 
        0px 1px 4px 0px rgba(255, 210, 48, 0.32),
        0px 8px 24px 0px rgba(254, 154, 0, 0.24);
}

.auth-btn-primary:hover {
    background: #E6A600;
    transform: translateY(-2px);
    box-shadow: 
        0px 2px 8px 0px rgba(255, 210, 48, 0.4),
        0px 12px 32px 0px rgba(254, 154, 0, 0.32);
}

.auth-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.auth-btn-secondary {
    background: var(--text-light-secondary);
    border: none;
    border-radius: 4px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: var(--dark-bg);
    transition: all 0.3s ease;
    cursor: pointer;
}

.auth-btn-secondary:hover {
    background: #D4D4D8;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.auth-btn-primary .material-icons,
.auth-btn-secondary .material-icons {
    font-size: 24px;
}

/* Forgot Password Link */
.auth-forgot-link {
    font-size: 16px;
    line-height: 24px;
    color: var(--text-light-muted);
    text-decoration: underline;
    text-decoration-color: var(--text-light-muted);
    text-underline-position: from-font;
    text-align: center;
    transition: color 0.3s ease;
    margin-top: 0;
}

.auth-forgot-link:hover {
    color: var(--primary-color);
    text-decoration-color: var(--primary-color);
}

/* Authentication Footer */
.auth-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--dark-surface);
    padding: 24px 64px;
}

.auth-footer-text {
    font-size: 16px;
    line-height: 24px;
    color: var(--text-light-muted);
    margin: 0;
    text-align: center;
}

/* Responsive Design for Authentication Pages */
@media (max-width: 1200px) {
    .auth-bg-orb {
        width: 1200px;
        height: 1200px;
    }
    
    .auth-nav,
    .auth-footer {
        padding-left: 32px;
        padding-right: 32px;
    }
}

@media (max-width: 768px) {
    .auth-form-title {
        font-size: 36px;
        line-height: 42px;
    }
    
    .auth-nav-menu {
        flex-direction: column;
        gap: 4px;
        text-align: right;
    }
    
    .auth-nav-text,
    .auth-nav-link {
        font-size: 14px;
    }
    
    .auth-bg-orb {
        width: 800px;
        height: 800px;
    }
}

@media (max-width: 576px) {
    .auth-nav,
    .auth-footer {
        padding-left: 16px;
        padding-right: 16px;
    }
    
    .auth-form-title {
        font-size: 28px;
        line-height: 34px;
    }
    
    .auth-form-wrapper {
        gap: 48px;
    }
    
    .auth-form {
        gap: 24px;
    }
    
    .auth-bg-orb {
        width: 600px;
        height: 600px;
    }
    
    .auth-nav-menu {
        gap: 2px;
    }
    
    .auth-nav-text,
    .auth-nav-link {
        font-size: 12px;
    }
}

/* NAVBAR CSS */
.navbar { background-color: #0e0e0e !important; padding: 0.8rem 1.5rem;}
.navbar-brand { display: flex; align-items: center; font-weight: 600; color: #fff !important; }
.navbar-brand img { height: 45px; margin-right: 10px; }
.navbar-nav .nav-link { color: #ccc !important; margin: 0 8px; font-size: 16px; }
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active { color: #fff !important;} 
.navbar-toggler { border: none; }
.navbar-toggler:focus { box-shadow: none; }
.main-block .block-body h6 { color: #dbd6d6;}
.search-block .clear-btn span { color: #fff; margin-right: 5px;}

.access-denied .modal-dialog .modal-content .modal-body { background-color: #0a0a0a;}
.access-denied .modal-dialog .modal-content .modal-body .access-denied-icon { color: #FAFAFA;}
.access-denied .modal-dialog .modal-content .modal-body h3 { color: #FAFAFA;}
.access-denied .modal-dialog .modal-content .modal-body p { color: #D4D4D4;}
.access-denied .modal-dialog .modal-content .modal-body .close-btn { background-color: #171717;}
.access-denied .modal-dialog .modal-content .modal-body .close-btn span {  color: #fff;}
.morevideos-dd li .dropdown-item { color: #ffffff;}


/* Base input style */
.form-control,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"] {
  background-color: #111 !important;   /* consistent dark background */
  color: #fff !important;              /* white text */
}

/* On focus */
.form-control:focus,
input:focus {
  background-color: #020202 !important;
  border-color: #262626 !important;
  color: #fff !important;
  outline: none !important;
  box-shadow: none;
}

/* Chrome autofill fix */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: #fff !important;          /* ensure text color stays white */
  box-shadow: none !important;  /* override Chrome's yellow bg */
  transition: background-color 5000s ease-in-out 0s; /* avoid flicker */
}

/* Placeholder color */
::placeholder {
  color: #aaa !important;
  opacity: 1;
}




/* Hero Section */
.hero-section { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 120px 20px 120px; overflow: hidden; text-align: center; }
/* Background Glow */

.hero-bg { width: 100%; height: auto; object-fit: cover; opacity: 0.9; }
/* Text */
.hero-text-wrapper { max-width: 900px; margin: 0 auto 0; }
.hero-subtitle { font-size: 1.2rem; color: #ccc; }
.hero-title { font-size: 60px; line-height: 1.3; color: #fff; }
.hero-description { font-size: 1.05rem; color: #aaa; }
/* CTA Button */
.custom-btn-primary { font-weight: 600; padding: 14px 32px; border-radius: 8px; }
/* Metrics Section */
.metrics-section .metrics-container { padding-bottom: 42px; z-index: -1; }
.metrics-section { margin-top: 245px; position: relative;}
.metrics-section .metrics-container h3 { font-size: 1.8rem; margin-bottom: 0.5rem; color: #F5F5F5; font-weight: 500 !important; }
.metrics-section .metrics-container p { font-size: 0.95rem; margin: 0; color: #F5F5F5; font-weight: normal;}

/* Responsive */
@media (max-width: 992px) {
  .hero-title {
    font-size: 2.5rem;
  }
}

@media (max-width: 768px) {
  .hero-title {
    font-size: 2rem;
  }
  .hero-description {
    font-size: 0.95rem;
  }
  .metrics-container h3 {
    font-size: 1.5rem;
  }
}

@media (max-width: 576px) {
  .hero-section {
    padding: 80px 15px 60px;
  }
  .hero-title {
    font-size: 1.8rem;
  }
  .hero-bg-container {
    width: 900px;
  }
}

.target-audience-section .target-audience-container .target-audience-card .metrics-section { margin-top: 0;}
.production-hero-content .custom-btn-primary {  display: inline-flex; align-items: center; gap: 6px; }
.target-section .target-list span, .metrics-section .metrics-list span { color: var(--primary-color)}

/* Last updated at 03:30 PM 06-10-2025 BY ADI */

/* new styles */

.hero-section{
    padding: 0.8rem 0px 180px;
}
.stepper-line {
    position: relative;
    width: 776px;
    height: 3px;
    background-color: #404040;
}
.metrics-item h3{
    font-family: var(--font-semibold);
}
.solution-step {
    position: relative;
    padding: 100px 0;
}
.metrics-item{
    min-width: 220px;
    height: auto;
}
.stepper-label{
    font-family: var(--font-semibold);
}
.the-chaos-section{
    padding: 256px 0px !important;
}
.solution-end {
    padding: 80px 64px 64px;
}
/* Base state */
.service-card:not(.featured) .card-image img {
    mix-blend-mode: luminosity;
    background: black;
    transition: all 0.3s ease-in-out; /* transition on default state */
    display: block;
}

/* Optional overlay for smooth visual effect */
.service-card:not(.featured) .card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: black;
    opacity: 0.5;
    transition: opacity 0.3s ease-in-out;
}

/* Hover state */
.service-card:hover .card-image img {
    mix-blend-mode: normal;
    /* image will transition because of transition set on base */
}

.service-card:hover .card-image::after {
    opacity: 0; /* fade overlay */
}

.card-content{
    gap: 1.5rem;
}
.service-card:hover .card-btn {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    background-color: var(--primary-color);
    color: #fff;
}
.footer-top .footer-container{
  padding-right: 6rem !important;
}

/* about us page styles starts here */
.about-hero-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    text-align: center;
    max-width: 900px;
}
.team-member-card:hover {
 background-color: #171717;
}
.team-member-card:hover .team-btn-secondary{
 background-color: var(--primary-color);
}
.team-member-image {
  width: 297.2px;
  height: 308.4px;
  border-radius: 8px;
  overflow: hidden;
  background: #f3f3f3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* makes image auto-fit and crop */
  object-position: center;
  display: block;
}

.team-btn-secondary span{
    font-family: var(--font-semibold);
}

.contact-btn{
    font-family: var(--font-semibold);
}
.contact-btn:hover{
    background-color: var(--primary-color);
}
/* about us page styles ends here */

/* Blog page styles starts here */

.news-hero-section, .blog-date{
    font-family: var(--font-regular);
}
.news-hero-title, .news-hero-title{
  font-family: var(--font-semibold);
}
  .search-field {
    padding: 0px !important;
    height: 49.6px !important;
  }
  .search-field .search-icon{
    margin-left: 1rem;
  }
  .search-field .search-input{
    padding-left: 0rem;
  }
  .latest-btn .btn{
        padding: 0.7rem 1rem;
    background-color: var(--primary-color);
    font-family: var(--font-semibold);
  }
  .latest-btn .btn.dropdown-toggle::after{
    margin-left: 1rem;
  }
  .blog-news-section{
    padding-top: 150px;
    padding-bottom: 180px;
  font-family: var(--font-regular);
  }
  .blog-news-section .news-hero-title {
    font-size: 32px;
  }
  .blog-news-section p{
    color: #D4D4D4;
  }
  .blog-news-section .news-hero-subtitle{
    color:#E5E5E5;
  }
  .blog-image {
  width: 100%;
  height: 200px; /* adjust as needed */
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}

.blog-image .image-placeholder {
  width: 100%;
  height: 100%;
  background: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-image .image-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 🔥 ensures thumbnail-style fit */
  object-position: center;
  display: block;
}
.blog-title{
  font-size: 18px;
  font-family: var(--font-regular);
}
  .latest-btn .btn:hover  {
    padding: 0.7rem 1rem;
    background-color: var(--primary-color);
    font-family: var(--font-semibold);
}
.latest-btn .btn-check:checked+.btn, .btn.active, .btn.show, .latest-btn .btn:first-child:active, :not(.btn-check)+.btn:active {
    color: var(--bs-btn-active-color);
    background-color: var(--primary-color);
    border-color: var(--bs-btn-active-border-color);
}
.blog-card:hover{
  background-color: #171717;
  cursor: pointer;
}
.blog-card:hover .blog-title{
  color: var(--primary-color);
}
/* Blog styles ends here */

/* signIn page start here */
.sign-in-bg { background-image: url(https://d9nwtjplhevo0.cloudfront.net/orasi/client/resources/orasiv1/images/0fe1f5feebd6a2885adf6ccfd723592a180ad1e5.png);
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center -137vh;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  min-height: calc(100vh - -9px);
  transform: rotate(180deg);
}

.header-wrapper { display: flex; align-items: center; justify-content: space-between; margin: 30px 50px;  }
.header-wrapper .signup-prompt { color: #FAFAFA !important; margin: 0;}
.header-wrapper .signup-prompt .mx-2 { color: #FAFAFA !important;}
.new-signin-wrapper .signin-wrapper { max-width: 500px; }
.new-signin-wrapper .signin-body .signin-section { width: 100%;}
.new-signin-wrapper .signin-body { background-color: transparent; min-height: calc(100vh - 75px); margin-top: 0px; margin-bottom: 0px;}
.new-signin-wrapper .logo { display: none;}
.new-signin-wrapper .signin-section h1 { text-align: center; font-size: 46px; font-weight: normal; color: #FAFAFA;}
.new-signin-wrapper .signin-footer { flex-direction: column; gap: 10px; align-items: center; margin-top: 20px; margin-top: 2rem !important;}
.new-signin-wrapper .signin-footer .yellow-gradient.fill_btn { width: 100%;}
.new-signin-wrapper .signin-footer .yellow-gradient.fill_btn.lgn-otp-btn { border-radius: 4px; background-color: #FFB900 !important; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 0px; font-size: 16px; }
.new-signin-wrapper .signin-footer .fill_btn:hover { transform: none;}
.new-signin-wrapper .signin-footer .fill_btn.yellow-gradient { border-radius: 4px; background-color: #E5E5E5 !important; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 0px; font-size: 16px; background: #E5E5E5 !important; }
.new-signin-wrapper .plain-btn-sm { color: #FAFAFA; text-align: center; margin-top: 20px; text-decoration: underline; }
.new-signin-wrapper .form-control { background-color: #020202 !important; border: 1px solid #262626 !important; color: #FAFAFA !important; }
.new-signin-wrapper .colorselect { background-color: #020202 !important; border: 1px solid #262626 !important; color: #FAFAFA !important; }
.new-signin-wrapper .field-set { text-align: left;}
.new-signin-wrapper .field-set label { color: #FAFAFA !important; }
.new-signin-wrapper .field-set .form-control { padding: 10px 12px;}

/* signIn page stop here */

/* signUp page start here */
.new-sign-up-wrapper .field-set { text-align: left;}
.new-sign-up-wrapper .field-set .form-control { padding: 10px 12px;}
.new-sign-up-wrapper .field-set label { color: #FAFAFA !important; }
.new-sign-up-wrapper .field-set .colorselect { border-radius: .375rem 0rem 0rem .375rem; border-right: none !important;}
.new-sign-up-wrapper .field-set .d-flex .field { border-radius: 0rem .375rem .375rem 0rem !important; }
.new-sign-up-wrapper .sign-wrapper .sign-body { background-color: transparent; }
.new-sign-up-wrapper .sign-wrapper .sign-header h1 { text-align: center; font-size: 46px; font-weight: normal; color: #FAFAFA;}
.new-sign-up-wrapper .sign-wrapper .sign-header p { color: #FAFAFA;}
.new-sign-up-wrapper .logo { display: none;}
.new-sign-up-wrapper .title { color: #FAFAFA;}
.new-sign-up-wrapper .sign-block { padding-left: 0; padding-right: 0;}
.new-sign-up-wrapper .signup .yellow-gradient.fill_btn { width: 100%;}
.new-sign-up-wrapper .signup .yellow-gradient.fill_btn.lgn-otp-btn { border-radius: 4px; background-color: #FFB900 !important; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 0px; font-size: 16px; }
.new-sign-up-wrapper .signup .fill_btn:hover { transform: none;}
.new-sign-up-wrapper .signup .fill_btn.yellow-gradient { border-radius: 4px; background-color: #E5E5E5 !important; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 0px; font-size: 16px; background: #E5E5E5 !important; }
.new-sign-up-wrapper .form-control { background-color: #020202 !important; border: 1px solid #262626 !important; color: #FAFAFA !important; }
.new-sign-up-wrapper .colorselect { background-color: #020202 !important; border: 1px solid #262626 !important; color: #FAFAFA !important; }
.new-sign-up-wrapper .otp-block { background-color: transparent;}
.new-sign-up-wrapper .otp-block { background-color: #000000 !important; border: 1px solid #262626 !important; color: #FAFAFA !important; }
.new-sign-up-wrapper .otp-block p { color: #FAFAFA;}
/* signUp page stop here */

/* otp section start */
.otp-wrapper .signin-wrapper { max-width: 500px;}
.otp-wrapper .signin-wrapper .logo { display: none;}
.otp-wrapper .signin-body .signin-section { width: 100%;}
.otp-wrapper .signin-body { background-color: transparent;  min-height: calc(100vh - 168px); }
.otp-wrapper .signin-section h1 { color: #FAFAFA;}
.otp-wrapper .signin-section p { color: #FAFAFA;}
.otp-wrapper .yellow-gradient.fill_btn { width: 100%;}
.otp-wrapper .yellow-gradient.fill_btn.lgn-otp-btn { border-radius: 4px; background-color: #FFB900 !important; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 0px; font-size: 16px; }
.otp-wrapper .fill_btn:hover { transform: none;}
.otp-wrapper .fill_btn.yellow-gradient { border-radius: 4px; background-color: #E5E5E5 !important; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 0px; font-size: 16px; background: #E5E5E5 !important; }
.otp-wrapper .form-control { background-color: #020202 !important; border: 1px solid #262626 !important; color: #FAFAFA !important; }
.otp-wrapper .signin-footer { flex-direction: column; align-items: start; gap: 10px; margin-top: 20px;}
.otp-wrapper .signin-body .signin-section .signin-footer .lgn-otp-btn { background-color: #FFB900 !important; }
.otp-wrapper .otp-inputs .signin-otp-input { background-color: #171717 !important; border: 1px solid #262626 !important; color: #FAFAFA !important; }
/* otp ends */

/* message start */
.message-wrapper .pending-wrapper .pending-header .big_logo { display: none;}
.message-wrapper .pending-wrapper h1 { color: #FAFAFA;}
.message-wrapper .pending-wrapper p { color: #FAFAFA;}
.message-wrapper .pending-wrapper .yellow-gradient { width: 100%; border-radius: 4px; background-color: #FFB900 !important; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 0px; font-size: 16px; background: transparent;}
.message-wrapper .pending-wrapper .yellow-gradient:hover { transform: none;}
.message-wrapper .pending-wrapper { min-height: calc(100vh - 109px);}    
/* message stop */
.accept-terms h5 { color: #FAFAFA;}
  .terms-wrapper .terms-body .terms-cls-wrapper { color: #d4d4d4;}
  .terms-wrapper .terms-body { background-color: #000000; border: 1px solid #262626;}
 .terms-wrapper .terms-footer {  background-color: #000000; border-top: 1px solid #262626; }
 .back-btn span { color: #fff;}
 
/*  styles */

    .material-symbols-outlined {
      font-family: 'Material Symbols Outlined';
      font-weight: normal;
      font-style: normal;
      font-size: 28px;
      line-height: 1;
      letter-spacing: normal;
      text-transform: none;
      display: inline-block;
      white-space: nowrap;
      word-wrap: normal;
      direction: ltr;
      -webkit-font-feature-settings: 'liga';
      -webkit-font-smoothing: antialiased;
    }

    .target-section,
    .metrics-section {
      display: flex !important;
      flex-direction: column !important;
      gap: 24px;
      justify-content: center !important;
      padding: 0 24px;
      align-items: center;
    }

    .solution-icon {
      display: flex;
      justify-content: center;
    }

    .solution-step .solution-content .custom-btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 6px !important;
    }
    
.custom-btn-primary#signin-pwd-btn{
  width: 100%;
  margin-top: 0px;
}
.custom-btn-primary#signin-login-otp-btn{
  background: #fff;
  color: #000;
  margin-top: 0px;
  width: 100%;
}


/* Here */
.welcome-body p { letter-spacing: 0.05em;}
.welcome-body p strong { font-weight: 500;}
/* Profile page */
.profile .card-block { box-shadow: none; background-color: #000000; border: 1px solid #262626; }
.profile .page-header { background-color: #000000;}
.profile .body-header { background-color: #000000;}
.profile .body-header .md-container { max-width: none;}
.avatar-block { box-shadow: none;}
.card-block h3 { color: #FAFAFA;}
.terms-block label { color: #FAFAFA !important;}
.avatar-block { background-color: #000000; border: 1px solid #262626;}
.avatar-body h6 { color: #dadada !important;}
.avatar-img-block { box-shadow: none;}

.profile .form-control { padding: 10px 12px; background-color: #020202 !important; border: 1px solid #262626 !important; color: #FAFAFA !important; }
.profile label { color: #A1A1A1 !important; }
.profile .colorselect { background-color: #020202 !important; border: 1px solid #262626 !important; color: #FAFAFA !important; border-radius: .375rem 0rem 0rem .375rem; border-right: none !important; }
.profile .field-set .d-flex .field { border-radius: 0rem .375rem .375rem 0rem !important; }

/* .meta-title { color: #FFB900; } */

.dropdown .dropdown-menu .avatar-card { background-color: #000000; }
.dropdown .dropdown-menu { background-color: #000000; box-shadow: 0 0 10px rgb(233 191 112 / 20%); border: 1px solid #262626; }
.dropdown .dropdown-menu a { color: #FAFAFA;}
.dropdown .dropdown-menu .dropdown-item a:active { background-color: #000000 ; border: none; color: #FAFAFA;}
.dropdown-item:focus, .dropdown-item:hover { background-color: #262626 !important; border: none !important; color: #FAFAFA !important;}
.avatar-card h6 { color: #FAFAFA;}
.avatar-lg { box-shadow: none;}
.badge { background-color: #353535;}
.category-thumb img { width: 100%; overflow: hidden; object-fit: cover;}


.list-view table>thead>tr, .list-view table>tbody>tr { background-color: transparent; color: #FAFAFA; }
.table-thumb img { width: 100%; height: 100%; object-fit: cover;}
.list-view table>tbody>tr:hover { background-color: transparent;}
.asset-list-table .title-name p { color: #FAFAFA;}
.list-view .table>tbody>tr>td { color: #FAFAFA; }
.list-view table>thead>tr>th:last-child { background-color: transparent; color: #FAFAFA; }
.list-view table>tbody>tr>td:last-child { background-color: transparent; color: #FAFAFA; }
.block-body .list-view .table-responsive .asset-list-table tbody .active { background-color: transparent; color: #FAFAFA;}
.table-actions-group .table-actions-btn { border: none; background-color: #171717; }
.pagenation_page .form-select:focus { color: #FAFAFA; background-color: #171717; border: 1px solid #262626;}
.pagenation_page .form-select { color: #FAFAFA; background-color: #171717; border: 1px solid #262626;}
.pagenation_perpage .custom-select:focus { color: #FAFAFA; background-color: #171717; border: 1px solid #262626;}
.pagenation_perpage .custom-select { color: #FAFAFA; background-color: #171717; border: 1px solid #262626;}
.table-bordered>:not(caption)>*  { border: 1px solid #262626; }
.table-bordered>:not(caption)>*>* { border: 1px solid #262626;}


.orders .cart-block .table { background-color: #171717;}
.orders .table>:not(caption)>*>* { color: #FAFAFA !important; border-bottom: 1px solid #262626;}
.orders .cart-block .table td { color: #FAFAFA !important; }
.orders .cart-block .table tbody tr:nth-of-type(even) { background-color: #212121 !important; }
.orders .cart-block .table td:nth-child(5) span { color: #FAFAFA;}
.orders .md-container { max-width: none;}
.orders .page-header { background-color: #000000;}
.orders .body-header { background-color: #000000;}

.view-orders .md-container { max-width: none;}
.view-orders .page-header { background-color: #000000;}
.view-orders .body-header { background-color: #000000;}
.view-orders .card-block .d-flex.justify-content-between p { color: #FAFAFA;}
.view-orders .card-block { background-color: #000000; }
.view-orders .card-block .table { background-color: #171717; border: 0.5px solid #262626; }
.view-orders .card-block .table th { color: #FAFAFA}
.view-orders .card-block .table td { color: #FAFAFA}
.view-orders .card-block .table tbody tr:nth-of-type(even) { background-color: #212121 !important; }
.view-orders .card-block .table tbody tr:nth-of-type(odd) { background-color: #000000 !important;}

.pagenation_prv { color: #FAFAFA; }
.delete-btn .material-icons, .delete-btn .material-symbols-outlined { color: #FAFAFA;} 
.view-btns .tablinks { background: transparent; border: 1px solid #262626; color: #FAFAFA; }
.view-btns .tablinks { background: transparent; border: 1px solid #262626; color: #FAFAFA;}
.view-btns .tablinks.active { background: transparent; border: 1px solid #262626; color: #FAFAFA; background-color: #212121; }
.cart .md-container { max-width: none;}
.cart .page-header { background-color: #000000;}
.cart .body-header { background-color: #000000;}
.cart .cart-block .d-flex.justify-content-between p { color: #FAFAFA;}
.cart .cart-block { background-color: #000000; }
.cart .cart-block .table { background-color: #000000; border: 0.5px solid #262626; }
.cart .cart-block .table th { color: #FAFAFA}
.cart .cart-block .table td { color: #FAFAFA}
.cart .cart-block .table tbody tr:nth-of-type(even) {/* background-color: #212121 !important; */}
.cart .cart-block .table tbody tr:nth-of-type(odd) { background-color: #000000 !important;}
.cart .cart-block .table .cart-thumb img { width: 100%; height: 100%; object-fit: cover;}
.cart .cart-block { border: none;}
.cart .comments_area { border: 1px solid #262626; background-color: #171717; color: #D4D4D4;}
.table-actions-group .table-actions-btn { color: #D4D4D4; }

.preferences .note-txt { color: #D4D4D4; }
.preferences .card-block .d-flex.justify-content-between p { color: #FAFAFA;}
.preferences .card-block { background-color: #000000; }
.preferences .card-block .table { background-color: #171717; border: 0.5px solid #262626; }
.preferences .card-block .table th { color: #FAFAFA}
.preferences .card-block .table td { color: #FAFAFA}
.preferences .card-block .table tbody tr:nth-of-type(even) { background-color: #212121 !important; }
.preferences .card-block .table tbody tr:nth-of-type(odd) { background-color: #000000 !important;}
.preferences .card-block { box-shadow: none;}
.preferences .pref-badge { color: #D4D4D4; background-color: #171717; border: 1px solid #262626;}
.preferences .card-block .action-btn { color: #D4D4D4; background-color: #171717; border: 1px solid #262626;}
.preferences .card-block .action-btn:first-child { margin-right: 5px;}

/* Inner Pages Styles */
.inner-body { font-family: var(--font-regular) !important;}
.navbar a { font-family: var(--font-regular);}
h1, h2, h3, h4, h5, h6, p { font-family: var(--font-regular);}
.category-thumb { background-color: transparent; border: 1px solid #262626 !important;}
.thumb-titlewrapper h6 { color: #FAFAFA;}
.switch-buttons .switch-title {color: #b5b4b4; }
.inner-header { background-color: #0e0e0e; border-bottom: 1px solid #262626;}
.inner-header .nopadding .navbar { margin: 0px;}
.inner-header .navbar>ul>li>a:before { content: none;}
.inner-header .navbar ul { background-color: #0e0e0e;}

.left-block.adv_search .adv_body .adv_body-inner .form-group label { color: #A1A1A1;}
.adv_search .adv_header h6 { color: #FAFAFA;}
.adv_search .adv_header h6 span { color: #FAFAFA; background-color: #171717; border: 1px solid var(--border-dark);}
.adv_search .adv_body .form-control { background-color: #0e0e0e !important; border: 1px solid #262626 !important; color: #FAFAFA !important; }
.block-title h2 { color: #FAFAFA;}
.searchinput { background-color: #0e0e0e !important; border: 1px solid #262626 !important; color: #FAFAFA !important; border-radius: 7px 0px 0px 7px; }
.search-block .fill_btn { color: #FAFAFA; background-color: #171717 !important; border: 1px solid #262626 !important; border-radius: 0px 7px 7px 0px; border-left: none; } 
.search-block { border: none;}
.adv_search .adv_footer .fill_btn { border-radius: 4px; background-color: #FFB900 !important; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 0px; font-size: 16px; font-size: 13px; padding: 10px 12px; background: transparent; }
.adv_footer .clear-btn { color: #FAFAFA;}
.adv_search .adv_body .onwards span { color: #7d7d7d;}
.block-title ul.bread-crumbs li:last-child { color: #a6a0a0;}
.yellow-gradient { color: #FAFAFA !important; border-radius: 4px; background-color: #FFB900 !important; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 0px; font-size: 16px; font-size: 13px; padding: 10px 12px; background: transparent; }
.yellow-gradient:hover { color: #FAFAFA !important; background-color: #FFB900 !important; background: #FFB900 !important; }
.body-header { background-color: #171717; border-bottom: 1px solid #262626;}
.page-header { background-color: #171717;}
.page-header .plain-btn { background-color: #171717; border: 1px solid #262626; color: #FAFAFA;  }
.block-header .plain-btn { background-color: #171717; border: 1px solid #262626; color: #FAFAFA;  }
.comingsoon-block h6 {color: #FAFAFA; }
.comingsoon-block p {color: #FAFAFA; }
.modal-content { background-color: #171717; border: 1px solid #262626;}
.inner-header .header-wrapper { margin: 0px 30px;}
/* .inner-header .header-wrapper .navbar  { margin-left: 695px; } */
.modal-dialog .modal-content .modal-header .modal-title {color: #FAFAFA; } 
.modal-dialog .modal-content .modal-header .btn-close {color: #FAFAFA; background: transparent; font-size: 30px; top: 23% !important; }
.recomended-wrapper .form-control { padding: 10px 12px; background-color: #020202 !important; border: 1px solid #262626 !important; color: #FAFAFA !important; }
.recomended-wrapper label { color: #A1A1A1 !important; }
.modal-dialog .modal-content .modal-body { background-color: #000000; border-bottom: 1px solid #262626; }
.modal-dialog .modal-content .modal-body .container h6 { color: #FAFAFA; margin-top: 25px !important; }
.modal-dialog .modal-content .modal-header { border-bottom: 1px solid #262626; padding: 15px 30px; background-color: #0e0e0e; }
.modal-dialog .modal-content .modal-footer { background-color: #0e0e0e; padding-bottom: 0px; }
.searchfail-block h6 { color: #FAFAFA;}
.searchfail-block p { color: #FAFAFA;}
.form-control::placeholder { color: #404040; }
.css-t3ipsp-control::placeholder { color: #404040; }
.adv_body .adv_body-inner .form-group .css-1p3m7a8-multiValue { background-color: #21212195 !important; color: #FAFAFA !important; background: transparent;}
.css-wsp0cs-MultiValueGeneric { color: #FAFAFA !important;}
.css-tr4s17-option { background-color: #383737 !important; color: #FAFAFA !important;}
.css-10wo9uf-option { background-color: #292929 !important; color: #FAFAFA !important;}
.css-d7l1ni-option { background-color: #21212195 !important; color: #FAFAFA !important;}

.css-1nmdiq5-menu css-1nmdiq5-menu .css-1n6sfyn-MenuList .css-d7l1ni-option:hover { background-color: #FAFAFA !important; color: #171717 !important;}
/* Container */
.adv_search .adv_body .css-b62m3t-container {
  color: #fafafa !important;
  font-family: var(--font-regular);
}

/* Default control */
.adv_search .adv_body .css-13cymwt-control,
.adv_search .adv_body .css-t3ipsp-control {
  background-color: #171717 !important;
  border: 1px solid #262626 !important;
  color: #fafafa !important;
  box-shadow: none !important;
  transition: all 0.2s ease;
}

/* Hover and focus — stays dark */
.adv_search .adv_body .css-13cymwt-control:hover,
.adv_search .adv_body .css-t3ipsp-control:hover,
.adv_search .adv_body .css-13cymwt-control--is-focused,
.adv_search .adv_body .css-t3ipsp-control--is-focused {
  background-color: #171717 !important;
  border-color: #262626 !important; /* gold accent */
  color: #fafafa !important;
  box-shadow: none !important;
}

/* Placeholder text */
.adv_search .adv_body .css-1jqq78o-placeholder {
  color: #999 !important;
}

/* Selected text */
.adv_search .adv_body .css-1dimb5e-singleValue {
  color: #fafafa !important;
}

/* Dropdown menu */
.adv_search .adv_body .css-1nmdiq5-menu {
  background-color: #171717 !important;
  border: 1px solid #262626 !important;
  color: #fafafa !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

/* Dropdown options */
.adv_search .adv_body .css-10wo9uf-option {
  background-color: #171717 !important;
  color: #fafafa !important;
}

.adv_search .adv_body .css-10wo9uf-option:hover {
  background-color: #262626 !important;
  color: #fafafa !important;
}

/* Selected option */
.adv_search .adv_body .css-1n7v3ny-option {
  background-color: #171717 !important;
  color: #686868 !important;
}

/* Dropdown indicator (arrow icon) */
.adv_search .adv_body .css-1xc3v61-indicatorContainer {
  color: #686868 !important;
}

.adv_search .adv_body .css-1xc3v61-indicatorContainer:hover {
  color: #686868 !important;
}

/* Remove white background for the input typing area */
.adv_search .adv_body input {
  background: transparent !important;
}

/* Scrollbar inside dropdown (optional) */
.adv_search .adv_body .css-1nmdiq5-menu::-webkit-scrollbar {
  width: 6px;
}
.adv_search .adv_body .css-1nmdiq5-menu::-webkit-scrollbar-thumb {
  background-color: #171717;
  border-radius: 3px;
}

/* Custom scrollbar for the left block (ADV Search panel) */
.body-wrapper .left-block.adv_search .adv_body::-webkit-scrollbar {
  width: 8px; /* scrollbar width */
}

/* Scrollbar track (background area) */
.body-wrapper .left-block.adv_search .adv_body::-webkit-scrollbar-track {
  background: #0f0f0f; /* dark background */
  border-radius: 10px;
}

/* Scrollbar thumb (scroll handle) */
.body-wrapper .left-block.adv_search .adv_body::-webkit-scrollbar-thumb {
  background-color: #2a2a29; /* Orasi gold */
  border-radius: 10px;
  border: 2px solid #0f0f0f; /* creates spacing inside track */
}

/* Hover effect */
.body-wrapper .left-block.adv_search .adv_body::-webkit-scrollbar-thumb:hover {
  background-color: rgb(67, 66, 64); /* lighter gold on hover */
}

/* Optional — corner styling (when both scrolls visible) */
.body-wrapper .left-block.adv_search .adv_body::-webkit-scrollbar-corner {
  background-color: #0f0f0f;
}

.errormsg-floating { left: 2px;}
.sign-wrapper .sign-body .sign-block .errormsg { left: 2px;}
.sign-wrapper .sign-body .sign-block .mssg-p { left: 35.5% !important;}

.otp-wrapper .fill_btn.yellow-gradient { color: #000000 !important;}

.signup-otp-inputs .signin-otp-input { background-color: #171717 !important; border: 1px solid #262626 !important; color: #FAFAFA !important;}
.new-sign-up-wrapper .otp-block { background-color: #000000;}

.terms-page .terms-cls-wrapper  { color: #D4D4D4; }
.terms-header h5:first-child {  color: #FAFAFA; }
.terms-header h6 { color: #FAFAFA; }
.privacy-cls-wrapper { color: #D4D4D4; }
.navbar-brand{ cursor:pointer;}
.body-wrapper .main-block .block-body #grid-view .portfolio { min-height: inherit !important;}
.portfolio .portfolio-wrap .asset-portrait-thumb { max-width: 100% !important; height: 100% !important; width: 100%; object-fit: cover; }

.title-des-popup .modal-dialog .modal-content .modal-body p { color: #fff ;}
.title-des-popup .modal-dialog .modal-content .modal-header { background-color: #000000;}
.title-des-popup .modal-dialog .modal-content { background-color: transparent;}
#change-password-section .form-group .form-control { letter-spacing: 3px;}
.profile .card-block .errormsg { top: -13px; position: absolute;}
#change-password-section .form-group { position: relative;}


.solution-step { padding: 50px 0; }
  .team-member-card .team-member-image img { width: 100%; height: 100%; object-fit: cover; }
  .team-member-card { height: inherit; }
  .team-member-card .team-member-info .full-details { color: var(--primary-color); display: flex; align-items: center; text-decoration: none;}
  .team-member-card .team-member-info .team-contact { color: #D4D4D4 !important;}
  .team-member-card .team-member-info .team-contact span { color: var(--primary-color) !important;}
  
  .about-section { padding: 40px 64px; }
  .team-container { max-width: 1500px;}
  .title-des-popup .modal-dialog .modal-content .modal-body p { color: #D4D4D4 ;}
  .title-des-popup .modal-dialog .modal-content .modal-header { background-color: #000000;}
  .team-member-card .team-member-buttons .team-contact { margin-bottom: 3px;}
  .title-des-popup .modal-dialog .modal-content { background-color: transparent;}

  .news-modal-popup .modal-body { background-color: #000000 !important; border: 1px solid #262626 !important;}
  .news-modal-popup .modal-content { background-color: transparent;}
  .news-modal-popup .modal-body .header-title { color: #fff;}
  .news-modal-popup .modal-body .header-title .popup-title { color: #ffffff;}
  .news-modal-popup .modal-body .mt-2 p { color: #FAFAFA;}
  .news-modal-popup .modal-body .text-overflow { color: #d4d4d4;}


  /* CSS for slow up-and-down animation */
.arrow-bounce {
  display: block;
  animation: slide 1.3s infinite ease-in-out alternate; /* slower movement */
}


.navbar a, .navbar a:focus { text-transform: capitalize !important;}
.navbar-nav .sign-button .nav-link{
  color: #F2E18D !important;
}
.navbar .dropdown.sign-button ul{
  background: #0A0A0A;
  box-shadow: none;
}
.navbar .dropdown.sign-button ul a {
    padding: 10px 20px;
    font-size: 14px;
    color: #D4D4D4;
    text-transform: capitalize;
    font-family: var(--font-regular);
}

.navbar .dropdown.sign-button ul a:hover{
      color: #F2A341 !important;
}
.dropdown-item:hover {
    background-color: #f2e18d14;
}
.sign-button .dropdown-menu .dropdown-item .material-symbols-outlined{
  font-size: 14px;
  color: #F2A341 !important;
}
.navbar .sign-button a.dropdown-item{
  justify-content: start;
  gap: 0.5rem;
}
 .dropdown-item{
   font-family: var(--font-regular) !important;
   letter-spacing: 1px;
  }
@keyframes slide  {
 0% {
    transform: translateY(5px);
  }
  50% {
    transform: translateY(-5px); /* slide up */
  }
  100% {
    transform: translateY(5px); /* back to start */
  }
}

/* MacBook / small laptop */
@media (max-width: 1440px) {
}

/* Tablet */
@media (max-width: 1024px) {
    
.ring-hub-img{
    width: 100%;
    height: auto;
    max-width: 800px;
}
.hero-bg-container {
    max-width: 1600px !important;
}
.stepper-line {
    position: relative;
    width: 725px;
}
}

/* Mobile */
@media (max-width: 767px) {
}


.form-group .form-control { outline: none !important; border: 1px solid #262626 !important;}
.css-13cymwt-control { border: 1px solid #262626 !important; background-color: #020202 !important; color: #8C8C8C;  }
.css-13cymwt-control:focus,
.css-13cymwt-control:active,
.css-13cymwt-control:focus-visible { border: 1px solid #262626 !important; background-color: #020202 !important;}
 /* term page */

 .terms-header{
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; margin-top: 75px;
}
.terms-header .back-btn {
    color: #797676;
    position: relative;
    top: inherit;
    left: inherit;
}
.terms-header .terms-brand{
  display: flex; align-items: center; justify-content: flex-start;
}
.terms-header h5{color: #ffffff; margin-bottom: 0;}
.terms-header .terms-close {position: relative !important; top: inherit !important ;right: inherit !important ; background-color: transparent;color: white;
}


.solution-text-wrapper .solution-description { max-width: 1000px;}
.solution-content { margin-top: 350px; max-width: inherit; }
.solutions-header .solutions-title { margin-top: 150px;}
.hero-section { padding-bottom: 10px !important;}
.solution-step .solution-content { margin-top: 45px !important; max-width: 900px !important; }
.the-chaos-section { padding: 0px !important;}
.solution-end .solution-text-wrapper { margin-top: 0px;}
.solution-end .solution-content { margin-top: 200px!important; max-width: 900px !important; }
.cards-section { padding: 170px 64px 196px;}
input[type="password"] {
    letter-spacing: 0 !important;
}

.solution-step { gap: 135px;}
.solution-step .solution-content { margin-top: 70px !important;}
.popup-footer .fill_btn { background-color: #ffffff; color: #020202; padding: 11px 25px; border-radius: 4px;}
.modal-dialog .modal-content { border: 1px solid #262626 !important;}

/* Navbar Base */

/*create password page*/
.signin-section .pwd-group {text-align: left; color:#fff; margin-bottom: 20px;}
 .signin-section .pwd-group label {margin-bottom: 5px;}
 .forgotpwd-wrapper {height: calc(100vh - 145px);}  
 .forgotpwd-wrapper h1{ text-align: center;font-size: 46px;font-weight: normal;color: #FAFAFA; margin-bottom: 20px;}
 .pwd-group .form-control {padding: 10px 12px;}
 .header-wrapper .pwd-close{ position: relative !important;top: inherit; left: inherit; background-color: transparent; color: #ffff;}

 .metrics-section .metrics-container { padding-bottom: 42px; z-index: 1; }


.hero-content .hero-text-wrapper { margin-top: 160px;}

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(50%) sepia(80%) saturate(0) hue-rotate(200deg);
  cursor: pointer;
}
.team-section .team-container .row { flex-wrap: wrap; align-items: stretch; }
.team-section .team-container .row .col-lg-6 { display: flex; }
.search-field .blog-search { background-color: transparent !important;}

.signin-footer .about-hero-btn { display: flex; align-items: center; justify-content: center;}
.welcome-body strong { font-weight: bolder; color: #fafafa;}

.cards-section .service-card { display: flex; flex-direction: column; height: 100%; }
.cards-section .service-card .card-content { justify-content: space-between; margin-top: 20px; }
.news-modal-popup .modal-body .header-title .pop_close { color: #ffffff;}

.signin-footer .loading-icon { animation: 0.8s linear 0s infinite rotate; width: 24px; }
@keyframes rotate {0%{ transform: rotate(0deg); }100%{ transform:rotate(360deg); }}
.loading-icon { animation: 0.8s linear 0s infinite rotate; width: 24px; }

h1, h2, h3, h4, h5, h6{letter-spacing: 0.02em!important;}
p{letter-spacing: 0.02em!important;}

.search-field .blog-search { padding-left: 15px;}
.search-field { position: relative;}
.search-field .search-icon { position: absolute; right: 0px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--primary-color); background: transparent; }
.search-field .clear-btn { position: absolute; right: 51px; top: 50%; transform: translateY(-50%); font-size: 20px; background-color: #262626; color: #FFFFFF; align-items: center; border-radius: 50%; display: flex !important; border: none;}
.blog-posts-container .nodata-found { padding-top: 0px;}

.react-datepicker__close-icon::after {font-size: 22px !important; background-color: transparent !important; color: #716E6E !important;}

.signup .custom-btn-primary { justify-content: center;}

.posts-section .search-container .latest-btn .dropdown-menu { border: 1px solid #393939; background: #0A0A0A; box-shadow: none !important;}
  .posts-section .search-container .latest-btn .dropdown-menu li .dropdown-item { color: #fff !important; cursor: pointer; padding: 8px 20px; font-size: 14px; font-weight: 500; }
  .posts-section .search-container .latest-btn .dropdown-menu li a:hover { color: #F2A341 !important; background-color: #222 !important; }

  .switch-buttons .slider.round {background-color: #0e0e0e !important; border: 2px solid #8d8a8a; border-radius: 10px !important;}
  .switch-buttons .slider.round:before { background-color: #8d8a8a !important; border-radius: 10px !important; left: 1px; bottom: 1px; height: 14px !important; width: 14px !important; }
  .switch-buttons input:checked + .slider.round { background-color: #F2A341 !important; }
  .switch-buttons input:checked + .slider.round:before { background-color: #fff !important; }

  /* === Input field styling === */
.custom-datepicker-input { background-color: #262525 !important; color: #ffffff !important; border: 1px solid #2c2c2c !important; border-radius: 8px; padding: 10px 12px; width: 100%; box-shadow: none !important; transition: border-color 0.2s ease, box-shadow 0.2s ease; cursor: pointer;}
.custom-datepicker-input::placeholder { color: #888888 !important;}
.custom-datepicker-input:focus { outline: none; border-color: #444 !important; background-color: #1a1a1a !important;}
/* === Dropdown Calendar Panel === */
.datepicker-wrapper .react-datepicker { background-color: #262525 !important; border: 1px solid #2c2c2c !important; box-shadow: none; color: #ffffff !important; }
/* Header bar (month/year area) */
.datepicker-wrapper .react-datepicker__header { background-color: #262525 !important; border-bottom: 1px solid #1d1d1d !important; color: #ffffff !important; }
/* Year text */
.datepicker-wrapper .react-datepicker__current-month,
.datepicker-wrapper .react-datepicker-year-header { color: #ffffff !important; font-weight: 500;}
/* Year option grid */
.datepicker-wrapper .react-datepicker__year-option { background-color: #0e0e0e !important; color: #ffffff !important; }
.datepicker-wrapper .react-datepicker__year-option:hover { background-color: #1a1a1a !important; color: #ffffff !important; }
/* Selected year highlight */
.datepicker-wrapper .react-datepicker__year-option--selected { background-color: #222 !important; color: #ffffff !important; font-weight: 600; }
/* Navigation arrows */
.datepicker-wrapper .react-datepicker__navigation-icon::before { border-color: #ffffff !important; }
/* === Clear button (x) === */
.datepicker-wrapper .react-datepicker__close-icon::after { background-color: transparent !important; color: #444 !important; font-size: 25px !important; }
.datepicker-wrapper .react-datepicker__year-text:hover { color: #0e0e0e !important; cursor: pointer; }
.datepicker-wrapper .react-datepicker__year-text.react-datepicker__year-text--today { background-color: #ffffff;}
.datepicker-wrapper .react-datepicker__year-wrapper { max-width: 140px; }
.form-group .datepicker-wrapper .form-control { background-color: transparent !important; border: 1px solid transparent !important; }
.datepicker-wrapper { cursor: pointer; position: relative; display: inline-block; width: 100%; color: #fafafa; background-color: #0e0e0e !important; border: 1px solid #262626 !important; border-radius: 3px; }
.datepicker-wrapper .datepicker-onwards { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #ffffff; font-size: 14px; opacity: 0.8; pointer-events: none; /* allows clicking inside input freely */ }
.datepicker-wrapper .react-datepicker__close-icon::after { padding: 3px 7px;}

.css-1u9des2-indicatorSeparator {background-color: rgb(104, 104, 104) !important;}
.css-tj5bde-Svg {fill: rgb(104, 104, 104) !important;}
.adv_search .adv_body .onwards span { top: 37%; right: -3px; }
.adv_search .adv_body .onwards .react-datepicker__navigation-icon--next {  top: 11px !important; left: 33px !important; }
.react-datepicker-popper .react-datepicker__triangle {fill: #262525 !important; stroke: none !important;  outline: none; color: transparent !important;}
.react-datepicker-popper .react-datepicker__year-text.react-datepicker__year-text--disabled { opacity: 0.5; cursor: not-allowed;}
 
ul, li, a, label, .form-control, p, .btn, button {letter-spacing: 0.02em!important;font-family: var(--font-regular) !important;}

/* React Date Picker Theme changed */
.react-datepicker { background-color: transparent !important; border: 1px solid transparent !important;}
.react-datepicker__header { background-color: #272727 !important; border-bottom: 1px solid #262626 !important;}
.react-datepicker__header .react-datepicker__current-month { color: #fff;}
.react-datepicker__month-container { background-color: #262525 !important;}
.react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name { color: #fff !important;}
.react-datepicker__day:not([aria-disabled=true]):hover, .react-datepicker__month-text:not([aria-disabled=true]):hover, .react-datepicker__quarter-text:not([aria-disabled=true]):hover, .react-datepicker__year-text:not([aria-disabled=true]):hover { color: #000 !important;}
.react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected { background-color: #fff !important; color: #272727 !important;}

/* mobile resolution */
@media (min-width:300px) and (max-width:480px) {
  .new-theme .navbar-collapse.show .navbar-nav { display: block;} 
  .hero-section { margin-top: 50px;}
  .new-theme { padding-right: 0px !important; padding-left: 0px !important; }
  .new-theme .navbar-collapse { padding-left: 0px; padding-right: 0px; }
  .metrics-section { margin-top: 110px; }
  .metrics-section .metrics-container { align-items: center; }
  .solution-end { padding-right: 0px; padding-left: 0px; }
  .solutions-header { padding-top: 40px; }
  .new-theme .hero-bg-container { bottom: -463px; max-width: inherit; width: 183%;}
  .solution-content { margin-top: 25px; }
  .solution-end .solution-content { margin-top: 111px !important; }
  .new-theme .footer-top { padding-left: 2rem; padding-right: 2rem; }
  .logo-img { height: 50px; object-fit: cover; width: inherit; }
  .new-theme .footer-top .justify-content-between { flex-direction: column; }
  .solutions-header .solutions-title { margin-top: 121px; }

  .form-control{ border-color: #262626 !important; background-color:#020202}
  .navbar-brand { z-index: 9999;}
  .inner-header .navbar ul { border: 1px solid #727272;}


  .hero-content .hero-text-wrapper { margin-top: -4px; }

  .production-hero-section { margin-top: 36px; }
  .production-features-section .production-features-container .features-grid { display: flex; flex-direction: column; }
  .target-audience-section .target-audience-container .target-audience-card .row { gap: 25px;}
  .target-audience-section .target-audience-container .target-audience-card { padding: 20px 5px;}
  .target-audience-section .target-audience-container { padding-top: 45px; padding-bottom: 40px; }
  .production-cta-section .production-cta-container { padding-top: 45px; }
  .challenge-solution-section .challenge-solution-container { padding-bottom: 40px;}
  .production-features-container { gap: 35px;}

  .list-view .table-responsive .asset-list-table>thead>tr>th, .list-view .table-responsive .asset-list-table>tbody>tr>td { background-color: #0e0e0e; }
  .inner-header .header-wrapper .navbar-mobile ul li .nav-link.active, .inner-header .header-wrapper .navbar-mobile ul li .nav-link:hover, .inner-header .header-wrapper .navbar-mobile ul li .nav-link:visited { color: #fafafa; }
  #recommend-modal .navbar-brand { display: none;}
  #recommend-modal .modal-content .modal-header { padding: 25px 30px !important;}

  .contact-section { padding-top: 0px;}
  .contact-main-section { padding-top: 0px;}
  .contact-map-placeholder iframe { height: 280px; }

}
/* Tab resolution */
@media (min-width:767px) and (max-width:1024px) {
  .metrics-container { flex-direction: row; }
  
  .navbar .navbar-collapse.show .navbar-nav { display: block;}

  .cards-section { padding-right: 0px; padding-left: 0px;}
  
  .production-features-section .features-grid { grid-template-columns: repeat(2, 1fr);}

  .target-audience-section .target-audience-container .target-audience-card .row { gap: 25px;}
  .target-audience-section .target-audience-container .target-audience-card { padding: 20px 5px;}

  .footer-section .footer-top { padding-left: 20px; padding-right: 20px;}
}
/* Desktop resolution */
@media (min-width:1000px) and (max-width:1300px) {}
/* 1920 resolution */
@media (min-width: 1600px) {}
/* 1366 resolution */
@media (min-width:1200px) and (max-width:1367px) {}

.form-control { color: #ffffff; background-color: #020202; border: 1px solid #262626; }
.contact-btn { background: #E5E5E5; border: none; border-radius: 4px; padding: 12px 20px; display: flex; align-items: center; justify-content: center; gap: 4px; font-weight: 600; font-size: 16px; line-height: 24px; transition: all 0.3s ease; align-self: flex-start; color: var(--accent-color) !important;}
.custom-btn-primary:hover { background: linear-gradient(90deg, #ffd600, #ffa700) !important; transform: translateY(-2px); box-shadow: 0px 6px 30px rgba(255, 181, 0, 0.5); }
.custom-btn-primary { background: var(--primary-color); text-decoration: none; border: none; border-radius: 8px; padding: 14px 32px; display: flex; align-items: center; gap: 4px !important; font-weight: 600 !important; font-size: 18px !important; line-height: 24px !important; font-family: var(--font-regular) !important; letter-spacing: 1px; color: var(--accent-color) !important; transition: all 0.3s ease; box-shadow: 0px 1px 4px 0px rgba(255, 210, 48, 0.32), 0px 8px 24px 0px rgba(254, 154, 0, 0.24); }
.font-style { font-family: var(--font-regular) !important; letter-spacing: 0.02rem !important; }
/* Navbar styles */
.nav-bar-wrapper { background-color: #000 !important;}
.nav-bar-wrapper .navbar-nav .nav-link { font-family: var(--font-regular) !important; letter-spacing: 1px; text-transform: capitalize !important; }
.nav-bar-wrapper .navbar-brand { display: flex; align-items: center; font-weight: 600 !important; font-size: 20px; color: #fff !important; font-family: var(--font-regular) !important; letter-spacing: 1px; text-transform: capitalize !important; }
.nav-bar-wrapper .nav-link { padding-top: 9px !important; padding-bottom: 9px !important; font-size: 16px !important; font-weight: normal !important; }
.nav-bar-wrapper .nav-link.active { font-weight: bold !important; }
.nav-bar-wrapper a.nav-link:focus { font-size: 16px !important; }
.nav-bar-wrapper .navbar a, .navbar a:focus { font-size: 20px !important; }
.nav-bar-wrapper .solution-title { font-family: var(--font-regular); }
.nav-bar-wrapper .nav-item.dropdown .dropdown-menu { right: 0; left: auto; }
.nav-bar-wrapper .nav-item.dropdown .dropdown-menu { right: 0; left: auto; border: 1px solid #393939; }
.nav-bar-wrapper .navbar-brand img {  height: 45px; }
.nav-bar-wrapper .nav-link { color: #ccc !important; margin: 0 10px; font-size: 16px; transition: color 0.3s ease; }
.nav-bar-wrapper .nav-link:hover, .nav-bar-wrapper .nav-link.active { color: #fff !important; font-weight: 600; }
.nav-bar-wrapper .dropdown-menu { background-color: #111; border: none; }
.nav-bar-wrapper .dropdown-item { color: #fff !important; }
.nav-bar-wrapper .dropdown-item:hover { background-color: #222 !important; }
.nav-bar-wrapper .navbar-toggler { border: none; }
.nav-bar-wrapper .navbar-toggler:focus { box-shadow: none; }
.nav-bar-wrapper .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); }
/* Hero Section */
.hero-section-wrapper .hero-bg-container { max-width: 1400px; position: absolute; top: 0; left: 50%; transform: translateX(-50%) rotate(180deg); width: 100%; max-width: 1600px; z-index: 0; bottom: -1060px; }
.card-section-wrapper .card-btn { width: 100%; padding: 12px; border-radius: 4px; border: none; display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 16px; line-height: 24px; transition: all 0.3s ease; }
/* Footer Section */
.footer-wrapper .footer-links a { font-size: 16px; line-height: 24px; color: var(--text-light-muted) !important; text-decoration: none; transition: color 0.3s ease; text-align: start; padding: 0 !important; }
.footer-wrapper .footer-links ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; justify-content: start; align-items: start; }
.footer-wrapper .footer-links a:hover { color: var(--primary-color) !important; text-decoration: none !important; }
.footer-wrapper .footer-brand p { width: 90%; }
.footer-wrapper .footer-links-container { display: flex; justify-content: start; gap: 80px; }
.footer-wrapper .footer-top { padding-left: 5rem; padding-right: 5rem; }
.footer-wrapper .footer-section { padding-top: 0px; }
/* Production Hub */
.production-cta-section { border-radius: 0px !important; }
/* Team Section */
.team-section-wrapper .team-member-buttons { display: flex; flex-direction: column; gap: 5px; }
.team-section-wrapper .team-contact { display: flex; align-items: center; gap: 10px; }
.team-section-wrapper .team-member-card p, .team-member-card .team-contact span { color: var(--text-light-muted); }
.team-section-wrapper .team-member-buttons .team-contact .material-icons-outlined, .team-member-buttons .team-contact .material-icons { font-size: 20px; }
.team-section-wrapper .team-member-card:hover .team-contact { color: var(--primary-color); }
.team-section-wrapper .team-member-card:hover .team-contact span { color: var(--primary-color); }
.team-section-wrapper .team-member-card:hover .team-contact { color: var(--text-light-muted);}
/* SignUp Page */
.sign-up-wrapper #signup-btn { width: 100%; margin-top: 0px; }
.sign-up-wrapper #verify-continue-btn, .sign-up-wrapper #verify-create-btn { width: 100%; margin-top: 0px; }
.sign-up-wrapper#signup-block .btn .button-txt { text-transform: capitalize !important; }
.sign-up-wrapper .form-control { color: #ffffff !important; background-color: #020202 !important; border: 1px solid #262626 !important; }
/* Responsive dropdown fix */
@media (max-width: 991px) {
  .nav-bar-wrapper .navbar-collapse { background-color: #000; padding: 1rem; }
}

.hero-section-wrapper .custom-btn-primary { z-index: 9;}
.new-category-wrapper .col-md-3 { padding: 10px; }
.new-category-wrapper .new-category-thumb { width: 100%; height: 80px; position: relative; background-color: #0A0A0A; border: 1px solid #262626; border-radius: 8px; overflow: hidden; display: flex; align-items: center; padding: 0 36px; cursor: pointer; }
.new-category-wrapper .new-category-thumb .thumb-img { position: absolute;  width: 280px; mix-blend-mode: lighten; transform: translate(33px, 33px); max-width: inherit; z-index: 0; opacity: 12%; }
.new-category-wrapper .new-category-thumb .thumb-content { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; }
.new-category-wrapper .new-category-thumb .thumb-content .thumb-icon { width: 20px; max-width: inherit; height: 20px; }
.new-category-wrapper .new-category-thumb .thumb-content .thumb-title { color: #ffffff; font-weight: 700; font-size: 15px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.asset-details-wrapper .asset-data-row .asset-metadata .foreign-title-detail { color: #c8c8c8; font-size: 17px; margin-bottom: 10px; margin-top: 10px; }

/* Last updated at 05:10 PM 28-10-2025 BY ADI */