@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

:root{
	/* NOT REALLY USING THESE */
	--white: #F9F5FF;
	--black: #0a3152;
	--gray: #525e69; 
	--accent: rgb(5, 50, 60);
	--accent2: #ff9e54;
	--light: #D4C2FC;
	--light2: #F5EFFF;
	--red: #D42A1C;
}


body{
	scroll-behavior: smooth;

  font-family: "Inter", serif;
  font-optical-sizing: auto;
  font-style: normal;

  color: var(--gray);
  background-color: var(--white);
  line-height: 150%;
  position: relative;

	/*background-color: rgb(18, 15, 15);*/
}


h1, h2, h3, h4{
	color: var(--black);
	font-weight: 900;
}

h1.big{
	font-size: 300%;
	line-height: 3rem
}

h2.big{
	font-size: 250%;
}

h3.big{
	font-size: 160%;
}
h3.biger{
	font-size:200%
}


*{
	margin: 0;
	padding: 0;
}


.debug, .debug *{
	border: 1px solid rgba(240, 128, 128, 0.5);
	background-color: rgb(0, 255, 0, 0.05);
	padding: 1px
}
.debug .debug{border: 1px solid red;}


::-webkit-scrollbar{background-color: transparent;max-width: .5rem; max-height: .5rem;}
::-webkit-scrollbar-thumb{background-color: var(--gray);}
::-webkit-scrollbar-thumb:hover{background-color: var(--gray);}
::-webkit-scrollbar-track{background-color: rgb(0,0,0,.3);}


/*POSITIONS*/

html{
	scroll-behavior: smooth;
}



.one-column, .two-columns, .five-columns, .three-columns, .four-columns, .one-column, .seven-columns, .six-columns, .eight-columns{display: grid;}
.one-column{grid-template-columns: repeat(1, 1fr);}
.two-columns{grid-template-columns: repeat(2, 1fr);}
.three-columns{grid-template-columns: repeat(3, 1fr);}
.four-columns{grid-template-columns: repeat(4, 1fr);	}
.five-columns{grid-template-columns: repeat(5, 1fr);}
.six-columns{grid-template-columns: repeat(6, 1fr);}
.seven-columns{grid-template-columns: repeat(7, 1fr);}
.eight-columns{grid-template-columns: repeat(8, 1fr);}
.span-two, .span-two-pc{grid-column: span 2}
.span-three, .span-three-pc{grid-column: span 3}
.span-four{grid-column: span 4;}
.span-five{grid-column: span 5;}
.span-six{grid-column: span 6;}
.span-seven{grid-column: span 7;}
.center-text{text-align: center;}
.centered{margin: 0 auto;width: fit-content;}
.fit{width: fit-content;}
.content{
	margin: 0 auto;
	max-width: 1600px;
}

.hide{display: none;size: 0; visibility: hidden; height: 0; width: 0; }


.flex{display: flex; gap: .5rem}
.flex-fill{flex-grow: 1;}

select, input, textarea, button{
    box-sizing: border-box;
	border: none;
	border-bottom: 1px solid var(--light);
	padding: .6rem;
	/* border-radius: .2rem; */
	color: var(--black);
	background-color: white;
  font-family: "Inter", serif;
  font-optical-sizing: auto;
  font-style: normal;
}
button{
	border: none
}

input[type=file]{
	padding: none; 
}

textarea{
	max-width: 100%;
}
a{
	color: var(--accent);
	text-decoration: none
}

a.dark{
	color: black;
}

.darkest-color{
	color: black
}
.whitest-color{
	color:white
}
.whiter-color{
	color:#c5c5c5
}
.hidebutton{
	display: block;
	padding: unset;
	background: unset;
	font-size: unset;
}
.thebutton{
	padding: .5rem 1.5rem;
	text-shadow: none;
	cursor: pointer;	
	transition: 1s;

}
.thebutton:hover{
	transition: .3s;
	filter: saturate(2);
}
.greenbutton{
	background-color: #2ec86a;
	width: fit-content;

	color: white;
	border-radius: .2rem;
	font-size: 90%;
}
.redbutton{
	background-color: #f55032;
	width: fit-content;

	color: white;
	border-radius: .2rem;
	font-size: 90%;
}

.whitebutton{
	background-color: white;
	width: fit-content;

	color: black;
	border-radius: .2rem;
	font-size: 90%;
}


.bluebutton{
	background-color: #467dce;
	/* #315282; */
	width: fit-content;

	color: white;
	border-radius: .2rem;
	font-size: 90%;
}
.graybutton{
	background-color: #343835;
	width: fit-content;

	color: white;
	border-radius: .2rem;
	font-size: 90%;
}

