:root {
    --primary-color: #00e5bb;
    --dark-bg: #000;
    --text-color: #fff;
}

body {background-color: var(--dark-bg);color: var(--text-color);font-family: 'Montserrat', Arial, sans-serif;}
section{ padding-top: 200px;}
.btn-primary {background-color: var(--primary-color);border: none;color: #000;font-weight: 600;padding: 8px 20px;border-radius: 4px;}
.btn-primary:hover {background-color: #00c9a3;color: #000;}
.card { background-color: var(--dark-bg);color: white;}
.section-title {font-size: 3rem;font-weight: 800;}

/* ============ NAVBAR ==============*/
.nav-bg{background-color: #000; border-bottom: solid 1px #3A3A3A;}
.nav-link {color: var(--text-color) !important;margin: 0 10px;font-weight: 500;}
/* Underline efffect*/
.navbar-nav .nav-item .nav-link {position: relative;padding-bottom: 5px;transition: all 0.3s ease-in-out;}
.navbar-nav .nav-item .nav-link::after {content: "";position: absolute;left: 50%;bottom: 0;width: 0;
    height: 2px;background-color: var(--primary-color);transition: all 0.3s ease-in-out;transform: translateX(-50%);}
.navbar-nav .nav-item .nav-link:hover::after,
.navbar-nav .nav-item .nav-link.active::after {width: 100%;}

/* ============ OFF CANVAS ==============*/
.offcanvas {background-color: var(--dark-bg);width: 100vw !important;height: 100vh !important;}
.offcanvas-header {padding: 1rem 2rem;}
.offcanvas-header .btn-close {background-color: var(--primary-color);opacity: 1;}
.offcanvas-body {display: flex;flex-direction: column;align-items: center;padding: 2rem;}
.offcanvas-body .nav-link {padding: 15px 0;font-size: 24px;text-align: center;transition: color 0.3s;}
.offcanvas-body .nav-link:hover {color: var(--primary-color) !important;}
.offcanvas-body .btn-primary {margin-top: 30px;font-size: 18px;padding: 10px 30px;}
/* Hide desktop menu on small screens */
@media (max-width: 991px) {.desktop-menu {display: none;}}
/* Hide mobile menu button on large screens */
@media (min-width: 992px) {.mobile-menu-button {display: none;}}

/* ============ HERO ==============*/
.hero-logo {width: 270px;}
.hero-title {font-weight: 7å00;font-size: 3rem;line-height: 4rem;}
.hero-card {font-weight: 400;font-size: 2rem;line-height: 2.375rem;}
.hero-button{height: 50px;}

/* ============ WHY CHOOSE ==============*/
.section-title-off-set {position: relative;margin-bottom: -30px; z-index: 3;}
.why-chose-card h3 {font-weight: 800; line-height: 1.75rem; font-size: 1.313rem;}
.why-chose-card p {font-weight: 400; line-height: 1.5rem; font-size: 0.875rem;}
/* Card Styling */
.why-chose-card {border-radius: 15px;text-align: left;border: 1px solid #848484;display: flex;flex-direction: column;height: 100%;}
.why-chose-card .card-body {flex-grow: 1;}
.why-chose-card h3 {font-weight: 700;font-size: 1.4rem;margin-top: 15px;}
.why-chose-card p {font-weight: 400;font-size: 1rem;color: white;}
.why-chose-card .host{position: relative;}
.why-chose-card .svg-icon {position: absolute;top: -20px;right: -20px;}
.offset-card {margin-top: 30px;}

.video-container {position: relative;width: 100%;overflow: hidden;}
.video-container video {position: absolute;top: 50%;left: 50%;width: 100%;height: 100%;object-fit: cover;transform: translate(-50%, -50%);}
.overlay {position: relative;z-index: 2;background: rgba(0, 0, 0, 0.88); color: white; padding: 80px 0 80px;}

/* ============ REJECT ==============*/
.reject-subtitle{font-size: 1.5rem; line-height:2rem ; font-weight: 400;}
.reject-arrow {transform: scaleY(-1);}
  
/* ============ TIME KINE ==============*/
.timeline-container {position: relative;padding: 20px 0;}
.timeline-line {position: absolute;width: 2px;background-color: #555;top: 0;bottom: 0;left: 50%;transform: translateX(-50%);}
.timeline-item {position: relative;margin-bottom: 100px;}
.timeline-dot {position: absolute;left: 50%;top: -20px;transform: translateX(-50%);z-index: 2; width: 100px;}
.timeline-content {width: 45%;}
.timeline-content h2 {font-size: 2rem; font-weight: 800; line-height: 2.375rem;}
.timeline-content p {font-size: 1rem; font-weight: 400; line-height: 1.75rem;}
.timeline-item:nth-child(odd) .timeline-content {margin-left: auto;padding-left: 50px;}
.timeline-item:nth-child(even) .timeline-content {margin-right: auto;padding-right: 50px;text-align: right;}

/* ============ CONTACT ==============*/
.contact-title {font-size: 4.5rem; line-height: 6rem; font-weight: 800;}
.contact-subtitle {font-size: 2rem; line-height: 2.375rem; font-weight: 800;}


/* ============ FOOTER ==============*/
.footer-text{color: #ACACAC;font-weight: 400;font-size: 1rem;line-height: 1.75rem;}
.copy-rights{color: #ACACAC;font-weight: 400;font-size: 1rem;line-height: 0.75rem;}
.outlined-text {font-size: 5rem;color: #000; font-weight: 800; -webkit-text-stroke: 0.5px #f2f2f2;}

@media (max-width: 768px) { 
    section{ padding-top: 50px;}
    .section-title {font-size: 1.5rem;font-weight: 800;}
    /* ============ HERO ==============*/
    .hero-logo {width: 125px;}
    .hero-title {font-weight: 700;font-size: 2rem;line-height: 2.375rem;}
    .hero-card {font-weight: 700;font-size: 1.25rem;line-height: 1.75rem;}
   
    /* ============ WHY CHOOSE ==============*/
    .section-title-off-set {position: relative;margin-bottom: -20px; z-index: 3;}
    .why-chose-card h3 {font-weight: 800; line-height: 1.75rem; font-size: 1.313rem;}
    .why-chose-card p {font-weight: 400; line-height: 1.5rem; font-size: 0.875rem;}
    .offset-card { margin-top: 0;}
    
    /* ============ REJECT ==============*/
    .reject-subtitle{font-size: 1.2rem; line-height:1.75rem ; font-weight: 400;}
    .video-size{max-width: 350px;}
    .reject-arrow {transform: scaleX(-1) rotate(90deg);; width: 100px; }
    
    /* ============ TIME KINE ==============*/
    .timeline-line {position: absolute;width: 2px;background-color: #555;top: 0;bottom: 0;left: 24px;transform: translateX(-50%);}
    .timeline-dot {left: 0px;transform: none;width: 48px;}
    .timeline-content {width: auto;margin-left: 50px !important;padding-left: 30px !important;text-align: left !important;}
    .timeline-content h2 {font-size: 1rem; font-weight: 800; line-height: 1.313rem;}
    .timeline-content p {font-size: 0.875rem; font-weight: 400; line-height: 1.5rem;}
    .timeline-item:nth-child(odd) .timeline-content,
    .timeline-item:nth-child(even) .timeline-content {margin-right: 0;padding-right: 0;}

    /* ============ CONTACT ==============*/
    .contact-title {font-size: 2.5rem; line-height: 3.5rem; font-weight: 800;}
    .contact-subtitle {font-size: 1.125rem; line-height: 1.75rem; font-weight: 800;}

    /* ============ FOOTER ==============*/
    .footer-text{color: #ACACAC;font-weight: 400;font-size: 0.875rem;line-height: 1.5rem;}
    .copy-rights{color: #ACACAC;font-weight: 400;font-size: 0.75rem;line-height: 1rem;}
}
/* Moving SVG */
.svg-container {position: relative;width: 100%;overflow: hidden;height: auto;margin: 3rem 0;}
/* Refined animation with smoother easing */
@keyframes moveSvg {
    0% { transform: translateX(0); }
    50% { transform: translateX(calc(-50% + 384px)); } /* Half of container + half of viewport */
    100% { transform: translateX(0); }
}

/* Apply animation only on mobile */
@media (max-width: 768px) {
    .moving-svg {display: block;width: 200%;position: relative; animation: moveSvg 20s ease-in-out infinite alternate;}
}

/* Ensure static display on larger screens */
@media (min-width: 769px) {
    .moving-svg {width: 100%;display: block;}
}