:root {
    --teal-1: #EEC047;
    --teal-2: #4DC0B5;
    --teal-3: #64D5CA;
    --teal-4: #A0F0ED;
    --blue-1: #08B1D0;
    --blue-2: #3490DC;
    --blue-3: #6CB2EB;
    --blue-4: #BCDEFA;
    --indigo-1: #5661B3;
    --indigo-2: #6574CD;
    --indigo-3: #7886D7;
    --indigo-4: #B2B7FF;
    --pink-1: #EB5286;
    --pink-2: #F66D9B;
    --pink-3: #FA7EA8;
    --pink-4: #FFBBCA;
}
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.font-12 { font-size: 12px; }
.font-13 { font-size: 13px; }
.font-14 { font-size: 14px; }
.font-15 { font-size: 15px; }
.font-16 { font-size: 16px; }
.font-17 { font-size: 17px; }
.font-18 { font-size: 18px; }
.font-19 { font-size: 19px; }
.font-20 { font-size: 20px; }
.font-21 { font-size: 21px; }
.font-22 { font-size: 22px; }
.font-23 { font-size: 23px; }
.font-24 { font-size: 24px; }
.font-25 { font-size: 25px; }
.font-26 { font-size: 26px; }
.font-27 { font-size: 27px; }
.font-28 { font-size: 28px; }
.font-29 { font-size: 29px; }
.font-30 { font-size: 30px; }
.font-31 { font-size: 31px; }
.font-32 { font-size: 32px; }
.font-33 { font-size: 33px; }
.font-34 { font-size: 34px; }
.font-35 { font-size: 35px; }
.font-36 { font-size: 36px; }
.font-37 { font-size: 37px; }
.font-38 { font-size: 38px; }
.font-39 { font-size: 39px; }
.font-40 { font-size: 40px; }
.font-41 { font-size: 41px; }
.font-42 { font-size: 42px; }
.font-43 { font-size: 43px; }
.font-44 { font-size: 44px; }
.font-45 { font-size: 45px; }
.font-46 { font-size: 46px; }
.font-47 { font-size: 47px; }
.font-48 { font-size: 48px; }
.font-49 { font-size: 49px; }
.font-50 { font-size: 50px; }
.font-51 { font-size: 51px; }
.font-52 { font-size: 52px; }
.font-53 { font-size: 53px; }
.font-54 { font-size: 54px; }
.font-55 { font-size: 55px; }
.font-56 { font-size: 56px; }
.font-57 { font-size: 57px; }
.font-58 { font-size: 58px; }
.font-59 { font-size: 59px; }
.font-60 { font-size: 60px; }
.font-61 { font-size: 61px; }
.font-62 { font-size: 62px; }
.font-63 { font-size: 63px; }
.font-64 { font-size: 64px; }
.font-65 { font-size: 65px; }
.font-66 { font-size: 66px; }
.font-67 { font-size: 67px; }
.font-68 { font-size: 68px; }
.font-69 { font-size: 69px; }
.font-70 { font-size: 70px; }
.font-71 { font-size: 71px; }
.font-72 { font-size: 72px; }
.font-73 { font-size: 73px; }
.font-74 { font-size: 74px; }
.font-75 { font-size: 75px; }
.font-76 { font-size: 76px; }
.font-77 { font-size: 77px; }
.font-78 { font-size: 78px; }
.font-79 { font-size: 79px; }
.font-80 { font-size: 80px; }


/* ==== Margin Utilities (12px - 80px) ==== */

/* Margin All */
.m-12 { margin: 12px; }
.m-13 { margin: 13px; }
.m-14 { margin: 14px; }
.m-15 { margin: 15px; }
.m-16 { margin: 16px; }
.m-17 { margin: 17px; }
.m-18 { margin: 18px; }
.m-19 { margin: 19px; }
.m-20 { margin: 20px; }
.m-21 { margin: 21px; }
.m-22 { margin: 22px; }
.m-23 { margin: 23px; }
.m-24 { margin: 24px; }
.m-25 { margin: 25px; }
.m-26 { margin: 26px; }
.m-27 { margin: 27px; }
.m-28 { margin: 28px; }
.m-29 { margin: 29px; }
.m-30 { margin: 30px; }
.m-31 { margin: 31px; }
.m-32 { margin: 32px; }
.m-33 { margin: 33px; }
.m-34 { margin: 34px; }
.m-35 { margin: 35px; }
.m-36 { margin: 36px; }
.m-37 { margin: 37px; }
.m-38 { margin: 38px; }
.m-39 { margin: 39px; }
.m-40 { margin: 40px; }
.m-41 { margin: 41px; }
.m-42 { margin: 42px; }
.m-43 { margin: 43px; }
.m-44 { margin: 44px; }
.m-45 { margin: 45px; }
.m-46 { margin: 46px; }
.m-47 { margin: 47px; }
.m-48 { margin: 48px; }
.m-49 { margin: 49px; }
.m-50 { margin: 50px; }
.m-51 { margin: 51px; }
.m-52 { margin: 52px; }
.m-53 { margin: 53px; }
.m-54 { margin: 54px; }
.m-55 { margin: 55px; }
.m-56 { margin: 56px; }
.m-57 { margin: 57px; }
.m-58 { margin: 58px; }
.m-59 { margin: 59px; }
.m-60 { margin: 60px; }
.m-61 { margin: 61px; }
.m-62 { margin: 62px; }
.m-63 { margin: 63px; }
.m-64 { margin: 64px; }
.m-65 { margin: 65px; }
.m-66 { margin: 66px; }
.m-67 { margin: 67px; }
.m-68 { margin: 68px; }
.m-69 { margin: 69px; }
.m-70 { margin: 70px; }
.m-71 { margin: 71px; }
.m-72 { margin: 72px; }
.m-73 { margin: 73px; }
.m-74 { margin: 74px; }
.m-75 { margin: 75px; }
.m-76 { margin: 76px; }
.m-77 { margin: 77px; }
.m-78 { margin: 78px; }
.m-79 { margin: 79px; }
.m-80 { margin: 80px; }

