html {
  scroll-behavior: smooth;
}

body{
	width: 100%;
	height: auto;
	padding: 0;
	margin: 0;
	background-color: #fff;
}

@font-face{
	font-family: ralewayR;
	src: url('../font/Raleway-Regular.ttf');
}

@font-face{
	font-family: ralewayM;
	src: url('../font/Raleway-Medium.ttf');
}

@font-face{
	font-family: ralewayB;
	src: url('../font/Raleway-Bold.ttf');
}

@font-face{
	font-family: ralewaySB;
	src: url('../font/Raleway-SemiBold.ttf');
}

@font-face{
	font-family: ralewayEB;
	src: url('../font/Raleway-ExtraBold.ttf');
}

@font-face{
	font-family: mansalva;
	src: url('../font/Mansalva-Reguler.ttf');
}

/* RESPONSIVE CONTENT */
@media (max-width: 768px) {
  .ttl-main {
    text-align: center;
    padding: 2rem 1rem;
  }

  .btn-gocheck {
    font-size: 1rem;
    width: 100%;
  }

  .ttl{
	font-size: 3rem;
  }

}

.head{
	width: 100%;
	height: 60px;
	background-color: black;
}

.main-ban{
	width: 100%;
	height: 650px;
	background-color: #90d5c7;
	padding-top: 200px;
	/* padding-left: 100px; */
	background-repeat: no-repeat;
}

.ttl-main{
	width: auto;
	height: 200px;
	/*background-color: black;*/
	padding: auto;
}

.ttl{
	/* width: 100%; */
	height: 120px;
	/*background-color: yellow;*/
	font-family: ralewayEB;
	color: white;
	font-size: 5rem;

	/* padding-left: 70px; */
}

.ttl-desc{
	/* width: 100%; */
	height: 80px;
	font-family: ralewayR;
	color: white;
	font-size: 11px;
	letter-spacing: 2px;

}

.btn-gocheck{
	margin-top: 10px;
	padding-top: 8px;
	width: 150px;
	height: 40px;
	background-color: #d2f9f1;
	text-align: center;
	border-radius: 10px;
	font-family: ralewayB;
	color: #90d5c7;
}

.step{
	width: 100%;
	height: 500px;
	/*background-color: red; */
	padding-left: 150px;
	padding-top: 150px;
}

.step1{
	background-color: #d2f9f1;
	border-radius: 30px;
	float: left;
	font-family: ralewayB;
	font-size: 45px;
	color: #19a389;
}


.step2{
	background-color: #93dacc;
	border-radius: 30px;
}

.ttl-step{

	font-family: ralewayB;
	font-size: 1.5rem;
	color: #fff;
}

.desc-step{

	color: white;
	font-family: ralewayR;
	font-size: 1rem;
	letter-spacing: 1px;
}
.step3{
	background-color: #70b5a7;
	border-radius: 30px;

}

.step4{
	background-color: #62998e;
	border-radius: 30px;

}

.desc-class{
	width: 100%;
	height: 300px;
	/*padding-top: 150px;*/
	/*background-color: yellow;*/
	text-align: center;
	padding-top: 80px;
}

.desc-ttl{
	width: 100%;
	height: 100px;
	/*background-color: red;*/
	font-family: ralewayEB;
	font-size: 50px;
	padding-top: 15px;
	color: #19a389;
	/*float: left;*/
}

.description{
	width: 100%;
	height: 150px;
	/*background-color: blue;*/
	font-family: ralewaySB;
	font-size: 18px;
	/* padding-left: 300px; */
	/* padding-right: 300px; */
}

.main-gram{
	width: 100%;
	height: 550px;
	/*background-color: black;*/
	/* padding-top: 100px; */
}

.in{
	width: 88%;
	height: 300px;
	background-color: white;
	border-radius: 20px;
	margin: auto;
	box-shadow: 7px 10px 15px 8px #eaeaea;
}

.in-form{
	width: 90%;
	height: 220px;
	/*background-color: red;*/
	margin: auto;
}

.in-form textarea{
	width: 100%;
	height: auto;
	resize: none;
	background-color: none;
	margin-top: 50px;
	border: none;
	border-color: transparent;
	outline: none;
	font-family: ralewayR;
}

