@import url('https://fonts.googleapis.com/css?family=Lato:400,500,600,700,800,900');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800,900');
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,600,700,800,900');

@media (min-width: 1230px){
	.container {
	    max-width: 1300px;
	}
	.container-2{
		max-width: none;
		padding-left: 0px;
		padding-right: 0px;
	}
	.container-3 {
	    max-width: none;
	    padding-left: 0px !important;
		padding-right: 0px !important;
	}
}

@media (max-width: 120px){
	.container-3 {
	    max-width: none;
	    padding-left: 3px !important;
	    padding-right: 3px !important;
	}
}
@media (min-width: 520px){
	.container-3 {
	    max-width: none;
	    padding-left: 15px;
	    padding-right: 15px;
	}
}


.navbar {
    padding-top: unset;
    padding-bottom: unset;
    backface-visibility: hidden;
    -webkit-transition: .25s cubic-bezier(0.43, 0.49, 0.51, 0.68);
    transition: .25s cubic-bezier(0.43, 0.49, 0.51, 0.68);
    border: 1px solid #D6D6D6;
    background-color: #fff;
    height: 89px;
}

.navbar-brand {
    padding-top: 0px;
    padding-bottom: 10px;
    margin-right: 121px;
}

.navbar-nav li, .navbar-nav li a {
    font-family: Montserrat;
	font-size: 14px;
	font-weight: 600;
	line-height: 21px;
	letter-spacing: 0em;
	color: #2F2F2F;
}

.blog-post .post-title a:hover, .blog-post .post-meta a:hover, .f-nav li a:hover, .f-newsletter .input-group-btn button:hover, .navbar.sticky-nav .navbar-nav li a:hover, .navbar.sticky-nav .navbar-nav li a.active, .f-widget .f-list li a:hover, .social-profile li a:hover, .copyright a {
    color: #7DB62B !important;
}


.navbar-nav li a.nav-link-scroll::after, .navbar-nav li a.nav-link-scroll::before, .navbar.sticky-nav .navbar-nav li a.nav-link-scroll::after, .navbar.sticky-nav .navbar-nav li a.nav-link-scroll::before, .nav-button a, .navbar.sticky-nav .nav-button a {
    background-color: #7DB62B !important;
}

.navbar-nav li a:hover, .navbar-nav li a.active {
    color: #7DB62B !important;
}

.btn-start-now{
	padding: 10px 17px;
	border-radius: 99px;
	color: #fff !important;
	background-color: #7DB62B;
	font-family: Roboto;
	font-size: 13px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: 0em;
	text-align: center;
	border:1px solid #7DB62B;
}

.btn-start-now:hover{
	background-color: #7DB62B;
	color: #fff !important;
}

.btn-start-now-2{
	padding: 10px 17px;
	border-radius: 99px;
	color: #fff;
	background-color: #FAAD43;
	font-family: Roboto;
	font-size: 13px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: 0em;
	text-align: center;
	border:1px solid #FAAD43;
}

.btn-start-now-2:hover{
	background-color: #FAAD43;
	color: #fff;
}

.form-control-2 {
    border: 1px solid #ddd;
    border-radius: 50px;
    box-shadow: unset;
    background-color: #ffffff;
    color: #252a32;
    font-size: 16px;
    padding: 0px 20px;
    -webkit-transition: .15s ease-out;
    transition: .15s ease-out;
    height: 40px !important;
    cursor: pointer;
}

.txt-title-home{
	color: #283252;
	font-family: Montserrat;
	font-weight: 600;
	letter-spacing: 0em;
}

.f-crm{
	font-family: Roboto;
	font-size: 11px;
	font-weight: 400;
	line-height: 16px;
	letter-spacing: 0em;
	color: #04906A;
	padding: 5px 10px;
	border-radius: 9999px;
	background: #8AB03F33;
	width: 92px;
	text-align: center;
}

.txt-content-home{
	font-family: Roboto;
	font-size: 17px;
	font-weight: 400;
	line-height: 25px;
	letter-spacing: 0em;
	color: #8286A1;
}

.bds-500{
	font-weight: 500;
}

.mrtts{
	margin-bottom: 50px;
	margin-top: 30px;
}

.mrtts-3{
	margin:40px 0px;
}

.btn-demo{
	padding: 10px 17px;
	border-radius: 99px;
	color: #283252;
	background-color: #fff;
	font-family: Roboto;
	font-size: 13px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: 0em;
	text-align: center;
	border: 1px solid #283252;
}

.btn-demo:hover{
	color: #283252;
	background-color: #fff;
}

.main-banner-2 {
    padding-top: 153px;
}