/* Margin Top */
.mt-12 { margin-top: 12px; }
.mt-13 { margin-top: 13px; }
.mt-14 { margin-top: 14px; }
.mt-15 { margin-top: 15px; }
.mt-16 { margin-top: 16px; }
.mt-17 { margin-top: 17px; }
.mt-18 { margin-top: 18px; }
.mt-19 { margin-top: 19px; }
.mt-20 { margin-top: 20px; }
.mt-21 { margin-top: 21px; }
.mt-22 { margin-top: 22px; }
.mt-23 { margin-top: 23px; }
.mt-24 { margin-top: 24px; }
.mt-25 { margin-top: 25px; }
.mt-26 { margin-top: 26px; }
.mt-27 { margin-top: 27px; }
.mt-28 { margin-top: 28px; }
.mt-29 { margin-top: 29px; }
.mt-30 { margin-top: 30px; }
.mt-31 { margin-top: 31px; }
.mt-32 { margin-top: 32px; }
.mt-33 { margin-top: 33px; }
.mt-34 { margin-top: 34px; }
.mt-35 { margin-top: 35px; }
.mt-36 { margin-top: 36px; }
.mt-37 { margin-top: 37px; }
.mt-38 { margin-top: 38px; }
.mt-39 { margin-top: 39px; }
.mt-40 { margin-top: 40px; }
.mt-41 { margin-top: 41px; }
.mt-42 { margin-top: 42px; }
.mt-43 { margin-top: 43px; }
.mt-44 { margin-top: 44px; }
.mt-45 { margin-top: 45px; }
.mt-46 { margin-top: 46px; }
.mt-47 { margin-top: 47px; }
.mt-48 { margin-top: 48px; }
.mt-49 { margin-top: 49px; }
.mt-50 { margin-top: 50px; }
.mt-51 { margin-top: 51px; }
.mt-52 { margin-top: 52px; }
.mt-53 { margin-top: 53px; }
.mt-54 { margin-top: 54px; }
.mt-55 { margin-top: 55px; }
.mt-56 { margin-top: 56px; }
.mt-57 { margin-top: 57px; }
.mt-58 { margin-top: 58px; }
.mt-59 { margin-top: 59px; }
.mt-60 { margin-top: 60px; }
.mt-61 { margin-top: 61px; }
.mt-62 { margin-top: 62px; }
.mt-63 { margin-top: 63px; }
.mt-64 { margin-top: 64px; }
.mt-65 { margin-top: 65px; }
.mt-66 { margin-top: 66px; }
.mt-67 { margin-top: 67px; }
.mt-68 { margin-top: 68px; }
.mt-69 { margin-top: 69px; }
.mt-70 { margin-top: 70px; }
.mt-71 { margin-top: 71px; }
.mt-72 { margin-top: 72px; }
.mt-73 { margin-top: 73px; }
.mt-74 { margin-top: 74px; }
.mt-75 { margin-top: 75px; }
.mt-76 { margin-top: 76px; }
.mt-77 { margin-top: 77px; }
.mt-78 { margin-top: 78px; }
.mt-79 { margin-top: 79px; }
.mt-80 { margin-top: 80px; }

/* Margin Bottom */
.mb-12 { margin-bottom: 12px; }
.mb-13 { margin-bottom: 13px; }
.mb-14 { margin-bottom: 14px; }
.mb-15 { margin-bottom: 15px; }
.mb-16 { margin-bottom: 16px; }
.mb-17 { margin-bottom: 17px; }
.mb-18 { margin-bottom: 18px; }
.mb-19 { margin-bottom: 19px; }
.mb-20 { margin-bottom: 20px; }
.mb-21 { margin-bottom: 21px; }
.mb-22 { margin-bottom: 22px; }
.mb-23 { margin-bottom: 23px; }
.mb-24 { margin-bottom: 24px; }
.mb-25 { margin-bottom: 25px; }
.mb-26 { margin-bottom: 26px; }
.mb-27 { margin-bottom: 27px; }
.mb-28 { margin-bottom: 28px; }
.mb-29 { margin-bottom: 29px; }
.mb-30 { margin-bottom: 30px; }
.mb-31 { margin-bottom: 31px; }
.mb-32 { margin-bottom: 32px; }
.mb-33 { margin-bottom: 33px; }
.mb-34 { margin-bottom: 34px; }
.mb-35 { margin-bottom: 35px; }
.mb-36 { margin-bottom: 36px; }
.mb-37 { margin-bottom: 37px; }
.mb-38 { margin-bottom: 38px; }
.mb-39 { margin-bottom: 39px; }
.mb-40 { margin-bottom: 40px; }
.mb-41 { margin-bottom: 41px; }
.mb-42 { margin-bottom: 42px; }
.mb-43 { margin-bottom: 43px; }
.mb-44 { margin-bottom: 44px; }
.mb-45 { margin-bottom: 45px; }
.mb-46 { margin-bottom: 46px; }
.mb-47 { margin-bottom: 47px; }
.mb-48 { margin-bottom: 48px; }
.mb-49 { margin-bottom: 49px; }
.mb-50 { margin-bottom: 50px; }
.mb-51 { margin-bottom: 51px; }
.mb-52 { margin-bottom: 52px; }
.mb-53 { margin-bottom: 53px; }
.mb-54 { margin-bottom: 54px; }
.mb-55 { margin-bottom: 55px; }
.mb-56 { margin-bottom: 56px; }
.mb-57 { margin-bottom: 57px; }
.mb-58 { margin-bottom: 58px; }
.mb-59 { margin-bottom: 59px; }
.mb-60 { margin-bottom: 60px; }
.mb-61 { margin-bottom: 61px; }
.mb-62 { margin-bottom: 62px; }
.mb-63 { margin-bottom: 63px; }
.mb-64 { margin-bottom: 64px; }
.mb-65 { margin-bottom: 65px; }
.mb-66 { margin-bottom: 66px; }
.mb-67 { margin-bottom: 67px; }
.mb-68 { margin-bottom: 68px; }
.mb-69 { margin-bottom: 69px; }
.mb-70 { margin-bottom: 70px; }
.mb-71 { margin-bottom: 71px; }
.mb-72 { margin-bottom: 72px; }
.mb-73 { margin-bottom: 73px; }
.mb-74 { margin-bottom: 74px; }
.mb-75 { margin-bottom: 75px; }
.mb-76 { margin-bottom: 76px; }
.mb-77 { margin-bottom: 77px; }
.mb-78 { margin-bottom: 78px; }
.mb-79 { margin-bottom: 79px; }
.mb-80 { margin-bottom: 80px; }

