
/* ==========================================================
   PADIDAR HOME FAQ V1
   Glass industrial accordion
   ========================================================== */

body.home .pf-home-faq{
    position:relative;
    padding:76px 0 72px;
    overflow:hidden;

    background:
        radial-gradient(
            circle at 80% 10%,
            rgba(8,52,95,.08),
            transparent 28%
        ),
        radial-gradient(
            circle at 10% 85%,
            rgba(229,30,53,.055),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f5f8fb 100%
        );
}


/* decorative background */

body.home .pf-home-faq::before{
    content:"";

    position:absolute;

    width:470px;
    height:470px;

    top:-210px;
    right:-120px;

    border-radius:50%;

    border:
        70px solid
        rgba(8,53,94,.025);

    pointer-events:none;
}


/* ==========================================================
   GLASS SHELL
   ========================================================== */

body.home .pf-faq-shell{
    position:relative;
    z-index:1;

    display:grid;

    grid-template-columns:
        minmax(260px, .72fr)
        minmax(0, 2fr);

    gap:34px;

    padding:34px;

    border:
        1px solid rgba(255,255,255,.82);

    border-radius:24px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.78),
            rgba(239,245,249,.70)
        );

    box-shadow:
        0 22px 60px rgba(7,47,83,.09);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);
}


/* ==========================================================
   INTRO PANEL
   ========================================================== */

body.home .pf-faq-intro{
    position:relative;

    min-height:100%;

    padding:30px 27px;

    border-radius:19px;

    overflow:hidden;

    color:#fff;

    background:
        linear-gradient(
            150deg,
            #07365f 0%,
            #052845 100%
        );

    box-shadow:
        0 15px 36px rgba(4,40,71,.15);
}


body.home .pf-faq-intro::after{
    content:"?";

    position:absolute;

    left:-10px;
    bottom:-85px;

    color:
        rgba(255,255,255,.045);

    font-family:
        Arial,
        sans-serif;

    font-size:260px;
    font-weight:900;
    line-height:1;

    pointer-events:none;
}


body.home .pf-faq-kicker{
    position:relative;
    z-index:1;

    display:inline-flex;

    padding:6px 13px;

    margin-bottom:16px;

    border:
        1px solid
        rgba(255,255,255,.16);

    border-radius:999px;

    background:
        rgba(255,255,255,.08);

    color:#ff7887;

    font-size:14px;
    font-weight:900;
}


body.home .pf-faq-intro h2{
    position:relative;
    z-index:1;

    margin:
        0 0 10px !important;

    color:#fff !important;

    font-size:
        34px !important;

    line-height:
        1.45 !important;

    font-weight:
        900 !important;
}


body.home .pf-faq-intro h2::after{
    content:"";

    display:block;

    width:52px;
    height:3px;

    margin-top:12px;

    border-radius:20px;

    background:#e51e35;
}


body.home .pf-faq-intro > p{
    position:relative;
    z-index:1;

    margin:
        16px 0 30px !important;

    color:
        rgba(255,255,255,.76) !important;

    font-size:
        16px !important;

    line-height:
        2 !important;

    font-weight:
        600 !important;
}


/* bottom badge */

body.home .pf-faq-badge{
    position:relative;
    z-index:1;

    padding:17px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:13px;

    background:
        rgba(255,255,255,.065);
}


body.home .pf-faq-badge strong{
    display:block;

    margin-bottom:5px;

    color:#fff;

    font-size:16px;
    font-weight:900;
}


body.home .pf-faq-badge span{
    color:
        rgba(255,255,255,.67);

    font-size:13px;
    line-height:1.8;
}


/* ==========================================================
   ACCORDION
   ========================================================== */

body.home .pf-faq-list{
    display:flex;

    flex-direction:column;

    gap:11px;
}


body.home .pf-faq-item{
    position:relative;

    margin:0;

    overflow:hidden;

    border:
        1px solid
        rgba(7,52,95,.09);

    border-radius:14px;

    background:
        rgba(255,255,255,.77);

    box-shadow:
        0 5px 18px
        rgba(4,43,76,.035);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}


body.home .pf-faq-item:hover{
    border-color:
        rgba(229,30,53,.19);

    box-shadow:
        0 9px 24px
        rgba(4,43,76,.07);
}


body.home .pf-faq-item[open]{
    border-color:
        rgba(229,30,53,.22);

    background:
        rgba(255,255,255,.93);

    box-shadow:
        0 13px 30px
        rgba(4,43,76,.075);
}


/* SUMMARY */

body.home .pf-faq-item summary{
    position:relative;

    min-height:67px;

    padding:
        20px 58px 20px 22px;

    display:flex;

    align-items:center;

    color:#153e61;

    font-size:
        17px;

    line-height:
        1.8;

    font-weight:
        900;

    cursor:pointer;

    list-style:none;

    user-select:none;
}


body.home
.pf-faq-item summary::-webkit-details-marker{
    display:none;
}


/* plus circle */

body.home .pf-faq-item summary::before{
    content:"+";

    position:absolute;

    right:18px;
    top:50%;

    width:29px;
    height:29px;

    display:grid;

    place-items:center;

    transform:
        translateY(-50%);

    border-radius:9px;

    background:
        #eef3f7;

    color:#e51e35;

    font-family:
        Arial,
        sans-serif;

    font-size:20px;
    line-height:1;
    font-weight:400;

    transition:
        transform .22s ease,
        background .22s ease,
        color .22s ease;
}


body.home
.pf-faq-item[open]
summary::before{
    content:"−";

    background:#e51e35;

    color:#fff;
}


/* red active accent */

body.home
.pf-faq-item[open]
summary::after{
    content:"";

    position:absolute;

    right:0;
    top:15px;
    bottom:15px;

    width:3px;

    border-radius:5px;

    background:#e51e35;
}


/* ANSWER */

body.home .pf-faq-answer{
    padding:
        0 58px 20px 22px;
}


body.home .pf-faq-answer p{
    margin:0 !important;

    padding-top:17px;

    border-top:
        1px solid
        rgba(9,53,91,.075);

    color:#62778a !important;

    font-size:
        15px !important;

    line-height:
        2.05 !important;

    font-weight:
        600 !important;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media(max-width:980px){

    body.home .pf-faq-shell{
        grid-template-columns:
            1fr;

        gap:18px;

        padding:20px;
    }


    body.home .pf-faq-intro{
        min-height:auto;
    }

}


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

@media(max-width:600px){

    body.home .pf-home-faq{
        padding:
            46px 0 42px;
    }


    body.home .pf-faq-shell{
        padding:12px;

        border-radius:17px;
    }


    body.home .pf-faq-intro{
        padding:
            23px 19px;

        border-radius:14px;
    }


    body.home .pf-faq-intro h2{
        font-size:
            27px !important;
    }


    body.home .pf-faq-intro > p{
        margin-bottom:
            20px !important;

        font-size:
            14px !important;
    }


    body.home .pf-faq-list{
        gap:8px;
    }


    body.home .pf-faq-item{
        border-radius:11px;
    }


    body.home .pf-faq-item summary{
        min-height:62px;

        padding:
            16px 51px 16px 14px;

        font-size:
            15px;

        line-height:
            1.8;
    }


    body.home .pf-faq-item summary::before{
        right:13px;

        width:27px;
        height:27px;
    }


    body.home .pf-faq-answer{
        padding:
            0 51px 17px 14px;
    }


    body.home .pf-faq-answer p{
        font-size:
            13px !important;
    }

}

