@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

html {
    scroll-behavior: smooth;
}

.hero-gradient {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/api/placeholder/1200/600') no-repeat center center;
    background-size: cover;
}

.service-card {
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0px -50px -12px rgba(0, 0, 0, 0.25);
}

.swiper-button-prev,
.swiper-button-next,
.swiper-pagination {
    display: none;
}

#sidebar.active {
    left: 0;
    transition: 0.3s;
}

#sidebar {
    transition: 0.3s;
}
a.nav-link.active{
    border-bottom: 3px solid #ff5722 ;
    color:#1e3a8a;
    transform: scale(1.05);
}


.shine-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    height: 100%;
    width: 50%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
    transform: skewX(-25deg);
    transition: left 1s ease-in-out;
}

.shine-btn:hover::before {
    left: 125%;
}

.footerSec{
    width: 100%;
    height: 60px;
    background-color: #1e3a8a;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

@media screen and (max-width: 500px) {
    #about{
        overflow-x: hidden;
    }
    
}