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

   Theme Name: Apexa - Multipurpose Business Consulting HTML Template
   Author : alithemes
   Support: https://alithemes.ticksy.com
   Description: Apexa - Multipurpose Business Consulting HTML Template
   Version: 1.0

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

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

    01. Theme Default CSS
    02. Header
    03. Mobile Menu
    04. Banner
    05. Slider
    06. About
    07. Services
    08. Choose
    09. Project
    10. Pricing
    11. Request
    12. Consulting
    13. Testimonial
    14. Features
    15. Marquee
    16. Fact
    17. Team
    18. Call-back
    19. Blog
    20. Contact
    21. Brand
    22. 404 Error
    23. 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(0.3s);
}
a,
button {
    color: var(--tg-theme-primary);
    outline: none;
    text-decoration: none;
    @include transition(0.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 {
    font-family: var(--tg-body-font-family);
    font-size: var(--tg-body-font-size);
    line-height: var(--tg-body-line-height);
    font-weight: var(--tg-fw-regular);
    color: var(--tg-body-color);
    margin-bottom: 15px;
}
hr {
    border-bottom: 1px solid var(--tg-color-gray-1);
    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;
}

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

/*=============================
    - Bootstrap Custom
=============================*/
.container {
    padding-left: 15px;
    padding-right: 15px;
}
.row {
    --bs-gutter-x: 30px;
}
.gutter-y-30 {
    --bs-gutter-y: 30px;
}
.gx-0 {
    --bs-gutter-x: 0;
}
.gutter-24 {
    --bs-gutter-x: 24px;
}
.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: 1760px;
    @media #{$xxl} {
        max-width: 1680px;
    }
    @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-two {
    max-width: 1740px;
    @media #{$xxl} {
        max-width: 1540px;
    }
    @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;
    }
}

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