@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
body
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: var(--color-bg);;
    font-family: "Rubik", serif;

}
.card
{
    margin-bottom: 20px;
}

:root {

    /* For Temlate color */
    --color-border:#282627;
    --color-primary:#1c4771;
    --color-secondary:#017cc2;
    /* Basic Colors */
    --color-black: #000000;
    --color-white: #FFFFFF;
    --color-red: #FF0000;
    --color-green: #00FF00;
    --color-blue: #0000FF;
    --color-yellow: #FFFF00;
    --color-cyan: #00FFFF;
    --color-magenta: #FF00FF;
    --color-gray: #808080;
    --color-bg: #f7f7f7;
    --color-maroon: #800000;
    --color-olive: #808000;
    --color-navy: #000080;
    --color-purple: #800080;
    --color-teal: #008080;

    /* Extended Colors */
    --color-light-gray: #D3D3D3;
    --color-dark-gray: #A9A9A9;
    --color-light-red: #FF7F7F;
    --color-light-green: #7FFF7F;
    --color-light-blue: #7F7FFF;
    --color-light-yellow: #FFFFE0;
    --color-light-cyan: #E0FFFF;
    --color-light-magenta: #FF80FF;
    --color-coral: #FF7F50;
    --color-salmon: #FA8072;
    --color-orange: #FFA500;
    --color-goldenrod: #DAA520;
    --color-indigo: #4B0082;
    --color-violet: #EE82EE;
    --color-orchid: #DA70D6;

    /* Web Colors */
    --color-alice-blue: #F0F8FF;
    --color-antique-white: #FAEBD7;
    --color-aqua: #00FFFF;
    --color-azure: #F0FFFF;
    --color-beige: #F5F5DC;
    --color-bisque: #FFE4C4;
    --color-blanched-almond: #FFEBCD;
    --color-blue-violet: #8A2BE2;
    --color-burlywood: #DEB887;
    --color-cadet-blue: #5F9EA0;
    --color-chartreuse: #7FFF00;
    --color-chocolate: #D2691E;
    --color-coral: #FF7F50;
    --color-cornflower-blue: #6495ED;
    --color-cornsilk: #FFF8DC;
    --color-crimson: #DC143C;
    --color-dark-blue: #00008B;
    --color-dark-cyan: #008B8B;
    --color-dark-goldenrod: #B8860B;
    --color-dark-green: #006400;
    --color-dark-khaki: #BDB76B;
    --color-dark-magenta: #8B008B;
    --color-dark-olive-green: #556B2F;
    --color-dark-orange: #FF8C00;
    --color-dark-orchid: #9932CC;
    --color-dark-red: #8B0000;
    --color-dark-salmon: #E9967A;
    --color-dark-sea-green: #8FBC8F;
    --color-dark-slate-blue: #483D8B;
    --color-dark-slate-gray: #2F4F4F;
    --color-dark-turquoise: #00CED1;
    --color-dark-violet: #9400D3;
    --color-deep-pink: #FF1493;
    --color-deep-sky-blue: #00BFFF;
    --color-dim-gray: #696969;
    --color-dodger-blue: #1E90FF;
    --color-firebrick: #B22222;
    --color-floral-white: #FFFAF0;
    --color-forest-green: #228B22;
    --color-gainsboro: #DCDCDC;
    --color-ghost-white: #F8F8FF;
    --color-gold: #FFD700;
    --color-goldenrod: #DAA520;
    --color-green-yellow: #ADFF2F;
    --color-honeydew: #F0FFF0;
    --color-hot-pink: #FF69B4;
    --color-indian-red: #CD5C5C;
    --color-khaki: #F0E68C;
    --color-lavender: #E6E6FA;
    --color-lavender-blush: #FFF0F5;
    --color-lawn-green: #7CFC00;
    --color-lemon-chiffon: #FFFACD;
    --color-light-blue: #ADD8E6;
    --color-light-coral: #F08080;
    --color-light-goldenrod-yellow: #FAFAD2;
    --color-light-green: #90EE90;
    --color-light-pink: #FFB6C1;
    --color-light-salmon: #FFA07A;
    --color-light-sea-green: #20B2AA;
    --color-light-sky-blue: #87CEFA;
    --color-light-slate-gray: #778899;
    --color-light-steel-blue: #B0C4DE;
    --color-light-yellow: #FFFFE0;
    --color-lime: #00FF00;
    --color-lime-green: #32CD32;
    --color-linen: #FAF0E6;
    --color-medium-aquamarine: #66CDAA;
    --color-medium-blue: #0000CD;
    --color-medium-orchid: #BA55D3;
    --color-medium-purple: #9370DB;
    --color-medium-sea-green: #3CB371;
    --color-medium-slate-blue: #7B68EE;
    --color-medium-spring-green: #00FA9A;
    --color-medium-turquoise: #48D1CC;
    --color-medium-violet-red: #C71585;
    --color-midnight-blue: #191970;
    --color-mint-cream: #F5FFFA;
    --color-misty-rose: #FFE4E1;
    --color-moccasin: #FFE4B5;
    --color-navajo-white: #FFDEAD;
    --color-old-lace: #FDF5E6;
    --color-olive-drab: #6B8E23;
    --color-orange-red: #FF4500;
    --color-orchid: #DA70D6;
    --color-pale-goldenrod: #EEE8AA;
    --color-pale-green: #98FB98;
    --color-pale-turquoise: #AFEEEE;
    --color-pale-violet-red: #DB7093;
    --color-papaya-whip: #FFEFD5;
    --color-peach-puff: #FFDAB9;
    --color-peru: #CD853F;
    --color-pink: #FFC0CB;
    --color-plum: #DDA0DD;
    --color-powder-blue: #B0E0E6;
    --color-raspberry: #E30B5D;
    --color-royal-blue: #4169E1;
    --color-saddle-brown: #8B4513;
    --color-salmon: #FA8072;
    --color-sandy-brown: #F4A460;
    --color-sea-green: #2E8B57;
    --color-seashell: #FFF5EE;
    --color-sienna: #A0522D;
    --color-silver: #C0C0C0;
    --color-sky-blue: #87CEEB;
    --color-slate-blue: #6A5ACD;
    --color-slate-gray: #708090;
    --color-snow: #FFFAFA;
    --color-spring-green: #00FF7F;
    --color-steel-blue: #4682B4;
    --color-tan: #D2B48C;
    --color-thistle: #D8BFD8;
    --color-tomato: #FF6347;
    --color-turquoise: #40E0D0;
    --color-violet: #EE82EE;
    --color-wheat: #F5DEB3;
    --color-white-smoke: #F5F5F5;
    --color-yellow-green: #9ACD32;
}




/* Margin Utilities */

.m-1 { margin: 1px; } .m-2 { margin: 2px; } .m-3 { margin: 3px; } .m-4 { margin: 4px; } .m-5 { margin: 5px; } 
.m-6 { margin: 6px; } .m-7 { margin: 7px; } .m-8 { margin: 8px; } .m-9 { margin: 9px; } .m-10 { margin: 10px; } 
.m-11 { margin: 11px; } .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; } 
.m-81 { margin: 81px; } .m-82 { margin: 82px; } .m-83 { margin: 83px; } .m-84 { margin: 84px; } .m-85 { margin: 85px; }
.m-86 { margin: 86px; } .m-87 { margin: 87px; } .m-88 { margin: 88px; } .m-89 { margin: 89px; } .m-90 { margin: 90px; } 
.m-91 { margin: 91px; } .m-92 { margin: 92px; } .m-93 { margin: 93px; } .m-94 { margin: 94px; } .m-95 { margin: 95px; } 
.m-96 { margin: 96px; } .m-97 { margin: 97px; } .m-98 { margin: 98px; } .m-99 { margin: 99px; } .m-100 { margin: 100px; }

.mt-1 { margin-top: 1px; }
.mt-2 { margin-top: 2px; }
.mt-3 { margin-top: 3px; }
.mt-4 { margin-top: 4px; }
.mt-5 { margin-top: 5px; }
.mt-6 { margin-top: 6px; }
.mt-7 { margin-top: 7px; }
.mt-8 { margin-top: 8px; }
.mt-9 { margin-top: 9px; }
.mt-10 { margin-top: 10px; }
.mt-11 { margin-top: 11px; }
.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; }
.mt-81 { margin-top: 81px; }
.mt-82 { margin-top: 82px; }
.mt-83 { margin-top: 83px; }
.mt-84 { margin-top: 84px; }
.mt-85 { margin-top: 85px; }
.mt-86 { margin-top: 86px; }
.mt-87 { margin-top: 87px; }
.mt-88 { margin-top: 88px; }
.mt-89 { margin-top: 89px; }
.mt-90 { margin-top: 90px; }
.mt-91 { margin-top: 91px; }
.mt-92 { margin-top: 92px; }
.mt-93 { margin-top: 93px; }
.mt-94 { margin-top: 94px; }
.mt-95 { margin-top: 95px; }
.mt-96 { margin-top: 96px; }
.mt-97 { margin-top: 97px; }
.mt-98 { margin-top: 98px; }
.mt-99 { margin-top: 99px; }
.mt-100 { margin-top: 100px; }


/* Margin Right */
.mr-1 { margin-right: 1px; }
.mr-2 { margin-right: 2px; }
.mr-3 { margin-right: 3px; }
.mr-4 { margin-right: 4px; }
.mr-5 { margin-right: 5px; }
.mr-6 { margin-right: 6px; }
.mr-7 { margin-right: 7px; }
.mr-8 { margin-right: 8px; }
.mr-9 { margin-right: 9px; }
.mr-10 { margin-right: 10px; }
.mr-11 { margin-right: 11px; }
.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; }
.mr-81 { margin-right: 81px; }
.mr-82 { margin-right: 82px; }
.mr-83 { margin-right: 83px; }
.mr-84 { margin-right: 84px; }
.mr-85 { margin-right: 85px; }
.mr-86 { margin-right: 86px; }
.mr-87 { margin-right: 87px; }
.mr-88 { margin-right: 88px; }
.mr-89 { margin-right: 89px; }
.mr-90 { margin-right: 90px; }
.mr-91 { margin-right: 91px; }
.mr-92 { margin-right: 92px; }
.mr-93 { margin-right: 93px; }
.mr-94 { margin-right: 94px; }
.mr-95 { margin-right: 95px; }
.mr-96 { margin-right: 96px; }
.mr-97 { margin-right: 97px; }
.mr-98 { margin-right: 98px; }
.mr-99 { margin-right: 99px; }
.mr-100 { margin-right: 100px; }

