/*
************
*************************

   Template Name: Bajar - Multipurpose E-commerce HTML Template
   Description: Bajar - Multipurpose E-commerce HTML Template. It is a modern Template and fits for all kind of E-commerce website.
   Author: _ThemePhi
   Version: 1.0

-----------------------------------------------------------------------------------

CSS INDEX
=================== 
01. common
02. header
03. sidebar
04. slider
05. feature
06. post
07. season
08. cta
09. testimonial
10. blog
11. blog-list
12. blog-sidebar
13. blog-details
14. brand
15. apps
16. shop
17. shop details
18. wishlist
19. compare
20. cart
21. checkout
22. sign
23. error
24. contact
25. footer
26. back to top

******************************************************* 
*************************************************************** */

/*
************
*************************
01. common
******************************************************* 
*************************************************************** */
@use './variables' as *;
@use './mixins' as *;
@use './colors' as *;

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700;800&family=Marcellus&display=swap');
 body {
    font-family: $jost;
    font-weight: 400;
    font-style: normal;
    color: var(--clr-body-text);
    font-size: 16px;
    line-height: 1.6;
}

.img,img {
	max-width: 100%;
	@include transition(.3s);
}
.f-left {
	float: left
}
.f-right {
	float: right
}
.fix {
	overflow: hidden
}
a,
.button,button {
	@include transition(.3s);
}
a:focus,
.button:focus {
	text-decoration: none;
	outline: none;
}
a:focus,
a:hover
{
	color: inherit;
	text-decoration: none;
}
a,
button {
	color: inherit;
	outline: medium none;
}
button:focus,input:focus,input:focus,textarea,textarea:focus{outline: 0}
.uppercase {
	text-transform: uppercase;
}
.capitalize {
	text-transform: capitalize;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: $marcellus;
	color: var(--clr-body-heading);
	margin-top: 0px;
    line-height: 1.4;
	font-weight: 400;
	text-transform: capitalize;
    margin-bottom: 15px;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
	color: inherit;
}
h1 {
	font-size: 60px;
}
h2 {
	font-size: 48px;
}
h3 {
	font-size: 38px;
}
h4 {
	font-size: 28px;
}
h5 {
	font-size: 20px;
}
h6 {
	font-size: 16px;
}
ul {
	margin: 0px;
	padding: 0px;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
    transition: 0.3s ease-in-out;
}
p {
    font-family: $jost;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: var(--clr-body-text);
    
}
hr {
	border-bottom: 1px solid var(--clr-bg-gray-3);
	border-top: 0 none;
	padding: 0;
    opacity: 1;
    margin: 15px 0;
}
label {
	color: var(--clr-common-black);
	font-size: 14px;
	font-weight: 400;
}
*::-moz-selection {
	background-color: var(--clr-theme-primary);
	color: var(--clr-common-white);
	text-shadow: none;
}
::-moz-selection {
	background-color: var(--clr-theme-primary);
	color: var(--clr-common-white);
	text-shadow: none;
}
::selection {
	background-color: var(--clr-theme-primary);
	color: var(--clr-common-white);
	text-shadow: none;
}



/* <<<<<<<    Input Placeholder   >>>>>>>>> */

input {
    color: var(--clr-body-text);
	@include placeholder {
		color: var(--clr-body-text);
		font-size: 16px;
		opacity: 1;
        transition: .5s;
	}
}
textarea {
    color: var(--clr-body-text);
	@include placeholder {
		color: var(--clr-body-text);
		font-size: 16px;
		opacity: 1;
        transition: .5s;
	}
}

input:focus::placeholder, textarea:focus::placeholder {
    opacity: 0;
}

/* <<<<<<<    Common Classes   >>>>>>>>> */

.fix {
    overflow:hidden
}
.clear{
    clear: both;
}

.p-rel {
    position: relative;
}

.p-abs {
    position: absolute;
}
.p-static {
    position: static;
}
.w_img {
    & img {
        width: 100%;
    }
}

/* <<<<<<<    Overlay   >>>>>>>>> */

[data-overlay] {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    &::before {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        content: "";
    }
}



/* <<<<<<<    Margin & Padding     >>>>>>>>> */

@for $i from 1 through 40 {
    .mt-#{5 * $i}{margin-top: 5px * $i;}
}

@for $i from 1 through 40 {
    .mb-#{5 * $i}{margin-bottom: 5px *$i;}
}