/* Margin Left */
.ml-12 { margin-left: 12px; }
.ml-13 { margin-left: 13px; }
.ml-14 { margin-left: 14px; }
.ml-15 { margin-left: 15px; }
.ml-16 { margin-left: 16px; }
.ml-17 { margin-left: 17px; }
.ml-18 { margin-left: 18px; }
.ml-19 { margin-left: 19px; }
.ml-20 { margin-left: 20px; }
.ml-21 { margin-left: 21px; }
.ml-22 { margin-left: 22px; }
.ml-23 { margin-left: 23px; }
.ml-24 { margin-left: 24px; }
.ml-25 { margin-left: 25px; }
.ml-26 { margin-left: 26px; }
.ml-27 { margin-left: 27px; }
.ml-28 { margin-left: 28px; }
.ml-29 { margin-left: 29px; }
.ml-30 { margin-left: 30px; }
.ml-31 { margin-left: 31px; }
.ml-32 { margin-left: 32px; }
.ml-33 { margin-left: 33px; }
.ml-34 { margin-left: 34px; }
.ml-35 { margin-left: 35px; }
.ml-36 { margin-left: 36px; }
.ml-37 { margin-left: 37px; }
.ml-38 { margin-left: 38px; }
.ml-39 { margin-left: 39px; }
.ml-40 { margin-left: 40px; }
.ml-41 { margin-left: 41px; }
.ml-42 { margin-left: 42px; }
.ml-43 { margin-left: 43px; }
.ml-44 { margin-left: 44px; }
.ml-45 { margin-left: 45px; }
.ml-46 { margin-left: 46px; }
.ml-47 { margin-left: 47px; }
.ml-48 { margin-left: 48px; }
.ml-49 { margin-left: 49px; }
.ml-50 { margin-left: 50px; }
.ml-51 { margin-left: 51px; }
.ml-52 { margin-left: 52px; }
.ml-53 { margin-left: 53px; }
.ml-54 { margin-left: 54px; }
.ml-55 { margin-left: 55px; }
.ml-56 { margin-left: 56px; }
.ml-57 { margin-left: 57px; }
.ml-58 { margin-left: 58px; }
.ml-59 { margin-left: 59px; }
.ml-60 { margin-left: 60px; }
.ml-61 { margin-left: 61px; }
.ml-62 { margin-left: 62px; }
.ml-63 { margin-left: 63px; }
.ml-64 { margin-left: 64px; }
.ml-65 { margin-left: 65px; }
.ml-66 { margin-left: 66px; }
.ml-67 { margin-left: 67px; }
.ml-68 { margin-left: 68px; }
.ml-69 { margin-left: 69px; }
.ml-70 { margin-left: 70px; }
.ml-71 { margin-left: 71px; }
.ml-72 { margin-left: 72px; }
.ml-73 { margin-left: 73px; }
.ml-74 { margin-left: 74px; }
.ml-75 { margin-left: 75px; }
.ml-76 { margin-left: 76px; }
.ml-77 { margin-left: 77px; }
.ml-78 { margin-left: 78px; }
.ml-79 { margin-left: 79px; }
.ml-80 { margin-left: 80px; }

