@font-face { font-family: "Fira"; font-weight: 200; src: url("../fonts/fira/FiraSans-Light.woff2");}
@font-face { font-family: "Fira"; font-weight: 400; src: url("../fonts/fira/FiraSans-Regular.woff2");}
@font-face { font-family: "Fira"; font-weight: 500; src: url("../fonts/fira/FiraSans-Medium.woff2");}
@font-face { font-family: "Fira"; font-weight: 600; src: url("../fonts/fira/FiraSans-SemiBold.woff2");}

:root {
	--darkblue: rgb(234, 224, 124);
	--white: #e5e4dd;
	--accnt_col: #efefef;
/*	--fs-sm: clamp(0.8rem, 0.53vi + 0.67rem, 1.2rem);
	--fs-base: clamp(1rem, 0.67vi + 0.83rem, 1.5rem);
	--fs-md: clamp(1.25rem, 0.83vi + 1.04rem, 1.88rem);
	--fs-lg: clamp(1.56rem, 1.04vi + 1.3rem, 2.34rem);
	--fs-xl: clamp(1.95rem, 1.3vi + 1.63rem, 2.93rem);
	--fs-xxl: clamp(2.44rem, 1.63vi + 2.03rem, 3.66rem);
	--fs-xxxl: clamp(3.05rem, 2.03vi + 2.54rem, 4.58rem);
*/
	--fs-sm: clamp(0.8rem, 0.17vi + 0.76rem, 0.89rem);
	--fs-base: clamp(1rem, 0.34vi + 0.91rem, 1.19rem);
	--fs-md: clamp(1.25rem, 0.61vi + 1.1rem, 1.58rem);
	--fs-lg: clamp(1.56rem, 1vi + 1.31rem, 2.11rem);
	--fs-xl: clamp(1.95rem, 1.56vi + 1.56rem, 2.81rem);
	--fs-xxl: clamp(2.44rem, 2.38vi + 1.85rem, 3.75rem);
	--fs-xxxl: clamp(3.05rem, 3.54vi + 2.17rem, 5rem);

}


*, 
*:after,
*:before {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}


html { 
	font-family: 'Fira';
	font-weight: 400;
	font-size: 100%;
	background-color: black;
	scroll-behavior: smooth;
}

body {
/*	margin: 5vw;*/
	font-size: 1.2rem;
	line-height: 1.5;
	color: var(--white);
}


a {
	color: currentColor;
	text-decoration: none;
}

.try_link {
	background-color: var(--accnt_col);
	border-radius: .24em;
	padding: 0 .5em;
	color: #333;
	text-transform: uppercase;
	border: 1px solid transparent;
}

.try_link:hover {
	background-color: transparent;
	color: inherit;
	border: 1px solid var(--accnt_col);
}

strong  {

	font-weight: 500;
}

nav { 
	font-size: var(--fs-base);
	z-index: 100;
	position: fixed;
	left: 0;
	top: 2rem;
/*	text-transform: uppercase;*/
	letter-spacing: 0.06em;
	width: 90vw;
	text-align: center;
	margin: 0 5vw;
	color: white;
}

nav ul {
	list-style: none;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 2.5vw;
}

nav ul li { 
	border-radius: 1px;
	padding: 0.5em 0.5em 0.5em 0.65em;
	text-align: center;
	line-height: 1;
	border-radius: .35em;
	background-color: black;
/*	box-shadow: 0 0 14px var(--accnt_col);*/
}

#menu_buy { 
	background-color:red;
}

nav ul li:hover { 
	background-color: var(--accnt_col);
	color: black;
 }

#menu_buy:hover { 
	background-color: white;
	color: red;
}


h1 {
	font-size: var(--fs-xl);
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: 0.12em;
	color: powderblue;
	color: var(--accnt_col);
	text-align: center;
	padding: 0 0 2em;
/*	text-shadow: 0 0 50px #48abe0;*/
}


h2 {
	padding: 0.5em 0;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-align: center;
	font-size: var(--fs-md);
	line-height: 1.2;
}

h3 { 
	font-weight: 500;
	padding: .5em 0 .75em;
	font-size: var(--fs-md);
	line-height: 1.2;
	max-width: calc(30 * var(--fs-base));
	margin: 0 auto;
 }

p, ol, ul, summary { 
	max-width: 31em;
	font-size: var(--fs-base);
	margin: 0 auto;
}

details {
	margin-bottom: 1.5em;
}

summary {
	font-weight: 500;
}

.an_answer {
	padding: 1em;

}


li {
	padding-bottom: 0.75em;
}