/* Margin Left */
.ml-1 { margin-left: 1px; }
.ml-2 { margin-left: 2px; }
.ml-3 { margin-left: 3px; }
.ml-4 { margin-left: 4px; }
.ml-5 { margin-left: 5px; }
.ml-6 { margin-left: 6px; }
.ml-7 { margin-left: 7px; }
.ml-8 { margin-left: 8px; }
.ml-9 { margin-left: 9px; }
.ml-10 { margin-left: 10px; }
.ml-11 { margin-left: 11px; }
.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; }
.ml-81 { margin-left: 81px; }
.ml-82 { margin-left: 82px; }
.ml-83 { margin-left: 83px; }
.ml-84 { margin-left: 84px; }
.ml-85 { margin-left: 85px; }
.ml-86 { margin-left: 86px; }
.ml-87 { margin-left: 87px; }
.ml-88 { margin-left: 88px; }
.ml-89 { margin-left: 89px; }
.ml-90 { margin-left: 90px; }
.ml-91 { margin-left: 91px; }
.ml-92 { margin-left: 92px; }
.ml-93 { margin-left: 93px; }
.ml-94 { margin-left: 94px; }
.ml-95 { margin-left: 95px; }
.ml-96 { margin-left: 96px; }
.ml-97 { margin-left: 97px; }
.ml-98 { margin-left: 98px; }
.ml-99 { margin-left: 99px; }
.ml-100 { margin-left: 100px; }

/* Margin Bottom */
.mb-1 { margin-bottom: 1px; }
.mb-2 { margin-bottom: 2px; }
.mb-3 { margin-bottom: 3px; }
.mb-4 { margin-bottom: 4px; }
.mb-5 { margin-bottom: 5px; }
.mb-6 { margin-bottom: 6px; }
.mb-7 { margin-bottom: 7px; }
.mb-8 { margin-bottom: 8px; }
.mb-9 { margin-bottom: 9px; }
.mb-10 { margin-bottom: 10px; }
.mb-11 { margin-bottom: 11px; }
.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; }
.mb-81 { margin-bottom: 81px; }
.mb-82 { margin-bottom: 82px; }
.mb-83 { margin-bottom: 83px; }
.mb-84 { margin-bottom: 84px; }
.mb-85 { margin-bottom: 85px; }
.mb-86 { margin-bottom: 86px; }
.mb-87 { margin-bottom: 87px; }
.mb-88 { margin-bottom: 88px; }
.mb-89 { margin-bottom: 89px; }
.mb-90 { margin-bottom: 90px; }
.mb-91 { margin-bottom: 91px; }
.mb-92 { margin-bottom: 92px; }
.mb-93 { margin-bottom: 93px; }
.mb-94 { margin-bottom: 94px; }
.mb-95 { margin-bottom: 95px; }
.mb-96 { margin-bottom: 96px; }
.mb-97 { margin-bottom: 97px; }
.mb-98 { margin-bottom: 98px; }
.mb-99 { margin-bottom: 99px; }
.mb-100 { margin-bottom: 100px; }

/* Margin Y (Vertical) */
.my-1 { margin-top: 1px; margin-bottom: 1px; }
.my-2 { margin-top: 2px; margin-bottom: 2px; }
.my-3 { margin-top: 3px; margin-bottom: 3px; }
.my-4 { margin-top: 4px; margin-bottom: 4px; }
.my-5 { margin-top: 5px; margin-bottom: 5px; }
.my-6 { margin-top: 6px; margin-bottom: 6px; }
.my-7 { margin-top: 7px; margin-bottom: 7px; }
.my-8 { margin-top: 8px; margin-bottom: 8px; }
.my-9 { margin-top: 9px; margin-bottom: 9px; }
.my-10 { margin-top: 10px; margin-bottom: 10px; }
.my-11 { margin-top: 11px; margin-bottom: 11px; }
.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; }
.my-81 { margin-top: 81px; margin-bottom: 81px; }
.my-82 { margin-top: 82px; margin-bottom: 82px; }
.my-83 { margin-top: 83px; margin-bottom: 83px; }
.my-84 { margin-top: 84px; margin-bottom: 84px; }
.my-85 { margin-top: 85px; margin-bottom: 85px; }
.my-86 { margin-top: 86px; margin-bottom: 86px; }
.my-87 { margin-top: 87px; margin-bottom: 87px; }
.my-88 { margin-top: 88px; margin-bottom: 88px; }
.my-89 { margin-top: 89px; margin-bottom: 89px; }
.my-90 { margin-top: 90px; margin-bottom: 90px; }
.my-91 { margin-top: 91px; margin-bottom: 91px; }
.my-92 { margin-top: 92px; margin-bottom: 92px; }
.my-93 { margin-top: 93px; margin-bottom: 93px; }
.my-94 { margin-top: 94px; margin-bottom: 94px; }
.my-95 { margin-top: 95px; margin-bottom: 95px; }
.my-96 { margin-top: 96px; margin-bottom: 96px; }
.my-97 { margin-top: 97px; margin-bottom: 97px; }
.my-98 { margin-top: 98px; margin-bottom: 98px; }
.my-99 { margin-top: 99px; margin-bottom: 99px; }
.my-100 { margin-top: 100px; margin-bottom: 100px; }

/* Margin X (Horizontal) */
.mx-1 { margin-left: 1px; margin-right: 1px; }
.mx-2 { margin-left: 2px; margin-right: 2px; }
.mx-3 { margin-left: 3px; margin-right: 3px; }
.mx-4 { margin-left: 4px; margin-right: 4px; }
.mx-5 { margin-left: 5px; margin-right: 5px; }
.mx-6 { margin-left: 6px; margin-right: 6px; }
.mx-7 { margin-left: 7px; margin-right: 7px; }
.mx-8 { margin-left: 8px; margin-right: 8px; }
.mx-9 { margin-left: 9px; margin-right: 9px; }
.mx-10 { margin-left: 10px; margin-right: 10px; }
.mx-11 { margin-left: 11px; margin-right: 11px; }
.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; }
.mx-81 { margin-left: 81px; margin-right: 81px; }
.mx-82 { margin-left: 82px; margin-right: 82px; }
.mx-83 { margin-left: 83px; margin-right: 83px; }
.mx-84 { margin-left: 84px; margin-right: 84px; }
.mx-85 { margin-left: 85px; margin-right: 85px; }
.mx-86 { margin-left: 86px; margin-right: 86px; }
.mx-87 { margin-left: 87px; margin-right: 87px; }
.mx-88 { margin-left: 88px; margin-right: 88px; }
.mx-89 { margin-left: 89px; margin-right: 89px; }
.mx-90 { margin-left: 90px; margin-right: 90px; }
.mx-91 { margin-left: 91px; margin-right: 91px; }
.mx-92 { margin-left: 92px; margin-right: 92px; }
.mx-93 { margin-left: 93px; margin-right: 93px; }
.mx-94 { margin-left: 94px; margin-right: 94px; }
.mx-95 { margin-left: 95px; margin-right: 95px; }
.mx-96 { margin-left: 96px; margin-right: 96px; }
.mx-97 { margin-left: 97px; margin-right: 97px; }
.mx-98 { margin-left: 98px; margin-right: 98px; }
.mx-99 { margin-left: 99px; margin-right: 99px; }
.mx-100 { margin-left: 100px; margin-right: 100px; }