.main-banner-3 {
    padding-top: 100px;
}

.cards{
	width: 100%;
	border-radius: 20px;
	background-color: #fafafa;
}

.cards-2{
	width: 100%;
	border-radius: 20px !important;
	/*background: radial-gradient(105.23% 85.55% at 50% 55.85%, #449D44 42.71%, #8AB03F 100%);*/
	background-image: url('../images/bg-waktoo.jpg');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.cards-3{
	width: 100%;
	border-radius: 20px;
	text-align: center;
	background-color: #fff;
	padding: 40px 20px 0px 20px;
	margin-bottom: 20px;
}

.cards-4{
	width: 100%;
	border-radius: 20px;
	text-align: center;
	background-color: #f9f9f9;
	padding: 40px 20px 0px 20px;
	margin-bottom: 20px;
}

.txttss{
	font-family: Roboto;
	font-size: 17px;
	font-weight: 400;
	line-height: 25px;
	letter-spacing: 0em;
	color: #fff;
	margin: 45px 0px;
}

.txt-spss{
	color: #283252;
	font-family: Montserrat;
	font-size: 28px;
	font-weight: 600;
	line-height: 42px;
	letter-spacing: 0em;
	padding: 20px;
}

.dssl{
	font-family: Roboto;
	font-size: 11px;
	font-weight: 400;
	line-height: 16px;
	letter-spacing: 0em;
	color: #fff;
	width: 120px;
	padding: 5px;	
	border-radius: 9999px;
	border:1px solid #ddd;
	text-align: center;
	background: #FFFFFF33;
}

.dssl-2{
	width: 130px;
}

.txt-spss-2{
	color: #8286A1;
	font-family: Roboto;
	font-size: 17px;
	font-weight: 400;
	line-height: 25px;
	letter-spacing: 0em;
	text-align: center;
	padding-bottom: 20px;
}

.h3-feature{
	margin: 10px;
}

.txt-title-2{
	font-family: Roboto;
	font-size: 17px;
	font-weight: 400;
	line-height: 25px;
	letter-spacing: 0em;
	text-align: center;
	color: #8286A1;
	text-align: center;
	padding-bottom: 16px;
}

.scroll-top {
	background: #7DB62B !important;
  	bottom: 28px;
}

.txt-content-1{
	color: #fff;
	font-family: Montserrat;
	font-weight: 600;
	letter-spacing: 0em;
	padding-bottom: 24px;
	padding-top: 10px;
}

.img-psd-1{
	box-shadow: 0px 3.730069875717163px 18.650348663330078px 0px #0000001A;
}

.action-card{
	width: 100%;
	padding: 20px;
	border-radius: 20px;
	border: 1px solid #CECECE;
	background-color: #fff;
	margin-bottom: 30px;
}

.action-card:hover{
	cursor: pointer;
	border: 1px solid #04906A;
	background-color: #ddd;
}

.txt-title-4{
	color: #283252;
	font-family: Montserrat;
	font-size: 18px;
	font-weight: 600;
	line-height: 27px;
	letter-spacing: 0em;
}

.txt-content-3{
	color: #8286A1;
	font-family: Roboto;
	font-size: 17px;
	font-weight: 400;
	line-height: 25px;
	letter-spacing: 0em;
}

/* Main styles */
.box2 {
  width: 100%;
  text-align: center !important;
}

.description {
  line-height: 18px;
  max-height: calc(18px * 0);
  overflow: hidden;
}
.button-readmore::after {
  content: url(https://res.cloudinary.com/daraki09f/image/upload/v1685947687/arrow-bottom.svg)' Lihat Lebih Banyak';
  background-size: 100% 100%;
  color: #283252;
	font-family: Roboto;
	font-size: 13px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: 0em;
	text-align: center;
	width: 170px;
	padding: 10px 17px;
	border-radius: 99px;
	border: 1px solid #283252;

}
.button-readmore {
  cursor: pointer;
}

#check-readmore:checked ~ .button-readmore::after {
  content: url(https://res.cloudinary.com/daraki09f/image/upload/v1685947687/arrow-top.svg)' Lihat Lebih Sedikit';
  background-size: 100% 100%;
  color: #283252;
	font-family: Roboto;
	font-size: 13px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: 0em;
	text-align: center;
	width: 170px;
	padding: 10px 17px;
	border-radius: 99px;
	border: 1px solid #283252;

}
#check-readmore:checked ~ .description {
  max-height: 100%;
  text-align: left;
  padding-bottom: 20px;
}

/* Hide input checkbox */
#check-readmore {
  position: absolute;
  left: -100px;
}

