@use '../utils' as *;
/*============================================

   Theme Name: Beeko - Business Consulting HTML Template
   Author : ThemeGenix
   Support: themegenix@gmail.com
   Description: Beeko - Business Consulting HTML Template.
   Version: 1.0

==============================================*/

/* CSS Index
==============================================

    01. Theme Default CSS
    02. Header
    03. Slider
    04. Banner
    05. Features
    06. About
    07. Counter
    08. Services
    09. Cta
    10. Team
    11. Project
    12. Faq
    13. Work
    14. Video
    15. History
    16. Community
    17. Choose
    18. Client
    19. Office
    20. Support
    21. Consultation
    22. Company
    23. Testimonial
    24. Shop
    25. Blog
    26. Brand
    27. Contact
    28. Footer

==============================================*/



/*============================================
/*  01. Theme Default CSS
==============================================*/

@import url($font-url);


/*=============================
	Typography css start
===============================*/
body {
	font-family: var(--tg-body-font-family);
	font-size: var(--tg-body-font-size);
	font-weight: var(--tg-fw-regular);
	color: var(--tg-body-color);
	line-height: var(--tg-body-line-height);
}
img,
.img {
	max-width: 100%;
	@include transition(.3s);
}
a,
button {
	color: var(--tg-theme-primary);
	outline: none;
	text-decoration: none;
	@include transition(.3s);
}
a:focus,
.btn:focus,
.button:focus {
	text-decoration: none;
	outline: none;
	@include box-shadow(none);
}
a:hover,
button:hover {
	color: var(--tg-theme-primary);
	text-decoration: none;
}
button:focus,
input:focus,
input:focus,
textarea,
textarea:focus {
	outline: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--tg-heading-font-family);
	color: var(--tg-heading-color);
	margin-top: 0px;
	font-weight: var(--tg-fw-bold);
	line-height: var(--tg-heading-line-height);
	text-transform: unset;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
	color: inherit;
}
h1 {
	font-size: 2.5rem;
}
h2 {
	font-size: 2rem;
}
h3 {
	font-size: 1.75rem;
}
h4 {
	font-size: 1.5rem;
}
h5 {
	font-size: 1.25rem;
}
h6 {
	font-size: 1rem;
}
.list-wrap {
	margin: 0px;
	padding: 0px;
	& li {
		list-style: none;
	}
}
p {
	margin-bottom: 15px;
}
hr {
	border-bottom: 1px solid var(--tg-common-color-gray);
	border-top: 0 none;
	margin: 30px 0;
	padding: 0;
}
label {
	color: var(--tg-heading-color);
	cursor: pointer;
	font-size: var(--tg-body-font-size);
	font-weight: var(--tg-fw-regular);
}

input[type="color"] {
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	background: none;
	border: 0;
	cursor: pointer;
	height: 100%;
	width: 100%;
	padding: 0;
	border-radius: 50%;
}

.mb-md-30 {
    @media #{$md} {
        margin-bottom: 30px;
    }
}

body.theme-gray {
    background-color: var(--tg-color-gray-1);
}
body.theme-gray-two {
    background-color: var(--tg-color-gray-2);
}

*::-moz-selection {
	background: var(--tg-theme-primary);
	color: var(--tg-color-white-default);
	text-shadow: none;
}
::-moz-selection {
	background: var(--tg-theme-primary);
	color: var(--tg-color-white-default);
	text-shadow: none;
}
::selection {
	background: var(--tg-theme-primary);
	color: var(--tg-color-white-default);
	text-shadow: none;
}

/*=============================
    - Input Placeholder
===============================*/
input,
textarea {
    color: var(--tg-body-color);
}
*::-moz-placeholder {
	color: var(--tg-body-color);
	font-size: var(--tg-body-font-size);
	opacity: 1;
}
*::placeholder {
	color: var(--tg-body-color);
	font-size: var(--tg-body-font-size);
	opacity: 1;
}
textarea,
input {
    width: 100%;
    background: var(--tg-color-white-default);
    border: 1px solid var(--tg-border-7);
    @include border-radius(6px);
    font-size: 15px;
    color: var(--tg-heading-color);
    padding: 11px 18px;
    height: 50px;
    display: block;
    &::placeholder {
        font-size: 15px;
        color: var(--tg-body-color);
    }
}
textarea {
    min-height: 98px;
    max-height: 98px;
}

/*=============================
    - Common Classes
===============================*/
.fix {
    overflow:hidden
}
.clear {
    clear: both;
}

/*=============================
    - Bootstrap Custom
=============================*/
.container {
    padding-left: 12px;
    padding-right: 12px;
}
.row {
    --bs-gutter-x: 24px;
}
.gutter-y-30 {
  	--bs-gutter-y: 30px;
}
.gutter-y-24 {
    --bs-gutter-y: 24px;
}
.gutter-y-20 {
    --bs-gutter-y: 20px;
}
.gx-0 {
	--bs-gutter-x: 0;
}
.gutter-20 {
    --bs-gutter-x: 20px;
}
.gutter-24 {
    --bs-gutter-x: 24px;
}
.p-relative {
    position: relative;
}
.container {
    max-width: 1250px;
	@media #{$xl} {
        max-width: 1250px;
    }
	@media #{$lg} {
        max-width: 960px;
    }
	@media #{$md} {
        max-width: 720px;
    }
	@media #{$xs} {
        max-width: 100%;
    }
	@media #{$sm} {
        max-width: 540px;
    }
}
.custom-container {
    max-width: 1754px;
	@media #{$xxl} {
        max-width: 1680px;
    }
	@media #{$xl} {
        max-width: 1320px;
    }
	@media #{$lg} {
        max-width: 960px;
    }
	@media #{$md} {
        max-width: 720px;
    }
	@media #{$xs} {
        max-width: 100%;
    }
	@media #{$sm} {
        max-width: 540px;
    }
}


.custom-container-two {
    max-width: 1664px;
	@media #{$xxl} {
        max-width: 1570px;
    }
	@media #{$xl} {
        max-width: 1320px;
    }
	@media #{$lg} {
        max-width: 960px;
    }
	@media #{$md} {
        max-width: 720px;
    }
	@media #{$xs} {
        max-width: 100%;
    }
	@media #{$sm} {
        max-width: 540px;
    }
}

.custom-container-three {
    max-width: 1640px;
	@media #{$xxl} {
        max-width: 1570px;
    }
	@media #{$xl} {
        max-width: 1320px;
    }
	@media #{$lg} {
        max-width: 960px;
    }
	@media #{$md} {
        max-width: 720px;
    }
	@media #{$xs} {
        max-width: 100%;
    }
	@media #{$sm} {
        max-width: 540px;
    }
}

.custom-container-four {
    max-width: 1876px;
	@media #{$xxl} {
        max-width: 1570px;
    }
	@media #{$xl} {
        max-width: 100%;
    }
	@media #{$lg} {
        max-width: 960px;
    }
	@media #{$md} {
        max-width: 720px;
    }
	@media #{$xs} {
        max-width: 100%;
    }
	@media #{$sm} {
        max-width: 540px;
    }
}

.custom-container-five {
    max-width: 1548px;
	@media #{$xxl} {
        max-width: 1548px;
    }
	@media #{$xl} {
        max-width: 1320px;
    }
	@media #{$lg} {
        max-width: 960px;
    }
	@media #{$md} {
        max-width: 720px;
    }
	@media #{$xs} {
        max-width: 100%;
    }
	@media #{$sm} {
        max-width: 540px;
    }
}


.include-bg{
	@include background();
}