/* Padding Y (Vertical) */
.py-1 { padding-top: 1px; padding-bottom: 1px; }
.py-2 { padding-top: 2px; padding-bottom: 2px; }
.py-3 { padding-top: 3px; padding-bottom: 3px; }
.py-4 { padding-top: 4px; padding-bottom: 4px; }
.py-5 { padding-top: 5px; padding-bottom: 5px; }
.py-6 { padding-top: 6px; padding-bottom: 6px; }
.py-7 { padding-top: 7px; padding-bottom: 7px; }
.py-8 { padding-top: 8px; padding-bottom: 8px; }
.py-9 { padding-top: 9px; padding-bottom: 9px; }
.py-10 { padding-top: 10px; padding-bottom: 10px; }
.py-11 { padding-top: 11px; padding-bottom: 11px; }
.py-12 { padding-top: 12px; padding-bottom: 12px; }
.py-13 { padding-top: 13px; padding-bottom: 13px; }
.py-14 { padding-top: 14px; padding-bottom: 14px; }
.py-15 { padding-top: 15px; padding-bottom: 15px; }
.py-16 { padding-top: 16px; padding-bottom: 16px; }
.py-17 { padding-top: 17px; padding-bottom: 17px; }
.py-18 { padding-top: 18px; padding-bottom: 18px; }
.py-19 { padding-top: 19px; padding-bottom: 19px; }
.py-20 { padding-top: 20px; padding-bottom: 20px; }
.py-21 { padding-top: 21px; padding-bottom: 21px; }
.py-22 { padding-top: 22px; padding-bottom: 22px; }
.py-23 { padding-top: 23px; padding-bottom: 23px; }
.py-24 { padding-top: 24px; padding-bottom: 24px; }
.py-25 { padding-top: 25px; padding-bottom: 25px; }
.py-26 { padding-top: 26px; padding-bottom: 26px; }
.py-27 { padding-top: 27px; padding-bottom: 27px; }
.py-28 { padding-top: 28px; padding-bottom: 28px; }
.py-29 { padding-top: 29px; padding-bottom: 29px; }
.py-30 { padding-top: 30px; padding-bottom: 30px; }
.py-31 { padding-top: 31px; padding-bottom: 31px; }
.py-32 { padding-top: 32px; padding-bottom: 32px; }
.py-33 { padding-top: 33px; padding-bottom: 33px; }
.py-34 { padding-top: 34px; padding-bottom: 34px; }
.py-35 { padding-top: 35px; padding-bottom: 35px; }
.py-36 { padding-top: 36px; padding-bottom: 36px; }
.py-37 { padding-top: 37px; padding-bottom: 37px; }
.py-38 { padding-top: 38px; padding-bottom: 38px; }
.py-39 { padding-top: 39px; padding-bottom: 39px; }
.py-40 { padding-top: 40px; padding-bottom: 40px; }
.py-41 { padding-top: 41px; padding-bottom: 41px; }
.py-42 { padding-top: 42px; padding-bottom: 42px; }
.py-43 { padding-top: 43px; padding-bottom: 43px; }
.py-44 { padding-top: 44px; padding-bottom: 44px; }
.py-45 { padding-top: 45px; padding-bottom: 45px; }
.py-46 { padding-top: 46px; padding-bottom: 46px; }
.py-47 { padding-top: 47px; padding-bottom: 47px; }
.py-48 { padding-top: 48px; padding-bottom: 48px; }
.py-49 { padding-top: 49px; padding-bottom: 49px; }
.py-50 { padding-top: 50px; padding-bottom: 50px; }
.py-51 { padding-top: 51px; padding-bottom: 51px; }
.py-52 { padding-top: 52px; padding-bottom: 52px; }
.py-53 { padding-top: 53px; padding-bottom: 53px; }
.py-54 { padding-top: 54px; padding-bottom: 54px; }
.py-55 { padding-top: 55px; padding-bottom: 55px; }
.py-56 { padding-top: 56px; padding-bottom: 56px; }
.py-57 { padding-top: 57px; padding-bottom: 57px; }
.py-58 { padding-top: 58px; padding-bottom: 58px; }
.py-59 { padding-top: 59px; padding-bottom: 59px; }
.py-60 { padding-top: 60px; padding-bottom: 60px; }
.py-61 { padding-top: 61px; padding-bottom: 61px; }
.py-62 { padding-top: 62px; padding-bottom: 62px; }
.py-63 { padding-top: 63px; padding-bottom: 63px; }
.py-64 { padding-top: 64px; padding-bottom: 64px; }
.py-65 { padding-top: 65px; padding-bottom: 65px; }
.py-66 { padding-top: 66px; padding-bottom: 66px; }
.py-67 { padding-top: 67px; padding-bottom: 67px; }
.py-68 { padding-top: 68px; padding-bottom: 68px; }
.py-69 { padding-top: 69px; padding-bottom: 69px; }
.py-70 { padding-top: 70px; padding-bottom: 70px; }
.py-71 { padding-top: 71px; padding-bottom: 71px; }
.py-72 { padding-top: 72px; padding-bottom: 72px; }
.py-73 { padding-top: 73px; padding-bottom: 73px; }
.py-74 { padding-top: 74px; padding-bottom: 74px; }
.py-75 { padding-top: 75px; padding-bottom: 75px; }
.py-76 { padding-top: 76px; padding-bottom: 76px; }
.py-77 { padding-top: 77px; padding-bottom: 77px; }
.py-78 { padding-top: 78px; padding-bottom: 78px; }
.py-79 { padding-top: 79px; padding-bottom: 79px; }
.py-80 { padding-top: 80px; padding-bottom: 80px; }
.py-81 { padding-top: 81px; padding-bottom: 81px; }
.py-82 { padding-top: 82px; padding-bottom: 82px; }
.py-83 { padding-top: 83px; padding-bottom: 83px; }
.py-84 { padding-top: 84px; padding-bottom: 84px; }
.py-85 { padding-top: 85px; padding-bottom: 85px; }
.py-86 { padding-top: 86px; padding-bottom: 86px; }
.py-87 { padding-top: 87px; padding-bottom: 87px; }
.py-88 { padding-top: 88px; padding-bottom: 88px; }
.py-89 { padding-top: 89px; padding-bottom: 89px; }
.py-90 { padding-top: 90px; padding-bottom: 90px; }
.py-91 { padding-top: 91px; padding-bottom: 91px; }
.py-92 { padding-top: 92px; padding-bottom: 92px; }
.py-93 { padding-top: 93px; padding-bottom: 93px; }
.py-94 { padding-top: 94px; padding-bottom: 94px; }
.py-95 { padding-top: 95px; padding-bottom: 95px; }
.py-96 { padding-top: 96px; padding-bottom: 96px; }
.py-97 { padding-top: 97px; padding-bottom: 97px; }
.py-98 { padding-top: 98px; padding-bottom: 98px; }
.py-99 { padding-top: 99px; padding-bottom: 99px; }
.py-100 { padding-top: 100px; padding-bottom: 100px; }

/* Padding X (Horizontal) */
.px-1 { padding-left: 1px; padding-right: 1px; }
.px-2 { padding-left: 2px; padding-right: 2px; }
.px-3 { padding-left: 3px; padding-right: 3px; }
.px-4 { padding-left: 4px; padding-right: 4px; }
.px-5 { padding-left: 5px; padding-right: 5px; }
.px-6 { padding-left: 6px; padding-right: 6px; }
.px-7 { padding-left: 7px; padding-right: 7px; }
.px-8 { padding-left: 8px; padding-right: 8px; }
.px-9 { padding-left: 9px; padding-right: 9px; }
.px-10 { padding-left: 10px; padding-right: 10px; }
.px-11 { padding-left: 11px; padding-right: 11px; }
.px-12 { padding-left: 12px; padding-right: 12px; }
.px-13 { padding-left: 13px; padding-right: 13px; }
.px-14 { padding-left: 14px; padding-right: 14px; }
.px-15 { padding-left: 15px; padding-right: 15px; }
.px-16 { padding-left: 16px; padding-right: 16px; }
.px-17 { padding-left: 17px; padding-right: 17px; }
.px-18 { padding-left: 18px; padding-right: 18px; }
.px-19 { padding-left: 19px; padding-right: 19px; }
.px-20 { padding-left: 20px; padding-right: 20px; }
.px-21 { padding-left: 21px; padding-right: 21px; }
.px-22 { padding-left: 22px; padding-right: 22px; }
.px-23 { padding-left: 23px; padding-right: 23px; }
.px-24 { padding-left: 24px; padding-right: 24px; }
.px-25 { padding-left: 25px; padding-right: 25px; }
.px-26 { padding-left: 26px; padding-right: 26px; }
.px-27 { padding-left: 27px; padding-right: 27px; }
.px-28 { padding-left: 28px; padding-right: 28px; }
.px-29 { padding-left: 29px; padding-right: 29px; }
.px-30 { padding-left: 30px; padding-right: 30px; }
.px-31 { padding-left: 31px; padding-right: 31px; }
.px-32 { padding-left: 32px; padding-right: 32px; }
.px-33 { padding-left: 33px; padding-right: 33px; }
.px-34 { padding-left: 34px; padding-right: 34px; }
.px-35 { padding-left: 35px; padding-right: 35px; }
.px-36 { padding-left: 36px; padding-right: 36px; }
.px-37 { padding-left: 37px; padding-right: 37px; }
.px-38 { padding-left: 38px; padding-right: 38px; }
.px-39 { padding-left: 39px; padding-right: 39px; }
.px-40 { padding-left: 40px; padding-right: 40px; }
.px-41 { padding-left: 41px; padding-right: 41px; }
.px-42 { padding-left: 42px; padding-right: 42px; }
.px-43 { padding-left: 43px; padding-right: 43px; }
.px-44 { padding-left: 44px; padding-right: 44px; }
.px-45 { padding-left: 45px; padding-right: 45px; }
.px-46 { padding-left: 46px; padding-right: 46px; }
.px-47 { padding-left: 47px; padding-right: 47px; }
.px-48 { padding-left: 48px; padding-right: 48px; }
.px-49 { padding-left: 49px; padding-right: 49px; }
.px-50 { padding-left: 50px; padding-right: 50px; }
.px-51 { padding-left: 51px; padding-right: 51px; }
.px-52 { padding-left: 52px; padding-right: 52px; }
.px-53 { padding-left: 53px; padding-right: 53px; }
.px-54 { padding-left: 54px; padding-right: 54px; }
.px-55 { padding-left: 55px; padding-right: 55px; }
.px-56 { padding-left: 56px; padding-right: 56px; }
.px-57 { padding-left: 57px; padding-right: 57px; }
.px-58 { padding-left: 58px; padding-right: 58px; }
.px-59 { padding-left: 59px; padding-right: 59px; }
.px-60 { padding-left: 60px; padding-right: 60px; }
.px-61 { padding-left: 61px; padding-right: 61px; }
.px-62 { padding-left: 62px; padding-right: 62px; }
.px-63 { padding-left: 63px; padding-right: 63px; }
.px-64 { padding-left: 64px; padding-right: 64px; }
.px-65 { padding-left: 65px; padding-right: 65px; }
.px-66 { padding-left: 66px; padding-right: 66px; }
.px-67 { padding-left: 67px; padding-right: 67px; }
.px-68 { padding-left: 68px; padding-right: 68px; }
.px-69 { padding-left: 69px; padding-right: 69px; }
.px-70 { padding-left: 70px; padding-right: 70px; }
.px-71 { padding-left: 71px; padding-right: 71px; }
.px-72 { padding-left: 72px; padding-right: 72px; }
.px-73 { padding-left: 73px; padding-right: 73px; }
.px-74 { padding-left: 74px; padding-right: 74px; }
.px-75 { padding-left: 75px; padding-right: 75px; }
.px-76 { padding-left: 76px; padding-right: 76px; }
.px-77 { padding-left: 77px; padding-right: 77px; }
.px-78 { padding-left: 78px; padding-right: 78px; }
.px-79 { padding-left: 79px; padding-right: 79px; }
.px-80 { padding-left: 80px; padding-right: 80px; }
.px-81 { padding-left: 81px; padding-right: 81px; }
.px-82 { padding-left: 82px; padding-right: 82px; }
.px-83 { padding-left: 83px; padding-right: 83px; }
.px-84 { padding-left: 84px; padding-right: 84px; }
.px-85 { padding-left: 85px; padding-right: 85px; }
.px-86 { padding-left: 86px; padding-right: 86px; }
.px-87 { padding-left: 87px; padding-right: 87px; }
.px-88 { padding-left: 88px; padding-right: 88px; }
.px-89 { padding-left: 89px; padding-right: 89px; }
.px-90 { padding-left: 90px; padding-right: 90px; }
.px-91 { padding-left: 91px; padding-right: 91px; }
.px-92 { padding-left: 92px; padding-right: 92px; }
.px-93 { padding-left: 93px; padding-right: 93px; }
.px-94 { padding-left: 94px; padding-right: 94px; }
.px-95 { padding-left: 95px; padding-right: 95px; }
.px-96 { padding-left: 96px; padding-right: 96px; }
.px-97 { padding-left: 97px; padding-right: 97px; }
.px-98 { padding-left: 98px; padding-right: 98px; }
.px-99 { padding-left: 99px; padding-right: 99px; }
.px-100 { padding-left: 100px; padding-right: 100px; }

