@font-face {
    font-family: "HPFormaDJROffice";
    src: url("/wcsstore/hpusstore/Treatment/cvPages/scuderiaferraripc/HPFormaDJROffice-Regular.woff2") format("woff2"),
         url("/wcsstore/hpusstore/fonts/office/HPFormaDJROffice-Regular.woff2") format("woff2"),
         url("https://www.hp.com/wcsstore/hpusstore/fonts/office/HPFormaDJROffice-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "HPFormaDJROffice";
    src: url("/wcsstore/hpusstore/Treatment/cvPages/scuderiaferraripc/HPFormaDJROffice-Medium.woff2") format("woff2"),
         url("/wcsstore/hpusstore/fonts/office/HPFormaDJROffice-Medium.woff2") format("woff2"),
         url("https://www.hp.com/wcsstore/hpusstore/fonts/office/HPFormaDJROffice-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "HPFormaDJROffice";
    src: url("/wcsstore/hpusstore/Treatment/cvPages/scuderiaferraripc/HPFormaDJROffice-Bold.woff2") format("woff2"),
         url("/wcsstore/hpusstore/fonts/office/HPFormaDJROffice-Bold.woff2") format("woff2"),
         url("https://www.hp.com/wcsstore/hpusstore/fonts/office/HPFormaDJROffice-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.value-prop-container{display: none;}

.fhpWrapper h1, .fhpWrapper h2, .fhpWrapper h3, .fhpWrapper h4{font-family: "HPFormaDJROffice", Arial, sans-serif !important;}
.fhpWrapper p, .fhpWrapper a, .fhpWrapper span, .fhpWrapper div{font-family: "HPFormaDJROffice", Arial, sans-serif !important;}
.fhpWrapper strong{font-family: "HPFormaDJROffice", Arial, sans-serif !important;}

.fhpWrapper{max-width: 1920px; margin: 0 auto; }
.fhpWrapper img{max-width: 100%; height: auto;}

.fhpLazyReveal{
    opacity: 0;
    transform: translate3d(0, 34px, 0);
    transition: opacity 0.86s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.86s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: var(--fhp-lazy-delay, 0ms);
    will-change: opacity, transform;
}

.fhpLazyReveal.fhpRevealFromLeft{
    transform: translate3d(-42px, 0, 0);
}

.fhpLazyReveal.fhpRevealFromRight{
    transform: translate3d(42px, 0, 0);
}

.fhpLazyReveal.fhpIsVisible{
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
    .fhpLazyReveal{
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.fhpWrapper .redTopbar{
    background: #a3151e;
    position: sticky;
    top: 0;
    z-index: 90;
}
.fhpWrapper .redTopbar .innerCont{max-width: 1336px; margin: 0 auto; padding: 1rem; display: flex; flex-direction: row; gap: 1rem; justify-content: space-between; align-items: center;}
.fhpWrapper .redTopbar .innerCont h1{color: #fff; font-size: clamp(1rem, 0.8854rem + 0.4367vw, 1.25rem); line-height: 1.2; font-weight: 400; margin: 0;}
.fhpWrapper .redTopbar .innerCont .callAndShop{display: flex; flex-direction: row; gap: 1rem; align-items: center;}
.fhpWrapper .redTopbar .innerCont .callAndShop p{color: #fff; font-size: 0.875rem; margin: 0; text-wrap-style: pretty;}
.fhpWrapper .redTopbar .innerCont .callAndShop .fhpShop{
    color: #111;
    font-size: 0.875rem;
    text-decoration: none;
    background: linear-gradient(120deg, #ffffff 0%, #f4f4f4 45%, #ffffff 100%);
    padding: 8px 20px 10px;
    border-radius: 999px;
    font-weight: 500;
    border: 1px solid rgba(0, 0, 0, 0.18);
    position: relative;
    overflow: hidden;
    transition: color 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
    isolation: isolate;
}
.fhpWrapper .redTopbar .innerCont .callAndShop .fhpShop::before{
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(108deg, #4b0004 0%, #7f0f15 30%, #c5111e 58%, #f3b34f 76%, #c5111e 100%);
    transform: translateX(-115%);
    transition: transform 0.45s cubic-bezier(0.2, 0.75, 0.24, 1);
    z-index: -2;
}
.fhpWrapper .redTopbar .innerCont .callAndShop .fhpShop::after{
    content: "";
    position: absolute;
    top: -170%;
    left: -45%;
    width: 45%;
    height: 420%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(148, 3, 3, 0.75) 50%, rgba(255, 255, 255, 0) 100%);
    transform: rotate(17deg) translateX(0);
    transition: transform 0.5s ease;
    pointer-events: none;
    z-index: -1;
}
.fhpWrapper .redTopbar .innerCont .callAndShop .fhpShop:hover,
.fhpWrapper .redTopbar .innerCont .callAndShop .fhpShop:focus-visible{
    color: #fff;
    border-color: rgba(255, 209, 123, 0.75);
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(255, 221, 158, 0.35), 0 7px 18px rgba(90, 0, 7, 0.45);
    outline: none;
}
.fhpWrapper .redTopbar .innerCont .callAndShop .fhpShop:hover::before,
.fhpWrapper .redTopbar .innerCont .callAndShop .fhpShop:focus-visible::before{
    transform: translateX(0);
}
.fhpWrapper .redTopbar .innerCont .callAndShop .fhpShop:hover::after,
.fhpWrapper .redTopbar .innerCont .callAndShop .fhpShop:focus-visible::after{
    transform: rotate(17deg) translateX(250%);
}
.fhpWrapper .redTopbar .innerCont .callAndShop .telLink img{display: none;}
.fhpWrapper .redTopbar .innerCont .callAndShop .telLink a{color: #fff; text-decoration: none;}
.fhpWrapper .redTopbar .innerCont .callAndShop .telLink a:hover{text-decoration: underline;}
.fhpWrapper .fhpHeroBanner{
    position: relative;
    width: 100%;
    overflow: hidden;
}
.fhpWrapper .fhpHeroBanner .fhpHero__video{width: 100%; height: auto; object-fit: cover; object-position: bottom; display: block;}
.fhpWrapper .fhpHeroBanner .fhpHeroCopy{width: 100%; overflow: hidden; background: url(/wcsstore/hpusstore/Treatment/cvPages/scuderiaferraripc/fhp-hero-tileBg.jpg) no-repeat bottom #000; background-size: cover; position: relative; z-index: 2;}
.fhpWrapper .fhpHeroBanner .fhpHeroCopy .centerCopy{max-width: 1130px; margin: 0 auto; padding: 1rem 2rem 0; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; z-index: 4;}
.fhpWrapper .fhpHeroBanner .fhpHeroCopy .centerCopy img{max-width: 100%; height: auto; margin: 1rem;}
.fhpWrapper .fhpHeroBanner .fhpHeroCopy .centerCopy h2{color: #fff; font-size: clamp(2rem, 1.4792rem + 2.0833vw, 3.25rem); line-height: 1.1; font-weight: 500; text-align: center; margin: 0; max-width: 900px;text-wrap-style: pretty;}
.fhpWrapper .fhpHeroBanner .fhpHeroCopy .centerCopy p{color: #fff; font-size: clamp(1rem, 0.8854rem + 0.4367vw, 1.25rem); line-height: 1.3; text-align: center; margin: 20px 0 10px;text-wrap-style: pretty;}

.fhpSliderSection{max-width: 1336px; margin: 0 auto; padding: 2rem 1rem;}
.fhpSliderSection .fhpSubHeadings{text-align: left;}
.fhpSliderSection .fhpSubHeadings h3{color: #111; font-size: clamp(1.75rem, 1.4061rem + 1.31vw, 2.5rem); line-height: 1.1; font-weight: 500; margin: 0;text-wrap-style: pretty;}
.fhpSliderSection .fhpSubHeadings p{color: #111; font-size: clamp(1rem, 0.8854rem + 0.4367vw, 1.25rem); line-height: 1.3; margin: 20px 0 0; max-width: 1100px;text-wrap-style: pretty;}

.fhpAirflowSection{
    max-width: 1920px;
    margin: 30px auto 0;
    position: relative;
    background: #112351;
    overflow: hidden;
}
.fhpAirflowBg{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    z-index: 0;
}
.fhpAirflowSection::after{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.38) 22%, rgba(0, 0, 0, 0.08) 48%, rgba(0, 8, 27, 0.3) 74%, rgba(2, 7, 20, 0.56) 100%);
}
.fhpAirflowInner{
    max-width: 1336px;
    margin: 0 auto 20px;
    padding: 20px;
    position: relative;
    z-index: 2;
}
.fhpAirflowSection .fhpSubHeadings{
    max-width: 1200px;
    margin: 20px auto 0 auto;
    text-align: center;
    color: #fff;
}
.fhpAirflowSection .fhpSubHeadings h3{
    font-size: clamp(1.75rem, 1.4061rem + 1.31vw, 2.5rem);
    line-height: 1.1;
    margin: 0;
    font-weight: 500;
    color: #fff;
}
.fhpAirflowSection .fhpSubHeadings p{
    font-size: clamp(1rem, 0.8854rem + 0.4367vw, 1.25rem);
    line-height: 1.36;
    margin: 0.7rem auto 0;
    color: #fff;
    text-wrap-style: pretty;
}

.fhpAirflowPlayBtn{
    position: absolute;
    left: 50%;
    top: 37.5%;
    transform: translate(-50%, -50%);
    width: clamp(84px, 5.9vw, 114px);
    height: clamp(84px, 5.9vw, 114px);
    border-radius: 999px;
    border: 1px solid #024ad8;
    background: #0249d8f3;
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 3;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    box-shadow: 0 10px 34px rgba(0, 89, 255, 0.42), 0 0 0 0 rgba(36, 133, 255, 0.55);
}


.fhpAirflowPlayIcon{
    width: 0;
    height: 0;
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    border-left: 25px solid #fff;
    margin-left: 6px;
}

.fhpAirflowTiles{
    position: relative;
    width: min(100%, 1295px);
    margin: clamp(360px, 37vw, 1000px) auto 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:50px;
    z-index: 2;
}
.fhpAirflowTile{
    color: #fff;
    max-width: 640px;
}
.fhpAirflowTile h4{
    margin: 0;
    font-size: clamp(1.55rem, 1.38rem + 0.62vw, 2rem);
    line-height: 1.15;
    font-weight: 500;
    color: #ccc;
}
.fhpAirflowTile p{
    margin: 0.62rem 0.62rem 2rem 0;
    color: #ccc;
    font-size: 16px;
    line-height: 1.38;
    text-wrap-style: pretty;
}
.fhpAirflowTile img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    margin-top: 40px;
}

@media (min-width: 1024px) {
.fhpAirflowPlayBtn:hover,
    .fhpAirflowPlayBtn:focus-visible{
        transform: translate(-50%, -50%) scale(1.06);
        /* box-shadow: 0 14px 32px rgba(0, 89, 255, 0.5), 0 0 0 8px rgba(36, 133, 255, 0.18); */
        outline: none;
    }

    .fhpAirflowTiles{
        align-items: stretch;
    }
    .fhpAirflowTile{
        display: flex;
        flex-direction: column;
    }
    .fhpAirflowTile img{
        margin-top: auto;
    }
}

.fhpAirflowModal{
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: calc(min(7vh, 55px) + 92px) 16px 24px;
    box-sizing: border-box;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
}
.fhpAirflowModal.is-open{
    opacity: 1;
    visibility: visible;
}
.fhpAirflowModalBackdrop{
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
}
.fhpAirflowModalDialog{
    position: relative;
    width: min(1000px, 100%);
    margin: 0;
    background: #000;
    border: 2px solid #a3151eee;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.fhpAirflowModalDialog video{
    width: 100%;
    display: block;
    max-height: 82vh;
}
.fhpAirflowModalClose{
    position: absolute;
    top: 0.55rem;
    right: 0.7rem;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

body.fhpModalOpen{
    overflow: hidden;
}
.fhpHideDesktop{display: none;}

.fhpMinimalDesignSection{
    max-width: 1336px;
    margin: 40px auto 0;
    padding: 0 1rem;
    display: flex; align-items: center; justify-content: center; flex-direction: row;
    gap: 20px;
}
.fhpMinimalDesignSection > div:first-child{width: 35%;}
.fhpMinimalDesignSection > div:last-child{width: 65%;}
.fhpMinimalDesignSection h3{
    font-size: clamp(1.75rem, 1.4061rem + 1.31vw, 2.5rem);
    line-height: 1.1;
    margin: 0 0 30px !important;
    font-weight: 500;
    color: #000;
}
.fhpMinimalDesignSection p{
    font-size: clamp(1rem, 0.8854rem + 0.4367vw, 1.25rem);
    line-height: 1.3;
    margin: 0 0 20px;
    color: #000;
}
.fhpMinimalDesignSection p span{font-style: italic;}

.fhpUnifiedExpressionSection{max-width: 1920px; margin: 40px auto 0; padding: 0; position: relative; background: #000; overflow: hidden;}
@media (min-width: 1024px) {
.fhpUnifiedExpressionSection .fhpunexpCopy{position: absolute; top:0; left:0; right: 0; bottom: 0; display: flex; flex-direction: row; }
.fhpUnifiedExpressionSection .fhpunexpCopy .fhpunexpCopyCenter{max-width: 1336px; margin: 0 auto; display: flex;justify-content: flex-end; align-items: center; padding: 0 1rem;}
.fhpUnifiedExpressionSection .fhpunexpCopy .fhpunexpCopyCenter > div{width: 40%; padding: 0 20px;}
}

.fhpUnifiedExpressionSection .fhpunexpCopy h3{
    font-size: clamp(1.75rem, 1.4061rem + 1.31vw, 2.5rem);
    line-height: 1.1;
    margin: 0 0 30px !important;
    font-weight: 500;
    color: #fff;
}
.fhpUnifiedExpressionSection .fhpunexpCopy p{
    font-size: clamp(1rem, 0.8854rem + 0.4367vw, 1.25rem);
    line-height: 1.3;
    margin: 0 0 20px;
    color: #fff;
}
.fhpUnifiedExpressionSection .fhpunexpCopy .fhpShopnow{
    color: #fff;
    font-size: 0.875rem;
    text-decoration: none;
    background: #a3151e;
    padding: 10px 30px 12px;
    border-radius: 999px;
    font-size: 18px;
    font-weight: 500;
    border: 1px solid rgba(163, 21, 30, 0.92);
    position: relative;
    overflow: hidden;
    transition: color 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
    isolation: isolate;
    display: inline-block;
    margin-top:10px;
}
.fhpUnifiedExpressionSection .fhpunexpCopy .fhpShopnow::before{
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(108deg, #4b0004 0%, #7f0f15 30%, #c5111e 58%, #f34f4f 76%, #c5111e 100%);
    transform: translateX(-115%);
    transition: transform 0.45s cubic-bezier(0.2, 0.75, 0.24, 1);
    z-index: -2;
}
.fhpUnifiedExpressionSection .fhpunexpCopy .fhpShopnow::after{
    content: "";
    position: absolute;
    top: -170%;
    left: -35%;
    width: 45%;
    height: 420%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 108, 108, 0.75) 50%, rgba(255, 255, 255, 0) 100%);
    transform: rotate(17deg) translateX(0);
    transition: transform 0.5s ease;
    pointer-events: none;
    z-index: -1;
}
.fhpUnifiedExpressionSection .fhpunexpCopy .fhpShopnow:hover,
.fhpUnifiedExpressionSection .fhpunexpCopy .fhpShopnow:focus-visible{
    color: #fff;
    border-color: rgba(255, 209, 123, 0.75);
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(255, 221, 158, 0.35), 0 7px 18px rgba(90, 0, 7, 0.45);
    outline: none;
}
.fhpUnifiedExpressionSection .fhpunexpCopy .fhpShopnow:hover::before,
.fhpUnifiedExpressionSection .fhpunexpCopy .fhpShopnow:focus-visible::before{
    transform: translateX(0);
}
.fhpUnifiedExpressionSection .fhpunexpCopy .fhpShopnow:hover::after,
.fhpUnifiedExpressionSection .fhpunexpCopy .fhpShopnow:focus-visible::after{
    transform: rotate(17deg) translateX(240%);
}
.fhpUnifiedExpressionSection .fhpunexpImg{object-fit: cover; height: auto; width: 100%; display: block;}


 @media (max-width: 1023px) {
.fhpUnifiedExpressionSection .fhpunexpCopy{padding: 20px 20px 0;}
.fhpUnifiedExpressionSection .fhpunexpCopy h3{margin-bottom: 20px !important;}

    .fhpHideDesktop{display: block;}
    .fhpHideMobile{display: none;}
    .fhpAirflowSection{
        background: #0c0d10;
    }
    .fhpAirflowBg{
        object-fit: cover;
        object-position: center top;
        height: auto;
    }
    .fhpAirflowInner{
        padding-top: 14px;
    }
    .fhpAirflowPlayBtn{
        top: auto;
        position: relative;
        left: auto;
        transform: none;
        width: 100%;
        height: auto;
        border-radius: unset;
        border: none;
        background: transparent;
        display: block;
        transition: none;
        box-shadow: unset;
        margin: 1.15rem auto;
        padding: 0;
    }
    .fhpAirflowPlayBtn img{max-width: 100%; border-radius: 8px;} 
    .fhpAirflowTiles{
        width: 100%;
        margin-top: 1.1rem;
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .fhpAirflowTile{max-width: 100%;}
    .fhpAirflowTile img{margin: 1.5rem 0 0;}
    .fhpAirflowTile h4{
        font-size: 1.8rem;
    }
    .fhpAirflowTile p{
        font-size: 0.9rem;
    }

    /* minimal design section adjustments  */
    .fhpMinimalDesignSection > div:first-child{width: 40%;}
    .fhpMinimalDesignSection > div:last-child{width: 60%;}

 }

@media (max-width: 768px) {

    .fhpWrapper .fhpHeroBanner .fhpHeroCopy .centerCopy h2 br{display: none;}
    .fhpWrapper .fhpHeroBanner .fhpHeroCopy .centerCopy{padding: 0.5rem 1rem 0;}
    .fhpWrapper .fhpHeroBanner .fhpHeroCopy .centerCopy img{height: 50px; margin: 0.7rem 1rem 0.7rem;}
    .fhpWrapper .redTopbar .innerCont .callAndShop .telLink img{display: block;}
    .fhpWrapper .redTopbar .innerCont .callAndShop .telLink span{display: none;}
    .fhpAirflowBg{
        object-fit: cover;
    }

    .fhpAirflowSection .fhpSubHeadings h3{
        font-size: 1.92rem;
    }
    .fhpAirflowSection .fhpSubHeadings p{
        font-size: 0.93rem;
        line-height: 1.42;
        max-width: 95%;
    }
    .fhpAirflowSection{
        margin-top: 0;
    }
    
    .fhpAirflowModal{
        padding: 13vh 3vw 2rem;
    }
    .fhpAirflowModalDialog{
        max-width: 94vw;
        margin: 0;
    }

    /* minimal design section adjustments  */
    .fhpMinimalDesignSection{margin-top: 2rem;}
    .fhpMinimalDesignSection{flex-direction: column; gap: 0;}
    .fhpMinimalDesignSection > div{width: 100%!important;}
    .fhpMinimalDesignSection h3{margin-bottom: 20px !important;}
    
}
@media (max-width: 450px) {
    .fhpWrapper .redTopbar .innerCont h1{max-width: 240px;}
    .fhpWrapper .redTopbar .innerCont{padding: 0.75rem; gap: 0.5rem;}

}


/* Slider specific styles */
 .fhpslider-container {
            position: relative;
            width: 100%;
            max-width: 1294px;
            height: 577px;
            background-color: #000;
            border-radius: 8px;
            overflow: hidden;
            margin-top: 40px;
        }

        .fhpslides {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .fhpslide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: flex-start;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.8s;
            z-index: 1;
        }

        .fhpslide.activeFslide {
            opacity: 1;
            visibility: visible;
            z-index: 2;
        }

        .fhpslide-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            z-index: 1;
        }


        /* Content Area Container */
        .fhpslide-content {
            position: relative;
            z-index: 3;
            color: #ffffff;
            width: 35%;
            padding-left: 40px;
            padding-right: 20px;
            margin-bottom: 20px; /* Leave space for controls below */
        }

        .fhpslide-content h4 {
            font-size: clamp(1.75rem, 1.4061rem + 1.31vw, 2.5rem); 
            line-height: 1.1; 
            font-weight: 500;
            margin: 40px 0 20px 0 !important;
            color: #ffffff;
        }

        .fhpslide-content p {
            font-size: 18px; 
            line-height: 1.4;
            color: #ffffff;
        }
        .fhpslide-content p strong {
            font-weight: 600;
        }

        /* Bottom Controls */
        .fhpslider-controls {
            position: absolute;
            bottom: 40px;
            left: 40px;
            z-index: 10;
            display: flex;
            gap: 12px;
            align-items: center;
        }

        .fhpnav-box {
            display: flex;
            align-items: center;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            padding: 0 10px;
            height: 35px;
            gap: 10px;
            background-color: rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
        }

        .fhpnav-btn {
            background: none;
            border: none;
            color: #ffffff;
            font-size: 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.7;
            transition: opacity 0.2s;
            padding: 0 4px;
        }

        .fhpnav-btn:hover {
            opacity: 1;
        }

        .fhpcounter {
            color: #959595;
            font-size: 0.7rem;
            font-weight: 400;
            min-width: 20px;
            height: 13px;
            text-align: center;
            user-select: none;
            opacity: 0.8;
        }

        .play2pause-btn {
            background: none;
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 8px;
            width: 35px;
            height: 35px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #959595;
            background-color: rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            opacity: 0.7;
            transition: opacity 0.2s;
        }

        .play2pause-btn:hover {
            opacity: 1;
        }

        .play2pause-btn svg {
            width: 16px;
            height: 16px;
            fill: currentColor;
        }

  
        @media (max-width: 1024px) {
            
            .fhpslider-container {
                height: 500px; 
                margin-top: 30px;
            }
            .fhpslide-content {
                width: 40%;
                padding-left: 30px;
            }
            .fhpslider-controls {
                left: 30px;
            }
            .fhpslide-content p {
            font-size: 16px; }
        }

        @media (max-width: 768px) {
            .fhpslider-container {
                height: 450px; 
            }

            .fhpslide {
                align-items: flex-start; 
            }

            .fhpslide-content {
                width: 100%;
                padding: 0 24px;
            }

            .fhpslide-content h4 {
                font-size: 1.5rem;
                margin:20px 0 12px !important;
            }

            .fhpslide-content p {
                font-size: 0.88rem;
                line-height: 1.5;
            }

            .fhpslider-controls {
                left: 24px;
                bottom: 24px;
                /* top: 24px; */
            }
        }