.in-btn{
	width: 100%;
	height: 80px;
	background-color: #6ba69a;
	border-radius: 10px;
}

.in-btn button{
	width: 197px;
	height: 40px;
	background-color: #e6bc37;
	border: none;
	border-radius: 10px;
	font-family: ralewayB;
	float: right;
	margin-top: 20px;
	margin-right: 20px;
	font-size: 15px;
}

.nav-top{
	background-color: #90d5c7;
	height: 65px;
}

.nav-top ul li{
	width: 100px;
	text-align: center;
	font-size: 15px;
	height: 100%;
	font-family: ralewayR;
	color: #fff;
	margin-right: 20px;
}

.nav-head-logo{
	width: 50%;
	height: 100%;
	/*background-color: yellow;*/
	padding-left: 200px;
	font-family: ralewayB;
	color: #fff;
	font-size: 25px;
	padding-top: 5px;
}

.nav-head-item{
	width: 50%;
	height: 100%;
	padding-left: 20px;
}

.footer-grammie{
	width: 100%;
	height: 200px;
	/*background-color: #19a389;*/
	float: left;
}

h1{
	font-family: ralewayB;
	color: #19a389;
	text-align: center;
}

.hasil-checker{
	width: 100%;
	height: auto;
	/*background-color: yellow;*/
	padding-bottom: 150px;
	margin: auto;
	float: left;
	font-family: ralewayM;
}

.hasil-checker h5{
	font-family: ralewayB;
	color: red;
	margin-top: 30px;

}

.detail-hasil{
	width: 90%;
	height: auto;
	/*background-color: blue;*/
	margin: auto;
	font-family: ralewayM;
}

.detail-hasil h4{
	font-family: ralewayB;
	/*color: #19a389;*/
}

.detail-hasil a{
	padding:5px 10px; 
	background:#d2f9f1; 
	color:#19a389; 
	text-decoration:none; 
	/*font-family: ralewayB;*/
	font-size: 13px;
	border-radius:4px;
}

.line{
	margin-bottom: 20px; 
	padding: 10px; 
	border-bottom: 1px solid #ccc;
	padding-bottom: 20px;
}

.detail-hasil h6{
	font-family: ralewayB;
	color: #19a389;
	margin-top: 10px;
}

.output-hasil {
	width: 100%;
	height: auto;
	margin: auto;
	font-family: ralewayB;
	font-size: 16px;
	padding-top: 10px;
	/*padding-left: 20px;*/
	padding-bottom: 10px;
	margin-top: 5px;	
}

.output-hasil-p {
	width: 100%;
	height: auto;
	margin: auto;
	font-family: ralewayM;
	font-size: 16px;
	padding-top: 10px;
	/*padding-left: 20px;*/
	padding-bottom: 10px;
	margin-top: 5px;	
}

.output-hasil button{
	width: 100px;
	height: 30px;
	background-color: #19a389;
	font-size: 12px;
	font-family: ralewayB;
	color: #fff;
	border: none;
	float: left;
	margin-right: 10px;
	border-radius: 5px;

}

.output-hasil-cpy button{
	width: 100px;
	height: 30px;
	background-color: red;
	font-size: 12px;
	font-family: ralewayB;
	color: #fff;
	border: none;
	/* float: left; */
	margin-right: 10px;
	border-radius: 5px;

}

.det-output-hasil {
	width: 100%;
	height: auto;
	margin: auto;
	padding-top: 10px;
	padding-bottom: 10px;
}

#charCount{
	font-family: ralewayR;
	font-size: 12px;
	color: #bfbbb4;
	float: right;
}
.footer-grammie {
  background-color: #f9f9f9;
}

.footer-sosmed {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.sosmed {
  width: 60px;
  height: 65px;
  background-color: #edeff2;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.sosmed-logo {
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.footer-cpy {
  font-family: 'ralewayR', sans-serif;
  font-size: 15px;
  color: #9e9e9e;
}

.sosmed:hover {
  background-color: #b4f1e5; /* warna saat hover */
  transition: background-color 0.3s ease;
}