:root{
	--color2:white;
	--color1:#0a804b;
	--color-secondary:white;
	--color1_trans:rgb(0,33,71,0.3);
	--color2_trans:#158880
};

*{
	box-sizing: border-box;
	}
	@font-face{
		font-family:test;
		src:url('fonts/open-sans/OpenSans-Regular.ttf');
	}
	@font-face{
		font-family:t2;
		src:url('fonts/lato/Lato-Medium.ttf');
	}
	@font-face{
		font-family:opensan;
		src:url('fonts/lato/Lato-Heavy.ttf');
	}
	@font-face{
		font-family:italiclato;
		src:url('fonts/lato/Lato-Italic.ttf');
	}
	@font-face{
		font-family:italiclato2;
		src:url('fonts/lato/Lato-Light.ttf');
	}
	body{
		margin: 0px;
		font-family: test, Helvetica, Arial, sans-serif;
		overflow-x: hidden;
	}
	
	#container{
		width: 100%;
	}#top_nav{
		display: flex;
		background-color: var(--color1);
		padding: 20px;
		align-items: center;
		height: 8vh;
	}#navigation-l{
		margin-left: auto;
		display: flex;
		align-items: center;
		
	}.nav-btn{
		margin: 5px;
		margin-left: 12px;
		margin-right: 12px;
		color: white;
		text-decoration: none;
		font-size:18px 
	}#nav-contact{
		padding:5px;
		background: var(--color-secondary);
		color: var(--color1);
		border-radius: 3px;
		padding-left:15px;
		padding-right:15px; 
	}#company_name{
		font-size: 30px;
		font-family:opensan, Helvetica, Arial, sans-serif;
		color: white 
	}#fold{
		background-color: var(--color2);
		min-height: 80px;
		width: 100%;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}#show-fold{
		background-color:var(--color1);
		width: 100%;
		min-height:60vh; 
		padding-bottom: 40px;
		padding-top: 40px;
		color: white;
		display: flex;
		align-items: center; 
	}#side_one{
		width: 50%;
		padding: 20px;
		margin: 10px;
	}
	
	#welcome-karamo{
		font-size: 50px;
		font-family:opensan, Helvetica, Arial, sans-serif;
		margin-bottom: 15px;
	}.btns-side-one{
		padding: 10px;
		border: 2px solid white;
		padding-left: 30px;
		padding-right: 30px;
		border-radius: 50px
	}#btns-side-one-hash{
		background: var(--color-secondary);
		border: 2px solid var(--color-secondary);
		color: var(--color1);
		border-radius: 50px
	
	}
	#btn-cont{
		display: flex;
		flex-wrap: wrap;
	}.btns-side-one-link{
		text-decoration: none;
		color: white;
		margin-left:4px;
		margin-right:4px; 
	}#btn-cont{
		margin-top:20px; 
	}#section-services{
		width: 100%;
		min-height: 300px;
		background: var(--color2);
		padding-bottom: 40px
		
	}#section-services-title{
		font-size:30px;
		font-family:opensan, Helvetica, Arial, sans-serif;
		padding: 10px;
		text-align: center;
		padding-top: 30px;
		color: var(--color1);
	}#section-services-title-strokes{
		width: 50px;
		height:5px;
		background: var(--color-secondary);
	
	}#section-services-title-cont{
		display: flex;
		flex-direction: column;
		align-items: center;
	}#section-services-title-desc{
		text-align: center;
		margin-top: 10px;
		color: var(--color1);
		padding: 3px;
	}.section-services-each-card{
		background-color:var(--color1) 
	}#section-services-cards-cont{
		display: flex;
		justify-content: space-around;	
		padding:10px;
		flex-wrap: 	wrap;	
		
	}.section-services-each-card{
		width: 	200px;
		border-radius: 	5px;
		display: 	flex;	
		justify-content: 	center;	
		align-items: 	center;	
		flex-direction: 	column;	
		padding: 14px;
		color: 	white;	
		margin: 5px;
		text-align: 	center;	
		padding-bottom: 40px;
		box-shadow: -1px 4px 10px 0px rgb(0 0 0 / 11%);
	}.section-services-each-card-title{
		font-weight: 	bold;
		font-size: 18px;
		margin-bottom: 10px
	
	}#section-why-choose-us{
		background-color: var(--color1);
		min-height: 400px;
		padding-bottom: 10px;
	
	}.section-why-choose-us-each-card{
		width: 250px;
		min-height:100px;
		padding: 10px;
		
		border-radius:5px 
	}#section-why-choose-us-card-container{
		margin-top: 30px;
		padding:20px; 
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}#section-services-title{
	
	}.section-why-choose-us-each-card-title-image{
		
		display: flex;
		justify-content: center;
		align-items: center;
	}.section-why-choose-us-each-card-title-image-gangan{
		width: 70px;
	}.section-why-choose-us-each-card-title-text{
		font-size:18px;
		font-family:opensan, Helvetica, Arial, sans-serif;
		text-align: center;
		margin-top: 3px;
		color: var(--color-secondary) 
	}.section-why-choose-us-each-card-title-desc{
		
		color: white;
		text-align: center;
		margin-top: 10px
	}#section-data-plans{
		background: var(--color2);
		min-height: 300px;
		padding-bottom: 50px;
	}.section-data-plans-card-image-real{
		width: 100px
	}#side-two-image{
		width: 650px
	}.section-data-plans-cards-each{
		background-color: #FFC51E;
	}#section-data-plans-cards-cont{
		display: flex;
		margin-top: 40px;
		justify-content: space-around;
		flex-wrap: wrap;
	
	}.section-data-plans-cards-each{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		padding: 10px;
		border-radius: 4px;
		margin-bottom: 15px;
		box-shadow: -1px 4px 10px 0px rgb(0 0 0 / 11%);
	}.table-table tr td{
		padding: 4px;
		padding-left: 8px;
		padding-right: 8px;
		border-bottom: 1px solid white;
		color: var(--color1);
		font-family:opensan, Helvetica, Arial, sans-serif;
	}#section-footer{
		min-height: 250px;
		background-color: var(--color1);
		color: white;
		padding: 20px;
	}.section-footer-nav-each-desc{
		max-width: 300px;
		margin: 2px
	}.section-footer-nav-each-title{
		font-size: 18px;font-family:opensan, Helvetica, Arial, sans-serif;
		margin-bottom: 20px
	}#section-footer-nav-cont{
		margin-top: 40px;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}.section-footer-nav-each-icon{
		margin-right: 3px
	}.qwee{
		margin-top: 15px
	}.section-footer-nav-each-link{
		color: white;
		text-decoration: none;
	}.section-footer-nav-each{
		margin: 5px;
		margin-top: 20px;
	
	}#mylink{
		color: white;
		text-decoration: underline;
	}#footer-footer{
		display: flex;
		background-color: var(--color1);
		color: white;
		display: flex;
		flex-wrap: wrap;
		padding: 20px
	}#letname{
		margin-left:auto; 
	}#hambuger{
			margin-left: auto;
			cursor: pointer;
			display: none
	}#toper_nav{
		width: 100%;
		height: 100vh;
		background: rgba(0,0,0,.4);
		position: fixed;
		z-index: 1000;
		display: none;
	}#toper_nav_btn{
		width: 200px;
		height: 100vh;
		background-color: var(--color1);
		position: fixed;
		z-index: 2000;
		right: -210px;
		transition: 0.5s right;
	}#cancel-btn{
		background-color: var(--color1);
		padding: 10px;
		cursor: pointer;
	}.nav-real-hidden-btn{
		font-size: 20px;
		padding:8px; 
		color: white;
		background-color: var(--color1);
		margin-top:5px;
		transition: 0.1s padding-left
	
	}
	.nav-real-hidden-btn:hover{
		padding-left: 12px;
		color: pointer; 
		color: var(--color-secondary)
	}#archor-btn{
		text-decoration: none;
	}#chat-contact{
		width:50px;
		height: 50px;
		
		position: fixed;
		bottom: 60px;
		right:10px;
	}#chat-us{
		animation: rotatorshaking 1s infinite
	}
	
	#side-two{
		width: 50% ;
		height: inherit;
		
		margin: 30px;
	}
	
	#fold-img{
		width: 90%;
		max-width: 500px;
		border-radius: 10px;
	}
	
	@keyframes rotatorshaking{
		from {
			transform: rotate(40deg);
		}to{
			transform: rotate(0deg);
		}
	
	}
	
	
	
	
	
	@media only screen and (max-width: 590px) {
		#navigation-l{
			display: none
		}#hambuger{
			display: block;
		}
		#show-fold{
			flex-direction: column;
			align-items: center;
			justify-content: center;
			
		}#side_one{
			width: 90%;
		}#side-two{
			width: 100%;
			margin: 10px;
			display: flex;
			justify-content: center;
		}#btn-cont{
			
		}
	}
	
	@media only screen and (max-width: 300px) {
		#side_one{
			display: flex;align-items: center;
			flex-direction: column;
			text-align: center;
		}.btns-side-one{
			margin-top:5px 
		}#welcome-karamo{
			font-size: 13vmin
		}
	}
	
	@media only screen and (max-width: 432px) {
		
		#footer-footer{
			display: flex;
			justify-content: center;
			text-align: center;
		}#letname{
			margin:auto; 
		}
	}
	
	@media only screen and (max-width: 930px) {
		#ser{
			display: none
		}#better-buy{
			flex-direction: column;
			text-align: center;
		}
	}
	
	@media only screen and (max-width: 780px) {
		#section-footer-nav-cont{
			justify-content: flex-start;
		}
	}