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

html { scroll-behavior: smooth; }

@layer utilities {
    .bg-clean-blue { background-color: #0EA5E9; }
    .bg-clean-dark { background-color: #0F172A; }
    .bg-clean-light { background-color: #F8FAFC; }
    
    .text-clean-blue { color: #0EA5E9; }
    .text-clean-dark { color: #0F172A; }
    
    .border-clean-blue { border-color: #0EA5E9; }
    
    .font-sans-clean { font-family: 'Outfit', sans-serif; }
    
    .btn-clean {
        @apply inline-flex items-center justify-center bg-[#0EA5E9] text-white font-sans-clean font-semibold rounded-full py-3 px-8 hover:bg-[#0284C7] hover:shadow-lg hover:-translate-y-1 transition-all duration-300;
    }
    
    .btn-clean-outline {
        @apply inline-flex items-center justify-center border-2 border-[#0EA5E9] text-[#0EA5E9] font-sans-clean font-semibold rounded-full py-3 px-8 hover:bg-[#0EA5E9] hover:text-white transition-all duration-300;
    }
    
    .nav-link {
        @apply text-slate-600 hover:text-[#0EA5E9] font-sans-clean font-medium transition-colors duration-300;
    }
    .nav-link.active {
        @apply text-[#0EA5E9] font-semibold;
    }

    .service-card {
        @apply bg-white rounded-2xl p-8 shadow-sm hover:shadow-xl border border-slate-100 hover:border-[#0EA5E9]/30 transition-all duration-300 group;
    }
    
    .service-icon-box {
        @apply w-16 h-16 rounded-2xl bg-sky-50 text-[#0EA5E9] flex items-center justify-center text-3xl mb-6 group-hover:bg-[#0EA5E9] group-hover:text-white transition-colors duration-300;
    }
}

/* Custom Shape Divider */
.custom-shape-divider-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.custom-shape-divider-bottom svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 60px;
}

.custom-shape-divider-bottom .shape-fill {
    fill: #F8FAFC;
}