/* Margin Right */
.mr-12 { margin-right: 12px; }
.mr-13 { margin-right: 13px; }
.mr-14 { margin-right: 14px; }
.mr-15 { margin-right: 15px; }
.mr-16 { margin-right: 16px; }
.mr-17 { margin-right: 17px; }
.mr-18 { margin-right: 18px; }
.mr-19 { margin-right: 19px; }
.mr-20 { margin-right: 20px; }
.mr-21 { margin-right: 21px; }
.mr-22 { margin-right: 22px; }
.mr-23 { margin-right: 23px; }
.mr-24 { margin-right: 24px; }
.mr-25 { margin-right: 25px; }
.mr-26 { margin-right: 26px; }
.mr-27 { margin-right: 27px; }
.mr-28 { margin-right: 28px; }
.mr-29 { margin-right: 29px; }
.mr-30 { margin-right: 30px; }
.mr-31 { margin-right: 31px; }
.mr-32 { margin-right: 32px; }
.mr-33 { margin-right: 33px; }
.mr-34 { margin-right: 34px; }
.mr-35 { margin-right: 35px; }
.mr-36 { margin-right: 36px; }
.mr-37 { margin-right: 37px; }
.mr-38 { margin-right: 38px; }
.mr-39 { margin-right: 39px; }
.mr-40 { margin-right: 40px; }
.mr-41 { margin-right: 41px; }
.mr-42 { margin-right: 42px; }
.mr-43 { margin-right: 43px; }
.mr-44 { margin-right: 44px; }
.mr-45 { margin-right: 45px; }
.mr-46 { margin-right: 46px; }
.mr-47 { margin-right: 47px; }
.mr-48 { margin-right: 48px; }
.mr-49 { margin-right: 49px; }
.mr-50 { margin-right: 50px; }
.mr-51 { margin-right: 51px; }
.mr-52 { margin-right: 52px; }
.mr-53 { margin-right: 53px; }
.mr-54 { margin-right: 54px; }
.mr-55 { margin-right: 55px; }
.mr-56 { margin-right: 56px; }
.mr-57 { margin-right: 57px; }
.mr-58 { margin-right: 58px; }
.mr-59 { margin-right: 59px; }
.mr-60 { margin-right: 60px; }
.mr-61 { margin-right: 61px; }
.mr-62 { margin-right: 62px; }
.mr-63 { margin-right: 63px; }
.mr-64 { margin-right: 64px; }
.mr-65 { margin-right: 65px; }
.mr-66 { margin-right: 66px; }
.mr-67 { margin-right: 67px; }
.mr-68 { margin-right: 68px; }
.mr-69 { margin-right: 69px; }
.mr-70 { margin-right: 70px; }
.mr-71 { margin-right: 71px; }
.mr-72 { margin-right: 72px; }
.mr-73 { margin-right: 73px; }
.mr-74 { margin-right: 74px; }
.mr-75 { margin-right: 75px; }
.mr-76 { margin-right: 76px; }
.mr-77 { margin-right: 77px; }
.mr-78 { margin-right: 78px; }
.mr-79 { margin-right: 79px; }
.mr-80 { margin-right: 80px; }

/* Margin X (Left + Right) */
.mx-12 { margin-left: 12px; margin-right: 12px; }
.mx-13 { margin-left: 13px; margin-right: 13px; }
.mx-14 { margin-left: 14px; margin-right: 14px; }
.mx-15 { margin-left: 15px; margin-right: 15px; }
.mx-16 { margin-left: 16px; margin-right: 16px; }
.mx-17 { margin-left: 17px; margin-right: 17px; }
.mx-18 { margin-left: 18px; margin-right: 18px; }
.mx-19 { margin-left: 19px; margin-right: 19px; }
.mx-20 { margin-left: 20px; margin-right: 20px; }
.mx-21 { margin-left: 21px; margin-right: 21px; }
.mx-22 { margin-left: 22px; margin-right: 22px; }
.mx-23 { margin-left: 23px; margin-right: 23px; }
.mx-24 { margin-left: 24px; margin-right: 24px; }
.mx-25 { margin-left: 25px; margin-right: 25px; }
.mx-26 { margin-left: 26px; margin-right: 26px; }
.mx-27 { margin-left: 27px; margin-right: 27px; }
.mx-28 { margin-left: 28px; margin-right: 28px; }
.mx-29 { margin-left: 29px; margin-right: 29px; }
.mx-30 { margin-left: 30px; margin-right: 30px; }
.mx-31 { margin-left: 31px; margin-right: 31px; }
.mx-32 { margin-left: 32px; margin-right: 32px; }
.mx-33 { margin-left: 33px; margin-right: 33px; }
.mx-34 { margin-left: 34px; margin-right: 34px; }
.mx-35 { margin-left: 35px; margin-right: 35px; }
.mx-36 { margin-left: 36px; margin-right: 36px; }
.mx-37 { margin-left: 37px; margin-right: 37px; }
.mx-38 { margin-left: 38px; margin-right: 38px; }
.mx-39 { margin-left: 39px; margin-right: 39px; }
.mx-40 { margin-left: 40px; margin-right: 40px; }
.mx-41 { margin-left: 41px; margin-right: 41px; }
.mx-42 { margin-left: 42px; margin-right: 42px; }
.mx-43 { margin-left: 43px; margin-right: 43px; }
.mx-44 { margin-left: 44px; margin-right: 44px; }
.mx-45 { margin-left: 45px; margin-right: 45px; }
.mx-46 { margin-left: 46px; margin-right: 46px; }
.mx-47 { margin-left: 47px; margin-right: 47px; }
.mx-48 { margin-left: 48px; margin-right: 48px; }
.mx-49 { margin-left: 49px; margin-right: 49px; }
.mx-50 { margin-left: 50px; margin-right: 50px; }
.mx-51 { margin-left: 51px; margin-right: 51px; }
.mx-52 { margin-left: 52px; margin-right: 52px; }
.mx-53 { margin-left: 53px; margin-right: 53px; }
.mx-54 { margin-left: 54px; margin-right: 54px; }
.mx-55 { margin-left: 55px; margin-right: 55px; }
.mx-56 { margin-left: 56px; margin-right: 56px; }
.mx-57 { margin-left: 57px; margin-right: 57px; }
.mx-58 { margin-left: 58px; margin-right: 58px; }
.mx-59 { margin-left: 59px; margin-right: 59px; }
.mx-60 { margin-left: 60px; margin-right: 60px; }
.mx-61 { margin-left: 61px; margin-right: 61px; }
.mx-62 { margin-left: 62px; margin-right: 62px; }
.mx-63 { margin-left: 63px; margin-right: 63px; }
.mx-64 { margin-left: 64px; margin-right: 64px; }
.mx-65 { margin-left: 65px; margin-right: 65px; }
.mx-66 { margin-left: 66px; margin-right: 66px; }
.mx-67 { margin-left: 67px; margin-right: 67px; }
.mx-68 { margin-left: 68px; margin-right: 68px; }
.mx-69 { margin-left: 69px; margin-right: 69px; }
.mx-70 { margin-left: 70px; margin-right: 70px; }
.mx-71 { margin-left: 71px; margin-right: 71px; }
.mx-72 { margin-left: 72px; margin-right: 72px; }
.mx-73 { margin-left: 73px; margin-right: 73px; }
.mx-74 { margin-left: 74px; margin-right: 74px; }
.mx-75 { margin-left: 75px; margin-right: 75px; }
.mx-76 { margin-left: 76px; margin-right: 76px; }
.mx-77 { margin-left: 77px; margin-right: 77px; }
.mx-78 { margin-left: 78px; margin-right: 78px; }
.mx-79 { margin-left: 79px; margin-right: 79px; }
.mx-80 { margin-left: 80px; margin-right: 80px; }