/* Padding Top (Vertical) */
.pt-1 { padding-top: 1px; }
.pt-2 { padding-top: 2px; }
.pt-3 { padding-top: 3px; }
.pt-4 { padding-top: 4px; }
.pt-5 { padding-top: 5px; }
.pt-6 { padding-top: 6px; }
.pt-7 { padding-top: 7px; }
.pt-8 { padding-top: 8px; }
.pt-9 { padding-top: 9px; }
.pt-10 { padding-top: 10px; }
.pt-11 { padding-top: 11px; }
.pt-12 { padding-top: 12px; }
.pt-13 { padding-top: 13px; }
.pt-14 { padding-top: 14px; }
.pt-15 { padding-top: 15px; }
.pt-16 { padding-top: 16px; }
.pt-17 { padding-top: 17px; }
.pt-18 { padding-top: 18px; }
.pt-19 { padding-top: 19px; }
.pt-20 { padding-top: 20px; }
.pt-21 { padding-top: 21px; }
.pt-22 { padding-top: 22px; }
.pt-23 { padding-top: 23px; }
.pt-24 { padding-top: 24px; }
.pt-25 { padding-top: 25px; }
.pt-26 { padding-top: 26px; }
.pt-27 { padding-top: 27px; }
.pt-28 { padding-top: 28px; }
.pt-29 { padding-top: 29px; }
.pt-30 { padding-top: 30px; }
.pt-31 { padding-top: 31px; }
.pt-32 { padding-top: 32px; }
.pt-33 { padding-top: 33px; }
.pt-34 { padding-top: 34px; }
.pt-35 { padding-top: 35px; }
.pt-36 { padding-top: 36px; }
.pt-37 { padding-top: 37px; }
.pt-38 { padding-top: 38px; }
.pt-39 { padding-top: 39px; }
.pt-40 { padding-top: 40px; }
.pt-41 { padding-top: 41px; }
.pt-42 { padding-top: 42px; }
.pt-43 { padding-top: 43px; }
.pt-44 { padding-top: 44px; }
.pt-45 { padding-top: 45px; }
.pt-46 { padding-top: 46px; }
.pt-47 { padding-top: 47px; }
.pt-48 { padding-top: 48px; }
.pt-49 { padding-top: 49px; }
.pt-50 { padding-top: 50px; }
.pt-51 { padding-top: 51px; }
.pt-52 { padding-top: 52px; }
.pt-53 { padding-top: 53px; }
.pt-54 { padding-top: 54px; }
.pt-55 { padding-top: 55px; }
.pt-56 { padding-top: 56px; }
.pt-57 { padding-top: 57px; }
.pt-58 { padding-top: 58px; }
.pt-59 { padding-top: 59px; }
.pt-60 { padding-top: 60px; }
.pt-61 { padding-top: 61px; }
.pt-62 { padding-top: 62px; }
.pt-63 { padding-top: 63px; }
.pt-64 { padding-top: 64px; }
.pt-65 { padding-top: 65px; }
.pt-66 { padding-top: 66px; }
.pt-67 { padding-top: 67px; }
.pt-68 { padding-top: 68px; }
.pt-69 { padding-top: 69px; }
.pt-70 { padding-top: 70px; }
.pt-71 { padding-top: 71px; }
.pt-72 { padding-top: 72px; }
.pt-73 { padding-top: 73px; }
.pt-74 { padding-top: 74px; }
.pt-75 { padding-top: 75px; }
.pt-76 { padding-top: 76px; }
.pt-77 { padding-top: 77px; }
.pt-78 { padding-top: 78px; }
.pt-79 { padding-top: 79px; }
.pt-80 { padding-top: 80px; }
.pt-81 { padding-top: 81px; }
.pt-82 { padding-top: 82px; }
.pt-83 { padding-top: 83px; }
.pt-84 { padding-top: 84px; }
.pt-85 { padding-top: 85px; }
.pt-86 { padding-top: 86px; }
.pt-87 { padding-top: 87px; }
.pt-88 { padding-top: 88px; }
.pt-89 { padding-top: 89px; }
.pt-90 { padding-top: 90px; }
.pt-91 { padding-top: 91px; }
.pt-92 { padding-top: 92px; }
.pt-93 { padding-top: 93px; }
.pt-94 { padding-top: 94px; }
.pt-95 { padding-top: 95px; }
.pt-96 { padding-top: 96px; }
.pt-97 { padding-top: 97px; }
.pt-98 { padding-top: 98px; }
.pt-99 { padding-top: 99px; }
.pt-100 { padding-top: 100px; }

/* Padding Bottom (Vertical) */
.pb-1 { padding-bottom: 1px; }
.pb-2 { padding-bottom: 2px; }
.pb-3 { padding-bottom: 3px; }
.pb-4 { padding-bottom: 4px; }
.pb-5 { padding-bottom: 5px; }
.pb-6 { padding-bottom: 6px; }
.pb-7 { padding-bottom: 7px; }
.pb-8 { padding-bottom: 8px; }
.pb-9 { padding-bottom: 9px; }
.pb-10 { padding-bottom: 10px; }
.pb-11 { padding-bottom: 11px; }
.pb-12 { padding-bottom: 12px; }
.pb-13 { padding-bottom: 13px; }
.pb-14 { padding-bottom: 14px; }
.pb-15 { padding-bottom: 15px; }
.pb-16 { padding-bottom: 16px; }
.pb-17 { padding-bottom: 17px; }
.pb-18 { padding-bottom: 18px; }
.pb-19 { padding-bottom: 19px; }
.pb-20 { padding-bottom: 20px; }
.pb-21 { padding-bottom: 21px; }
.pb-22 { padding-bottom: 22px; }
.pb-23 { padding-bottom: 23px; }
.pb-24 { padding-bottom: 24px; }
.pb-25 { padding-bottom: 25px; }
.pb-26 { padding-bottom: 26px; }
.pb-27 { padding-bottom: 27px; }
.pb-28 { padding-bottom: 28px; }
.pb-29 { padding-bottom: 29px; }
.pb-30 { padding-bottom: 30px; }
.pb-31 { padding-bottom: 31px; }
.pb-32 { padding-bottom: 32px; }
.pb-33 { padding-bottom: 33px; }
.pb-34 { padding-bottom: 34px; }
.pb-35 { padding-bottom: 35px; }
.pb-36 { padding-bottom: 36px; }
.pb-37 { padding-bottom: 37px; }
.pb-38 { padding-bottom: 38px; }
.pb-39 { padding-bottom: 39px; }
.pb-40 { padding-bottom: 40px; }
.pb-41 { padding-bottom: 41px; }
.pb-42 { padding-bottom: 42px; }
.pb-43 { padding-bottom: 43px; }
.pb-44 { padding-bottom: 44px; }
.pb-45 { padding-bottom: 45px; }
.pb-46 { padding-bottom: 46px; }
.pb-47 { padding-bottom: 47px; }
.pb-48 { padding-bottom: 48px; }
.pb-49 { padding-bottom: 49px; }
.pb-50 { padding-bottom: 50px; }
.pb-51 { padding-bottom: 51px; }
.pb-52 { padding-bottom: 52px; }
.pb-53 { padding-bottom: 53px; }
.pb-54 { padding-bottom: 54px; }
.pb-55 { padding-bottom: 55px; }
.pb-56 { padding-bottom: 56px; }
.pb-57 { padding-bottom: 57px; }
.pb-58 { padding-bottom: 58px; }
.pb-59 { padding-bottom: 59px; }
.pb-60 { padding-bottom: 60px; }
.pb-61 { padding-bottom: 61px; }
.pb-62 { padding-bottom: 62px; }
.pb-63 { padding-bottom: 63px; }
.pb-64 { padding-bottom: 64px; }
.pb-65 { padding-bottom: 65px; }
.pb-66 { padding-bottom: 66px; }
.pb-67 { padding-bottom: 67px; }
.pb-68 { padding-bottom: 68px; }
.pb-69 { padding-bottom: 69px; }
.pb-70 { padding-bottom: 70px; }
.pb-71 { padding-bottom: 71px; }
.pb-72 { padding-bottom: 72px; }
.pb-73 { padding-bottom: 73px; }
.pb-74 { padding-bottom: 74px; }
.pb-75 { padding-bottom: 75px; }
.pb-76 { padding-bottom: 76px; }
.pb-77 { padding-bottom: 77px; }
.pb-78 { padding-bottom: 78px; }
.pb-79 { padding-bottom: 79px; }
.pb-80 { padding-bottom: 80px; }
.pb-81 { padding-bottom: 81px; }
.pb-82 { padding-bottom: 82px; }
.pb-83 { padding-bottom: 83px; }
.pb-84 { padding-bottom: 84px; }
.pb-85 { padding-bottom: 85px; }
.pb-86 { padding-bottom: 86px; }
.pb-87 { padding-bottom: 87px; }
.pb-88 { padding-bottom: 88px; }
.pb-89 { padding-bottom: 89px; }
.pb-90 { padding-bottom: 90px; }
.pb-91 { padding-bottom: 91px; }
.pb-92 { padding-bottom: 92px; }
.pb-93 { padding-bottom: 93px; }
.pb-94 { padding-bottom: 94px; }
.pb-95 { padding-bottom: 95px; }
.pb-96 { padding-bottom: 96px; }
.pb-97 { padding-bottom: 97px; }
.pb-98 { padding-bottom: 98px; }
.pb-99 { padding-bottom: 99px; }
.pb-100 { padding-bottom: 100px; }

