@import "./../abstract/variables";
@import "./../abstract/mixins";
:root{
	--title			: var(--bs-heading-color);
	--primary-light	: #f2fcfc;
}
.title{
	color: var(--title);
}* {
    outline: none;
    padding: 0;

	&::after {
        margin : 0;
        padding: 0;
    }
    &::before {
        margin : 0;
        padding: 0;
    }
}
::selection{
	color: $white;
	background-color: $primary;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6{
	font-family: $font-family-title;
	color: var(--bs-heading-color);
	font-weight: 600;
	a{
		color: var(--bs-heading-color);
	}
}
h1, .h1{
	line-height: 1.3;
}
ul {
    padding: 0;
    margin : 0;
}
img {
    border-style: none;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
    outline        : none;
	color          : var(--bs-primary);	
    &:hover,
    &:focus,
    &.active {
        text-decoration: none;
        outline        : none;
    }
}
.section-gaps{
	padding-top: 50px;
	padding-bottom: 50px;
	
	@include respond('tab-port'){
		padding-top: 30px;
		padding-bottom: 30px;
	}
}

.section-gap{
	padding-top: 100px;
	padding-bottom: 70px;
	overflow: hidden;
	
	@include respond('tab-port'){
		padding-top: 50px;
		padding-bottom: 20px;
	}
}
.section-gap2{
	padding-top: 100px;
	padding-bottom: 50px;
	
	@include respond('tab-port'){
		padding-top: 50px;
		padding-bottom: 50px;
	}
}
.section-gap3{
	padding-top: 100px;
	padding-bottom: 100px;
	
	@include respond('tab-port'){
		padding-top: 50px;
		padding-bottom: 50px;
	}
}

.section-head{
	margin-bottom: 40px;
	
	.title{
		text-transform: capitalize;
	}
	.badge-title{
		color: var(--bs-secondary);
		font-size: 22px;
		font-weight: 500;
		border-radius: 10px;
		margin-bottom: 20px;
		padding: 5px 40px;
		background-color: rgba($color: $white, $alpha: 0.50);
		border: 2px solid var(--bs-primary);
		display: inline-block;
		position: relative;
		text-transform: capitalize;
		
		&::before,
		&::after{
			content: "";
			position: absolute;
			height: 15px;
			border-radius: 20px;
			width: 15px;
			transform: translateY(-50%);
			background-color: var(--bs-primary);
			top: 50%;
		}
		&::before{
			left: 15px;
		}
		&::after{			
			right: 15px;
		}
	}
	@include respond('laptop'){
		margin-bottom: 35px;
		
		.badge-title{
			font-size: 20px;
			padding: 5px 35px;
			margin-bottom: 20px;
			
			&::before,
			&::after{
				height: 10px;
				width: 10px;
			}
		}
	}
	@include respond('phone'){
		margin-bottom: 20px;
		
		.badge-title{
			font-size: 18px;
			padding: 5px 30px;
			margin-bottom: 15px;
			
			&::before,
			&::after{
				height: 8px;
				width: 8px;
			}
		}
	}	
	&.style-2{
		.title{
			font-weight: 600;
		} 
		p{
			font-size: 18px;
			max-width: 670px;
			margin: 0 auto;
			color: #4E4E4E;
		}
		@include respond('tab-land'){
			p{
				font-size: 18px;
				max-width: unset;
			}
		}
		@include respond('phone'){
			p{
				font-size: 16px;
				max-width: unset;
			}
		}
	}
}
@include respond('laptop'){
	:root {
		--bs-body-font-size: 16px;
	}
}

// Gradient Variant ==
.bg-primary-gradient{
	position: relative;
	overflow: hidden;
	&::before{
		content: "";
		background: linear-gradient(to top, rgba(var(--bs-primary-rgb), 0.2) 1%, white 100%);
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		z-index: -1;
	}
}

.media-img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
}