section,
.container,
.max-w-7xl,
.max-w-container-max {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
}
.material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
.bg-mesh {
            background-color: #f8f9ff;
            background-image: radial-gradient(at 0% 0%, rgba(211, 228, 254, 0.5) 0px, transparent 50%),
                              radial-gradient(at 100% 0%, rgba(255, 219, 202, 0.3) 0px, transparent 50%);
        }

.no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

.no-scrollbar::-webkit-scrollbar {
            display: none;
        }
/* =========================================
   GLOBAL STYLES
========================================= */

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    background: #ffffff;
}

/* =========================================
   MATERIAL ICONS
========================================= */

.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
}

/* =========================================
   HERO BACKGROUND
========================================= */

.bg-mesh {
    background-color: #f8f9ff;
    background-image:
        radial-gradient(at 0% 0%, rgba(211, 228, 254, 0.5) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(255, 219, 202, 0.3) 0px, transparent 50%);
}

/* =========================================
   HERO GLOW EFFECT
========================================= */

.hero-glow {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 350px;
    height: 350px;
    background: rgba(253, 118, 26, 0.18);
    filter: blur(80px);
    border-radius: 9999px;
    z-index: 0;
}

/* =========================================
   FLOATING IMAGE ANIMATION
========================================= */

@keyframes floatImage {

    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-12px);
    }

    100% {
        transform: translateY(0px);
    }

}

.hero-float {
    animation: floatImage 5s ease-in-out infinite;
}

/* =========================================
   FADE ANIMATION
========================================= */

.fade-up {
    opacity: 1;
    transform: translateY(0);
    transition: all 1s ease;
}

.fade-up.animate {
    opacity: 0;
    transform: translateY(40px);
}

.fade-up.show {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   HOVER CARD EFFECT
========================================= */

.hover-lift {
    transition: all 0.35s ease;
}

.hover-lift:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
}

/* =========================================
   BUTTON ANIMATION
========================================= */

.btn-animate {
    transition: all 0.3s ease;
}

.btn-animate:hover {
    transform: scale(1.05);
}

.btn-animate:active {
    transform: scale(0.96);
}

/* =========================================
   HIDE SCROLLBAR
========================================= */

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* =========================================
   FLOATING BUTTONS
========================================= */

.floating-btn {
    transition: all 0.3s ease;
}

.floating-btn:hover {
    transform: scale(1.1);
}

/* =========================================
   FORM INPUTS
========================================= */

form,
input,
select,
textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

input:focus,
textarea:focus,
select:focus {
    transform: translateY(-2px);
}

/* =========================================
   SECTION SPACING
========================================= */

section {
    position: relative;
    z-index: 1;
}

/* =========================================
   MOBILE OPTIMIZATION
========================================= */

/* =========================================
   MOBILE OPTIMIZATION
========================================= */

@media (max-width: 768px) {

    body {
        overflow-x: hidden;
    }

    h1 {
        font-size: clamp(2.2rem, 8vw, 4rem) !important;
        line-height: 1.1 !important;
        overflow-wrap: break-word;
    }

    h2 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }

    .hero-float {
        animation-duration: 4s;
    }

    .hero-glow {
        width: 180px;
        height: 180px;
        right: -40px;
    }

    .floating-btn {
        width: 55px !important;
        height: 55px !important;
        right: 10px !important;
    }

    section,
    .max-w-7xl,
    .max-w-container-max {
        padding-left: 16px;
        padding-right: 16px;
    }

    form,
    input,
    select,
    textarea {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    footer {
        text-align: center;
        padding: 20px 15px;
    }

    footer p {
        font-size: 13px;
        line-height: 1.6;
    }

    /* Reduce big mobile gaps between stacked sections */
    #benefits {
        padding-bottom: 2.5rem !important;
    }

    #testimonials {
        padding-top: 2.5rem !important;
    }

}
footer {
    text-align: left;
}

footer p {
    word-break: normal;
}

/* =========================================
   CALLBACK FORM SMALL PHONE FIX
========================================= */
@media (max-width: 420px) {
    #final-cta h3 {
        font-size: 1.85rem !important;
        line-height: 1.15 !important;
        letter-spacing: -0.01em;
    }

    #final-cta p {
        line-height: 1.6;
    }

    #callbackForm input,
    #callbackForm select,
    #callbackForm button {
        height: 52px !important;
        font-size: 15px !important;
    }

    #callbackForm textarea {
        min-height: 110px !important;
        font-size: 15px !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    #callbackForm .material-symbols-outlined {
        font-size: 20px !important;
    }
}

/* =========================================
   CALLBACK FORM SIZE TUNING
========================================= */
#callbackForm {
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
}

#callbackForm input,
#callbackForm select,
#callbackForm button {
    height: 46px !important;
    font-size: 14px !important;
}

#callbackForm textarea {
    min-height: 96px !important;
    font-size: 14px !important;
}

#callbackForm .space-y-4 > * + * {
    margin-top: 10px !important;
}

@media (max-width: 420px) {
    #callbackForm {
        max-width: 100%;
    }
}

.service-more{
    display:none;
}

.service-more.active{
    display:block;
}