300 lines
4.9 KiB
SCSS
300 lines
4.9 KiB
SCSS
@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(.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 {
|
|
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();
|
|
}
|