.container	{
	width: 80%;
	margin: 20px 10%;	
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.content{
	width: 45%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	gap:1.8rem;	
}
.content-text{
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.logo-index{
	display: flex;
	align-items: center;
	justify-content: center;
}
.img-index{
	width: 55%;
	display: flex;
	justify-content: center;
	align-items: center;
	
}
.img-index:hover{
	animation: heartbe 0.5s infinite;
		
}
.img1{
	width: 100%;
}
.img2{
	width: 80%;
}

@keyframes heartbeat {
  0% {
    transform: scale( 1 );    
  }
  
  50% {
    transform: scale( 1.08 ) 
      translateX(1%) 
      translateY(10%);
	  background: var(--back-light-blue);
	color: #000;
	box-shadow: var(--boxshadow);
	
  }
}
@keyframes heartbea {
  0% {
    transform: scale( 1 ); 
	  transform: rotate(-3deg);
  }
  
  50% {
   transform: rotate(-3deg);
	  background: #F1D43B;
	color: #000;
	box-shadow: var(--boxshadow);
	
  }
}
@keyframes heartbe {
  0% {
    transform: scale( 1 ); 
	  
  }
  
  50% {
   
	  
	color: var();
	  filter: drop-shadow(var(--boxshadow));
	
	
  }
}
@keyframes heart {
  0% {
    transform: scale( 1 ); 
	  
  }
  
  50% {
   
	  
	color: var(--color-dark);
	  background: var(--back-light-blue);
	
	
  }
}
.btnh{
	  animation: heartbeat 1.5s infinite; 
}


.primary{
	color: var(--back-light-blue);
}
.textshadow{
	text-shadow: var(--shadow);
}
.f-container{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #E7BA1F;
	height: 50px;
	transform: rotate(-3deg);
	 animation: heartbea 1.5s infinite;
}
.f-container-m{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #E7BA1F;
	height: 50px;
	transform: rotate(-3deg);
	 animation: heartbea 1.5s infinite;
}
.f-container .item{
	width: 10%;
}
.f-container-m .item{
	width: 15%;
}
.slider-container{
	width: 90%;
	margin: 35px 5%;
	display: flex;
	gap:25px;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
}

.slider-container .slid-text{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.slider-box{
	width: 100%;
	
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.right-box{
	height: 50vh;
	width: 23%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;	
	background-color: var(--back-light-blue);
	box-shadow: 0 0 20px #173753;
	border-radius: 12px;
}
.imgres{
	width: 100%;
	max-height: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.imgres img{
	width: 90%;
}
.restext{
	width: 80%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	text-align: center;
	gap:1.1rem;
}
.leftimg{
	width: 30%;
}
.centertext{
	width: 33%;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	gap:1.8rem;
}
.leftimg img{
	width: 100%;
	 filter: drop-shadow(var(--boxshadow));
}
.t-list{
	width: 30%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	background: var(--color-light);
	border-radius: 12px;
	transition: all .6s ease;
}
.t-list:hover{
	width: 33%;
}
.t-list .logo-product{
	width: 40%;
	margin: 25px 30%;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.t-list .logo-product img{
	width: 90%;
	max-height: 80px;
	margin-right: 5%;
	animation: heartbe 1.5s infinite;
}
.t-list .name-product h2 b{
	font-weight: 800;
	font-size: 1.8rem;
	color: var(--back-btn);
}
.item-product{
	width: 60%;
	
}
.item-x{
	display: flex;
	align-items: center;
	width: 100%;
	justify-content: space-between;
	
	border-bottom: 1px solid var(--back-btn);
}
.item-x p{
	color: var(--back-btn);
}
.item-x:last-child{
	border: none;
}
#ghaleb{
	width: 100%;
	margin: 0 0;
}
.ghaleb-box{
	width: 100%;
	height: 60vh;
	display: flex;
	justify-content: space-around;
	align-items: center;
	background-color: var(--back-btn);
}
.ghaleb-box .img-ghaleb{
	width: 17%;
	height: 50vh;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	background-color: var(--color-dark);
	transition: all .6s ease;
	border-radius: 15px;
}
.ghaleb-box .img-ghaleb .gh-img{
	width: 90%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;	
}

.ghaleb-box .img-ghaleb .gh-img img{
	width: 80%;	
	margin-top: 50px;
	animation: heartbe 1.5s infinite;
}
.ghaleb-box .img-ghaleb .gh-img h2,.ghaleb-box .img-ghaleb .gh-img p{
	color: var(--light-text);
}


.ghaleb-box .img-ghaleb .gh-img:last-child img{
	width: 80%;	
	filter: drop-shadow(var(--boxshadow2));
	margin-bottom: -3px;
	animation: none;
}
.ghaleb-box .ghaleb-slider{
	transition: all .6s ease;
	width: 75%;
	
	display: flex;
	align-items: center;
	justify-content: space-around;
	background-color: var(--back-btn);
	
	border-radius: 15px;
	
}
.ghaleb-box .ghaleb-slider:hover{
	
}
.slider-ghaleb{
	background-color: var(--color-dark);
	width: 30%;
	
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	border-radius: 12px;
}
.slider-ghaleb .gh-img {
		text-align: center;
	width: 80%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}
.slider-ghaleb .gh-img h2, .slider-ghaleb .gh-img p{
color: var(--light-text);
}
.slider-ghaleb .gh-img img{
		margin-top: 30px;
	width: 80%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	animation: heartbe 1.5s infinite;
}
.slider-ghaleb .gh-img img:last-child{
	margin-bottom: -3px;
}
.slider-ghaleb{
	
		min-height: 45vh
	}
.soal-container{
	width: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	
}

.soal-container .so-img
{
	width: 38%;
	
	display: flex;
	align-items: center;
	justify-content: center;
}
.soal-container .so-img img
{
	width: 100%;
	
}
.soal-container .so-txt{
	width: 60%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}
.soal-container .so-txt .soal{
	width: 100%;
	display: flex;
	justify-content: space-between;
	background: var(--color-dark);
	padding: 5px 10px;
	color: aliceblue;
	
}
.soal-container .so-txt .soal:first-child{
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
}

.soal-container .so-txt .javab{
	width: 100%;
	display: flex;
	justify-content: space-between;
	background: var(--back-btn);
	padding: 5px 10px;
	color: aliceblue;
	color: var(--color-dark);
}

.soal-container .so-txt .javab:last-child{
border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
}
.soal-container .so-txt .javab{
	width: 100%;
	display: flex;
	justify-content: space-between;
	background: var(--back-btn);
	padding: 5px 10px;
	color: aliceblue;
	color: var(--color-dark);
}
.soal-container .so-txt .soal .sicon{
	display: flex;
	justify-content: space-between;
	padding: 5px 10px;
}
.poshtiban{
	display: flex;
	width: 100%;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.poshtiban .f-posh{
	width: 100%;
	background: var(--back-btn);
	display: flex;
	align-items: center;
	justify-content: space-around;
	margin-top: 20px;
}


.txt-posh{
	width: 40%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.img-posh{
	width: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.img-posh img{
	width: 60%;
}

.centertext-posh{
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.content-text-posh{
	margin-top: 20px;
}
.dark-text{
	color: var(--color-dark);
}
.back{
	background-color: var(--color-dark);
	margin-bottom: 20px;
}
.content-text-posh{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	justify-content: space-between;
}
.poshtiban .fr-posh{
	width: 100%;
	background: var(--back-btn);
	display: flex;
	align-items: center;
	justify-content: space-around;
	margin-top: 20px;
}
#img-posh{
	width: 40%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 30px;
}
#img-posh img{
	width: 35%;
}
.s-posh{
	width: 60%;
}
.se-posh{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-content: center;
	align-items: center;
	justify-content: space-around;
}
.ser-posh{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tap{
	display: flex;
	align-items: center;
	width: 70%;
	justify-content: center;
}

.tap box-icon{
	background-color: var(--color-dark);
	font-size: 25px;
	width: 50px;
	height: 50px;
	border: 2px solid var(--light-text);
	border-left: none;
	border-bottom-right-radius: 12px;
	border-top-right-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5px 5px;
}
.tap input{
	background-color: var(--color-dark);
	font-size: 15px;
	width: calc(80% - 50px);
	height: 50px;
	border: 2px solid var(--light-text);
	border-right: none;
	border-left: none;
	
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 5px 5px;
	color: var(--back-light-blue);
	padding-right: 20px;
}
.tap input:last-child{
	width: 20%;
	border-bottom-left-radius: 12px;
	border-top-left-radius: 12px;
	border-left: 2px solid var(--light-text);
	animation: heart 1.5s infinite;
	padding-right: none;
}
@media only screen and (max-width:1300px){
	.poshtiban .fr-posh{
	width: 100%;
	background: var(--back-btn);
	display: flex;
	align-items: center;
	justify-content: space-around;
	margin-top: 20px;
}
	
	#img-posh{
	width: 30%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 30px;
}
#img-posh img{
	width: 75%;
}
.s-posh{
	width: 70%;
}
	
	
	
	.ghaleb-box .ghaleb-slider{
		width: 85%;
	}
	.container{
		width: 90%;
		margin: 20px 5%;
	}
	.t-list:hover{
	width: 49%;
}
	.slider-box{
		flex-wrap: wrap;
		gap:0;
		justify-content: space-around;
	}
	.t-list{
		width: 48%;}
	.t-list:last-child{
		
		margin-top: 20px;}
	.txt-posh{
	width: 60%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.img-posh{
	width: 40%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.img-posh img{
	width: 60%;
}
}
@media only screen and (min-width:1040px){
	
.f-container-m{
		display: none;
	}
}
@media only screen and (max-width:1040px){
	.poshtiban .fr-posh{
	width: 100%;
	background: var(--back-btn);
		flex-direction: column;
	display: flex;
	align-items: center;
	justify-content: space-around;
	margin-top: 20px;
}
	
	#img-posh{
	width: 30%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 30px;
}
#img-posh img{
	width: 75%;
}
.s-posh{
	width: 90%;
	margin-bottom: 40px;
}
	.txt-posh{
	width: 30%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.img-posh{
	width: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.img-posh img{
	width: 80%;
}
	
	.ghaleb-box .ghaleb-slider{
		width: 95%;
	}
.slider-box{
		flex-wrap: wrap;
		gap:0;
		justify-content: space-around;
	}
	.container{
		width: 95%;
		margin: 20px 2.5%;
	}
	.content{
	width: 50%;
		
}
	.img-index{
	width: 40%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.f-container{
		display: none;
	}
	
	.leftimg{
	width: 30%;
}
.centertext{
	width: 33%;
}
.leftimg img{
	width: 100%;
}
}


@media only screen and (max-width:940px){
		.poshtiban .fr-posh{
	width: 100%;
	background: var(--back-btn);
		flex-direction: column;
	display: flex;
	align-items: center;
	justify-content: space-around;
	margin-top: 20px;
}
	
	#img-posh{
	width: 30%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 30px;
}
#img-posh img{
	width: 75%;
}
.s-posh{
	width: 90%;
	margin-bottom: 40px;
}
	.tap{
	display: flex;
	align-items: center;
	width: 80%;
	justify-content: center;
}

	.poshtiban .f-posh{
	width: 100%;
	background: var(--back-btn);
	display: flex;
		flex-direction: column-reverse;
	align-items: center;
	justify-content: space-around;
	margin-top: 20px;
}
	
	
	.txt-posh{
	width: 80%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.img-posh{
	width: 70%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.img-posh img{
	width: 60%;
}
	
	.soal-container{
		flex-direction: column;
	}
	.soal-container .so-img{
		width: 60%;
	}
	.soal-container .so-txt{
		width: 90%;
	}
	#t-slider{
		justify-content: space-around;
	}
	.t-list:hover{
	width: 50%;
}
		.item-product{
	width: 70%;
	
}
		.leftimg{
	width: 100%;
}
.centertext{
	margin-top: 25px;
	margin-bottom: 25px;
	margin-right: 5%;
	width: 90%;
}
.leftimg img{
	width: 100%;
}
	.container{
		width: 95%;
		margin: 20px 2.5%;
		flex-wrap: wrap; 
		gap:2rem;
	}
	.content{
	width: 80%;
		
}
	.img-index{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
	.img1{
	width: 100%;
}
.img2{
	width: 70%;
}
	.f-container{
		display: none;
	}
	
	.slider-box{
	width: 100%;
	height: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
		flex-wrap: wrap;
		
}
.right-box{
	
	width: 49%;
	height: 50vh;
	display: flex;
	margin-top: 25px;
	justify-content: space-around;
	align-items: center;	
	background-color: var(--back-light-blue);
	box-shadow: 0 0 20px #173753;
	border-radius: 12px;
}
.imgres{
	width: 100%;
	max-height: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.imgres img{
	width: 70%;
}
.restext{
	width: 80%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	text-align: center;
	gap:1.1rem;
}
	.t-list .name-product h2 b{
	font-weight: 800;
	font-size: 1.5rem;
	color: var(--back-btn);
}
}

@media only screen and (max-width:830px){
			.poshtiban .fr-posh{
	width: 100%;
	background: var(--back-btn);
		flex-direction: column;
	display: flex;
	align-items: center;
	justify-content: space-around;
	margin-top: 20px;
}
	
	#img-posh{
	width: 30%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 30px;
}
#img-posh img{
	width: 75%;
}
.s-posh{
	width: 100%;
	margin-bottom: 40px;
}
	.tap{
	display: flex;
	align-items: center;
	width: 80%;
	justify-content: center;
}
	
	
	
	.ghaleb-box{
	width: 100%;
	height: 120vh;
	display: flex;
	justify-content: space-around;
	align-items: center;
	background-color: var(--back-btn);
}
	.ghaleb-box .ghaleb-slider{
		width: 95%;
		flex-wrap: wrap;
	}
	.slider-ghaleb{
	background-color: var(--color-dark);
		width: 48%;
		min-height: 50vh;
	}
	.slider-ghaleb:last-child{
	margin-top: 40px;
}
	#t-slider{
		justify-content: space-around;
	}
	.t-list{
		margin: 20px;
		width: 80%;
	}
	
	#sef{
		display: flex;
	}
	.t-list:hover{
	width: 95%;
}
}
@media only screen and (max-width:830px){
	.soal-container .so-img{
		width: 80%;
	}
	.soal-container .so-txt{
		width: 98%;
	}
}
@media only screen and (max-width:670px){
				.poshtiban .fr-posh{
	width: 100%;
	background: var(--back-btn);
		flex-direction: column;
	display: flex;
	align-items: center;
	justify-content: space-around;
	margin-top: 20px;
}
	
	#img-posh{
	width: 30%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 30px;
}
#img-posh img{
	width: 95%;
}
.s-posh{
	width: 100%;
	margin-bottom: 40px;
}
	.tap{
	display: flex;
	align-items: center;
	width: 98%;
	justify-content: center;
}
	

}
@media only screen and (max-width:540px){
	.soal-container .so-txt{
		width: 100%;
	}
	.ghaleb-box{
	width: 100%;
	height: 170vh;
	display: flex;
	justify-content: space-around;
	align-items: center;
	background-color: var(--back-btn);
}
	.ghaleb-box .ghaleb-slider{
		width: 95%;
		flex-wrap: wrap;
	}
	.slider-ghaleb{
	background-color: var(--color-dark);
		width: 80%;
		min-height: 50vh;
		margin-top: 40px;
	}

	.t-list .name-product h2 b{
	font-weight: 800;
	font-size: 1.45rem;
	color: var(--back-btn);
}
	.item-product{
	width: 80%;
	
}
		.t-list{
		margin: 20px;
		width: 90%;}

.t-list:hover{
	width: 95%;
}
	.slider-box{
	width: 100%;
	
	display: flex;
	justify-content: space-between;
	align-items: center;
		flex-wrap: wrap;
		
}
.right-box{
	flex-direction: row;
	width: 99%;
	height: 15vh;
	display: flex;
	margin-top: 25px;
	justify-content: space-around;
	align-items: center;	
	background-color: var(--back-light-blue);
	box-shadow: 0 0 20px #173753;
	border-radius: 12px;
}
.imgres{
	width: 45%;
	max-height: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.imgres img{
	width: 100%;
}
.restext{
	width: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	text-align: center;
	gap:1.1rem;
}
	.restext p,.restext a,.hide{
		display: none;	
	}
}