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

   Theme Name: Valom Business Consultancy HTML Template
   Author : 
   Support: 
   Description: Valom Business Consultancy 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);
	background: var(--tg-color-smoke);
}
.lenis {
    &.lenis-smooth {
      scroll-behavior: auto !important;
  
      [data-lenis-prevent] {
        overscroll-behavior: contain;
      }
    }
  
    &.lenis-stopped {
      overflow: hidden;
    }
  
    &.lenis-scrolling iframe {
      pointer-events: none;
    }
}
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: 72px;
	@media #{$ml} {
        font-size: 6.25rem;
    }
	@media #{$lg} {
        font-size: 5rem;
    }
	@media #{$xs} {
		font-size: 2.5rem;
    }
	@media #{$sm} {
		font-size: 4.063rem;
    }
}
h2 {
	font-size: 3.75rem;
}
h3 {
	font-size: 1.875rem;
}
h4 {
	font-size: 1.5rem;
}
h5 {
	font-size: 1.25rem;
}
h6 {
	font-size: 1.125rem;
}
.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;
	&.g-0 {
		--bs-gutter-x: 0px;
	}
}
.gy-20 {
	--bs-gutter-y: 20px;
}
.gy-30 {
  	--bs-gutter-y: 30px;
}
.gy-35 {
	--bs-gutter-y: 35px;
}
.gy-40 {
	--bs-gutter-y: 40px;
}
.gy-60 {
	--bs-gutter-y: 60px;
}
.gy-80 {
	--bs-gutter-y: 80px;
	@media #{$lg} {
		--bs-gutter-y: 50px;
	}
	@media #{$xs} {
		--bs-gutter-y: 40px;
	}
}
.gy-90 {
	--bs-gutter-y: 90px;
	@media #{$lg} {
		--bs-gutter-y: 50px;
	}
	@media #{$xs} {
		--bs-gutter-y: 40px;
	}
}
.gx-0 {
	--bs-gutter-x: 0;
}
.gx-20 {
    --bs-gutter-x: 20px;
}
.gx-30 {
    --bs-gutter-x: 30px;
}
.gx-60 {
    --bs-gutter-x: 60px;
}
.gx-80 {
	@media (min-width: 1500px) {
		--bs-gutter-x: 80px;
	}
}
.gx-50 {
	@media (min-width: 1500px) {
		--bs-gutter-x: 50px;
	}
}
.gx-100 {
	@media (min-width: 1500px) {
		--bs-gutter-x: 100px;
	}
}
.container {
    max-width: 1320px;
	@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: 1870px;
	@media #{$xxl} {
        max-width: 1600px;
    }
	@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-container2 {
    max-width: 1750px;
	@media #{$xxl} {
        max-width: 1600px;
    }
	@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();
}
.section-radius {
	border-radius: 150px 0;
	@media #{$lg} {
        border-radius: 50px 0;
    }
}
.tg-swiper__slider {
    &.has-shadow {
        padding-left: 15px;
        padding-right: 15px;
        margin: -30px -15px;

        .swiper-wrapper {
            padding: 30px 0;
        }
    }
	&.swiper-fade {
		.swiper-slide {
			opacity: 0 !important;
			&.swiper-slide-active {
				opacity: 1 !important;
			}
		}
	}
}



//*Checklist Area Style***********************//
.checklist-wrap {
	.list-wrap {
		li {
			line-height: 1.5em;
			font-size: 16px;
			font-weight: 600;
			color: var(--tg-heading-color);
			display: flex;
			gap: 18px;
			.icon {
				color: var(--tg-theme-primary);
				flex: none;
				position: relative;
				top: 1px;
			}
			&:not(:last-child) {
				margin-bottom: 20px;
			}
		}
	}
	&.style2 {
		.list-wrap {
			li {
				font-weight: 400;
				color: var(--tg-body-color);
				display: block;
				line-height: var(--tg-body-line-height);
				span {
					color: var(--tg-heading-color);
				}
				&:not(:last-child) {
					margin-bottom: 14px;
				}
			}
		}
	}
}