// text size
.font-12{
    font-size: 12px !important;
}
.font-13{
    font-size: 13px !important;
}
.font-14 {
    font-size: 14px !important;
}
.font-16{
    font-size: 16px !important;
}
.font-18 {
    font-size: 18px !important;
}
.font-22{
    font-size: 22px !important;
}
.font-24{
    font-size: 24px !important;
}
.font-26 {
    font-size: 26px !important;
}

// Font Size
$value: 20;
$x: 5;
$y: px;
@for $i from 0 through $value{
    .font-#{$i*$x}{
        font-size: ($x*$i) + $y !important;
    }
}

// Font Weight
$value: 9;
$x: 100;
@for $i from 0 through $value{
    .font-w#{$i*$x}{
        font-weight: ($x*$i) + !important;
    }
}

// Letter Spacing
$value: 5;
$x: 1;
@for $i from 0 through $value{
    .ls-#{$i*$x}{
        letter-spacing: ($x*$i) + px;
    }
}

// Padding Margin
$value: 20;
$x: 5;
$y: px;
@for $i from 0 through $value{
    // Padding Value
    .p-a#{$i*$x}{
        padding: ($x*$i) + $y;
    }
    .p-l#{$i*$x}{
        padding-left: ($x*$i) + $y;
    }
    .p-r#{$i*$x}{
        padding-right: ($x*$i) + $y;
    }
    .p-t#{$i*$x}{
        padding-top: ($x*$i) + $y !important;
    }
    .p-b#{$i*$x}{
        padding-bottom: ($x*$i) + $y;
    }
    .p-lr#{$i*$x}{
        padding-left: ($x*$i) + $y;
        padding-right: ($x*$i) + $y;
    }
    .p-tb#{$i*$x}{
        padding-bottom: ($x*$i) + $y !important;
        padding-top: ($x*$i) + $y !important;
    }
    
    // Margin Value
    .m-a#{$i*$x}{
        margin: ($x*$i) + $y;
    }
    .m-l#{$i*$x}{
        margin-left: ($x*$i) + $y;
    }
    .m-r#{$i*$x}{
        margin-right: ($x*$i) + $y;
    }
    .m-t#{$i*$x}{
        margin-top: ($x*$i) + $y;
    }
    .m-b#{$i*$x}{
        margin-bottom: ($x*$i) + $y;
    }
    .m-lr#{$i*$x}{
        margin-left: ($x*$i) + $y;
        margin-right: ($x*$i) + px;
    }
    .m-tb#{$i*$x}{
        margin-bottom: ($x*$i) + $y;
        margin-top: ($x*$i) + $y;
    }
}
@media only screen and (max-width: 1200px) {
    @for $i from 0 through $value{
        // Margin Value
        .m-lg-t#{$i*$x}{
            margin-top: ($x*$i) + px;
        }
        .m-lg-b#{$i*$x}{
            margin-bottom: ($x*$i) + px;
        }
    }
}
@media only screen and (max-width: 991px) {
    @for $i from 0 through $value{
        // Margin Value
        .m-md-t#{$i*$x}{
            margin-top: ($x*$i) + px;
        }
        .m-md-b#{$i*$x}{
            margin-bottom: ($x*$i) + px;
        }
    }
}
@media only screen and (max-width: 767px) {
    @for $i from 0 through $value{
        // Margin Value
        .m-sm-t#{$i*$x}{
            margin-top: ($x*$i) + px;
        }
        .m-sm-b#{$i*$x}{
            margin-bottom: ($x*$i) + px;
        }
    }
}
@media only screen and (max-width: 576px) {
    @for $i from 0 through $value{
        // Margin Value
        .m-xs-t#{$i*$x}{
            margin-top: ($x*$i) + px;
        }
        .m-xs-b#{$i*$x}{
            margin-bottom: ($x*$i) + px;
        }
    }
}
.m-auto {
    margin: auto;
}

// BOX MAX WIDTH CSS
.max-w50 {
    max-width: 50px;
}
.max-w60 {
    max-width: 60px;
}
.max-w80 {
    max-width: 80px;
}
.max-w100 {
    max-width: 100px;
}
.max-w200 {
    max-width: 200px;
}
.max-w300 {
    max-width: 300px;
}
.max-w400 {
    max-width: 400px;
}
.max-w500 {
    max-width: 500px;
}
.max-w600 {
    max-width: 600px;
}
.max-w700 {
    max-width: 700px;
}
.max-w800 {
    max-width: 800px;
}
.max-w900 {
    max-width: 900px;
}
.max-w1000 {
    max-width: 1000px;
}

// BACKGROUND IMAGE
.bg-img-fix {
    background-attachment: fixed;
	background-size: cover;
}
.full-img{
	width:100%;
}

.sticky-top{
	top:120px;
}
.img-cover {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
section{
    position: relative;
	z-index: 1;
}

// rounded
.rounded-full{
	border-radius: 50% !important;
}
.rounded-xl{
	border-radius: 50px !important;
}
.rounded-lg{
	border-radius: 15px !important;
}
.rounded-md{
	border-radius: 10px !important;
}
.rounded-sm{
	border-radius: 5px !important;
}

// text color
.text-maroon{
	color: $maroon;
}
.text-orange{
	color: $orange;
}
.text-yellow{
	color: $yellow;
}
.text-skyblue{
	color: $green;
}
.text-red{
	color: $red;
}
.text-green{
	color: $green;
}
.text-blue{
	color: $blue;
}

// bg color
.bg-maroon{
	background-color: #dd2ca0;
    &.light{
        background-color: rgba(221, 44, 160, 0.1);
        svg{
            path{
                fill: #dd2ca0;
            }
        }
        i{
            color: #dd2ca0;
        }
    }
}
.bg-orange{
    background-color: #ff8853;
	&.light{
        background-color: rgba(255, 200, 0, 0.1);
        svg{
            path{
                fill: #ff8853;
            }
        }
        i{
            color: #ff8853;
        }
    }
}
.bg-yellow{
    background-color: #ffc600;
	&.light{
        background-color: rgba(255, 200, 0, 0.1);
        svg{
            path,
			circle{
                fill: #ffc600;
            }
        }
        i{
            color: #ffc600;
        }
    }
}
.bg-skyblue{
    background-color: #00aeff;
	&.light{
        background-color: rgba(0, 174, 255, 0.1);
        svg{
            path{
                fill: #00aeff;
            }
        }
        i{
            color: #00aeff;
        }
    }
}
.bg-red{
	background-color: #ff586e;
    &.light{
		background-color: rgba(255, 88, 110, 0.1);
        svg{
            path{
                fill: #ff586e;
            }
        }
        i{
            color: #ff586e;
        }
    }
}
.bg-green{
    background-color: #84CA93;
	&.light{
        background-color: rgba(4, 165, 124, 0.1);
        svg{
            path,
            rect{
                fill: #84CA93;
            }
        }
        i{
            color: #84CA93;
        }
    }
}
.bg-blue{
    background-color: #4a8be0;
	&.light{
        background-color: rgba(74, 139, 224, 0.1);
        svg{
            path{
                fill: #4a8be0;
            }
        }
        i{
            color: #4a8be0;
        }
    }
}
.bg-pink{
    background-color: #ff4db8;
	&.light{
		background-color: rgba(255, 77, 184, 0.1);
        svg{
            path{
                fill: #ff4db8;
            }
        }
        i{
            color: #ff4db8;
        }
    }
}