/* Services Intro Section - Bento Grid Design */

/* Dark Mode Overrides */
.dark-mode .services-bento-section {
    background-color: #0a0a0a !important;
}

.dark-mode .mesh-bg {
    background-image: 
        radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%), 
        radial-gradient(at 50% 0%, hsla(225,39%,30%,0.1) 0, transparent 50%), 
        radial-gradient(at 100% 0%, hsla(339,49%,30%,0.1) 0, transparent 50%);
}

.mesh-bg {
    background-image: 
        radial-gradient(at 0% 0%, hsla(253,16%,97%,1) 0, transparent 50%), 
        radial-gradient(at 50% 0%, hsla(225,39%,70%,0.2) 0, transparent 50%), 
        radial-gradient(at 100% 0%, hsla(339,49%,70%,0.2) 0, transparent 50%);
}

/* Gradient Text Animation */
@keyframes gradient-x {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.mesh-text-gradient {
    background-image: linear-gradient(to right, #4f46e5, #9333ea, #ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 200% 200%;
    animation: gradient-x 4s ease infinite;
}

/* Bento Cards specific */
.bento-card {
    position: relative;
    z-index: 1;
}

/* Keep the card contents hidden from overflowing */
.bento-card {
    overflow: hidden;
}

/* Custom shadow for bento cards to give them that premium "Apple" feel */
.services-bento-grid .shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.services-bento-grid .shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Dark mode shadow overrides */
.dark-mode .services-bento-grid .shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.dark-mode .services-bento-grid .shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

/* Responsive Grid adjustments */
@media (max-width: 1024px) {
    .services-bento-section{
    padding-top:127px;
}
}

@media (max-width: 768px) {
    .services-bento-grid {
        display: flex;
        flex-direction: column;
        height: auto !important;
    }
    
    .bento-card {
        min-height: 300px;
        width: 100%;
    }
}

/* Smooth transitions */
.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base Light Mode Styles & Custom Classes */
.services-bento-section { background-color: #fafafa; }
.expertise-badge { background-color: rgba(255,255,255,0.7); border-color: rgba(229,231,235,0.5); }
.expertise-badge-text { color: #1f2937; }
.main-heading { color: #111827; }
.main-desc { color: #4b5563; }

.btn-primary { background-color: #111827; color: #ffffff; }
.btn-secondary { background-color: #ffffff; border-color: #e5e7eb; color: #374151; }
.btn-secondary:hover { background-color: #f9fafb; border-color: #d1d5db; }

.bento-card-2 { 
    background-image: linear-gradient(to bottom right, #ffedd5, #ffe4e6);
    border-color: rgba(254, 215, 170, 0.5); 
}
.bento-card-2 .card-title { color: #111827; }
.bento-card-2 .card-desc { color: rgba(154, 52, 18, 0.7); }
.bento-card-2 .icon-box { background-color: rgba(255,255,255,0.6); }

.bento-card-3 { background-color: #ffffff; border-color: #f3f4f6; }
.bento-card-3 .icon-box { background-color: #eff6ff; color: #2563eb; }
.bento-card-3 .card-title { color: #111827; }
.bento-card-3 .card-desc { color: #6b7280; }

/* Dark Mode Overrides for Custom Classes */
.dark-mode .services-bento-section { background-color: #0a0a0a !important; }
.dark-mode .expertise-badge { background-color: rgba(31,41,55,0.5); border-color: rgba(55,65,81,0.5); }
.dark-mode .expertise-badge-text { color: #e5e7eb; }
.dark-mode .main-heading { color: #ffffff; }
.dark-mode .main-desc { color: #9ca3af; }

.dark-mode .btn-primary { background-color: #ffffff; color: #111827; }
.dark-mode .btn-secondary { background-color: #1f2937; border-color: #374151; color: #e5e7eb; }
.dark-mode .btn-secondary:hover { background-color: #374151; }

.dark-mode .bento-card-2 {
    background-image: linear-gradient(to bottom right, rgba(124, 45, 18, 0.4), rgba(136, 19, 55, 0.4));
    border-color: rgba(249, 115, 22, 0.2);
}
.dark-mode .bento-card-2 .card-title { color: #ffffff; }
.dark-mode .bento-card-2 .card-desc { color: rgba(254, 215, 170, 0.7); }
.dark-mode .bento-card-2 .icon-box { background-color: rgba(0,0,0,0.2); }

.dark-mode .bento-card-3 { background-color: #1f2937; border-color: #374151; }
.dark-mode .bento-card-3 .icon-box { background-color: rgba(30, 58, 138, 0.3); color: #60a5fa; }
.dark-mode .bento-card-3 .card-title { color: #ffffff; }
.dark-mode .bento-card-3 .card-desc { color: #9ca3af; }