.elementor-kit-8{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-fc07054:#081B33;--e-global-color-733731a:#0D629B;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* =========================================================
   WAYPOINT IMPORTS
   FINAL STABLE HERO SLIDER + V-CUT CTA
   ---------------------------------------------------------
   - NO hero entrance animation
   - NO opacity based hiding
   - Single slide safe
   - Elementor Gap unlocked
   - Button hover animation ACTIVE
   - Button colors controlled from Elementor
   - Typography controlled from Elementor
   - Background controlled from Elementor
   ========================================================= */


/* =========================================================
   01. HERO ROOT
   ========================================================= */

.waypoint-hero-slider {
    --hero-height: clamp(700px, 86vh, 840px);
    --hero-side: clamp(34px, 4.2vw, 72px);

    position: relative !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
}


/* =========================================================
   02. ELEMENTOR NESTED CAROUSEL
   ========================================================= */

.waypoint-hero-slider .e-n-carousel,
.waypoint-hero-slider .swiper,
.waypoint-hero-slider .swiper-wrapper {
    width: 100% !important;
    max-width: none !important;

    min-height: var(--hero-height) !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   03. STABILITY RESET
   Single slide / delayed Swiper initialization safe
   ========================================================= */

.waypoint-hero-slider .swiper-slide,
.waypoint-hero-slider .waypoint-hero-slide,
.waypoint-hero-slider .waypoint-hero-layout,
.waypoint-hero-slider .waypoint-hero-content,
.waypoint-hero-slider .waypoint-hero-kicker,
.waypoint-hero-slider .waypoint-hero-heading,
.waypoint-hero-slider .waypoint-hero-desc,
.waypoint-hero-slider .waypoint-hero-buttons {
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
}


/*
   IMPORTANT:
   Hero content ko animate nahi karna.
   Button child ko transform karne diya jayega.
*/

.waypoint-hero-slider .waypoint-hero-layout,
.waypoint-hero-slider .waypoint-hero-content,
.waypoint-hero-slider .waypoint-hero-kicker,
.waypoint-hero-slider .waypoint-hero-heading,
.waypoint-hero-slider .waypoint-hero-desc,
.waypoint-hero-slider .waypoint-hero-buttons {
    transform: none !important;
}


/* =========================================================
   04. SWIPER SLIDE
   ========================================================= */

.waypoint-hero-slider .swiper-slide {
    min-height: var(--hero-height) !important;

    pointer-events: auto !important;
}


/* =========================================================
   05. INDIVIDUAL HERO SLIDE
   ========================================================= */

.waypoint-hero-slider .waypoint-hero-slide {
    position: relative !important;

    width: 100% !important;
    max-width: none !important;

    min-height: var(--hero-height) !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;

    pointer-events: auto !important;
}


/* Elementor overlay links/buttons ko block na kare */

.waypoint-hero-slider .elementor-background-overlay {
    pointer-events: none !important;
}


/* =========================================================
   06. MAIN HERO LAYOUT
   Elementor Gap unlocked
   ========================================================= */

.waypoint-hero-slider .waypoint-hero-layout {
    position: relative !important;

    z-index: 5 !important;

    width: 100% !important;
    max-width: none !important;

    min-height: var(--hero-height) !important;

    box-sizing: border-box !important;

    margin: 0 !important;

    padding:
        clamp(115px, 13vh, 145px)
        var(--hero-side)
        90px !important;

    display: flex !important;

    flex-direction: column !important;
    flex-wrap: nowrap !important;

    align-items: flex-start !important;
    justify-content: center !important;

    background: transparent !important;

    pointer-events: auto !important;

    /*
       NO gap property here.
       Elementor Layout > Gap se set karo.
    */
}


/* =========================================================
   07. CONTENT CONTAINER
   Elementor Gap unlocked
   ========================================================= */

.waypoint-hero-slider .waypoint-hero-content {
    position: relative !important;

    z-index: 20 !important;

    width: min(760px, 54vw) !important;
    max-width: 760px !important;

    min-width: 0 !important;
    min-height: 0 !important;

    padding: 0 !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: flex-start !important;
    justify-content: flex-start !important;

    background: transparent !important;

    pointer-events: auto !important;

    /*
       NO gap.
       NO forced child margins.
    */
}


/* =========================================================
   08. WELCOME TO KICKER
   ========================================================= */

.waypoint-hero-slider .waypoint-hero-kicker {
    position: relative !important;

    width: auto !important;

    padding-left: 62px !important;
}


/* White decorative line */

.waypoint-hero-slider .waypoint-hero-kicker::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 43px;
    height: 2px;

    transform:
        translateY(-50%) !important;

    background:
        #ffffff !important;

    border-radius: 20px;

    pointer-events: none !important;
}


/* =========================================================
   09. MAIN HEADING
   ========================================================= */

.waypoint-hero-slider .waypoint-hero-heading {
    width: 100% !important;
    max-width: 100% !important;
}


.waypoint-hero-slider
.waypoint-hero-heading
.elementor-heading-title {
    width: 100% !important;
    max-width: 100% !important;
}


/* =========================================================
   10. DESCRIPTION
   ========================================================= */

.waypoint-hero-slider .waypoint-hero-desc {
    width: min(650px, 100%) !important;
    max-width: 650px !important;
}


/* =========================================================
   11. BUTTONS CONTAINER
   Elementor Gap unlocked
   ========================================================= */

.waypoint-hero-slider .waypoint-hero-buttons {
    position: relative !important;

    z-index: 100 !important;

    width: auto !important;
    max-width: 100% !important;

    padding: 0 !important;

    display: flex !important;

    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: center !important;
    justify-content: flex-start !important;

    overflow: visible !important;

    background: transparent !important;

    pointer-events: auto !important;

    /*
       NO CSS gap.
       Elementor Layout > Gap use karo.
    */
}


.waypoint-hero-slider
.waypoint-hero-buttons > * {
    flex: 0 0 auto !important;

    width: auto !important;

    pointer-events: auto !important;
}


/* =========================================================
   12. FRONTEND BUTTON CLICK LAYER
   ========================================================= */

.waypoint-hero-slider
.waypoint-hero-buttons
.elementor-widget-button,

.waypoint-hero-slider
.waypoint-hero-buttons
.elementor-button-wrapper,

.waypoint-hero-slider
.waypoint-hero-buttons
a.elementor-button {
    position: relative !important;

    z-index: 9999 !important;

    pointer-events: auto !important;

    cursor: pointer !important;
}


/* Swiper should not treat CTA as drag target */

.waypoint-hero-slider
.swiper-no-swiping {
    touch-action: manipulation !important;
}


/* =========================================================
   13. REMOVE PAGINATION
   ========================================================= */

.waypoint-hero-slider .swiper-pagination,
.waypoint-hero-slider .elementor-swiper-pagination,
.waypoint-hero-slider .swiper-pagination-fraction,
.waypoint-hero-slider .swiper-pagination-bullets,
.waypoint-hero-slider .swiper-pagination-progressbar {
    display: none !important;
}


/* =========================================================
   14. CAROUSEL ARROWS
   ========================================================= */

.waypoint-hero-slider .elementor-swiper-button {
    position: absolute !important;

    top: auto !important;
    bottom: 24px !important;

    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;

    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    border:
        1px solid rgba(255,255,255,.45) !important;

    border-radius: 50% !important;

    background:
        rgba(3,31,54,.32) !important;

    color:
        #ffffff !important;

    cursor: pointer !important;

    pointer-events: auto !important;

    z-index: 500 !important;
}


/* Hide Elementor default artwork */

.waypoint-hero-slider
.elementor-swiper-button svg,

.waypoint-hero-slider
.elementor-swiper-button i {
    display: none !important;
}


/* =========================================================
   LEFT ARROW
   ========================================================= */

.waypoint-hero-slider
.elementor-swiper-button-prev {
    left:
        var(--hero-side) !important;

    right:
        auto !important;
}


.waypoint-hero-slider
.elementor-swiper-button-prev::before {
    content: "";

    width: 10px;
    height: 10px;

    border-left:
        2px solid currentColor;

    border-bottom:
        2px solid currentColor;

    transform:
        rotate(45deg);
}


/* =========================================================
   RIGHT ARROW
   ========================================================= */

.waypoint-hero-slider
.elementor-swiper-button-next {
    left:
        calc(
            var(--hero-side) + 64px
        ) !important;

    right:
        auto !important;
}


.waypoint-hero-slider
.elementor-swiper-button-next::before {
    content: "";

    width: 10px;
    height: 10px;

    border-top:
        2px solid currentColor;

    border-right:
        2px solid currentColor;

    transform:
        rotate(45deg);
}


/* Single slide disabled arrows */

.waypoint-hero-slider
.elementor-swiper-button.swiper-button-disabled {
    opacity: 0 !important;

    visibility: hidden !important;

    pointer-events: none !important;
}


/* =========================================================
   15. V-CUT BUTTON
   Class: waypoint-vcut-button
   ========================================================= */

.waypoint-vcut-button {
    --button-height: 46px;
    --button-arrow-width: 46px;
    --button-notch-size: 5px;
    --button-radius: 9px;

    position: relative !important;

    z-index: 9999 !important;

    width: auto !important;
    max-width: max-content !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    pointer-events: auto !important;
}


/* =========================================================
   16. BUTTON WIDGET
   ========================================================= */

.waypoint-vcut-button.elementor-widget-button {
    position: relative !important;

    z-index: 9999 !important;

    width: auto !important;
    max-width: max-content !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    pointer-events: auto !important;
}


/* =========================================================
   17. BUTTON WRAPPER
   ========================================================= */

.waypoint-vcut-button
.elementor-button-wrapper {
    position: relative !important;

    z-index: 9999 !important;

    display: inline-flex !important;

    width: auto !important;
    max-width: max-content !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    pointer-events: auto !important;

    filter:
        drop-shadow(
            0 7px 12px rgba(0,0,0,.13)
        );

    transition:
        filter .30s ease !important;
}


/* =========================================================
   18. ACTUAL V-CUT BUTTON
   Background / hover / text = Elementor
   ========================================================= */

.waypoint-vcut-button
.elementor-button {
    position: relative !important;

    z-index: 10000 !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: max-content !important;

    height:
        var(--button-height) !important;

    min-height:
        var(--button-height) !important;

    margin: 0 !important;
    padding: 0 !important;

    display: inline-flex !important;

    align-items: stretch !important;

    border: 0 !important;

    border-radius:
        var(--button-radius) !important;

    overflow: hidden !important;

    cursor: pointer !important;

    pointer-events: auto !important;

    touch-action: manipulation !important;


    /* ---------------------------------------------
       V CUT
       --------------------------------------------- */

    -webkit-clip-path:
        polygon(
            0 0,

            calc(
                100% -
                var(--button-arrow-width) -
                var(--button-notch-size)
            ) 0,

            calc(
                100% -
                var(--button-arrow-width)
            )
            var(--button-notch-size),

            calc(
                100% -
                var(--button-arrow-width) +
                var(--button-notch-size)
            ) 0,

            100% 0,

            100% 100%,

            calc(
                100% -
                var(--button-arrow-width) +
                var(--button-notch-size)
            ) 100%,

            calc(
                100% -
                var(--button-arrow-width)
            )
            calc(
                100% -
                var(--button-notch-size)
            ),

            calc(
                100% -
                var(--button-arrow-width) -
                var(--button-notch-size)
            ) 100%,

            0 100%
        ) !important;


    clip-path:
        polygon(
            0 0,

            calc(
                100% -
                var(--button-arrow-width) -
                var(--button-notch-size)
            ) 0,

            calc(
                100% -
                var(--button-arrow-width)
            )
            var(--button-notch-size),

            calc(
                100% -
                var(--button-arrow-width) +
                var(--button-notch-size)
            ) 0,

            100% 0,

            100% 100%,

            calc(
                100% -
                var(--button-arrow-width) +
                var(--button-notch-size)
            ) 100%,

            calc(
                100% -
                var(--button-arrow-width)
            )
            calc(
                100% -
                var(--button-notch-size)
            ),

            calc(
                100% -
                var(--button-arrow-width) -
                var(--button-notch-size)
            ) 100%,

            0 100%
        ) !important;


    /*
       IMPORTANT:
       Button animation ON.
       Hero animation OFF.
    */

    transition:
        transform .30s cubic-bezier(.2,.8,.2,1),
        filter .30s ease,
        box-shadow .30s ease !important;

    will-change:
        transform;
}


/* =========================================================
   19. INNER BUTTON GRID
   ========================================================= */

.waypoint-vcut-button
.elementor-button-content-wrapper {
    width: auto !important;

    height:
        var(--button-height) !important;

    min-height:
        var(--button-height) !important;

    display: grid !important;

    grid-template-columns:
        max-content
        var(--button-arrow-width) !important;

    align-items: stretch !important;

    column-gap: 0 !important;
}


/* =========================================================
   20. TEXT SECTION
   ========================================================= */

.waypoint-vcut-button
.elementor-button-text {
    order: 1 !important;

    min-width: 0 !important;

    padding:
        0 15px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    white-space: nowrap !important;
}


/* =========================================================
   21. ARROW COMPARTMENT
   ========================================================= */

.waypoint-vcut-button
.elementor-button-icon {
    order: 2 !important;

    position: relative !important;

    width:
        var(--button-arrow-width) !important;

    min-width:
        var(--button-arrow-width) !important;

    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    border:
        0 !important;
}


/* =========================================================
   22. CENTER DIVIDER
   currentColor = white/dark button dono par visible
   ========================================================= */

.waypoint-vcut-button
.elementor-button-icon::before {
    content: "";

    position: absolute;

    left: 0;
    top: 16%;

    width: 1px;
    height: 68%;

    background:
        currentColor;

    opacity:
        .22;

    pointer-events:
        none !important;
}


/* =========================================================
   23. DIAGONAL ARROW
   ========================================================= */

.waypoint-vcut-button
.elementor-button-icon i,

.waypoint-vcut-button
.elementor-button-icon svg {
    display: block !important;

    margin: 0 !important;

    transform:
        rotate(-45deg) !important;

    transform-origin:
        center center !important;

    transform-box:
        fill-box !important;

    transition:
        transform .30s cubic-bezier(.2,.8,.2,1) !important;

    will-change:
        transform;
}


.waypoint-vcut-button
.elementor-button-icon svg {
    width:
        15px !important;

    height:
        15px !important;
}


.waypoint-vcut-button
.elementor-button-icon svg,

.waypoint-vcut-button
.elementor-button-icon svg path {
    fill:
        currentColor !important;
}


/* =========================================================
   24. BUTTON HOVER
   Same feel as header Request Quote
   ========================================================= */

.waypoint-vcut-button:hover
.elementor-button,

.waypoint-vcut-button
.elementor-button:hover {
    transform:
        translateY(-4px) !important;
}


/* Arrow travels diagonally forward */

.waypoint-vcut-button:hover
.elementor-button-icon i,

.waypoint-vcut-button:hover
.elementor-button-icon svg,

.waypoint-vcut-button
.elementor-button:hover
.elementor-button-icon i,

.waypoint-vcut-button
.elementor-button:hover
.elementor-button-icon svg {
    transform:
        translate(4px, -4px)
        rotate(-45deg) !important;
}


/* Shadow lifts with button */

.waypoint-vcut-button:hover
.elementor-button-wrapper {
    filter:
        drop-shadow(
            0 11px 18px rgba(0,0,0,.18)
        );
}


/* =========================================================
   25. BUTTON CLICK
   ========================================================= */

.waypoint-vcut-button
.elementor-button:active {
    transform:
        translateY(-1px)
        scale(.985) !important;
}


/* =========================================================
   26. TABLET
   ========================================================= */

@media only screen and (max-width: 1024px) {

    .waypoint-hero-slider {
        --hero-height: 760px;
        --hero-side: 28px;
    }


    .waypoint-hero-slider
    .waypoint-hero-layout {
        padding:
            110px
            28px
            85px !important;
    }


    .waypoint-hero-slider
    .waypoint-hero-content {
        width:
            min(650px, 62vw) !important;
    }


    .waypoint-vcut-button {
        --button-height: 44px;
        --button-arrow-width: 44px;
        --button-notch-size: 5px;
        --button-radius: 8px;
    }


    .waypoint-vcut-button
    .elementor-button-text {
        padding:
            0 14px !important;
    }


    .waypoint-vcut-button
    .elementor-button-icon svg {
        width:
            14px !important;

        height:
            14px !important;
    }

}


/* =========================================================
   27. MOBILE
   ========================================================= */

@media only screen and (max-width: 767px) {

    .waypoint-hero-slider {
        --hero-height: 780px;
        --hero-side: 16px;
    }


    .waypoint-hero-slider
    .waypoint-hero-slide {
        background-position:
            63% center !important;
    }


    .waypoint-hero-slider
    .waypoint-hero-layout {
        min-height:
            var(--hero-height) !important;

        padding:
            95px
            16px
            70px !important;

        justify-content:
            flex-start !important;
    }


    .waypoint-hero-slider
    .waypoint-hero-content {
        width:
            100% !important;

        max-width:
            none !important;
    }


    .waypoint-hero-slider
    .waypoint-hero-kicker {
        padding-left:
            44px !important;
    }


    .waypoint-hero-slider
    .waypoint-hero-kicker::before {
        width:
            30px;
    }


    .waypoint-hero-slider
    .waypoint-hero-buttons {
        flex-wrap:
            wrap !important;

        /* Gap still Elementor controlled */
    }


    /* Mobile carousel arrows */

    .waypoint-hero-slider
    .elementor-swiper-button {
        bottom:
            15px !important;

        width:
            43px !important;

        min-width:
            43px !important;

        height:
            43px !important;

        min-height:
            43px !important;
    }


    .waypoint-hero-slider
    .elementor-swiper-button-prev {
        left:
            16px !important;
    }


    .waypoint-hero-slider
    .elementor-swiper-button-next {
        left:
            70px !important;

        right:
            auto !important;
    }


    /* Mobile CTA */

    .waypoint-vcut-button {
        --button-height: 40px;
        --button-arrow-width: 40px;
        --button-notch-size: 4px;
        --button-radius: 8px;
    }


    .waypoint-vcut-button
    .elementor-button-text {
        padding:
            0 12px !important;
    }


    .waypoint-vcut-button
    .elementor-button-icon svg {
        width:
            13px !important;

        height:
            13px !important;
    }

}


/* =========================================================
   28. SMALL MOBILE
   ========================================================= */

@media only screen and (max-width: 390px) {

    .waypoint-hero-slider {
        --hero-height:
            790px;
    }


    .waypoint-vcut-button {
        --button-height:
            38px;

        --button-arrow-width:
            38px;

        --button-notch-size:
            4px;

        --button-radius:
            7px;
    }


    .waypoint-vcut-button
    .elementor-button-text {
        padding:
            0 11px !important;
    }

}/* End custom CSS */