/* Padding Left (Horizontal) */
.pl-1 { padding-left: 1px; }
.pl-2 { padding-left: 2px; }
.pl-3 { padding-left: 3px; }
.pl-4 { padding-left: 4px; }
.pl-5 { padding-left: 5px; }
.pl-6 { padding-left: 6px; }
.pl-7 { padding-left: 7px; }
.pl-8 { padding-left: 8px; }
.pl-9 { padding-left: 9px; }
.pl-10 { padding-left: 10px; }
.pl-11 { padding-left: 11px; }
.pl-12 { padding-left: 12px; }
.pl-13 { padding-left: 13px; }
.pl-14 { padding-left: 14px; }
.pl-15 { padding-left: 15px; }
.pl-16 { padding-left: 16px; }
.pl-17 { padding-left: 17px; }
.pl-18 { padding-left: 18px; }
.pl-19 { padding-left: 19px; }
.pl-20 { padding-left: 20px; }
.pl-21 { padding-left: 21px; }
.pl-22 { padding-left: 22px; }
.pl-23 { padding-left: 23px; }
.pl-24 { padding-left: 24px; }
.pl-25 { padding-left: 25px; }
.pl-26 { padding-left: 26px; }
.pl-27 { padding-left: 27px; }
.pl-28 { padding-left: 28px; }
.pl-29 { padding-left: 29px; }
.pl-30 { padding-left: 30px; }
.pl-31 { padding-left: 31px; }
.pl-32 { padding-left: 32px; }
.pl-33 { padding-left: 33px; }
.pl-34 { padding-left: 34px; }
.pl-35 { padding-left: 35px; }
.pl-36 { padding-left: 36px; }
.pl-37 { padding-left: 37px; }
.pl-38 { padding-left: 38px; }
.pl-39 { padding-left: 39px; }
.pl-40 { padding-left: 40px; }
.pl-41 { padding-left: 41px; }
.pl-42 { padding-left: 42px; }
.pl-43 { padding-left: 43px; }
.pl-44 { padding-left: 44px; }
.pl-45 { padding-left: 45px; }
.pl-46 { padding-left: 46px; }
.pl-47 { padding-left: 47px; }
.pl-48 { padding-left: 48px; }
.pl-49 { padding-left: 49px; }
.pl-50 { padding-left: 50px; }
.pl-51 { padding-left: 51px; }
.pl-52 { padding-left: 52px; }
.pl-53 { padding-left: 53px; }
.pl-54 { padding-left: 54px; }
.pl-55 { padding-left: 55px; }
.pl-56 { padding-left: 56px; }
.pl-57 { padding-left: 57px; }
.pl-58 { padding-left: 58px; }
.pl-59 { padding-left: 59px; }
.pl-60 { padding-left: 60px; }
.pl-61 { padding-left: 61px; }
.pl-62 { padding-left: 62px; }
.pl-63 { padding-left: 63px; }
.pl-64 { padding-left: 64px; }
.pl-65 { padding-left: 65px; }
.pl-66 { padding-left: 66px; }
.pl-67 { padding-left: 67px; }
.pl-68 { padding-left: 68px; }
.pl-69 { padding-left: 69px; }
.pl-70 { padding-left: 70px; }
.pl-71 { padding-left: 71px; }
.pl-72 { padding-left: 72px; }
.pl-73 { padding-left: 73px; }
.pl-74 { padding-left: 74px; }
.pl-75 { padding-left: 75px; }
.pl-76 { padding-left: 76px; }
.pl-77 { padding-left: 77px; }
.pl-78 { padding-left: 78px; }
.pl-79 { padding-left: 79px; }
.pl-80 { padding-left: 80px; }
.pl-81 { padding-left: 81px; }
.pl-82 { padding-left: 82px; }
.pl-83 { padding-left: 83px; }
.pl-84 { padding-left: 84px; }
.pl-85 { padding-left: 85px; }
.pl-86 { padding-left: 86px; }
.pl-87 { padding-left: 87px; }
.pl-88 { padding-left: 88px; }
.pl-89 { padding-left: 89px; }
.pl-90 { padding-left: 90px; }
.pl-91 { padding-left: 91px; }
.pl-92 { padding-left: 92px; }
.pl-93 { padding-left: 93px; }
.pl-94 { padding-left: 94px; }
.pl-95 { padding-left: 95px; }
.pl-96 { padding-left: 96px; }
.pl-97 { padding-left: 97px; }
.pl-98 { padding-left: 98px; }
.pl-99 { padding-left: 99px; }
.pl-100 { padding-left: 100px; }

/* Padding Left (Horizontal) */
.pl-1 { padding-left: 1px; }
.pl-2 { padding-left: 2px; }
.pl-3 { padding-left: 3px; }
.pl-4 { padding-left: 4px; }
.pl-5 { padding-left: 5px; }
.pl-6 { padding-left: 6px; }
.pl-7 { padding-left: 7px; }
.pl-8 { padding-left: 8px; }
.pl-9 { padding-left: 9px; }
.pl-10 { padding-left: 10px; }
.pl-11 { padding-left: 11px; }
.pl-12 { padding-left: 12px; }
.pl-13 { padding-left: 13px; }
.pl-14 { padding-left: 14px; }
.pl-15 { padding-left: 15px; }
.pl-16 { padding-left: 16px; }
.pl-17 { padding-left: 17px; }
.pl-18 { padding-left: 18px; }
.pl-19 { padding-left: 19px; }
.pl-20 { padding-left: 20px; }
.pl-21 { padding-left: 21px; }
.pl-22 { padding-left: 22px; }
.pl-23 { padding-left: 23px; }
.pl-24 { padding-left: 24px; }
.pl-25 { padding-left: 25px; }
.pl-26 { padding-left: 26px; }
.pl-27 { padding-left: 27px; }
.pl-28 { padding-left: 28px; }
.pl-29 { padding-left: 29px; }
.pl-30 { padding-left: 30px; }
.pl-31 { padding-left: 31px; }
.pl-32 { padding-left: 32px; }
.pl-33 { padding-left: 33px; }
.pl-34 { padding-left: 34px; }
.pl-35 { padding-left: 35px; }
.pl-36 { padding-left: 36px; }
.pl-37 { padding-left: 37px; }
.pl-38 { padding-left: 38px; }
.pl-39 { padding-left: 39px; }
.pl-40 { padding-left: 40px; }
.pl-41 { padding-left: 41px; }
.pl-42 { padding-left: 42px; }
.pl-43 { padding-left: 43px; }
.pl-44 { padding-left: 44px; }
.pl-45 { padding-left: 45px; }
.pl-46 { padding-left: 46px; }
.pl-47 { padding-left: 47px; }
.pl-48 { padding-left: 48px; }
.pl-49 { padding-left: 49px; }
.pl-50 { padding-left: 50px; }
.pl-51 { padding-left: 51px; }
.pl-52 { padding-left: 52px; }
.pl-53 { padding-left: 53px; }
.pl-54 { padding-left: 54px; }
.pl-55 { padding-left: 55px; }
.pl-56 { padding-left: 56px; }
.pl-57 { padding-left: 57px; }
.pl-58 { padding-left: 58px; }
.pl-59 { padding-left: 59px; }
.pl-60 { padding-left: 60px; }
.pl-61 { padding-left: 61px; }
.pl-62 { padding-left: 62px; }
.pl-63 { padding-left: 63px; }
.pl-64 { padding-left: 64px; }
.pl-65 { padding-left: 65px; }
.pl-66 { padding-left: 66px; }
.pl-67 { padding-left: 67px; }
.pl-68 { padding-left: 68px; }
.pl-69 { padding-left: 69px; }
.pl-70 { padding-left: 70px; }
.pl-71 { padding-left: 71px; }
.pl-72 { padding-left: 72px; }
.pl-73 { padding-left: 73px; }
.pl-74 { padding-left: 74px; }
.pl-75 { padding-left: 75px; }
.pl-76 { padding-left: 76px; }
.pl-77 { padding-left: 77px; }
.pl-78 { padding-left: 78px; }
.pl-79 { padding-left: 79px; }
.pl-80 { padding-left: 80px; }
.pl-81 { padding-left: 81px; }
.pl-82 { padding-left: 82px; }
.pl-83 { padding-left: 83px; }
.pl-84 { padding-left: 84px; }
.pl-85 { padding-left: 85px; }
.pl-86 { padding-left: 86px; }
.pl-87 { padding-left: 87px; }
.pl-88 { padding-left: 88px; }
.pl-89 { padding-left: 89px; }
.pl-90 { padding-left: 90px; }
.pl-91 { padding-left: 91px; }
.pl-92 { padding-left: 92px; }
.pl-93 { padding-left: 93px; }
.pl-94 { padding-left: 94px; }
.pl-95 { padding-left: 95px; }
.pl-96 { padding-left: 96px; }
.pl-97 { padding-left: 97px; }
.pl-98 { padding-left: 98px; }
.pl-99 { padding-left: 99px; }
.pl-100 { padding-left: 100px; }

