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

   Theme Name: Renova - Construction Building & Renovation Template
   Author : ThemeGenix
   Support: themegenix@gmail.com
   Description: Renova - Construction Building & Renovation 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-medium);
	color: var(--tg-body-color);
	line-height: var(--tg-body-line-height);
}
body.theme__gray {
    background-color: var(--tg-color-gray-3);
}
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-extra-bold);
	line-height: var(--tg-heading-line-height);
	text-transform: capitalize;
}
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%;
}

*::-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[type="url"],
input[type="email"],
input[type="number"],
input[type="text"] {
    border: 1px solid var(--tg-border-4);
    @include border-radius(6px);
    font-weight: 500;
    font-size: 14px;
    color: var(--tg-heading-color);
    background: var(--tg-color-gray-2);
    width: 100%;
    padding: 10px 16px;
    height: 45px;
    display: block;
    &::placeholder {
        font-size: 14px;
        font-weight: 500;
        text-transform: capitalize;
    }
}
textarea {
    min-height: 96px;
    max-height: 96px;
}
.select-grp {
    position: relative;
    z-index: 1;
    &::after {
        content: "\f107";
        position: absolute;
        top: 50%;
        transform: translateY(-50%) rotate(180deg);
        font-family: "flaticon_tg_default";
        font-weight: 700;
        right: 0;
        font-size: 15px;
        color: var(--tg-body-color);
        line-height: 1;
    }
}
.select-grp select {
    background-color: transparent;
    border: none;
    color: var(--tg-body-color);
    font-weight: 500;
    font-size: 15px;
    text-transform: capitalize;
    border-radius: 0;
    outline: none;
    padding: 5px 20px 5px 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    line-height: 1.2;
    height: 40px;
    cursor: pointer;
    border-bottom: 1px solid #D8D8D8;
}

/*=============================
    - Common Classes
===============================*/
.fix {
    overflow:hidden
}
.clear {
    clear: both;
}
.section-pt-140 {
    padding-top: 140px;
    @media #{$md} {
        padding-top: 100px;
    }
    @media #{$xs} {
        padding-top: 60px;
    }
}
.section-pb-140 {
    padding-bottom: 140px;
    @media #{$md} {
        padding-bottom: 100px;
    }
    @media #{$xs} {
        padding-bottom: 60px;
    }
}
.section-py-140 {
    padding: 140px 0;
    @media #{$md} {
        padding: 100px 0;
    }
    @media #{$xs} {
        padding: 60px 0;
    }
}
.section-pt-110 {
    padding-top: 110px;
    @media #{$xs} {
        padding-top: 60px;
    }
}
.section-pb-110 {
    padding-bottom: 110px;
    @media #{$xs} {
        padding-bottom: 60px;
    }
}

.section-py-120 {
    padding: 120px 0;
    @media #{$md} {
        padding: 100px 0;
    }
    @media #{$xs} {
        padding: 60px 0;
    }
}

.position-sticky {
    position: sticky;
    top: 100px;
}
.p-relative {
    position: relative;
    z-index: 1;
}


/*=============================
    - Bootstrap Custom
=============================*/
.container {
    padding-left: 15px;
    padding-right: 15px;
}
.row {
    --bs-gutter-x: 30px;
}
.gutter-y-30 {
  	--bs-gutter-y: 30px;
}
.gutter-y-40 {
  	--bs-gutter-y: 40px;
}
.gx-0 {
	--bs-gutter-x: 0;
}
.gutter-20 {
    --bs-gutter-x: 20px;
}
.gutter-24 {
    --bs-gutter-x: 24px;
}
.gutter-50 {
    --bs-gutter-x: 50px;
    @media #{$xl} {
        --bs-gutter-x: 30px;
    }
    @media #{$lg} {
        --bs-gutter-x: 20px;
    }
}
.gutter-80 {
    --bs-gutter-x: 80px;
    @media #{$xl} {
        --bs-gutter-x: 30px;
    }
    @media #{$lg} {
        --bs-gutter-x: 20px;
    }
}
.container {
    max-width: 1320px;
	@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 {
    max-width: 1390px;
	@media #{$xxl} {
        max-width: 1390px;
    }
	@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: 1760px;
	@media #{$xxl} {
        max-width: 1580px;
    }
	@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: 1850px;
	@media #{$xxl} {
        max-width: 1580px;
    }
	@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: 1770px;
	@media #{$xxl} {
        max-width: 1572px;
    }
	@media #{$xl} {
        max-width: 1350px;
    }
	@media #{$lg} {
        max-width: 960px;
    }
	@media #{$md} {
        max-width: 720px;
    }
	@media #{$xs} {
        max-width: 100%;
    }
	@media #{$sm} {
        max-width: 540px;
    }
}

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