li ol, li ul {
	padding-left: 1em;

}

section {
	padding: 8rem 5vw;
	background: linear-gradient(to bottom, #333 0%, #596164 100%);
}

.text_section {
	scroll-behavior: smooth;
}

.text_section p {
	padding-bottom: 0.75em;
}

.text_section h2 {
	max-width: 20em;
	margin: 0 auto;
	padding: 1.5em 0;
}

.text_section h3 { 
	font-size: var(--fs-base);
	font-weight: 600;
 }

#home_text { 
	text-shadow: 0 0 .25em #333, 0 0 .5em #666;
	position: relative;
	width: 100%;
	margin-top: 30vh;
}

#intro_h1 { 
	color: white;
	text-transform: none;
	line-height: 1.1;
	font-size: calc(1.25*var(--fs-xxxl));
	letter-spacing: 0.05em;
	padding-bottom: 0.1em;
	opacity: 0;
	filter: blur(4px);
	animation: fade-in .8s 1.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.some_class {
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: .8em;
}


@keyframes fade-in {
  100% {
    opacity: .7;
    filter: blur(0);
  }
}

@keyframes fade-in2 {
  100% {
    opacity: .9;
    filter: blur(0);
  }
}

@keyframes fade-in_grayback {
  0%   { opacity:  0;}
  100% { opacity: .4;}
}


.intro_subline { 
	text-align: center;
	font-size: var(--fs-lg);
	max-width: 20em;
	opacity: 0;
	filter: blur(4px);
	animation: fade-in2 .8s 1.8s forwards cubic-bezier(0.11, 0, 0.5, 0);

 }

.the_features_box {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 2vw;
}

.a_feature {
	border: 1px solid var(--white);
	padding: 2rem;
	width: 25%;
	border-radius: 2rem;
	min-width: 300px;
	margin-bottom: 2em;
}

.a_feature p {
	font-size: var(--fs-base);
}


.intro_text h1 { 
	text-transform: none;
	letter-spacing: 0.01em;
 }

/*.intro_text p { 
	font-size: var(--fs-md);
	text-align: center;
	padding-bottom: 1em;
 }
*/



.menu_active { 
/*	border-radius: 2em;*/
/*	color: var(--col-accent);*/
}


#home_img { 
	margin: 0;
	width: 100vw;
	height: 100vh;
	background-image: url('../imgs/ProJewels4Rhino-Back.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 0;
}

.home_gray_back {
	margin: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgb(0, 0, 0);
	position: absolute;
	top: 0;
	animation: fade-in_grayback 1.4s 0s forwards cubic-bezier(0.11, 0, 0.5, 0);
}


img { 
	width: 100%;
 }

#tool_screenshot {
	width: 310px;
	position: relative;
	left: 15vw;
	top: 18vh;
	border-radius: 12px;

}


.tool_box {
	display: flex;
	flex-wrap: wrap;
	gap: 4vw;
	max-width: 1600px;
	margin: 0 auto;
	color: #222;
	justify-content: center;
}


.a_tool {
	gap: 10%;
	justify-content: space-between;
	border-radius: 2rem;
	background: linear-gradient(to top, var(--accnt_col) 0%, white 100%);
	padding: 2.5rem;
	width: 20%;
	min-width: 300px;
}

.a_tool p {
	line-height: 1.4;
}

.a_tool { transition: all .2s ease-in-out; }
.a_tool:hover { transform: scale(1.02); }


.tool_image {
	padding: 2rem;
}

.tool_icon {
	background-color: #333;
	border: 1px solid black;
	border-radius: .8rem;
	width: 100%;
}

.tool_text { 
/*	padding: 2rem;*/
}


.trial_button {
	font-size: var(--fs-lg);
	font-family: 'Fira';
	font-weight: 500;
	line-height: 2;
	margin: 4em auto 0;
	border: 2px solid var(--accnt_col);
	padding: 0;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	background-color: var(--white);
	color: #333;
	border-radius: 4rem;
	background-color: var(--white);
	display: block;
	width: 22ch;
}

.trial_button:hover {
	background-color: transparent;
	color: var(--white);
}


footer { 
	min-height: 6rem;
	padding: 2rem;
	text-align: center;
	font-size: var(--fs-sm);
 }

.footer_list { 
	max-width: 800px;
	margin: 0 auto;
}


.footer_list li {
	display: inline-block;
	font-size: var(--fs-sm);
	padding-left: .75em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.footer_list li+li:before {
	content: ' | ';
	padding-right: 0.75em;
}



/*.a_tool div {
	flex: 1  0 40%;
	min-width: 200px;
}
*/