/* Margin Y (Top + Bottom) */
.my-12 { margin-top: 12px; margin-bottom: 12px; }
.my-13 { margin-top: 13px; margin-bottom: 13px; }
.my-14 { margin-top: 14px; margin-bottom: 14px; }
.my-15 { margin-top: 15px; margin-bottom: 15px; }
.my-16 { margin-top: 16px; margin-bottom: 16px; }
.my-17 { margin-top: 17px; margin-bottom: 17px; }
.my-18 { margin-top: 18px; margin-bottom: 18px; }
.my-19 { margin-top: 19px; margin-bottom: 19px; }
.my-20 { margin-top: 20px; margin-bottom: 20px; }
.my-21 { margin-top: 21px; margin-bottom: 21px; }
.my-22 { margin-top: 22px; margin-bottom: 22px; }
.my-23 { margin-top: 23px; margin-bottom: 23px; }
.my-24 { margin-top: 24px; margin-bottom: 24px; }
.my-25 { margin-top: 25px; margin-bottom: 25px; }
.my-26 { margin-top: 26px; margin-bottom: 26px; }
.my-27 { margin-top: 27px; margin-bottom: 27px; }
.my-28 { margin-top: 28px; margin-bottom: 28px; }
.my-29 { margin-top: 29px; margin-bottom: 29px; }
.my-30 { margin-top: 30px; margin-bottom: 30px; }
.my-31 { margin-top: 31px; margin-bottom: 31px; }
.my-32 { margin-top: 32px; margin-bottom: 32px; }
.my-33 { margin-top: 33px; margin-bottom: 33px; }
.my-34 { margin-top: 34px; margin-bottom: 34px; }
.my-35 { margin-top: 35px; margin-bottom: 35px; }
.my-36 { margin-top: 36px; margin-bottom: 36px; }
.my-37 { margin-top: 37px; margin-bottom: 37px; }
.my-38 { margin-top: 38px; margin-bottom: 38px; }
.my-39 { margin-top: 39px; margin-bottom: 39px; }
.my-40 { margin-top: 40px; margin-bottom: 40px; }
.my-41 { margin-top: 41px; margin-bottom: 41px; }
.my-42 { margin-top: 42px; margin-bottom: 42px; }
.my-43 { margin-top: 43px; margin-bottom: 43px; }
.my-44 { margin-top: 44px; margin-bottom: 44px; }
.my-45 { margin-top: 45px; margin-bottom: 45px; }
.my-46 { margin-top: 46px; margin-bottom: 46px; }
.my-47 { margin-top: 47px; margin-bottom: 47px; }
.my-48 { margin-top: 48px; margin-bottom: 48px; }
.my-49 { margin-top: 49px; margin-bottom: 49px; }
.my-50 { margin-top: 50px; margin-bottom: 50px; }
.my-51 { margin-top: 51px; margin-bottom: 51px; }
.my-52 { margin-top: 52px; margin-bottom: 52px; }
.my-53 { margin-top: 53px; margin-bottom: 53px; }
.my-54 { margin-top: 54px; margin-bottom: 54px; }
.my-55 { margin-top: 55px; margin-bottom: 55px; }
.my-56 { margin-top: 56px; margin-bottom: 56px; }
.my-57 { margin-top: 57px; margin-bottom: 57px; }
.my-58 { margin-top: 58px; margin-bottom: 58px; }
.my-59 { margin-top: 59px; margin-bottom: 59px; }
.my-60 { margin-top: 60px; margin-bottom: 60px; }
.my-61 { margin-top: 61px; margin-bottom: 61px; }
.my-62 { margin-top: 62px; margin-bottom: 62px; }
.my-63 { margin-top: 63px; margin-bottom: 63px; }
.my-64 { margin-top: 64px; margin-bottom: 64px; }
.my-65 { margin-top: 65px; margin-bottom: 65px; }
.my-66 { margin-top: 66px; margin-bottom: 66px; }
.my-67 { margin-top: 67px; margin-bottom: 67px; }
.my-68 { margin-top: 68px; margin-bottom: 68px; }
.my-69 { margin-top: 69px; margin-bottom: 69px; }
.my-70 { margin-top: 70px; margin-bottom: 70px; }
.my-71 { margin-top: 71px; margin-bottom: 71px; }
.my-72 { margin-top: 72px; margin-bottom: 72px; }
.my-73 { margin-top: 73px; margin-bottom: 73px; }
.my-74 { margin-top: 74px; margin-bottom: 74px; }
.my-75 { margin-top: 75px; margin-bottom: 75px; }
.my-76 { margin-top: 76px; margin-bottom: 76px; }
.my-77 { margin-top: 77px; margin-bottom: 77px; }
.my-78 { margin-top: 78px; margin-bottom: 78px; }
.my-79 { margin-top: 79px; margin-bottom: 79px; }
.my-80 { margin-top: 80px; margin-bottom: 80px; }
.color-blue-1{
    color: var(--blue-1);
}
html {
    font-size: 100%;
    color: #14151f;
}
body {
    background: linear-gradient(45deg, #02080c, #000000, #164365, #07253b, #051b29, #000000);
    height: 100%;
    width: 100%;
    min-height: 100vh;
    font-family: yekan;
    color:#fff;
}
body.mobile-open {
    overflow-y: hidden;
}
a {
    text-decoration: none;
    color: inherit;
}
h1 {
    font-size: 2.5rem;
    margin: 20px 0;
}
h2 {
    font-size: 2rem;
    margin: 16px 0;
}
p {
    font-size: 1.1rem;
    line-height: 1.6rem;
}
.rtl{
    direction: rtl;
}
.lrt{
    direction: ltr;
}
.container {
    max-width: 1024px;
    margin: 0 auto;
}
#bgCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: -5;
}
.mobile-nav {
    background: rgba(0, 0, 0, 0.95);
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    transform: translateY(100%);
    z-index: 999;
    transition: transform .3s ease-in .7s;
    display: none;
}
.mobile-open .mobile-nav {
    transform: translateY(0);
    transition: transform .3s ease-out;
}
.mobile-nav .links {
    width: 100%;
    height: 100%;
    text-align: center;
}
.mobile-nav .links a {
    position: absolute;
    left: 50%;
    color: #FFF;
    font-size: 1.5rem;
}
.mobile-nav .links a:nth-child(1) {
    transform: translate(-50%, 30vh);
}
.mobile-nav .links a:nth-child(2) {
    transform: translate(-50%, 40vh);
}
.mobile-nav .links a:nth-child(3) {
    transform: translate(-50%, 50vh);
}
.mobile-nav .links a:nth-child(4) {
    transform: translate(-50%, 60vh);
}
.mobile-nav .links a:nth-child(5) {
    transform: translate(-50%, 70vh);
}
nav {
    width: 100%;
    padding: 1rem;
    z-index: 9999;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
}
nav .container-fluid {
    display: flex;
    position: relative;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
}
nav .logo {
    width: 100px;
    font-size: 3rem;
    text-transform: lowercase;
}
nav .logo span:nth-child(1) {
    color: var(--teal-1);
}
nav .logo span:nth-child(2) {
    color: var(--blue-1);
}
nav .logo span:nth-child(3) {
    color: var(--indigo-1);
}
nav .logo span:nth-child(4) {
    color: var(--pink-1);
}
nav .burger {
    position: absolute;
    right: 0;
    top: calc(50% - 15px);
    height: 30px;
    width: 35px;
    cursor: pointer;
    display: none;
    z-index: 9999999999999;
}
nav .burger .menu, nav .burger .close {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
nav .burger .menu {
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
nav .burger .close {
    z-index: 1;
}
nav .burger .line {
    height: 3px;
    transform-origin: right;
    background: #ffffff;
}
nav .burger .close .line {
    transform-origin: center;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: all .4s ease-in;
}
.mobile-open nav .burger .close .line:first-child {
    transform: rotate(225deg);
    opacity: 1;
    transition: all .6s ease-in 1s;
}
.mobile-open nav .burger .close .line:last-child {
    transform: rotate(-225deg);
    opacity: 1;
    transition: all .6s ease-in 1s;
}
nav .burger .menu .line:nth-child(1) {
    background: var(--teal-1);
    animation: 1s ease-out backwards returnLine1;
}
.mobile-open .burger .menu .line:nth-child(1) {
    animation: .8s ease-in forwards moveLine1;
}
nav .burger .menu .line:nth-child(2) {
    background: var(--blue-1);
    animation: 1s ease-out .2s backwards returnLine2;
}
.mobile-open .burger .menu .line:nth-child(2) {
    animation: .8s ease-in .15s forwards moveLine2;
}
nav .burger .menu .line:nth-child(3) {
    background: var(--indigo-1);
    animation: 1s ease-out .4s backwards returnLine3;
}
.mobile-open .burger .menu .line:nth-child(3) {
    animation: .8s ease-in .3s forwards moveLine3;
}
nav .burger .menu .line:nth-child(4) {
    background: var(--pink-1);
    animation: 1s ease-out .6s backwards returnLine4;
}
.mobile-open .burger .menu .line:nth-child(4) {
    animation: .8s ease-in .45s forwards moveLine4;
}
.mobile-open .burger .menu .line:nth-child(5) {
    animation: .8s ease-in .45s forwards moveLine5;
}
.no-animation nav .burger .line {
    animation: none !important;
}
nav .links {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
}
.cta button{
    border-radius: 250px;
    padding: 10px 35px;
}
.link {
    margin-left: 25px;
    padding: 0 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    color: #fff;
    align-items: center;
}
.link a {
    display: block;
    font-size: 1.2rem;
    transition: color .25s ease-out;
}
.link .underline {
    width: 100%;
    display: flex;
    position: absolute;
    bottom: -10px;
}
.link .underline .part {
    height: 4px;
    flex: 0 0 25%;
    transform: translateY(20px);
    opacity: 0;
    transition: all .2s ease-out;
}
.underline .part:nth-child(1) {
    transition-delay: 0s;
}
.underline .part:nth-child(2) {
    transition-delay: .075s;
}
.underline .part:nth-child(3) {
    transition-delay: .15s;
}
.underline .part:nth-child(4) {
    transition-delay: .225s;
}
.underline .part:nth-child(5) {
    transition-delay: .300s;
}
.link.teal .part:nth-child(1) {
    background: var(--teal-1);
}
.link.teal .part:nth-child(2) {
    background: linear-gradient(90deg, var(--teal-1), var(--teal-2));
}
.link.teal .part:nth-child(3) {
    background: linear-gradient(90deg, var(--teal-2), var(--teal-3));
}
.link.teal .part:nth-child(4) {
    background: linear-gradient(90deg, var(--teal-3), var(--teal-4));
}
.link.teal .part:nth-child(5) {
    background: linear-gradient(90deg, var(--teal-3), var(--teal-4));
}
.link.blue .part:nth-child(1) {
    background: var(--blue-1);
}
.link.blue .part:nth-child(2) {
    background: linear-gradient(90deg, var(--blue-1), var(--blue-2));
}
.link.blue .part:nth-child(3) {
    background: linear-gradient(90deg, var(--blue-2), var(--blue-3));
}
.link.blue .part:nth-child(4) {
    background: linear-gradient(90deg, var(--blue-3), var(--blue-4));
}
.link.blue .part:nth-child(5) {
    background: linear-gradient(90deg, var(--blue-3), var(--blue-4));
}
.link.indigo .part:nth-child(1) {
    background: var(--indigo-1);
}
.link.indigo .part:nth-child(2) {
    background: linear-gradient(90deg, var(--indigo-1), var(--indigo-2));
}
.link.indigo .part:nth-child(3) {
    background: linear-gradient(90deg, var(--indigo-2), var(--indigo-3));
}
.link.indigo .part:nth-child(4) {
    background: linear-gradient(90deg, var(--indigo-3), var(--indigo-4));
}
.link.indigo .part:nth-child(5) {
    background: linear-gradient(90deg, var(--indigo-3), var(--indigo-4));
}
.link.pink .part:nth-child(1) {
    background: var(--pink-1);
}
.link.pink .part:nth-child(2) {
    background: linear-gradient(90deg, var(--pink-1), var(--pink-2));
}
.link.pink .part:nth-child(3) {
    background: linear-gradient(90deg, var(--pink-2), var(--pink-3));
}
.link.pink .part:nth-child(4) {
    background: linear-gradient(90deg, var(--pink-3), var(--pink-4));
}
.link.pink .part:nth-child(5) {
    background: linear-gradient(90deg, var(--pink-3), var(--pink-4));
}
.link.teal a:hover {
    color: var(--teal-1);
}
.link.blue a:hover {
    color: var(--blue-1);
}
.link.indigo a:hover {
    color: var(--indigo-1);
}
.link.pink a:hover {
    color: var(--pink-1);
}
.link a:hover + .underline .part {
    opacity: 1;
    transform: translateY(0);
}
@media (max-width: 768px) {
    .mobile-nav {
        display: initial;
    }
    nav {
        padding: 1rem 2rem;
    }
    nav .burger {
        display: flex;
    }
    nav .links {
        display: none;
    }
}
@keyframes moveLine1 {
    5% {
        transform: translate(0, -3px) rotate(0deg);
    }
    60% {
        transform: translate(-4vw, 27vh) rotate(180deg);
    }
    100% {
        transform: translate(calc(1rem - 50vw), calc(30vh + 4px)) rotate(180deg);
        background: var(--teal-3);
    }
}
@keyframes moveLine2 {
    5% {
        transform: translate(0, -3px) rotate(0deg);
    }
    60% {
        transform: translate(-4vw, 37vh) rotate(180deg);
    }
    100% {
        transform: translate(calc(1rem - 50vw), calc(40vh - 4px)) rotate(180deg);
        background: var(--blue-3);
    }
}
@keyframes moveLine3 {
    5% {
        transform: translate(0, -3px) rotate(0deg);
    }
    60% {
        transform: translate(-4vw, 47vh) rotate(180deg);
    }
    100% {
        transform: translate(calc(1rem - 50vw), calc(50vh - 12px)) rotate(180deg);
        background: var(--indigo-3);
    }
}
@keyframes moveLine4 {
    5% {
        transform: translate(0, -3px) rotate(0deg);
    }
    60% {
        transform: translate(-4vw, 57vh) rotate(180deg);
    }
    100% {
        transform: translate(calc(1rem - 50vw), calc(60vh - 20px)) rotate(180deg);
        background: var(--pink-3);
    }
}
@keyframes moveLine5 {
    5% {
        transform: translate(0, -3px) rotate(0deg);
    }
    60% {
        transform: translate(-4vw, 67vh) rotate(180deg);
    }
    100% {
        transform: translate(calc(1rem - 50vw), calc(70vh - 20px)) rotate(180deg);
        background: var(--pink-3);
    }
}
@keyframes returnLine1 {
    0% {
        transform: translate(calc(3.2rem - 50vw), calc(30vh + 4px));
        background: var(--teal-3);
    }
    5% {
        transform: translate(calc(3rem - 50vw), calc(30vh + 4px));
    }
    40% {
        transform: translate(20vw, calc(30vh + 4px));
    }
    60% {
        transform: translate(20vw, 0);
        background: var(--teal-1);
    }
}
@keyframes returnLine2 {
    0% {
        transform: translate(calc(3.2rem - 50vw), calc(40vh - 4px));
        background: var(--blue-3);
    }
    5% {
        transform: translate(calc(3rem - 50vw), calc(40vh - 4px));
    }
    40% {
        transform: translate(20vw, calc(40vh - 4px));
    }
    60% {
        transform: translate(20vw, 0);
        background: var(--blue-1);
    }
}
@keyframes returnLine3 {
    0% {
        transform: translate(calc(3.2rem - 50vw), calc(50vh - 12px));
        background: var(--indigo-3);
    }
    5% {
        transform: translate(calc(3rem - 50vw), calc(50vh - 12px));
    }
    40% {
        transform: translate(20vw, calc(50vh - 12px));
    }
    60% {
        transform: translate(20vw, 0);
        background: var(--indigo-1);
    }
}
@keyframes returnLine4 {
    0% {
        transform: translate(calc(3.2rem - 50vw), calc(60vh - 20px));
        background: var(--pink-3);
    }
    5% {
        transform: translate(calc(3rem - 50vw), calc(60vh - 20px));
    }
    40% {
        transform: translate(20vw, calc(60vh - 20px));
    }
    60% {
        transform: translate(20vw, 0);
        background: var(--pink-1);
    }
}

.hero{
    min-height: 85vh;
    display: flex;
    color: #fff;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.hero h1{
    font-weight: 900;
}
.purple-bg{
    /* background: linear-gradient(90deg, #00e4ff, #54088e); */
    background: url(../images/bg-purple.png);
    color: #fff;
    display: flex;
    align-items: center;
    border-radius: 25px;
    /* border: 1px solid #4f4f4f; */
    position: relative;
    padding: 56px;
    padding-right: 175px;
    text-align: justify;
    /* box-shadow: 0px 0px 14px 0px #06141c; */
    background-position: center;
    background-size: cover;
}
.purple-bg img{
    position: absolute;
    right: -130px;
    top: 20px;
}
.purple-bg p{
    margin: 0;
    font-size: 15px;
    line-height: 30px;
}

.box-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
}
.plan .box{
    border: 2px solid #08b1d0;
    border-radius: 10px;
    padding: 30px 40px;
    position: relative;
    padding-top: 50px;
    cursor: pointer;
}
.box img{
    position: absolute;
    top: -45px;
    right: 0;
    left: 0;
    margin: auto;
}
.box p{
    margin: 0;
}
.plan .box.active p{
    color:#ffc800;
}
.plan .box.active:before{
    content: "";
    width: 65%;
    height: 10px;
    display: inline-block;
    background: #26abf0;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    border-radius: 0;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    box-shadow: 0px 0px 16px 0px #ccc;
}

.form{
    border: 2px solid #5c5c5c;
    border-radius: 10px;
    padding: 30px 20px;
    position: relative;
}
.form .box-container{
    display: flex;
    gap: 20px; /* Adjust this value to your desired gap */
    flex-wrap: wrap; /* This will allow the boxes to wrap in smaller screens */
}
.form .box{
    border: 2px solid #5c5c5c;
    border-radius: 10px;
    padding: 15px 20px;
    position: relative;
    padding-top: 30px;
    direction: rtl;
    text-align: justify;
    /* Your existing styles for each box */
    flex: 1 1 30%; /* Flex-grow, flex-shrink, and flex-basis values */
}
.form .box.active{
    border: 2px solid #08b1d0;
}
.form .box .image-container{
    position: absolute;
    top: -15px;
    right: 0;
    left: 0;
    margin: auto;
    background: #26abf0;
    width: 145px;
    border-radius: 80px;
    font-size: 13px;
    padding: 6px 0;
    text-align: center;
}
.form .box .image-container img{
    position: static;
    width: 20px;
}
.form .title{
    font-size: 14px;
}
.form .sub-title{
    font-size: 14px;
}
.form .sub-title span{
}
.form .sub-title span:first-child{
    color: #2af72a;
}
.form.input{

}
.form.input .input-container{
    position: relative;
}
.form.input .input-container button{
    min-width: 150px;
    font-size: 14px;
    color: #fff;
    padding: 12px 2px;
}
.form.input input{
    width: 100%;
    padding: 10px;
    border: 2px solid #ccc;
    background: rgba(0, 0, 0, 0);
    border-radius: 12px;
}

.form.input input:focus{
    outline: 0;
}
.form.input p{

}
.form.input svg{
    position: absolute;
    left: 25px;
    top: 50px;
    border-right: 1px solid #b4b2b2;
    padding-right: 4px;
}
.form.input input::placeholder{
    color:#fff;
    font-size: 12px;
}
.form.input input{
    color:#fff;
}

.tabs{

}
.tabs li{
    padding: 0 15px;
}
.tabs li button{
    background-color: rgba(0, 0, 0, 0) !important;
    color: #fff !important;
    border: 0;
    position: relative;
    padding: 20px 0;
    border: 0 !important;
}
.tabs li button:hover{
    border: 0;
}
.tabs li button.active{
    background-color: rgba(0, 0, 0, 0) !important;
    color: #fff !important;
    border: 0;
}
.tabs li button.active::before{
    content: "";
    width: 65%;
    height: 10px;
    display: inline-block;
    background: #26abf0;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    border-radius: 0;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    box-shadow: 0px 0px 16px 0px #ccc;
}
.tabs .tab-content{
    direction: rtl;
    text-align: justify;
    line-height: 30px;
    padding: 35px 0;
    padding-left: 60px;
}
.nav-tabs {
    border-bottom: 2px solid #318ee9;
}
.image-container{
    position: relative;
}
.image-container img{
    display: none;
}
.image-container img.first{
    width: 100%;
}
.image-container img.second{
    position: absolute;
    right: -51px;
    height: 400px;
    /* object-fit: contain; */
    bottom: 0;
}


.accordion-header {
    margin: 0;
}
.accordion-item {
    margin-top: 20px;
    border-radius: 8px;
    overflow: hidden;
}
.accordion-button {
    color: var(--blue-1);
    background-color: #fff !important;
    box-shadow: 0 0 0 0 !important;
}
.accordion-button::after {
    position: absolute;
    left: 10px;
    font-weight: 900;
}


/* footer */

footer {
    display: flex;
    justify-content: space-evenly;
    color: #fff;
    border-radius: 15px;
    flex-direction: row;
    direction: rtl;
    align-items: flex-start;
}
ul{
    list-style:none;
}
.space{
    margin-top:10px;
}
.mt5{
    margin-top:0 !important;
}
footer h2{
    font-size: 16px;
    margin: 0;
    margin-bottom: 30px;
}
footer p{
    direction: rtl;
    text-align: justify;
    font-size: 14px;
}
footer ul li{
    direction: rtl;
    text-align: justify;
    font-size: 14px;
    line-height: 35px;
}
@media screen and (max-width:767px){
    footer{
        display:flex;
        flex-direction:column !important;
    }
}
/* end footer */