/* Padding Right (Horizontal) */
.pr-1 { padding-right: 1px; }
.pr-2 { padding-right: 2px; }
.pr-3 { padding-right: 3px; }
.pr-4 { padding-right: 4px; }
.pr-5 { padding-right: 5px; }
.pr-6 { padding-right: 6px; }
.pr-7 { padding-right: 7px; }
.pr-8 { padding-right: 8px; }
.pr-9 { padding-right: 9px; }
.pr-10 { padding-right: 10px; }
.pr-11 { padding-right: 11px; }
.pr-12 { padding-right: 12px; }
.pr-13 { padding-right: 13px; }
.pr-14 { padding-right: 14px; }
.pr-15 { padding-right: 15px; }
.pr-16 { padding-right: 16px; }
.pr-17 { padding-right: 17px; }
.pr-18 { padding-right: 18px; }
.pr-19 { padding-right: 19px; }
.pr-20 { padding-right: 20px; }
.pr-21 { padding-right: 21px; }
.pr-22 { padding-right: 22px; }
.pr-23 { padding-right: 23px; }
.pr-24 { padding-right: 24px; }
.pr-25 { padding-right: 25px; }
.pr-26 { padding-right: 26px; }
.pr-27 { padding-right: 27px; }
.pr-28 { padding-right: 28px; }
.pr-29 { padding-right: 29px; }
.pr-30 { padding-right: 30px; }
.pr-31 { padding-right: 31px; }
.pr-32 { padding-right: 32px; }
.pr-33 { padding-right: 33px; }
.pr-34 { padding-right: 34px; }
.pr-35 { padding-right: 35px; }
.pr-36 { padding-right: 36px; }
.pr-37 { padding-right: 37px; }
.pr-38 { padding-right: 38px; }
.pr-39 { padding-right: 39px; }
.pr-40 { padding-right: 40px; }
.pr-41 { padding-right: 41px; }
.pr-42 { padding-right: 42px; }
.pr-43 { padding-right: 43px; }
.pr-44 { padding-right: 44px; }
.pr-45 { padding-right: 45px; }
.pr-46 { padding-right: 46px; }
.pr-47 { padding-right: 47px; }
.pr-48 { padding-right: 48px; }
.pr-49 { padding-right: 49px; }
.pr-50 { padding-right: 50px; }
.pr-51 { padding-right: 51px; }
.pr-52 { padding-right: 52px; }
.pr-53 { padding-right: 53px; }
.pr-54 { padding-right: 54px; }
.pr-55 { padding-right: 55px; }
.pr-56 { padding-right: 56px; }
.pr-57 { padding-right: 57px; }
.pr-58 { padding-right: 58px; }
.pr-59 { padding-right: 59px; }
.pr-60 { padding-right: 60px; }
.pr-61 { padding-right: 61px; }
.pr-62 { padding-right: 62px; }
.pr-63 { padding-right: 63px; }
.pr-64 { padding-right: 64px; }
.pr-65 { padding-right: 65px; }
.pr-66 { padding-right: 66px; }
.pr-67 { padding-right: 67px; }
.pr-68 { padding-right: 68px; }
.pr-69 { padding-right: 69px; }
.pr-70 { padding-right: 70px; }
.pr-71 { padding-right: 71px; }
.pr-72 { padding-right: 72px; }
.pr-73 { padding-right: 73px; }
.pr-74 { padding-right: 74px; }
.pr-75 { padding-right: 75px; }
.pr-76 { padding-right: 76px; }
.pr-77 { padding-right: 77px; }
.pr-78 { padding-right: 78px; }
.pr-79 { padding-right: 79px; }
.pr-80 { padding-right: 80px; }
.pr-81 { padding-right: 81px; }
.pr-82 { padding-right: 82px; }
.pr-83 { padding-right: 83px; }
.pr-84 { padding-right: 84px; }
.pr-85 { padding-right: 85px; }
.pr-86 { padding-right: 86px; }
.pr-87 { padding-right: 87px; }
.pr-88 { padding-right: 88px; }
.pr-89 { padding-right: 89px; }
.pr-90 { padding-right: 90px; }
.pr-91 { padding-right: 91px; }
.pr-92 { padding-right: 92px; }
.pr-93 { padding-right: 93px; }
.pr-94 { padding-right: 94px; }
.pr-95 { padding-right: 95px; }
.pr-96 { padding-right: 96px; }
.pr-97 { padding-right: 97px; }
.pr-98 { padding-right: 98px; }
.pr-99 { padding-right: 99px; }
.pr-100 { padding-right: 100px; }


/* General css */
a
{
    text-decoration: none;
}
ul li 

{
    list-style: none;
}
/* page views css */
.view-counter-container {
    display: flex;
    margin-left:400px;
    top: 5px;
    position: absolute;
    align-items: center;
    /* Change from top to bottom */
    z-index: 9990;
    background-color: transparent;
    text-align: center;
    
    
}

/* Top header CSS */
.top_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background-color: var(--color-yellow-green);
    color: var(--color-white);
}

.top_header .top_header_left ul,
.top_header .top_header_right ul {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
}

.top_header .top_header_left ul li a,
.top_header .top_header_right ul li a {
    margin-right: 10px;
    color: var(--color-white);
    font-weight: 500;
    transition: color 0.3s ease;
}

.top_header .top_header_left ul li a:hover,
.top_header .top_header_right ul li a:hover {
    color: var(--color-dark-green);
}

.top_header .top_header_right ul li span,
.top_header .top_header_left ul li span {
    color: var(--color-dark-green);
    font-weight: 600;
}
@media(max-width:768px){
     ul .mobile_hide
    {
        display:none !important;
    }
    .view-counter-container {
    margin-left:272px;
}
}

/* Navigation bar CSS */
/* Basic Styles */
.header {
    position: relative;
    width: 100%;
    background-color: #fff;
    z-index: 1000;
    transition: top 0.3s ease;
}

.main_header {
    padding: 10px 20px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.main_header .main_header_left img {
    object-fit: contain;
    margin-left: 20px;
}

.main_header_right ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main_header_right ul li {
    position: relative;
    margin-right: 20px;
}

.main_header_right ul li a {
    text-decoration: none;
    margin-right: 20px;
    font-size: 0.9rem;
    color: #333;
    text-transform: uppercase;
    font-weight: 600;
    transition: color 0.3s ease;
}

.main_header_right ul li a:hover {
    color: var(--color-dark-green);
}

/* Sticky Header */
.sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.hide_top_header {
    display: none;
}

/* Dropdown Menu */
.dropdown {
    position: relative;
}

.mega_menu,
.dropdown-menu {
    display: none;
    position: absolute;
    border-top: 2px solid var(--color-yellow-green);
    top:100%;
    left: 0;
    background-color: var(--color-white);
    z-index: 1000;
    list-style: none;
    width: 100%; /* Full width mega menu */
    max-height: 0; /* Initially collapsed */
    overflow: hidden; /* Hide the content when collapsed */
    transform-origin: top; /* Set the origin to top for the roll effect */
    transform: scaleY(0); /* Start with no scale */
    transition: transform 0.4s ease, max-height 0.4s ease; /* Smooth rolling effect */
    opacity: 0; /* Initially hidden */
    visibility: hidden;
    border-radius: unset !important;
    width: 200px;
    
}
.dropdown .dropdown-menu > li > a
{
    text-decoration: none;
    color: #333;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.3s ease;
    text-transform: capitalize;
    margin-bottom: 10px;
    margin-left: 5px;
}
.dropdown .dropdown-menu > li:hover
{
    background-color: var(--color-yellow-green);
    color: white;
    transition: 0.4s;
    margin: 0;
    padding: 0;
}
.mega_menu_content {
    display: flex;
    justify-content: space-between;
    max-width: 1200px; /* Constrain the mega menu content */
    margin: 0 auto;
}

.mega_menu_content .menu_column,
.dropdown-menu ul li {
    width: 22%;
}

/* Hover Effect for Dropdown */
.dropdown:hover .mega_menu,
.dropdown:hover .dropdown-menu {
    display: block !important;
    max-height: 500px; /* Adjust as per content height */
    transform: scaleY(1); /* Scale to full height */
    opacity: 1; /* Make visible */
    visibility: visible;
}
.mega_menu
{
    display: block !important;
    max-height: 500px; /* Adjust as per content height */
    transform: scaleY(1); /* Scale to full height */
    opacity: 1; /* Make visible */
    visibility: visible;
}

/* Mobile Menu */
.mobile_menu {
    display: none;
    cursor: pointer;
}

.mobile_menu i {
    font-size: 24px;
    color: #333;
}

@media (max-width: 768px) {
    .main_header_right ul {
        display: none;
    }

    .mobile_menu {
        display: block;
    }

    .dropdown-menu,
    .mega_menu {
        position: relative;
        width: 100%;
        display: none;
        padding: 10px;
    }

    .dropdown.active .dropdown-menu,
    .dropdown.active .mega_menu {
        display: block;
    }
    .top_header_right
    {
        display: none;
    }
}

/* Sidebar for Mobile */
.sidebar {
    position: fixed;
    top: 0;
    right: -250px;
    width: 250px;
    height: 100%;
    background-color: var(--color-white);
    color: var(--color-black);
    padding: 20px;
    z-index: 999999;
    transition: right 0.3s ease;
}

.sidebar ul {
    list-style: none;
    padding: 0;
}

.sidebar ul li {
    margin-bottom: 15px;
}

.sidebar ul li a {
    color: var(--color-black);
    text-decoration: none;
}

.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.show_sidebar {
    right: 0;
}

.show_overlay {
    display: block;
}

/* Mega Menu */
.mega_menu {
    border-top: 2px solid var(--color-yellow-green);
    top:100%;
    left: -646px;
    background-color: var(--color-white);
    padding: 20px;
    z-index: 1000;
    width: 1260px; /* Full width mega menu */
    max-height: 0; /* Initially collapsed */
    overflow: hidden; /* Hide the content when collapsed */
    transform-origin: top; /* Set the origin to top for the roll effect */
    transform: scaleY(0); /* Start with no scale */
    transition: transform 0.4s ease, max-height 0.4s ease; /* Smooth rolling effect */
    opacity: 0;
    visibility: hidden;
}

.mega_menu_content {
    display: flex;
    justify-content: space-between;
    max-width: 1200px; /* Constrain the mega menu content */
    margin: 0 auto;
}

.mega_menu_content .menu_column {
    width: 22%;
}

.mega_menu_content .menu_column h3 {
    margin-bottom: 10px;
    font-size: 1.1rem;
    color: var(--color-black);
    font-weight: 600;
}

.mega_menu_content .menu_column ul {
    list-style: none;
    padding: 0;
    display: block;
}

.mega_menu_content .menu_column ul li {
    margin-bottom: 10px;
}

.mega_menu_content .menu_column ul li a {
    text-decoration: none;
    color:rgb(88, 87, 87);
    transition: color 0.3s ease;
    font-weight: 500;
    text-transform: capitalize;
}
.mega_menu_content .menu_column ul li a::before

{
    content: "\2192";
    display: inline-block;

    border-radius: 50%;
    margin-right: 5px;
}

.mega_menu_content .menu_column ul li a:hover {
    color: var(--color-hover);
    
}

/* Mobile View */
@media (max-width: 768px) {
    .mega_menu {
        position: relative;
        width: 100%;
        padding: 10px;
    }

    .mega_menu_content {
        display: block;
    }

    .mega_menu_content .menu_column {
        width: 100%;
        margin-bottom: 20px;
    }

    .dropdown.active .mega_menu {
        display: block;
    }
}




/* Notification section css */
.notification 
{
    width: 100%;
    background-color: white;
}

.notification .admission_button
{
    width:400px;
    align-items: end;
    background-color: var(--color-bg);
    color: var(--color-dark-green);
    padding: 10px 20px;
    border: none;
    outline: none;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 17px;
    transition: background-color 0.3s ease;
    
}
@media (max-width: 768px) {
    .notification .admission_button
    {
        width:200px;
    }

    
}
.notification .notification_ul ul li 
{
    margin-bottom: 6px;
}
.notification .notification_ul ul li a
{
    color: var(--color-black);
    line-height: 25px;
}
.notification .notification_ul ul li i 
{
    color: var(--color-gray);
    margin-right: 5px;
}
.badge
{
    display: inline-block;
    padding: 1px 3px;
    color: #fff;
    background: #ff334b;
    border-radius: 4px;
}
.badge-wrap

{
    display: flex;
    align-items: center
}
.badge-icon {
    position: relative;
    display: inline-flex;
    margin-right: 1px;
}
.badge-text {
    display: inline-flex;
    font-size: 9px;
    line-height: 12px;
}






.admission_button {
    position: relative;
    padding: 10px 20px;
    background-color: transparent;
    border: none;
    color: #333;
    font-size: 16px;
    cursor: pointer;
    outline: none;
    transition: color 0.3s ease, border-bottom 0.3s ease;
}

/* Hover effect to change button color */
.admission_button:hover {
    color: var(--color-yellow-green);
}

/* Active button style with thinner bottom border and reduced shadow */
.admission_button.active {
    color:var(--color-yellow-green);
    border-bottom: 2px solid var(--color-yellow-green); /* Thin glowing border */
    box-shadow: 0 2px 6px var(--color-yellow-green); /* Reduced shadow effect */
}

/* Arrow pointing upward above the button */
.admission_button.active::after {
    content: '';
    position: absolute;
    top:40px; /* Position the arrow above the button */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid var(--color-yellow-green); /* Arrow matches the glowing border */
}

/* Soft glow on the bottom border with thinner width on the sides */
.admission_button.active::before {
    content: '';
    position: absolute;
    bottom: -3px; /* Adjust based on the height of the button */
    left: 50%;
    transform: translateX(-50%);
    width: 70%; /* Reduce the width of the glowing border effect on the sides */
    height: 2px;
    background: linear-gradient(90deg, rgba(0, 123, 255, 0) 0%, var(--color-yellow-green) 50%, rgba(0, 123, 255, 0) 100%);
    opacity: 0.6;
}
.notification .owl-page {
    display: none !important; /* Hide the default owl-page buttons */
}

/* current_card css */
.current_slider .owl-carousel
{

    align-items: center;
    width:px;
    margin: auto;
    border-radius: 50px;
    background: var(--color-white);
    padding: 20px;

}
.current_heading .current_title::after
{
    width: 100px;
    height: 1px;
    display: block;
    content: "";
    position: relative;
    margin-top: 15px;
    left: 50%;
    margin-left: -50px;
    background-color: var(--color-yellow-green);
}

.current_slider .owl-carousel .testimonial
{
    display: flex !important;
    align-items: center;

}
@media (max-width:768px) {
    .current_slider .owl-carousel .testimonial
    {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-bottom: 30px;
    }
    .current_slider .owl-carousel .testimonial
    {
        margin: 0;
        padding: 0;
    }
    .current_slider .owl-carousel .testimonial img
    {
        width: 100%;
        height: auto;
    }
    .owl-theme .owl-controls {
        position:unset !important;
        right:0;
        top:unset !important;
        right:unset;
        bottom: 0;
        align-items: center; /* This will vertically align the dots */
        
    }
    .current_slider .owl-carousel .testimonial .div 
    {
        margin: 0 !important;
    }
    
}
.current_slider .owl-carousel .testimonial img
{
    width: 300px;
    border-radius: 30px;
    position: relative;
    
}
.current_slider .owl-carousel .testimonial .div
{
    margin: 0 100px;

}
.current_slider .owl-carousel .testimonial .div h5
{
        font-weight: 600;
        color:var(--color-dark-gray);
        word-spacing: 1px;
}
.current_slider .owl-carousel .testimonial .div .title
{
    font-weight: 600;
    letter-spacing: 1px;
}
.current_slider .owl-carousel .testimonial .div .current_btn
{
    border: none;
    outline: none;
    background: var(--color-yellow-green);
    font-weight: 500;
    letter-spacing: 1px;
    padding: 10px 20px;
    border-radius: 5px;
    margin-top: 20px;
}
.current_slider .owl-carousel .testimonial .div .current_btn:hover
{
    background: var(--color-dark-green);
    color: var(--color-white);
    cursor: pointer;
    transition: 0.4s;
}
.owl-theme .owl-controls {
    position:absolute;
    right:0;
    top:280px;
    right: 20px;
    bottom: 0;
    align-items: center; /* This will vertically align the dots */
    
}

.owl-theme .owl-pagination {
    display: block !important;
}

.owl-theme .owl-controls .owl-page span {
    width: 35px;
    height: 15px;
    border-radius: 0;
    background: var(--color-yellow-green);
    opacity: 0.8;
    transition: all 0.3s ease 0s;
    display: block !important;
}

.owl-theme .owl-controls .owl-page.active span {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--color-yellow-green);
    
}

