/* ========================================
   PAYON CLINIC
   Global Design System
======================================== */


/* ========================================
   Fonts
======================================== */

@font-face {
    font-family: "IranYekan";

    src:
        url("../fonts/iranyekan/IRANYekanWebRegular.woff")
        format("woff");

    font-weight:400;

    font-style:normal;

    font-display:swap;
}


@font-face {
    font-family: "IranYekan";

    src:
        url("../fonts/iranyekan/IRANYekanWebBold.woff")
        format("woff");

    font-weight:700;

    font-style:normal;

    font-display:swap;
}


@font-face {
    font-family: "IranYekan";

    src:
        url("../fonts/iranyekan/IRANYekanWebExtraBold.woff")
        format("woff");

    font-weight:800;

    font-style:normal;

    font-display:swap;
}



@font-face {

    font-family:"Vazir";

    src:
        url("../fonts/vazirmatn/Vazir.woff2")
        format("woff2");

    font-weight:400;

    font-style:normal;

    font-display:swap;

}


@font-face {

    font-family:"Vazir";

    src:
        url("../fonts/vazirmatn/Vazir-Medium.woff2")
        format("woff2");

    font-weight:500;

    font-style:normal;

    font-display:swap;

}


@font-face {

    font-family:"Vazir";

    src:
        url("../fonts/vazirmatn/Vazir-Bold.woff2")
        format("woff2");

    font-weight:700;

    font-style:normal;

    font-display:swap;

}




/* ========================================
   PAYON VARIABLES
======================================== */


:root {


    /* =====================
       Brand Colors
    ===================== */


    --payon-bg:
        #FCF8F1;


    --payon-white:
        #FFFFFF;



    --payon-primary:
        #C8D8C4;


    --payon-primary-hover:
        #AFC4AE;



    --payon-secondary:
        #E8DCCB;



    --payon-accent:
        #D8BFA8;



    /* =====================
       Text Colors
    ===================== */


    --payon-text:
        #4B463F;


    --payon-muted:
        #8A8176;


    --payon-light-text:
        #A39A90;



    /* =====================
       Borders
    ===================== */


    --payon-border:
        rgba(232,220,203,.55);


    --payon-border-light:
        rgba(75,70,63,.08);




    /* =====================
       Glass
    ===================== */


    --payon-glass:

        rgba(255,255,255,.75);




    /* =====================
       Shadows
    ===================== */


    --payon-shadow:

        0 25px 70px rgba(75,70,63,.08);



    --payon-shadow-hover:

        0 35px 90px rgba(75,70,63,.14);




    /* =====================
       Radius
    ===================== */


    --payon-radius-xl:
        40px;


    --payon-radius-lg:
        32px;


    --payon-radius-md:
        20px;


    --payon-radius-sm:
        14px;



}




/* ========================================
   Global Typography
======================================== */


html,
body,
button,
input,
textarea,
select {


    font-family:

        "IranYekan",
        "Vazir",
        Tahoma,
        Arial,
        sans-serif !important;


}




/* ========================================
   Reset
======================================== */


*,
*::before,
*::after {


    box-sizing:border-box;


}



html {


    scroll-behavior:smooth;


}



body {


    margin:0;


    background:

        var(--payon-bg);



    color:

        var(--payon-text);



    overflow-x:hidden;


}



img {


    max-width:100%;

    display:block;


}



a {


    text-decoration:none;

    color:inherit;


}



button {


    cursor:pointer;


}




/* ========================================
   Scrollbar
======================================== */


html {


    scrollbar-width:thin;

    scrollbar-color:

        var(--payon-primary)

        var(--payon-bg);

}




::-webkit-scrollbar {


    width:10px;


}



::-webkit-scrollbar-track {


    background:

        var(--payon-bg);


}



::-webkit-scrollbar-thumb {


    background:

        var(--payon-primary);


    border-radius:999px;


    border:

        2px solid var(--payon-bg);


}



::-webkit-scrollbar-thumb:hover {


    background:

        var(--payon-primary-hover);


}




/* ========================================
   Layout Utilities
======================================== */


.payon-container {


    width:

        min(1200px,90%);


    margin-inline:auto;


}



.payon-section {


    padding:

        100px 0;


}





/* ========================================
   Typography Utilities
======================================== */


.payon-title {


    color:

        var(--payon-text);



    font-size:

        clamp(32px,4vw,52px);



    font-weight:

        900;



    line-height:

        1.4;


}



.payon-description {


    color:

        var(--payon-muted);



    font-size:

        16px;



    line-height:

        2.2;


}





/* ========================================
   Cards
======================================== */


.payon-card {


    background:

        var(--payon-white);



    border:

        1px solid var(--payon-border);



    border-radius:

        var(--payon-radius-lg);



    box-shadow:

        var(--payon-shadow);



    transition:

        .35s ease;


}



.payon-card:hover {


    transform:

        translateY(-6px);



    box-shadow:

        var(--payon-shadow-hover);


}





/* ========================================
   Buttons
======================================== */


.payon-btn {


    display:inline-flex;


    align-items:center;


    justify-content:center;


    gap:10px;



    border-radius:

        999px;



    font-weight:

        800;



    transition:

        .3s ease;


}




.payon-btn-primary {


    background:

        var(--payon-primary);



    color:

        var(--payon-text);



    padding:

        15px 32px;


}



.payon-btn-primary:hover {


    background:

        var(--payon-primary-hover);



    transform:

        translateY(-3px);


}





.payon-btn-outline {


    background:

        var(--payon-white);



    border:

        1px solid var(--payon-border);



    color:

        var(--payon-text);



    padding:

        15px 32px;


}



.payon-btn-outline:hover {


    background:

        var(--payon-secondary);



    transform:

        translateY(-3px);


}




/* ========================================
   Glass Component
======================================== */


.payon-glass {


    background:

        var(--payon-glass);



    backdrop-filter:

        blur(20px);



    border:

        1px solid var(--payon-border);



}




/* ========================================
   Form Elements
======================================== */


.payon-input {


    width:100%;



    border:

        1px solid var(--payon-border);



    background:

        var(--payon-white);



    color:

        var(--payon-text);



    border-radius:

        var(--payon-radius-md);



    padding:

        14px 18px;



    outline:none;



    transition:.3s;


}



.payon-input:focus {


    border-color:

        var(--payon-primary);



    box-shadow:

        0 0 0 4px rgba(200,216,196,.25);


}




/* ========================================
   Selection
======================================== */


::selection {


    background:

        var(--payon-primary);



    color:

        var(--payon-text);


}