/* sm (≥576px) */
@media (min-width: 576px) {
	
	.logo-mobile{
		position:relative;
		z-index:1002;
		margin-left:-40px;
		margin-top:-100px;
	}

	.logo-mobile-scroll {
	  position:relative;
		z-index:1002;
		margin:0;
		margin-left:0px;	
	}
	
	.hero-container-page {
		max-width: 90%;
		position: relative;
		justify-content: space-between;
		overflow: hidden;
		margin:auto;
		margin-top:190px;
		text-align: center;
		margin-bottom:50px;
		
	}
	.hero-container-page h1{
			color:#dedede;
			font-weight:500;
			font-size:1.8rem;
			line-height:1;
	}


	
	.menu-toggle {
		padding-top:12px;
		padding-left:10px;
		padding-right:10px;
	}
	.menu-toggle:hover {
		padding-top:12px;
		padding-left:10px;
		padding-right:10px;
	}
	.hero-container {
		max-width: 90%;
		position: relative;
		justify-content: space-between;
		overflow: hidden;
		margin:auto;
		margin-top:100px;
		min-height:550px;
		
	}
	
	.hero .shape-4 {
		height:650px;
		width:650px;
		position: absolute;
		z-index: -1;
		right:-400px;
		top:30px;
		border-radius: 50px;
		background-color: #3d5dc8;
		transform: skew(-15deg, 20deg); 
		display:block;
	}
	.hero-text{
		width:75%;
		position:absolute;
		margin-top:45px;
	}
	.hero-text h1{
		font-size:2rem;
		line-height: 1.2;
	}
	.hero-text p{
		margin-top:30px;
		width:90%;
		line-height: 1.5;
		font-size:1.3rem;
	}
	.hero-image{
		float:right;
		text-align:right;
		width:45%;
	}
	.hero img{
		position:relative;
		right:0;
		display:block;
		z-index:-1;
	}
	
	
	
}

/* md (≥768px) */
@media (min-width: 768px) {

	.hero-container {
		max-width: 90%;
		position: relative;
		justify-content: space-between;
		overflow: hidden;
		margin:auto;
		margin-top:170px;
		min-height:450px;
	}
	
	.hero .shape-4 {
		height:650px;
		width:600px;
		position: absolute;
		z-index: -1;
		right:-370px;
		top:30px;
		border-radius: 50px;
		background-color: #3d5dc8;
		transform: skew(-15deg, 20deg); 
		display:block;
	}
	.hero-text{
		width:70%;
		position:absolute;
	}
	.hero-text h1{
		font-size:2rem;
		line-height: 1;
	}
	.hero-text p{
		margin-top:30px;
		width:67.5%;
		line-height: 1.4rem;
	}
	.hero-image{
		position:relative;
		position:relative;
		float:right;
		width:55%;
		text-align:right;
	}
	.hero img{
		position:absolute;
		right:0;
		display:block;
	}
	.hide-mobile{
		display:none;
	}
	
	.box-list h2{
		text-align:center;
		font-size:2rem;
		line-height: 1.1;
		padding-bottom:30px;
	}

}

/* lg (≥992px) */
@media (min-width: 992px) {
	
	.hero-container {
		max-width: 90%;
		position: relative;
		justify-content: space-between;
		overflow: hidden;
		margin:auto;
		margin-top:160px;
		min-height:650px;
		
	}
	
	.hero .shape-4 {
		height:750px;
		width:650px;
		position: absolute;
		z-index: -1;
		right:-280px;
		top:30px;
		border-radius: 50px;
		background-color: #3d5dc8;
		transform: skew(-15deg, 20deg); 
		display:block;
	}
	.hero-text{
		width:50%;
		position:absolute;
		margin-top:80px;
	}
	.hero-text h1{
		font-size:2.8rem;
		line-height: 1.2;
	}
	.hero-text p{
		margin-top:30px;
		width:90%;
		line-height: 1.5;
		font-size:1.3rem;
	}
	.hero-image{
		position:relative;
		float:right;
		text-align:right;
		width:55%;
	}
	.hero img{
		position:absolute;
		right:0;
		display:block;
		z-index:1;
	}
	.hide-mobile{
		display:block;
	}
	.box-list h2{
		text-align:left;
		font-size:1.5rem;
	}
	.box-list h3{
		text-align:left;
		font-size:1.7rem;
		line-height: 1.1;
		padding-bottom:20px;
	}
	.box-list h2{
		text-align:left;
	}
}

/* xl (≥1200px) */
@media (min-width: 1200px) {
	
	.hero-container {
		max-width: 90%;
		position: relative;
		justify-content: space-between;
		overflow: hidden;
		margin:auto;
		margin-top:160px;
		min-height:550px;
		
	}
	
	.hero .shape-4 {
		height:750px;
		width:800px;
		position: absolute;
		z-index: -1;
		right:-380px;
		top:30px;
		border-radius: 50px;
		background-color: #3d5dc8;
		transform: skew(-15deg, 20deg); 
		display:block;
	}
	.hero-text{
		width:65%;
		position:absolute;
		margin-top:80px;
	}
	.hero-text h1{
		font-size:3.5rem;
		line-height: 1.2;
	}
	.hero-text p{
		margin-top:30px;
		width:85%;
		line-height: 1.5;
		font-size:1.2rem;
	}
	.hero-image{
		position:relative;
		float:right;
		text-align:right;
		width:45%;
	}
	.hero img{
		position:absolute;
		right:0;
		z-index:-1;
	}
	.hide-mobile{
		display:block;
	}
	
	
	.box-list h2{
		text-align:left;
		font-size:2.6rem;
		line-height: 1.1;
		padding-bottom:30px;
	}
	.list-ul li {
	  position: relative;
	  padding-left: 36px; /* ruang untuk SVG */
	  margin-bottom: 8px;
	  font-size:1.2rem;
	}
	
	.bg-footer {
		position:absolute;
		height: 500px; /* control the size */
		aspect-ratio: 1.8;
		--g: radial-gradient(50% 50%, #000 98%, #0000) no-repeat;
		mask: var(--g) 100% 100%/30% 60%,var(--g) 70% 0/50% 100%,var(--g) 0 100%/36% 68%,var(--g) 27% 18%/26% 40%,linear-gradient(#000 0 0) bottom/67% 58% no-repeat;
		transform: rotate(0deg);
		background: #185df0;
		right:0;
		margin-right:-220px;
	}
}


/* SECTION SLIDER SERVICES */
@media (min-width: 600px) {
  .slide {
    flex: 0 0 50%; /* 2 kolom */
  }
}

@media (min-width: 900px) {
  .slide {
    flex: 0 0 33.3333%; /* 3 kolom */
  }
}