@media only screen and (max-width: 479px) {
    .testimonial {
        padding: 20px 0 20px 60px;
        margin: 10px 20px 50px 50px;
    }

    .testimonial .title {
        font-size: 20px;
    }
}


/* Offline and counter css */

.offline_class
{
    background-image:linear-gradient(rgba(20, 50, 32, 0.655),rgba(20, 50, 32, 0.655)),url(https://www.resonance.ac.in/menu/img/resosir.webp);
    background-size: cover;
    background-repeat: no-repeat;
}
.counter_section .offline_img img
{
    width: 180px;
}
 .offline_classes_content h2{
    font-weight:bold;
}

.counter-box {
    text-align: center;
    padding: 20px;
}

.counter-box h2 {
    font-size: 36px;
    color: #333;
}

.counter-box p {
    font-size: 16px;
    color: #666;
}

.counter {
    color: var(--color-yellow-green);
    font-size: 48px;
    font-weight: bold;
}

.alert a p 
{
    color: #333;
    padding: 10px;
    border-left: 4px solid var(--color-yellow-green);
}
.app__bg .alert
{
    margin: 0;
    padding: 0;
    background-color: transparent !important;;
}


/* Keys Section css */

.keys_btn {
    position: relative;
    padding: 10px 20px;
    background-color: transparent;
    border-bottom: 2px solid transparent; /* Initial bottom border */
    border: none;
    color: #333;
    font-size: 16px;
    cursor: pointer;
    outline: none;
    transition: color 0.3s ease, border-bottom 0.3s ease;
}

/* Hover effect to change button color */
.keys_btn {
    background-color: #f0f0f0;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    outline: none;
    transition: background-color 0.3s ease;
}

.keys_btn.active {
    background-color: var(--color-yellow-green);
    color: white;
}

.keys_btn:hover {
    background-color: var(--color-yellow-green);
    color: white;
}

.content {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.content.active {
    display: block;
    opacity: 1;
}

.anskey-list-group-row .views-field-field-admission-dob span {
    display: block;
    font-weight: 600;
    font-size: 18px;
    margin-top: 2px;
    border-bottom: 1px solid black;
}
.anskey-list-group-row {
    padding: 5px 50px;
    border-bottom: 1px solid #f0f0f0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    position: relative;
    min-height: 55px;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
}
.anskey-list-group-row .views-field-field-admission-dob {
    color: black;
    font-size: 13px;
    line-height: 1.1;
    display: inline-block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 8px;
    left: 0;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    /* border: 1px solid black; */
    overflow: hidden;
    text-align: center;
}
.anskey-list-group-row .views-field-title {
    clear: both;
    color: #000;
    font-size: 14px;
    line-height: 1.5;
}
.anskey-list-group-row .views-field-field-answer-link a {
    font-size: 15px;
    line-height: 1;
    text-decoration: underline;
    color:var(--color-yellow-green);
    display: inline-block;
    font-size: 0.8rem;
}

.list-group-item:first-child {
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
}
a.list-group-item {
    color: #000 !important;
    font-size: 0.8rem;
}
.list-group-item {
    border-left: none;
    border-right: none;
    border: 1px solid #f0f0f0 !important;
}
.list-group-item {
    position: relative;
    display: block;
    padding: .75rem 1.25rem;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .125);
}
hr {
    margin-top: 20px;
}
.admission-list {
    overflow: hidden !important; /* Initially hide the scrollbar */
    width: 100%;
    height: 300px;
    position: relative;
}

/* When hovering over the admission-list, show the scrollbar */
.admission-list:hover {
    overflow-y: scroll !important; /* Show scrollbar on hover */
}

/* Customize scrollbar for WebKit-based browsers */
.admission-list::-webkit-scrollbar {
    width: 8px; /* Thin scrollbar */
}

/* Customize scrollbar track (background) */
.admission-list::-webkit-scrollbar-track {
    background: #f1f1f1; /* Light gray background */
    border-radius: 10px; /* Optional: round corners */
}

/* Customize scrollbar thumb (the scroll handle) */
.admission-list::-webkit-scrollbar-thumb {
    background-color: var(--color-yellow-green); /* Yellow-green handle */
    border-radius: 10px; /* Round corners for the handle */
}

/* Optional: Change scrollbar thumb color on hover */
.admission-list::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-yellow-green); /* Darker yellow-green on hover */
}




.line-height {
    line-height: 30px;
}
.line-height ul li a 
{
    color: #000;
}
.popularlinks ul li {
    padding-bottom: 10px;
    color: #7b7992;
}
.popularlinks ul li a {
    color: #7b7992 !important;
}
.popularlinks ul li a {
    color: #7b7992 !important;
}


.popularlinks ul li {
    padding-bottom: 10px;
    color: #7b7992;
}
.font-italic {
    font-style: italic !important;
    color: #7b7992 ;
}
/* user agent stylesheet */
li {
    text-align: -webkit-match-parent;
}
.popularlinks ul {
    list-style: none;
    padding: 0;
}
.line-height {
    line-height: 30px;
}