@for $i from 1 through 40 {
    .ml-#{5 * $i}{margin-left: 5px * $i;}
}

@for $i from 1 through 40 {
    .mr-#{5 * $i}{margin-right: 5px *$i;}
}

@for $i from 1 through 40 {
    .pt-#{5 * $i}{padding-top: 5px *$i;}
}

@for $i from 1 through 60 {
    .pb-#{5 * $i}{padding-bottom: 5px *$i;}
}

@for $i from 1 through 40 {
    .pl-#{5 * $i}{padding-left: 5px *$i;}
}

@for $i from 1 through 40 {
    .pr-#{5 * $i}{padding-right: 5px *$i;}
}
.container {
    padding-right: 15px;
    padding-left: 15px;
}
.row {
    --bs-gutter-x: 30px;
    &.g-0 {
        --bs-gutter-x: 0;
    }
}
@media (min-width: 1400px) {
    .container{
        max-width: 1200px;
        &.container-full-1 {
            max-width: 1430px;
        }
    }
    .row {
        &.row-cols-xxl-7 {
            & > * {
                width: 14.2857%;
                flex: 0 0 auto;
                --bs-gutter-x: 10px;
            }
        }
    }
}

/* <<<<<<<    Declaration   >>>>>>>>> */

:root {
    /**
    @color declaration
    */
    @each $color, $shades in $colors {
        @each $shade, $value in $shades {
            --clr-#{$color}-#{$shade}: #{$value};
        }
    }
}

.bg-default {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.pl-72 {
    padding-left: 72px;
}
.pb-83 {
    padding-bottom: 83px;
}
.pb-32 {
    padding-bottom: 32px;
}
.mb-33 {
    margin-bottom: 33px;
}
.portfolio-nav-space-reverce {
    margin-bottom: -15px;
}
.bg-default {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.pt-410 {
    padding-top: 410px;
}
.mb-48 {
    margin-bottom: 48px;
}
.mb-43 {
    margin-bottom: 43px;
}
.mb-27 {
    margin-bottom: 27px;
}
.pb-305 {
    padding-bottom: 305px;
}
.no-after {
    &::after {
        display: none;
    }
}
.pb-335 {
    padding-bottom: 335px;
}
i[class^="flaticon-"]:before, i[class*=" flaticon-"]:before {
    line-height: inherit;
}
.pt-5-px {
    padding-top: 5px;
}
.mt-minus-20 {
    margin-top: -20px;
}
.mb-5-px {
    margin-bottom: 5px;
}


/*---------------------------------------------------*/
/*  mouse cursor animation
/*---------------------------------------------------*/
.mouseCursor {
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none;
    border-radius: 50%;
    transform: translateZ(0);
    visibility: hidden;
  }
  
  .cursor-inner {
    margin-left: -3px;
    margin-top: -3px;
    width: 6px;
    height: 6px;
    z-index: 10000001;
    background-color: #ff3900;
    transition: width 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
  }
  
  .cursor-inner.cursor-hover {
      margin-left: -30px;
      margin-top: -30px;
      width: 60px;
      height: 60px;
      background-color: #ff3900;
      opacity: 0.5;
  }
  
  .cursor-outer {
    margin-left: -15px;
    margin-top: -15px;
    width: 30px;
    height: 30px;
    border: 2px solid #ff3900;
    box-sizing: border-box;
    z-index: 10000000;
    opacity: 0.5;
    transition: all 0.08s ease-out;
  }
  
  .cursor-outer.cursor-hover {
    opacity: 0;
  }
  
  .mim_tm_all_wrap[data-magic-cursor=hide] .mouseCursor {
    display: none;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    z-index: -1111;
  }
  .admin-cursor-button-list-1 .admin-cursor-default {line-height: 40px;display: inline-block;border: 0;background: orangered;color: #fff;padding: 0 20px;height: 40px;font-size: 20px;margin-right: 8px;}
  
  .admin-cursor-button-list-1 .admin-cursor-magic {border: 0;
      background: orangered;
      line-height: 40px;
      color: #fff;
      display: inline-block;
      padding: 0 20px;
      height: 40px;
      font-size: 20px;
    }
    .mouse-cursor-invisible {
      display: none;
      &.visible {
        display: block;
      }
    }
    .theme-bg {
        background-color: var(--clr-theme-primary);
    }