/* make mt-10 to mt-100 increase by 10px each */
.mt-10{ margin-top: 10px; }
.mt-20{ margin-top: 20px; }
.mt-30{ margin-top: 30px; }
.mt-40{ margin-top: 40px; }
.mt-50{ margin-top: 50px; }
.mt-60{ margin-top: 60px; }
.mt-70{ margin-top: 70px; }
.mt-80{ margin-top: 80px; }
.mt-90{ margin-top: 90px; }
.mt-100{ margin-top: 100px; }
.mb-10{ margin-bottom: 10px; }
.mb-20{ margin-bottom: 20px; }
.mb-30{ margin-bottom: 30px; }
.mb-40{ margin-bottom: 40px; }
.mb-50{ margin-bottom: 50px; }
.mb-60{ margin-bottom: 60px; }
.mb-70{ margin-bottom: 70px; }
.mb-80{ margin-bottom: 80px; }
.mb-90{ margin-bottom: 90px; }
.mb-100{ margin-bottom: 100px;}
.br-5  { border-radius: 5px; }
.br-10 { border-radius: 10px; }
.br-15 { border-radius: 15px; }
.br-20 { border-radius: 20px; }
.br-25 { border-radius: 25px; }
.br-30 { border-radius: 30px; }
.pr-10 { padding-right: 10px; }
.pr-20 { padding-right: 20px; }
.pr-30 { padding-right: 30px; }
.pr-40 { padding-right: 40px; }
.pr-50 { padding-right: 50px; }
.pr-60 { padding-right: 60px; }
.pr-70 { padding-right: 70px; }
.pr-80 { padding-right: 80px; }
.pr-90 { padding-right: 90px; }
.pr-100 { padding-right: 100px; }

.pl-10 { padding-left: 10px; }
.pl-20 { padding-left: 20px; }
.pl-30 { padding-left: 30px; }
.pl-40 { padding-left: 40px; }
.pl-50 { padding-left: 50px; }
.pl-60 { padding-left: 60px; }
.pl-70 { padding-left: 70px; }
.pl-80 { padding-left: 80px; }
.pl-90 { padding-left: 90px; }
.pl-100 { padding-left: 100px; }

.object-fit-cover{
    object-fit: cover;
}
/* Font size classes */ 
.fs-48 { font-size: 48px; }
.fs-32 { font-size: 32px; }
.fs-36 { font-size: 36px; }
.fs-24 { font-size: 24px; }
.fs-20 { font-size: 20px; }
.fs-16 { font-size: 16px; }
.fs-18 { font-size: 18px; }
.fs-14 { font-size: 14px; }

/* Width classes */
.w-50 { width: 50%; }
.w-60 { width: 60%; }
.w-70 { width: 70%; }
.w-80 { width: 80%; }
.w-90 { width: 90%; }
.w-100 { width: 100%; }
.icon-scaler{
    width: 100%;
    height: 100%;
}


/* Small devices (tablets) */
@media (min-width: 576px) {
    .fs-sm-48 { font-size: 48px; }
    .fs-sm-32 { font-size: 32px; }
    .fs-sm-36 { font-size: 36px; }
    .fs-sm-24 { font-size: 24px; }
    .fs-sm-20 { font-size: 20px; }
    .fs-sm-16 { font-size: 16px; }
    .fs-sm-18 { font-size: 18px; }
    .fs-sm-14 { font-size: 14px; }

    .w-sm-50 { width: 50%; }
    .w-sm-60 { width: 60%; }
    .w-sm-70 { width: 70%; }
    .w-sm-80 { width: 80%; }
    .w-sm-90 { width: 90%; }
    .w-sm-100 { width: 100%; }
    .object-fit-cover-sm{object-fit: cover;}
    .icon-scaler-sm{
        width: 40%;
        height: 40%;
    }
}







/* Medium devices (desktops) */
@media (min-width: 768px) {
    .fs-md-48 { font-size: 48px; }
    .fs-md-32 { font-size: 32px; }
    .fs-md-36 { font-size: 36px; }
    .fs-md-24 { font-size: 24px; }
    .fs-md-20 { font-size: 20px; }
    .fs-md-16 { font-size: 16px; }
    .fs-md-18 { font-size: 18px; }
    .fs-md-14 { font-size: 14px; }

    .w-md-50 { width: 50%; }
    .w-md-60 { width: 60%; }
    .w-md-70 { width: 70%; }
    .w-md-80 { width: 80%; }
    .w-md-90 { width: 90%; }
    .w-md-100 { width: 100%; }
    .object-fit-cover-md{object-fit: cover;}
    .icon-scaler-md{
        width: 60%;
        height: 60%;
    }
}

/* Large devices (large desktops) */
@media (min-width: 992px) {
    .fs-lg-48 { font-size: 48px; }
    .fs-lg-32 { font-size: 32px; }
    .fs-lg-36 { font-size: 36px; }
    .fs-lg-24 { font-size: 24px; }
    .fs-lg-20 { font-size: 20px; }
    .fs-lg-16 { font-size: 16px; }
    .fs-lg-18 { font-size: 18px; }
    .fs-lg-14 { font-size: 14px; }

    .w-lg-50 { width: 50%; }
    .w-lg-60 { width: 60%; }
    .w-lg-70 { width: 70%; }
    .w-lg-80 { width: 80%; }
    .w-lg-90 { width: 90%; }
    .w-lg-100 { width: 100%; }
    .object-fit-cover-lg{object-fit: cover;}
    .icon-scaler-lg{
        width: 100%;
        height: 100%;
    }
   
}

/* Extra large devices (extra large desktops) */
@media (min-width: 1200px) {
    .fs-xl-48 { font-size: 48px; }
    .fs-xl-32 { font-size: 32px; }
    .fs-xl-36 { font-size: 36px; }
    .fs-xl-24 { font-size: 24px; }
    .fs-xl-20 { font-size: 20px; }
    .fs-xl-16 { font-size: 16px; }
    .fs-xl-18 { font-size: 18px; }
    .fs-xl-14 { font-size: 14px; }
    .w-xl-50 { width: 50%; }
    .w-xl-60 { width: 60%; }
    .w-xl-70 { width: 70%; }
    .w-xl-80 { width: 80%; }
    .w-xl-90 { width: 90%; }
    .w-xl-100 { width: 100%; }
    .object-fit-cover-xl{object-fit: cover;}
}