.rdmore{
  color: #83838E;
  margin: 30px;
  font-family: Roboto;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: 0em;
}

.rdmore:hover{
  filter: grayscale(100%) brightness(30%) sepia(100%) hue-rotate(-180deg) saturate(700%) contrast(0.8);
}

.testimonial-item {
    position: relative;
    background-color: #f9f9f9;
    box-shadow: unset;
    padding: 20px;
    border-radius: 20px;
    -webkit-transition: .2s cubic-bezier(0.43, 0.49, 0.51, 0.68);
    transition: .2s cubic-bezier(0.43, 0.49, 0.51, 0.68);
    border: 1px solid #CECECE;
    cursor: pointer;
}

.min-15{
	margin: -15px;
}

.testimonial-meta .author-img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
}

.txt-title-testimonial{
	color: #283252;
	font-family: Roboto;
	font-size: 17px;
	font-weight: 500;
	line-height: 25px;
	letter-spacing: 0em;
}

.hgss{
	height: 60px;
}

.txt-title-testimonial-2{
	color: #8286A1;
	font-family: Roboto;
	font-size: 17px;
	font-weight: 400;
	line-height: 25px;
	letter-spacing: 0em;
}

.crdss{
	margin:0px 0px 30px 0px;
	height: 220px;
}

.dxz-1{
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dxz-2{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dxz-4{
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dxz-9{
  display: -webkit-box;
  -webkit-line-clamp: 9;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-5{
	width: 100%;
	padding: 20px 40px;
	border-radius: 20px;
	background-color: #fff;
	margin-bottom: 10px;
}

.txt-title-3{
	color: #283252;
	font-family: Montserrat;
	font-size: 25px;
	font-weight: 600;
	line-height: 38px;
	letter-spacing: 0em;
}

.txt-content-3{
	color: #8286A1;
	font-family: Roboto;
	font-size: 17px;
	font-weight: 400;
	line-height: 25px;
	letter-spacing: 0em;
}

.txt-footer-1{
	color: #FFFFFF;
	font-family: Montserrat;
	font-size: 35px;
	font-weight: 600;
	line-height: 53px;
	letter-spacing: 0em;
}

.bds-700{
	font-weight: 700;
}

.img-footer{
	width: 170px;
	height: 31px;
}

.txt-footer-2{
	color: #fff;
	font-family: Lato;
	font-size: 14px;
	font-weight: 400;
	line-height: 21px;
	letter-spacing: 0em;
}

.mdhs{
	margin-top: 12px;
	margin-bottom: 24px;
}

.img-medsos{
	float: left;
	margin-right: 8px;
	width: 20px;
	height: 20px;
}

.mccss{
	margin-bottom: 12px;
}

.mgglls{
	margin-right: 16px;
	width: 20px;
	height: 20px;
	margin-top: 16px;
}

.txt-dxxs{
	color: #fff;
	font-family: Roboto;
	font-size: 17px;
	font-weight: 400;
	line-height: 25px;
	letter-spacing: 0em;
}

.img-kkss{
	width: 100%;
	height: 50px;
}

.txt-dxxs:hover{
	color: #fff;
}

.mr{
	margin-right: 16px;
}

@media (max-width: 1030px) {
	#dekstop{
		display: none;
	}
	.txt-title-home{
	    font-size: 32px;
	    line-height: 40px;
	}
	.cards{
		padding: 40px 10px;
	}
	.txt-content-1 {
	    font-size: 26px;
	    line-height: 33px;
	    text-align: center;
	}
	.cards-2{
		padding: 40px 0px !important;
	}
	.mrtts-2{
		margin-bottom: 50px;
		padding: 0px 10px;
	}
	.cards-5 {
	    padding: 40px 20px !important;
	    margin-bottom: 20px;
	}
	.pll-1{
		padding-right: 0px;
		padding-left: 0px;
	}

	.pll-2{
		padding-right: 0px;
		padding-left: 0px;
	}
}

@media (min-width: 1030px) {
	#mobile{
		display: none;
	}
	.txt-title-home {
		font-size: 40px;
		line-height: 63px;
	}
	.cards{
		padding: 40px;
	}
	.txt-content-1{
		font-size: 35px;
		line-height: 53px;
	}
	.cards-2{
		padding: 40px !important;
	}
	.mrtts-2{
		margin-bottom: 50px;
		padding: 0px 100px;
	}
	.pll-1{
		padding-right: 5px;
	}

	.pll-2{
		padding-left: 5px;
	}

	.hgg-1{
		padding-left: 60px !important; 
		height: 280px;
	}

	.hgg-2{ 
		height: 280px;
	}

	.hggss{
		height: 105px;
	}
}