
@use '../utils' as *;

/*-----------------------------------------------------------------------------------

  Project Name: Investify HTML Template
  Author: Tdevs
  Support: 
  Description: Investify related HTML Template
  Version: 1.0
  
-----------------------------------------------------------------------------------

/*----------------------------------------*/
/*   Globals Default
/*----------------------------------------*/

// Google Fonts
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

/*----------------------------------------
  Bootstrap customize
-----------------------------------------*/
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
	--bs-gutter-x: 30px;
}
@media (min-width: 1601px) {
	.container,
	.container-lg,
	.container-md,
	.container-sm,
	.container-xl,
	.container-xxl {
		max-width: 1320px;
	}
}
.row {
    --bs-gutter-x: 30px;
}
.g-0,.gx-0 {
    --bs-gutter-x: ;
}
.g-0,.gy-0 {
    --bs-gutter-y: 0
}
.g-10,
.gx-10 {
	--bs-gutter-x: 10px;
}
.gy-12 {
	--bs-gutter-y: 12px;
}
.gy-15 {
	--bs-gutter-y: 15px;
}
.gx-15 {
	--bs-gutter-x: 15px;
}
.g-20 {
	--bs-gutter-x: 20px;
	--bs-gutter-y: 20px;
}
.gy-20 {
	--bs-gutter-y: 20px;
}
.gx-20 {
	--bs-gutter-x: 20px;
}
.gy-20 {
	--bs-gutter-y: 20px;
}
.gx-24 {
	--bs-gutter-x: 24px;
}
.gy-24 {
	--bs-gutter-y: 24px;
}
.g-30,
.gx-30 {
	--bs-gutter-x: 30px;
}
.g-30,
.gy-30 {
	--bs-gutter-y: 30px;
}
.g-40,
.gx-40 {
	--bs-gutter-x: 40px;
}
.g-40,
.gy-40 {
	--bs-gutter-y: 40px;
}
.g-50,
.gx-50 {
	--bs-gutter-x: 50px;
}
.g-50,
.gy-50 {
	--bs-gutter-y: 50px;
}
.g-60,
.gy-60 {
	--bs-gutter-y: 60px;
}

/*----------------------------------------
  Body Overlay 
-----------------------------------------*/
.body-overlay {
	background-color: $black;
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 9999;
	left: 0;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}
.body-overlay {
	background-color: $black;
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 9999;
	left: 0;
	opacity: 0;
	visibility: hidden;
	    -webkit-transition: all 0.3s 0s ease-out;
    -moz-transition: all 0.3s 0s ease-out;
    -ms-transition: all 0.3s 0s ease-out;
    -o-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
}
.body-overlay.opened {
	opacity: 0.7;
	visibility: visible;
}

/*----------------------------------------
  Mfp customize
-----------------------------------------*/
.mfp-iframe-holder {
	.mfp-content {
		line-height: 0;
		width: 100%;
		max-width: 1280px;
		@media #{$xxl,$x3l} {
			max-width: 1000px;
		}
		@media #{$xl} {
			max-width: 850px;
		}
		@media #{$lg} {
			max-width: 820px;
		}
		@media #{$md} {
			max-width: 750px;
		}
	}
}
.mfp-close {
	-webkit-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);
	&:hover{
		color: var(--td-white);;
	}
	&::after {
		position: absolute;
		content: "\f00d";
		height: 100%;
		width: 100%;
		font-family: var(--td-ff-fontawesome);
		font-size: 31px;
		font-weight: 200;
		right: -20px;
		margin-top: -25px;
		@media #{$xs,$sm,$md} {
			right: 15px;
			margin-top: -30px;
		}
	}
}