/* Hide scrollbar for Chrome, Safari and Opera */           
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
/* Hide scrollbar for IE, Edge and Firefo       x */
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.glass-effect {
    background: rgba(17, 24, 39, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(55, 65, 81, 0.3);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}
.floating {
    animation: float 6s ease-in-out infinite;
    filter: drop-shadow(0 0 15px rgba(17, 24, 39, 0.5));
}
@keyframes float {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(2deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}
.card-3d {
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: all 0.3s ease;
}
.card-3d:hover {
    transform: translateY(-10px) rotateX(5deg) rotateY(5deg);
    box-shadow: 20px 20px 60px rgba(0,0,0,0.5);
}
.input-glow:focus {
    box-shadow: 0 0 15px rgba(17, 24, 39, 0.5);
}
.gradient-border {
    position: relative;
    border-radius: 1rem;
}
.gradient-border::before {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    bottom: -2px;
    left: -2px;
    background: linear-gradient(45deg, #1f2937, #374151, #4b5563);
    border-radius: inherit;
    z-index: -1;
    animation: borderGlow 3s ease infinite;
}
@keyframes borderGlow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ==========================
   About Section (normal CSS)
   Mirrors previous Tailwind layout
   ========================== */
.about-section {
    padding: 4rem 0; /* ~py-16 */
    background: #ffffff;
}

@media (min-width: 768px) {
    .about-section { padding: 6rem 0; } /* ~md:py-24 */
}

.about-container {
    max-width: 80rem; /* ~max-w-7xl */
    margin-left: auto; 
    margin-right: auto; 
    width: 100%;
    padding-left: 1rem; /* ~px-4 */
    padding-right: 1rem;
}

@media (min-width: 640px) { /* sm */
    .about-container { padding-left: 1.5rem; padding-right: 1.5rem; }
}

@media (min-width: 1024px) { /* lg */
    .about-container { padding-left: 2rem; padding-right: 2rem; }
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr; /* grid-cols-1 */
    gap: 2rem; /* gap-8 */
    align-items: center; /* items-center */
}

@media (min-width: 1280px) { /* xl */
    .about-grid { gap: 4rem; } /* xl:gap-16 */
}

@media (min-width: 1024px) { /* lg */
    .about-grid { grid-template-columns: 1fr 1fr; } /* lg:grid-cols-2 */
}

/* Mobile-first: content first, image second */
.about-text { order: 1; }
.about-image-col { order: 2; }

@media (min-width: 1024px) {
    /* On large screens keep text first, image second (unchanged) */
    .about-text { order: 1; }
    .about-image-col { order: 2; }
}

.about-heading {
    text-transform: uppercase;
    font-weight: 500; /* font-medium */
    color: #111827; /* text-gray-900 */
    line-height: 1.05; /* leading-[1.05] */
    margin: 0;
}

.about-title-line {
    display: block; /* block */
    letter-spacing: -0.01em; /* tracking-tight approximation */
    font-size: clamp(1.75rem, 5.5vw, 45px); /* responsive, slightly decreased from original */
}

.about-title-accent {
    background: linear-gradient(90deg, #111827 0%, #4b5563 50%, #111827 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.about-kicker {
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #6b7280; /* gray-500 */
    margin-bottom: 0.75rem;
}

.about-accent-bar {
    width: 72px;
    height: 3px;
    background: linear-gradient(90deg, #111827, #9ca3af);
    border-radius: 999px;
    margin-top: 0.75rem;
    margin-bottom: 1.25rem;
}

.about-cta-row {
    margin-top: 1.75rem;
}

.about-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.5rem;
    background: #111827;
    color: #ffffff;
    font-size: 0.875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
    box-shadow: 0 0px 5px rgba(0,0,0,0.1);
}

.about-cta:hover {
    transform: translateY(-2px);
    background: #0b1220;
    box-shadow: 0 12px 28px rgba(0,0,0,0.22);
}

.about-image-wrapper { /* extend existing */
    border-radius: 1rem;
}

.about-image-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.35), rgba(255,255,255,0) 40%),
                linear-gradient(180deg, rgba(17,24,39,0.0), rgba(17,24,39,0.15));
    pointer-events: none;
}

.about-sticker {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    background: rgba(255,255,255,0.85);
    color: #111827;
    padding: 0.5rem 0.875rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    border: 1px solid rgba(156,163,175,0.4);
}

.about-sticker span { font-weight: 600; }

/* Subtle entrance animation */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.about-text, .about-image-wrapper { animation: fadeUp 600ms ease both; }
.about-image-wrapper { animation-delay: 80ms; }

.about-content {
    margin-top: 1.5rem; /* mt-6 */
    max-width: 680px; /* max-w-[680px] */
    color: #6b7280; /* text-gray-500 */
    font-weight: 400; /* font-normal instead of font-light */
    font-size: 1.125rem; /* text-sm */
    line-height: 1.8; /* leading-[1.8] */
    letter-spacing: 0.025em; /* tracking-wide */
}

@media (min-width: 768px) {
    .about-content { margin-top: 2rem; } /* md:mt-8 */
}

.about-content p + p { margin-top: 1.25rem; } /* space-y-5 */

.about-image-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #f3f4f6; /* bg-gray-100 */
}

.about-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* object-cover */
}

/* Desktop: make image column match text column height */
@media (min-width: 1024px) {
    .about-grid { align-items: stretch; }
    .about-image-col { height: 100%; }
    .about-image-wrapper { height: 100%; aspect-ratio: auto !important; }
}