.pattern-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle, rgba(0,0,0,0.05) 1px, transparent 1px);
    background-size: 1rem 1rem;
    z-index: -1;
}

.hero-shape-1 {
    position: absolute;
    top: 10%;
    right: 15%;
    width: 150px;
    height: 150px;
    background-color: var(--color-primary);
    border-radius: 50%;
    opacity: 0.2;
    filter: blur(50px);
    z-index: -1;
}

.hero-shape-2 {
    position: absolute;
    bottom: 10%;
    left: 15%;
    width: 120px;
    height: 120px;
    background-color: var(--color-primary);
    border-radius: 50%;
    opacity: 0.2;
    filter: blur(50px);
    z-index: -1;
}

.clip-circle {
    clip-path: circle(50% at 50% 50%);
}

.gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(2deg);
    }
}

@keyframes floatSlow {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-15px) rotate(-1deg);
    }
}

@keyframes floatFast {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-25px) rotate(1deg);
    }
}

.hero-shape-3 {
    position: absolute;
    top: 15%;
    right: -10%;
    width: 280px;
    height: 280px;
    background-color: var(--color-primary);
    border-radius: 50%;
    opacity: 0.8;
    z-index: -2;
    animation: float 4s ease-in-out infinite;
}

.hero-shape-4 {
    position: absolute;
    bottom: -50%;
    right: -5%;
    width: 350px;
    height: 350px;
    background-color: var(--color-primary);
    opacity: 0.3;
    border-radius: 50%;
    z-index: -2;
    animation: floatSlow 6s ease-in-out infinite;
}

.hero-shape-5 {
    position: absolute;
    bottom: 5%;
    left: 0%;
    width: 210px;
    height: 210px;
    background: repeating-linear-gradient(
        0deg,
        var(--color-subtle-light),
        var(--color-subtle-light) 4px,
        transparent 4px,
        transparent 8px
    );
    border-radius: 50%;
    z-index: -2;
    animation: floatFast 3s ease-in-out infinite;
}

/* Services Page Shapes - Same Design as Home Page */
.services-shape-1 {
    position: absolute;
    top: 10%;
    right: 15%;
    width: 150px;
    height: 150px;
    background-color: var(--color-primary);
    border-radius: 50%;
    opacity: 0.2;
    filter: blur(50px);
}

.services-shape-2 {
    position: absolute;
    bottom: 10%;
    left: 15%;
    width: 120px;
    height: 120px;
    background-color: var(--color-primary);
    border-radius: 50%;
    opacity: 0.2;
    filter: blur(50px);
}

.services-shape-3 {
    position: absolute;
    top: 15%;
    right: -10%;
    width: 280px;
    height: 280px;
    background-color: var(--color-primary);
    border-radius: 50%;
    opacity: 0.8;
    animation: float 4s ease-in-out infinite;
}

.services-shape-4 {
    position: absolute;
    bottom: -50%;
    right: -5%;
    width: 350px;
    height: 350px;
    background-color: var(--color-primary);
    opacity: 0.3;
    border-radius: 50%;
    animation: floatSlow 6s ease-in-out infinite;
}

.services-shape-5 {
    position: absolute;
    bottom: 5%;
    left: 0%;
    width: 210px;
    height: 210px;
    background: repeating-linear-gradient(
        0deg,
        var(--color-subtle-light),
        var(--color-subtle-light) 4px,
        transparent 4px,
        transparent 8px
    );
    border-radius: 50%;
    animation: floatFast 3s ease-in-out infinite;
}

/* Mobile Menu Styles */
#mobile-drawer {
    backdrop-filter: blur(4px);
}

#drawer-panel {
    box-shadow: -10px 0 25px -5px rgba(0, 0, 0, 0.1), -4px 0 6px -2px rgba(0, 0, 0, 0.05);
}

/* Smooth scroll behavior for anchor links */
html {
    scroll-behavior: smooth;
}

/* Prevent body scroll when drawer is open */
body.drawer-open {
    overflow: hidden;
}

/* Services Page Styles */
.service-list-item {
    transition: all 0.3s ease;
}

.service-list-item:hover {
    transform: translateX(8px);
}

.service-list-item .material-icons-outlined {
    transition: all 0.3s ease;
}

.service-list-item:hover .material-icons-outlined {
    transform: scale(1.1);
}

/* Plus Sign Animation */
.plus-divider {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

/* Service Section Background Patterns */
.services-bg-pattern {
    background-image: radial-gradient(circle, rgba(58, 123, 185, 0.1) 1px, transparent 1px);
    background-size: 2rem 2rem;
}