/* 
    xs (extra small): 0px (applies to screens smaller than 576px)
    sm (small): 576px
    md (medium): 768px
    lg (large): 992px
    xl (extra large): 1200px
    xxl (extra extra large): 1400px 
*/

/* @import url("../../fonts/IranSanssX/fontiran.css"); */

:root {
    /* color pallet */
    --my-primary-color: #ff0000;
    --my-secondary-color: #0795f7;
    --my-secondary-color2: #2171b9;
    --my-third-color: #d5f9ff;
    --my-color-gray: #5a5a5a;
    --my-color-light: #fcfcfc;

    --color-blue-1: #4eb0fd;
    --color-blue-2: #3790b1;
    --color-blue-3: #d3f3ff;
    --color-blue-4: #a7e7ff;

    /* typography */
    --my-h1-text-size: 32px;
    --my-h2-text-size: 24px;
    --my-h3-text-size: 20px;
    --my-h4-text-size: 18px;
    --my-body-text-size: 16px;
    --my-small-text-size: 14px;
    --my-menu-text-size: 20px;

    /* special square card color's */
    --color-black: #323030;
    --color-white: #ffffff;
    --color-dark-white: #cbcbcb;
    --color-green: #016236;
    --color-orange: #faa527;
    --color-light-green: #789461;
    --color-light-orange: #ffbb64;

    --card-color-orange: #f75700;
    --card-color-red: #c60505;
    --card-color-green: #02a65f;
    --card-color-blue: #026cef;

    --card-color-dark-orange: #ec3305;
    --card-color-dark-red: #510101;
    --card-color-dark-green: #075327;
    --card-color-dark-blue: #063383;

    /* social icon color's */
    --telegram-color: #259bd7;
    --instagram-color: radial-gradient(
        circle at 30% 107%,
        #fdf497 0%,
        #fdf497 5%,
        #fd5949 45%,
        #d6249f 60%,
        #285aeb 90%
    );
    --facebook-color: #1e4bca;
    --world-color: #e40002;
    --twitter-color: #1da1f2;

    --color-red: #ff0000;
    --color-dark-white: #f5f5f5;
    --color-gray: #fbfbfb;
    --light-black: #777777;
    --color-blue: #3094ff;
    --color-dark-blue: #16203b;
}

/* ================================================== Element's ================================================== */
.my-button-primary {
    padding: 7px 30px;
    font-size: 24px;
    text-align: center;
    color: white;
    background-color: var(--my-secondary-color2);
    border-radius: 7px;
    margin: 15px 0;
    transition: 0.7s ease;
}

.my-button-primary:hover {
    background-color: var(--my-secondary-color);
    text-shadow: 0 0 0 black;
    transform: scale(0.9);
}

@media screen and (max-width: 768px) {
    .my-button-primary {
        font-size: 24px;
        padding: 7px 20px;
    }
}

.my-button-secondary {
    padding: 7px 15px;
    text-align: center;
    font-size: var(--my-body-text-size);
    color: white;
    background-color: var(--my-primary-color);
    border-radius: 7px;
    transition: .7s;
}

.my-button-secondary:hover{
    transform: scale(.9);
}