.fml\:bold { font-family: var(--font-bold) !important; } 

.fml\:black { font-family: var(--font-black) !important; } 

.fml\:regular { font-family: var(--font-regular) !important; } 

.fml\:medium { font-family: var(--font-medium) !important; } 

.fml\:semi { font-family: var(--font-semi) !important; } 

.fml\:xbold { font-family: var(--font-xbold) !important; } 

.fml\:light { font-family: var(--font-light) !important; } 

.fml\:black { font-family: var(--font-black) !important; } 

.fml\:extra { font-family: var(--font-extra) !important; } 

.fml\:custom { font-family: var(--font-custom) !important; } 

.fml\:custom-v2 { font-family: var(--font-custom-v2) !important; } 

.fml\:custom-v3 { font-family: var(--font-custom-v3) !important; } 



.z-index\:1 { z-index: 1; } 

.z-index\:2 { z-index: 2; } 

.z-index\:3 { z-index: 3; } 



.clr-text\:main { color: var(--color-main); } 

.clr-text\:main-v2 { color: var(--color-main-v2); } 

.clr-text\:white { color: var(--color-white); } 

.clr-text\:title { color: var(--color-title); } 

.clr-text\:hover { color: var(--color-hover); } 

.clr-text\:gray { color: #787878; } 

.clr-text\:wheat { color: #FFF2DC; } 





.clr-hover\:white:hover { color: var(--color-white); } 

.clr-hover\:title:hover { color: var(--color-title); } 

.clr-hover\:hover:hover { color: var(--color-hover); } 

.clr-hover\:main-v2:hover { color: var(--color-main-v2); } 

.clr-hover\:main:hover { color: var(--color-main); } 



.bg-hover\:main:hover { background: var(--color-main); } 

.bg-hover\:main-v2:hover { background: var(--color-main-v2); } 

.bg-hover\:hover:hover { background: var(--color-hover); } 

.bg-hover\:white:hover { background: var(--color-white); } 

.bg-hover\:title:hover { background: var(--color-title); } 

.bg-hover\:gradient:hover { background: var(--color-gradient); } 



.bg-clr\:main { background: var(--color-main); } 

.bg-clr\:main-v2 { background: var(--color-main-v2); } 

.bg-clr\:title { background: var(--color-title); } 

.bg-clr\:white { background: var(--color-white); } 

.bg-clr\:gradient { background: var(--color-gradient); } 





/* MARGIN */

.mt\:5 { margin-top: 5px; } 

.mt\:10 { margin-top: 10px; } 

.mt\:15 { margin-top: 15px; } 

.mt\:20 { margin-top: 20px; } 

.mt\:25 { margin-top: 25px; } 

.mt\:30 { margin-top: 30px; } 

.mt\:35 { margin-top: 35px; } 

.mt\:40 { margin-top: 40px; } 

.mt\:45 { margin-top: 45px; } 

.mt\:50 { margin-top: 50px; } 



.mr\:3 { margin-right: 3px; } 

.mr\:5 { margin-right: 5px; } 

.mr\:10 { margin-right: 10px; } 

.mr\:15 { margin-right: 15px; } 

.mr\:20 { margin-right: 20px; } 

.mr\:25 { margin-right: 25px; } 

.mr\:30 { margin-right: 30px; } 

.mr\:35 { margin-right: 35px; } 

.mr\:40 { margin-right: 40px; } 

.mr\:45 { margin-right: 45px; } 

.mr\:50 { margin-right: 50px; } 





.mb\:5 { margin-bottom: 5px; } 

.mb\:10 { margin-bottom: 10px; } 

.mb\:15 { margin-bottom: 15px; } 

.mb\:20 { margin-bottom: 20px; } 

.mb\:25 { margin-bottom: 25px; } 

.mb\:30 { margin-bottom: 30px; } 

.mb\:35 { margin-bottom: 35px; } 

.mb\:40 { margin-bottom: 40px; } 

.mb\:45 { margin-bottom: 45px; } 

.mb\:50 { margin-bottom: 50px; } 



.ml\:3 { margin-left: 3px; } 

.ml\:5 { margin-left: 5px; } 

.ml\:10 { margin-left: 10px; } 

.ml\:15 { margin-left: 15px; } 

.ml\:20 { margin-left: 20px; } 

.ml\:25 { margin-left: 25px; } 

.ml\:30 { margin-left: 30px; } 

.ml\:35 { margin-left: 35px; } 

.ml\:40 { margin-left: 40px; } 

.ml\:45 { margin-left: 45px; } 

.ml\:50 { margin-left: 50px; } 



.mx\:5 { margin-left: 5px; margin-right: 5px; } 

.mx\:10 { margin-left: 10px; margin-right: 10px; } 

.mx\:15 { margin-left: 15px; margin-right: 15px; } 

.mx\:20 { margin-left: 20px; margin-right: 20px; } 

.mx\:25 { margin-left: 25px; margin-right: 25px; } 

.mx\:30 { margin-left: 30px; margin-right: 30px; } 

.mx\:35 { margin-left: 35px; margin-right: 35px; } 

.mx\:40 { margin-left: 40px; margin-right: 40px; } 

.mx\:45 { margin-left: 45px; margin-right: 45px; } 

.mx\:50 { margin-left: 50px; margin-right: 50px; } 



.my\:5 { margin-top: 5px; margin-bottom: 5px; } 

.my\:10 { margin-top: 10px; margin-bottom: 10px; } 

.my\:15 { margin-top: 15px; margin-bottom: 15px; } 

.my\:20 { margin-top: 20px; margin-bottom: 20px; } 

.my\:25 { margin-top: 25px; margin-bottom: 25px; } 

.my\:30 { margin-top: 30px; margin-bottom: 30px; } 

.my\:35 { margin-top: 35px; margin-bottom: 35px; } 

.my\:40 { margin-top: 40px; margin-bottom: 40px; } 

.my\:45 { margin-top: 45px; margin-bottom: 45px; } 

.my\:50 { margin-top: 50px; margin-bottom: 50px; } 



/* PADDING */

.p\:5 { padding: 5px; } 

.p\:10 { padding: 10px; } 

.p\:15 { padding: 15px; } 

.p\:20 { padding: 20px; } 

.p\:25 { padding: 25px; } 

.p\:30 { padding: 30px; } 

.p\:35 { padding: 35px; } 

.p\:40 { padding: 40px; } 

.p\:45 { padding: 45px; } 

.p\:50 { padding: 50px; } 



.pt\:5 { padding-top: 5px; } 

.pt\:10 { padding-top: 10px; } 

.pt\:15 { padding-top: 15px; } 

.pt\:20 { padding-top: 20px; } 

.pt\:25 { padding-top: 25px; } 

.pt\:30 { padding-top: 30px; } 

.pt\:35 { padding-top: 35px; } 

.pt\:40 { padding-top: 40px; } 

.pt\:45 { padding-top: 45px; } 

.pt\:50 { padding-top: 50px; } 



.pr\:5 { padding-right: 5px; } 

.pr\:10 { padding-right: 10px; } 

.pr\:15 { padding-right: 15px; } 

.pr\:20 { padding-right: 20px; } 

.pr\:25 { padding-right: 25px; } 

.pr\:30 { padding-right: 30px; } 

.pr\:35 { padding-right: 35px; } 

.pr\:40 { padding-right: 40px; } 

.pr\:45 { padding-right: 45px; } 

.pr\:50 { padding-right: 50px; } 



.pb\:5 { padding-bottom: 5px; } 

.pb\:10 { padding-bottom: 10px; } 

.pb\:15 { padding-bottom: 15px; } 

.pb\:20 { padding-bottom: 20px; } 

.pb\:25 { padding-bottom: 25px; } 

.pb\:30 { padding-bottom: 30px; } 

.pb\:35 { padding-bottom: 35px; } 

.pb\:40 { padding-bottom: 40px; } 

.pb\:45 { padding-bottom: 45px; } 

.pb\:50 { padding-bottom: 50px; } 



.pl\:5 { padding-left: 5px; } 

.pl\:10 { padding-left: 10px; } 

.pl\:15 { padding-left: 15px; } 

.pl\:20 { padding-left: 20px; } 

.pl\:25 { padding-left: 25px; } 

.pl\:30 { padding-left: 30px; } 

.pl\:40 { padding-left: 40px; } 

.pl\:50 { padding-left: 50px; } 



.py\:5 { padding-top: 5px; padding-bottom: 5px; } 

.py\:10 { padding-top: 10px; padding-bottom: 10px; } 

.py\:15 { padding-top: 15px; padding-bottom: 15px; } 

.py\:20 { padding-top: 20px; padding-bottom: 20px; } 

.py\:25 { padding-top: 25px; padding-bottom: 25px; } 

.py\:30 { padding-top: 30px; padding-bottom: 30px; } 

.py\:40 { padding-top: 40px; padding-bottom: 40px; } 

.py\:50 { padding-top: 50px; padding-bottom: 50px; } 



.px\:5 { padding-left: 5px; padding-right: 5px; } 

.px\:10 { padding-left: 10px; padding-right: 10px; } 

.px\:15 { padding-left: 15px; padding-right: 15px; } 

.px\:20 { padding-left: 20px; padding-right: 20px; } 

.px\:25 { padding-left: 25px; padding-right: 25px; } 

.px\:30 { padding-left: 30px; padding-right: 30px; } 

.px\:40 { padding-left: 40px; padding-right: 40px; } 

.px\:50 { padding-left: 50px; padding-right: 50px; } 



/* FONT SIZE */

.fsz\:10 { font-size: 10px !important; } 

.fsz\:14 { font-size: 14px !important; } 

.fsz\:15 { font-size: 15px !important; } 

.fsz\:16 { font-size: 16px !important; } 

.fsz\:17 { font-size: 17px !important; } 

.fsz\:18 { font-size: 18px !important; } 

.fsz\:19 { font-size: 19px !important; } 

.fsz\:20 { font-size: 20px !important; } 

.fsz\:21 { font-size: 21px !important; } 

.fsz\:22 { font-size: 22px !important; } 

.fsz\:23 { font-size: 23px !important; } 

.fsz\:24 { font-size: 24px !important; } 

.fsz\:25 { font-size: 25px !important; } 

.fsz\:26 { font-size: 26px !important; } 

.fsz\:27 { font-size: 27px !important; } 

.fsz\:28 { font-size: 28px !important; } 

.fsz\:29 { font-size: 29px !important; } 

.fsz\:30 { font-size: 30px !important; } 

.fsz\:31 { font-size: 31px !important; } 

.fsz\:32 { font-size: 32px !important; } 

.fsz\:33 { font-size: 33px !important; } 

.fsz\:34 { font-size: 34px !important; } 

.fsz\:35 { font-size: 35px !important; } 

.fsz\:36 { font-size: 36px !important; } 

.fsz\:37 { font-size: 37px !important; } 

.fsz\:38 { font-size: 38px !important; } 

.fsz\:39 { font-size: 39px !important; } 

.fsz\:40 { font-size: 40px !important; } 

.fsz\:41 { font-size: 41px !important; } 

.fsz\:42 { font-size: 42px !important; } 

.fsz\:43 { font-size: 43px !important; } 

.fsz\:44 { font-size: 44px !important; } 

.fsz\:45 { font-size: 45px !important; } 

.fsz\:46 { font-size: 46px !important; } 

.fsz\:47 { font-size: 47px !important; } 

.fsz\:48 { font-size: 48px !important; } 

.fsz\:49 { font-size: 49px !important; } 

.fsz\:50 { font-size: 50px !important; } 

.fsz\:55 { font-size: 55px !important; } 

.fsz-resize\:48 { font-size: clamp(25px,3.5vw,48px); } 

.fsz-resize\:49 { font-size: clamp(25px,3.5vw,49px); } 

.fsz-resize\:50 { font-size: clamp(25px,3.5vw,50px); } 

.fsz-resize\:90 { font-size: clamp(50px,3.5vw,90px); } 





@media only screen and (max-width: 767px){

 .fsz\:16 { font-size: 14px !important; } 

 .fsz\:17 { font-size: 14px !important; } 

 .fsz\:18 { font-size: 15px !important; } 

 .fsz\:20 { font-size: 16px !important; } 

 .fsz\:21 { font-size: 17px !important; } 

 .fsz\:22 { font-size: 18px !important; } 

 .fsz\:23 { font-size: 20px !important; } 

 .fsz\:24 { font-size: 21px !important; } 

 .fsz\:25 { font-size: 22px !important; } 

 .fsz\:26 { font-size: 23px !important; } 

 .fsz\:27 { font-size: 24px !important; } 

 .fsz\:28 { font-size: 25px !important; } 

 .fsz\:29 { font-size: 26px !important; } 

 .fsz\:30 { font-size: 27px !important; } 

 .fsz\:31 { font-size: 18px !important; } 

 .fsz\:32 { font-size: 19px !important; } 

 .fsz\:33 { font-size: 20px !important; } 

 .fsz\:34 { font-size: 21px !important; } 

 .fsz\:35 { font-size: 22px !important; } 

 .fsz\:36 { font-size: 23px !important; } 

 .fsz\:37 { font-size: 24px !important; } 

 .fsz\:38 { font-size: 25px !important; } 

 .fsz\:39 { font-size: 26px !important; } 

 .fsz\:40 { font-size: 27px !important; } 

 .fsz\:41 { font-size: 28px !important; } 

 .fsz\:42 { font-size: 29px !important; } 

 .fsz\:43 { font-size: 30px !important; } 

 .fsz\:44 { font-size: 31px !important; } 

 .fsz\:45 { font-size: 32px !important; } 

 .fsz\:46 { font-size: 33px !important; } 

 .fsz\:47 { font-size: 34px !important; } 

 .fsz\:48 { font-size: 35px !important; } 

 .fsz\:49 { font-size: 36px !important; } 

 .fsz\:50 { font-size: 37px !important; } 

 }





/* BORDER RADIUS */

.rounded\:5 { border-radius: 5px; } 

.rounded\:10 { border-radius: 10px; } 

.rounded\:15 { border-radius: 15px; } 

.rounded\:20 { border-radius: 20px; } 

.rounded\:25 { border-radius: 25px; } 

.rounded\:30 { border-radius: 30px; } 

.rounded\:50 { border-radius: 50px; } 

.rounded\:circle { border-radius: 50%; } 



.rounded-tl\:5 { border-top-left-radius: 5px; } 

.rounded-tl\:10 { border-top-left-radius: 10px; } 

.rounded-tl\:15 { border-top-left-radius: 15px; } 

.rounded-tl\:20 { border-top-left-radius: 20px; } 

.rounded-tl\:25 { border-top-left-radius: 25px; } 

.rounded-tl\:30 { border-top-left-radius: 30px; } 



.rounded-tr\:5 { border-top-right-radius: 5px; } 

.rounded-tr\:10 { border-top-right-radius: 10px; } 

.rounded-tr\:15 { border-top-right-radius: 15px; } 

.rounded-tr\:20 { border-top-right-radius: 20px; } 

.rounded-tr\:25 { border-top-right-radius: 25px; } 

.rounded-tr\:30 { border-top-right-radius: 30px; } 



.rounded-bl\:5 { border-bottom-left-radius: 5px; } 

.rounded-bl\:10 { border-bottom-left-radius: 10px; } 

.rounded-bl\:15 { border-bottom-left-radius: 15px; } 

.rounded-bl\:20 { border-bottom-left-radius: 20px; } 

.rounded-bl\:25 { border-bottom-left-radius: 25px; } 

.rounded-bl\:30 { border-bottom-left-radius: 30px; } 



.rounded-br\:5 { border-bottom-right-radius: 5px; } 

.rounded-br\:10 { border-bottom-right-radius: 10px; } 

.rounded-br\:15 { border-bottom-right-radius: 15px; } 

.rounded-br\:20 { border-bottom-right-radius: 20px; } 

.rounded-br\:25 { border-bottom-right-radius: 25px; } 

.rounded-br\:30 { border-bottom-right-radius: 30px; } 



.border-top\:1 { border-top-width: 1px; } 

.border-right\:1 { border-right-width: 1px; } 

.border-bottom\:1 { border-bottom-width: 1px; } 

.border-left\:1 { border-left-width: 1px; } 

.border-color\:main { border-color: var(--color-main); } 

.border-color\:main-v2 { border-color: var(--color-main-v2); } 

.border-color\:title { border-color: var(--color-title); } 

.border-color\:white { border-color: var(--color-white); } 

.border-color\:active { border-color: var(--color-active); } 

.border-hover\:main:hover { border-color: var(--color-main); } 

.border-hover\:main-v2:hover { border-color: var(--color-main-v2); } 

.border-hover\:title { border-color: var(--color-title); } 

.border-hover\:white { border-color: var(--color-white); } 

.border-hover\:active { border-color: var(--color-active); } 





/* LINE HEIGHT */

.line-height\:normal { line-height: normal; } 

.line-height\:1 { line-height: 1; } 

.line-height\:1\.1 { line-height: 1.1; } 

.line-height\:1\.2 { line-height: 1.2; } 

.line-height\:1\.3 { line-height: 1.3; } 

.line-height\:1\.4 { line-height: 1.4; } 

.line-height\:1\.5 { line-height: 1.5; } 

.line-height\:1\.6 { line-height: 1.6; } 

.line-height\:1\.7 { line-height: 1.7; } 

.line-height\:1\.8 { line-height: 1.8; } 

.line-height\:1\.9 { line-height: 1.9; } 

.line-height\:2 { line-height: 2; } 



/* CLAMP TEXT */

.clamp-line\:1 { -webkit-line-clamp: 1; } 

.clamp-line\:2 { -webkit-line-clamp: 2; } 

.clamp-line\:3 { -webkit-line-clamp: 3; } 

.clamp-line\:4 { -webkit-line-clamp: 4; } 

.clamp-line\:5 { -webkit-line-clamp: 5; } 

.clamp-line\:6 { -webkit-line-clamp: 6; } 

.clamp-line\:7 { -webkit-line-clamp: 7; } 

.clamp-line\:8 { -webkit-line-clamp: 8; } 

.clamp-line\:9 { -webkit-line-clamp: 9; } 

.clamp-line\:10 { -webkit-line-clamp: 10; } 



/* GAP */

.gap\:5 { gap: 5px; } 

.gap\:10 { gap: 10px; } 

.gap\:15 { gap: 15px; } 

.gap\:20 { gap: 20px; } 

.gap\:25 { gap: 25px; } 

.gap\:30 { gap: 30px; } 

.gap\:35 { gap: 35px; } 

.gap\:40 { gap: 40px; } 

.gap\:45 { gap: 45px; } 

.gap\:50 { gap: 50px; } 

.gap\:55 { gap: 55px; } 

.gap\:60 { gap: 60px; } 

.gap\:65 { gap: 65px; } 

.gap\:70 { gap: 70px; } 

.gap\:75 { gap: 75px; } 

.gap\:80 { gap: 80px; } 

.gap\:85 { gap: 85px; } 

.gap\:90 { gap: 90px; } 

.gap\:95 { gap: 95px; } 

.gap\:100 { gap: 100px; } 

@media only screen and (max-width: 767px) {.gap\:100 { gap: 50px; } 

.gap\:50 { gap: 25px; } 

.gap\:45 { gap: 25px; } 

.gap\:40 { gap: 20px; } 

.gap\:35 { gap: 20px; } 

.gap\:30 { gap: 15px; } 

.gap\:25 { gap: 15px; } 

.gap\:20 { gap: 10px; } 

.gap\:15 { gap: 10px; } 

.gap\:10 { gap: 5px; } 

 }



/* GRID */

.grid-col\:2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } 

.grid-col\:3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } 