/* General Container Setup */
.courses-section {
    padding: 50px 0;
    background:linear-gradient( rgba(21, 107, 4, 0.5), rgba(21, 107, 4, 0.5)), url(https://www.resonance.ac.in/menu/img/Building-Pic-v1.webp);
     /* Light background */
     background-size: cover;
     background-repeat: no-repeat;
     background-attachment: fixed;
}


/* Card Design */
.course-card {
    position: relative; /* Make the card a positioning context */
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    margin: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    overflow: hidden; /* Ensure pseudo-element doesn't overflow */
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 200px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* Add some depth */
}

/* Pseudo-element for background blur */
.course-card::before {
    content: ""; /* Required for pseudo-element */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit; /* Use the same background as the card */
    backdrop-filter: blur(10px); /* Apply the blur effect */
    z-index: 0; /* Send behind the card content */
    border-radius: 10px; /* Match the border-radius */
}

.course-card h3 {
    position: relative; /* Position h3 above the blur */
    z-index: 1; /* Ensure text is above the blur */
    font-size: 18px;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
}
.course-card img
{
    z-index: 1;
    position: relative;
    border: 6px solid rgba(0, 0, 0, 0.553);
    opacity: 0.9;
}


.course-card:hover {
    transform: translateY(-10px); /* Lift on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.course-card .icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 15px;
}

.course-card img {
    max-width: 100%;
    border-radius: 50%;
}

.course-card h3 {
    font-size: 18px;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
}

/* Responsive Design */
@media (max-width: 768px) {
    .course-card {
        width: 45%;
        margin: 10px;
    }
}

@media (max-width: 576px) {
    .course-card {
        width: 90%;
        margin: 10px auto;
    }
}


/* Footer css */
footer
{
    background-color: #26272b;
}
.footer h5
{
    color: white;
}
.footer .location p 
{
    color:#cdc9c9;
    font-weight: 500;
    font-size: 0.9rem;
}
.footer .contact_info p 
{
    color:#cdc9c9;
    font-weight: 500;
    font-size: 0.9rem;
    line-height: 10px;
}
.footer .quick_links p 
{
    color:#cdc9c9;
    font-weight: 500;
    font-size: 0.9rem;
    line-height: 10px;
}
.footer .quick_links p a{

    color:#cdc9c9 ;
}
.footer .copyright
{
    border-top: 1px solid gray;
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
@media (max-width:768px) {
    .footer .copyright
    {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10px;
        text-align: center;
    }
    
}
.footer .copyright p{
    color:#cdc9c9;
    font-weight: 500;
    font-size: 0.9rem;
    line-height: 10px;
}
.footer .copyright .icons ul
{
    list-style: none;
    padding: 0;
    display: flex;
}

.footer .copyright .icons ul li a
 {
    margin-right: 10px;
    color:#cdc9c9;
    font-size: 1rem;
    padding: 10px;
    transition: color 0.3s ease;
    text-decoration: none;
    border-radius: 50%;
    background-color:#f1f1f1;
}

/* Twitter Background */
ul li a.twitter {
    background-color: #1da1f2 !important;
}

ul li a.twitter:hover {
    background-color: #0d8ae6 !important; /* Darker shade on hover */
}

/* YouTube Background */
ul li a.youtube {
    background-color: #ff0000 !important;
}

ul li a.youtube:hover {
    background-color: #cc0000 !important; /* Darker red on hover */
}

/* LinkedIn Background */
ul li a.linkedin {
    background-color: #0077b5 !important;
}

ul li a.linkedin:hover {
    background-color: #005b87 !important; /* Darker blue on hover */
}

/* Instagram Background */
ul li a.instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

ul li a.instagram:hover {
    filter: brightness(1.2); /* Brighten the gradient on hover */
}

/* Google Play Background */
ul li a.googleplay {
    background-color: #3ddc84 !important;
}

ul li a.googleplay:hover {
    background-color: #2ebc6d !important; /* Darker green on hover */
}

/* Add a slight scaling effect on hover for all */
ul li a:hover {
    transform: scale(1.1);
}

table tbody tr td strong,
table tbody tr td a
{
    color: #31708f;
    font-weight: 600;
}

/* .apply page css  */
.apply .card 
{
    margin-bottom: 20px;
    border-color: #31708f;

}
.apply .card .card-header {
    background-color: #d9edf7;
    justify-content: center;
    align-items: center;
}
.apply .card  .card-body ul li
{
    list-style:unset;
    font-weight: 600;
    color: #31708f;
}
.apply .new-apply
{
    height: 320px;
}
.apply .card .card-header h5
{
    font-weight: 600;
    color: #31708f;
    letter-spacing: 2px;
}
.apply .form-group .keys_btn
{
    background-color: #d9edf7 !important;
    color: #31708f;
    border-radius: unset;
    
}
.apply .card .card-body .form-group input,
    .apply .card .card-body .form-group select
{
    background-color: #f7f7f7;
    border: none;
    border-radius: 5px;
    padding: 10px;
    color: var(--color-black);
    margin-bottom: 15px;
}
.apply .card .card-body .form-group label {
    font-weight: 600;
    color: #31708f;
    margin-bottom: 10px;
}

.card .card-item .div 
{
    display: flex;
    align-items: center;
    justify-content: center;
}
.card .card-item .div img
{
    margin-bottom: 5px;
}
.card .card-item .div h5
{
    font-size: 1rem;
    font-weight: 600;
}
.heading h2
{
    font-weight: 600;
    color: #31708f;
    text-align: center;
}
.heading p 
{
    line-height: 10px;
}

.pride-card .card {
    border-top: 3px solid var(--color-yellow-green) !important;
    transition: all 0.3s ease;
    margin-bottom: 20px;
  }
  
  /* Image styling with border and bling effect on hover */
  .pride-card .card .card-body .card-img img {
    border: 4px solid #f1f1f1;
    border-radius: 50%;
    padding: 10px;
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
  }
  
  .pride-card .card:hover .card-body .card-img img {
    animation: bling 1s infinite alternate;
    border-color: var(--color-yellow-green);
    box-shadow: 0 0 10px 5px var(--color-yellow-green); /* Shadow effect on hover */
  }

  .pride-card .card .card-body .card-title h5
  {
    font-weight: 600;
  }
  
  /* Card title color change on hover */
  .pride-card .card:hover .card-body .card-title h5 {
    color: var(--color-yellow-green);
    transition: color 0.3s ease;
  }
  
  /* Bling animation for image border */
  @keyframes bling {
    0% {
      border-color: var(--color-yellow-green);
    }
    50% {
      border-color: #f1f1f1;
    }
    100% {
      border-color: var(--color-yellow-green);
    }
  }
  
    /* Accordian css */
  .accordion-item {
    color: var(--bs-accordion-color);
    background-color: var(--bs-accordion-bg);
    border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
    margin-bottom: 10px;
}
  .accordion-header {
    margin-bottom: 0;
    padding: 0;
    background-color: #e7f8ca;
}
  .accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
    font-size: 1rem;
    color: var(--bs-accordion-btn-color);
    text-align: left;
    background-color: var(--bs-accordion-btn-bg);
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    transition: var(--bs-accordion-transition);
    font-weight: 600;
}
.accordion-button:not(.collapsed) {
    color: var(--color-black);
    background-color: var(--color-yellow-green);
    box-shadow: inset 0 calc(-1* var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}
.accordion-button::after {
    flex-shrink: 0;
    width: var(--bs-accordion-btn-icon-width);
    height: var(--bs-accordion-btn-icon-width);
    margin-left: auto;
    content: "";
    background-image: var(--bs-accordion-btn-icon);
    background-repeat: no-repeat;
    background-size: var(--bs-accordion-btn-icon-width);
    transition: var(--bs-accordion-btn-icon-transition);
    display: none;
}
.accordion-body {
    padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x);
    background-color: #e7f8ca;
}
.accordion-body h5
{
    font-weight: 600;
    letter-spacing: 1px;
}
.accordion-body ul {
    list-style-type: none; /* Removes default bullets */
    padding-left: 0; /* Removes default padding */
  }

  .accordion-body ul li {
    position: relative;
    padding-left: 25px; /* Space for the custom bullet */
  }

  .accordion-body ul li:before {
    content: "\2022"; /* Unicode character for bullet */
    font-size: 20px; /* Size of the bullet */
    color:var(--color-yellow-green); /* Bullet color */
    position: absolute;
    left: 0;
    top: 0;
  }
  /* Contact us page css */
.contact_section .contact_info h5{
    font-weight: 600;
    letter-spacing: 5px;
  }
  .contact_section .contact_info p
  {
    font-size: 1.2rem;
    font-weight: 300;
  
  }
  .contact_section .contact_info p a
  {
    color: #333;
    text-decoration: none;
  }
  
  .contact_section .contact_form .form-group input,
  .contact_section .contact_form .form-group textarea,
  .contact_section .contact_form .form-group select {
    border-radius: 0;
    border: none;
    outline: none;
    margin-bottom: 20px;
    background-color: white !important;
    padding: 10px;
  }
  
  .contact_section .contact_form .form-group input:focus,
  .contact_section .contact_form .form-group textarea:focus,
  .contact_section .contact_form .form-group select:focus {
    border-bottom: 2px solid var(--color-yellow-green);
  }
  
  .contact_section .contact_form .form-group input::placeholder,
  .contact_section .contact_form .form-group textarea::placeholder {
    color: #757575;
    font-size:1rem;
    font-weight: 300;
    letter-spacing: 1px;
    text-transform: capitalize;
  }
  
  .contact_section .contact_form .form-group input.error,
  .contact_section .contact_form .form-group textarea.error,
  .contact_section .contact_form .form-group select.error {
    border-bottom: 2px solid red;
  }
  
  .contact_section .contact_form .form-group input.valid,
  .contact_section .contact_form .form-group textarea.valid,
  .contact_section .contact_form .form-group select.valid {
    border-bottom: 2px solid green;
  }
  
  
  
  .error-message {
    color: red;
    font-size: 12px;
    margin-top: -15px;
    margin-bottom: 20px;
  }
  .contact_section .contact_form .form-group select {
    border-radius: 0;
    border: none;
    outline: none;
    margin-bottom: 20px;
    background-color: white !important;
    padding: 10px;
    transition: border 0.3s ease;
    color: gray;
    font-weight: 300;
    font-size: 1rem;
  }
  
  .contact_section .contact_form .form-group select:focus {
    border-bottom: 2px solid #757575;
  }
  
  .contact_section .contact_form .form-group select.error {
    border-bottom: 2px solid red;
  }
  
  .contact_section .contact_form .form-group select.valid {
    border-bottom: 2px solid green;
  }
  .error {
    border: 1px solid red;
  }
  
  .valid {
    border: 1px solid green;
  }
  
  .error-message {
    color: red;
    font-size: 12px;
  }