.small{
	padding: .2rem .6rem;
}

.white-color{
	color: rgb(180, 180, 180);
}

.padding-hor{padding: 0rem 1rem;}
.no-padding{padding: 0;}
.tight-13{max-width: 13rem;}
.tight-15{max-width: 15rem;}
.tight-20{max-width: 20rem;}
.tight-30{max-width: 30rem;}
.tight-35{max-width: 35rem;}
.tight-40{max-width: 40rem;}
.tight-50{max-width: 50rem;}
.tight-60{max-width: 60rem;}
.min-20{min-width: 20rem;}
.screen{min-height: 100vh;}
.stupid-huge{font-size: 350%; line-height: 1.4ch;}
.fit-img > *{
	max-height: 100%;
	max-width: 100%; 
	/* border-radius: .2rem; */
}
.perfect-fit-vert, .perfect-fit{overflow: hidden;}
.perfect-fit > *{width: 100%;}
.perfect-fit-vert > *{height: 100%;}
.total_center{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)}

.small-text{
	font-size: 80%;
	line-height: 1rem;
}


.phone-only{display: none; visibility: hidden; height: unset}

/*UNIQUE STUFF */
h2{
	line-height: 100%;

}
button svg{
	display: inline-block
}

#over_content_service_menu:before{	
	content: '';
	display: block;
	background: linear-gradient(90deg, rgb(0,0,100,.1), var(--accent));
	position: absolute;
	left: -500%;
	right: 100%;
	top:0;
	bottom: 0;
	backdrop-filter: blur(10px);

}

#over_content_service_menu{
			position: fixed; 
			top: 0; 
			bottom: 0; 
			justify-content: center;

			left: auto; 
			right: -100%; 
			transition: .3s;

			background-color: white;
			backdrop-filter: blur(5px);
			z-index: 210;
			flex-direction: column;

}

.image_service_det{
	margin: -1rem;
	margin-bottom: 1rem;
	height: 15rem;
	background-position: center !important;
	background-size: cover !important;
}
	
.header-flex{
	gap: 2rem
}
.menu_button{
	background: var(--accent);
	border-radius: .2rem;
	font-size: 1rem;
	padding: 1rem 0rem
}

.not-a-col > *{
}
#first_screen{
	padding: 3rem; 
	background: linear-gradient(rgb(25, 67, 80), transparent); 
	padding-top: 6rem;
}

.additional_services_list{
	gap: 1rem
}

.additional_services_list > div{
	border-left: 1px solid var(--accent);
	padding: .5rem 1rem;
}


.small-svgs svg{
	height: 1.8rem;
	margin-bottom: -.3rem;
	margin-top: -.5rem
}
.header{
	position: fixed;
	left: 0;
	right: 0;
	z-index: 100;
	background: linear-gradient(30deg, rgb(0,0,0,.8), var(--accent));
	backdrop-filter: blur(2px)

}
.header > div {
	min-height: 1rem;
	padding: 1rem;
}


.background-blur {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* background-image: url('your-image.jpg'); */
  background-size: cover;
  background-position: center;
  backdrop-filter: blur(5px);
  z-index: 0;
}
.second_font{
	font-family: "Chiron Sung HK", serif;
}
.highlight2{
	color: var(--accent2)
}
.contact_form_fun svg{
	height: 2.5rem
}
.services_fun{
	gap: 3rem;
}
.services_fun > div{
	background: white;
	padding-bottom: 1rem;
	border-radius: .5rem;
	box-shadow: 0 .5rem 1rem rgb(0,0,0,.3);
	display: flex;
	flex-direction: column;

}
.services_fun .info{
	padding: 1rem;
	padding-top: .5rem;
	flex-grow: 1
}

.services_fun h3{
	display: block;
	background: linear-gradient(45deg, var(--accent), rgb(0,0,0,.0) 300%);
	color: white !important;
	padding: 1.5rem 2rem;
	border-radius: .4rem .5rem 0rem 0rem;
	font-size: 200%;
	line-height: 2rem
}
.services_fun .img{
	height: 15rem;
	border-radius: .5rem .5rem .2rem .2rem;
	background-size: cover !important;
	background-position: center !important;
	display: flex;
	flex-direction: column;
}
.contact_form_wrapper{
	box-shadow: .5rem .5rem 1rem rgb(0,0,0,.5);
	background: white;
	padding: 1.5rem 1rem;
	border-radius: .2rem;
}