.grid-col\:4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } 

.grid-col\:5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } 

.grid-col\:6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } 

.grid-col\:7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } 

.grid-col\:8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } 

.grid-col\:9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } 

.grid-col\:10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } 

.grid-col\:11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } 

.grid-col\:12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } 

@media only screen and (max-width: 767px) {

    

.grid-col\:6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } 

.grid-col\:5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } 

.grid-col\:4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } 

.grid-col\:3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } 

.grid-col\:2 { grid-template-columns: repeat(1, minmax(0, 1fr)); }



}



/*PADDING MEDIA*/

.py-80 { padding-top: 80px; padding-bottom: 80px; } 

.py-90 { padding-top: 90px; padding-bottom: 90px; } 

.py-100 { padding-top: 100px; padding-bottom: 100px; } 

.py-110 { padding-top: 110px; padding-bottom: 110px; } 

.py-120 { padding-top: 120px; padding-bottom: 120px; } 

.py-70 { padding-top: 70px; padding-bottom: 70px; } 

.py-60 { padding-top: 60px; padding-bottom: 60px; } 

.py-50 { padding-top: 50px; padding-bottom: 50px; } 

.py-40 { padding-top: 40px; padding-bottom: 40px; } 

.py-30 { padding-top: 30px; padding-bottom: 30px; } 

.mb-50 { margin-bottom: 50px; } 

.mb-80 { margin-bottom: 80px; } 

.mb-30 { margin-bottom: 30px; } 

@media only screen and (max-width: 991px) {.mgb-res { margin-bottom: 30px; } 

.mb-none { display: none !important; } 

.mb-block { display: block !important; } 

.py-80 { padding-top: 40px; padding-bottom: 40px; } 

.py-90 { padding-top: 45px; padding-bottom: 45px; } 

.py-100 { padding-top: 50px; padding-bottom: 50px; } 

.py-70 { padding-top: 40px; padding-bottom: 40px; } 

.py-60 { padding-top: 40px; padding-bottom: 40px; } 

.py-50 { padding-top: 40px; padding-bottom: 40px; } 

.mb-50 { margin-bottom: 40px; } 

 }

@media only screen and (max-width: 767px){

 .py-70 { padding-top: 30px; padding-bottom: 30px; } 

.py-60 { padding-top: 30px; padding-bottom: 30px; } 

.py-50 { padding-top: 30px; padding-bottom: 30px; } 

.mb-80 { margin-bottom: 40px; } 

.mb-50 { margin-bottom: 30px; } 

}