/* Custom Utilities for smooth animations and glassmorphism */
.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.glass-dark {
    background: rgba(17, 24, 39, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, #1d4ed8, #3b82f6);
}

/* Base Styles */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img,
video,
canvas,
svg {
    max-width: 100%;
}

input,
textarea,
select,
button {
    max-width: 100%;
}

.container {
    width: 100%;
}

.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

@media (max-width: 767px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .text-5xl,
    .text-6xl {
        font-size: 2.35rem !important;
        line-height: 1.12 !important;
    }

    .text-4xl {
        font-size: 2rem !important;
        line-height: 1.18 !important;
    }

    .text-3xl {
        font-size: 1.65rem !important;
        line-height: 1.22 !important;
    }

    section {
        scroll-margin-top: 4rem;
    }

    .py-20 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .pt-32 {
        padding-top: 6rem !important;
    }

    .pb-32 {
        padding-bottom: 4.5rem !important;
    }

    .p-8,
    .md\:p-10,
    .md\:p-12 {
        padding: 1.5rem !important;
    }

    .gap-12,
    .gap-16 {
        gap: 2rem !important;
    }

    .h-\[400px\] {
        height: 14rem !important;
    }

    .rounded-2xl {
        border-radius: 1rem !important;
    }

    [data-aos] {
        transform: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .md\:text-6xl {
        font-size: 3.5rem !important;
        line-height: 1.08 !important;
    }

    .md\:text-5xl {
        font-size: 3rem !important;
        line-height: 1.12 !important;
    }
}