.why_go_with_us_screen .title_stuff{
	background:  linear-gradient(transparent 40%, var(--black) 40% 60%, transparent 60%);
	display: flex;
	justify-content: center;
	margin-top: 2rem
}

.why_go_with_us_screen .title_stuff h3{
	background: white;
	width: fit-content;
	padding: 0 .3rem
}

.why_go_with_us_screen .tight-50{
	text-align: center;
	border: 1px solid rgb(0,0,0,.8);
	padding: 1rem 0rem;
	padding-top: 4rem;
	border-radius: 15rem 15rem .2rem .2rem;
}

.why_go_with_us_screen .three-columns{
	padding: 0rem 5rem;
	gap: 2rem;
}

.first_screen_thing{
	height: 86vh;
	/* padding: 4rem; */
	border-radius: .5rem;
	box-shadow: -.5rem -.5rem 1.2rem rgb(2, 42, 50);
	background-size: cover !important;
	background-position: bottom !important;
	overflow: hidden
}
.fun_stuff_first{
	display: none;
	width: 20%;
	height: 145%;
	position: absolute;
	top: -20%;
	left: -10%;

	background: linear-gradient(black, transparent, rgb(0,0,0,.6));
	transform: rotate(-30deg);

	animation-name: glass_opacity_anim;
	animation-duration: 3s;
	animation-iteration-count: infinite;
}
.fun_stuff_first + .fun_suff_first{
	width: 10%;
	left: 12.25%
}
.fun_stuff_first + .fun_suff_first + .fun_suff_first{
	width: 15%;
	left: 24.15%
}
.fun_stuff_first + .fun_suff_first + .fun_suff_first + .fun_suff_first{
	width: 7%;
	left: 40.8%
}
.fun_stuff_first + .fun_suff_first + .fun_suff_first + .fun_suff_first + .fun_suff_first{
	width: 3%;
	left: 48.52%
}
.fun_stuff_first + .fun_suff_first + .fun_suff_first + .fun_suff_first + .fun_suff_first + .fun_suff_first{
	width: 1%;
	left: 51.80%
}


.first_screen_thing svg{
	height: 3rem
}

#big_logo{
	height: 18rem; 
}
#first_screen_flex_contacts{
	flex-direction: column; 
	gap: 1rem; 
	justify-content: center;
}


.first_screen_padding_thing{
	padding: 4rem;
	padding-right: 8rem;
}

@media only screen and (max-width:1200px){
	.why_go_with_us_screen .three-columns{
		padding: 0 0;
		gap: 3rem
	}

}

@media only screen and (max-width:900px){
	.first_screen_padding_thing{
		padding: 1rem;
		padding-right: 1rem;
	}
.first_screen_thing{
	height: 90vh;
	/* padding: 1rem; */
	border-radius: 0rem;
	box-shadow: none;
	background-size: cover !important;
	background-position: bottom !important;
	overflow: hidden
}

	#first_screen_flex{
		flex-direction: column;
	}

	#first_screen_flex_contacts{
		flex-direction: row; 
		gap: 1rem; 
		justify-content: flex-start;
	}


	#first_screen{
		padding: 0; 
		background: linear-gradient(rgb(25, 67, 80), transparent); 
		padding-top: 0;
	}


	.phone-hide{display: none; }
	.phone-hidden{visibility: hidden}

	.phone-only{display: unset; visibility: unset; height: unset}
	.grid-to-one{
		grid-template-columns: repeat(1, 1fr);
	}
	
	#thatmaximage{
		margin-bottom: 2rem;
	}
	.split-grid{
		grid-template-columns: repeat(2, 1fr);
	}

	.phonecentered{margin: 0 auto;width: fit-content;}
	.phonecentertext{
		text-align: center;
	}
	.phoneuncentertext{
		text-align: left;
	}

}

.thin-only{display: none; visibility: hidden; background-color: red; color: red;}

@media only screen and (max-width:600px){
	.why_go_with_us_screen .tight-50{
		border-radius: 10rem 10rem .2rem .2rem;
	}
	.header-flex{
		gap: .5rem
	}

	#big_logo{
		/* height: 25rem;  */
	}

}


@media only screen and (max-width: 480px){
	.thin-hide{display: none; visibility: hidden; background-color: red; color: red;}
	.thin-only{display: initial; visibility: initial; background-color: unset; color: unset;}
}


@media only screen and (max-width: 1600px) {
	.drop-span{grid-column: 1;}
	.content{max-width: 1300px; padding: 0rem 1rem;}
}

@keyframes glass_opacity_anim{
	0%{
		opacity: 1;
	}
	50%{
		opacity:.8;
	}
	100%{
		opacity: 1;
	}
}