body{margin:0px;font-family:Arial, Helvetica, sans-serif;color:#1d1d1d;font-size:16px}	
	a{text-decoration:none}
	.links,.content{position:relative;width:90%;margin: auto;}
	.links .items{float:right;margin:0}
	.top_container{position:relative;height:50px;border-bottom:1px solid #ddd}
	.top_menu{position:absolute;width:90%;margin:auto;left:0;top:0;right:0;bottom:0;font-weight:bold;cursor:pointer}
	.top_menu .items{position:absolute;right:0}
	.main_container{display:flex}
	.top_line{border-top:1px solid #ddd;}
	.left{width:20%;float:left;border-right:1px solid #ddd;padding:20px}
	.left > ul{display:block;list-style-type:none;padding:0px}
	.left ul{list-style-type:none;font-size:12px;padding:0px}
	.left ul ul{padding-left:20px}
	.left ul li{padding-bottom:5px}
	.right{width:80%;float:right}
	.content {padding-top:40px}
	.content h4{font-size:30px;border-bottom:1px solid #ddd;padding-bottom:30px}	
	.flex {display:-webkit-box;min-height: 60px;height: auto;background-color:#dee1e340;}
	.items{display:-webkit-box;list-style-type:none;padding-left:0px}
	.logo{position:absolute;margin:0px;top:0px;bottom:0px;padding:0px;list-style-type:none;}
	.logo li{height: 100%;}
	.name{position:abolute;margin:auto;top:0;bottom:0;height:20px;font-size:20px}
	.comp {position: absolute;font-size:17px;top: 0;bottom: 0;margin: auto;height: 40px;}
	.comp span{font-size:34px;font-weight:bold}
	.name_container{position: relative;height: 100%;width: 180px;}
	.name{position:absolute;margin:auto;top:0;bottom:0;height:20px}
	.menu{padding-right:20px;}
	.footer{width:100%;height:40px;background:#dee1e340;}
	.item{margin:0px;padding-left:20px}
	.testimonials {position:relative;display:block;cursor:pointer}	
	.testimonials > ul{border:1px solid #ddd;border-radius: 5px;}
	.testimonials ul li.testimonial{padding: 20px;display:none}
	.testimonials .items li.item{display:none}
	.projects{padding-top:10px;display:block}
	.emailcontent{position:relative;width: 250px;padding-top:35px}
	.email{position:absolute;top:0;bottom:0;margin:auto;height:20px;}
	ul.port{padding-left:0px;list-style-type:none}
	ul.port ul{padding-top:10px}
	ul.port > li{padding-bottom:25px}
	ul.port ul li{padding:5px;list-style-type:initial;}
	.contact_form .items{display:block}		
	.contact_form .items .items{display:flex}	
	.contact_form .items li{padding-bottom:10px;width:40%;padding-left:0px}
	.contact_form li span{display:block;padding-right:5px;}
	.contact_form input{width:300px;height:20px;border:1px solid #ddd}
	.contact_form textarea{min-width:500px;min-height:200px;border:1px solid #ddd}
	.contact_form .submit{width:140px;height:30px;cursor:pointer}
	
@media screen and (max-width:480px){
	.main_container{
		display:block !important;
	}
	.main_container .left{
		width:100% !important;
		border:0px !important;
	}
	.main_container .right{
		width:100% !important;
	}
}

{box-sizing:border-box}
	
/* Next & previous buttons */
.prev, .next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	margin-top: -22px;
	padding: 16px;
	color: white;
	font-weight: bold;
	font-size: 18px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
	display:none;
}

/* Position the "next button" to the right */
.next {
	right: 0;
	border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
	background-color: rgb(85 64 175); 
}


/* Fading animation */
.fade {
	animation-name: fade;
	animation-duration: 1.5s;
}

@keyframes fade {
	from {opacity: .4}
	to {opacity: 1}
}
	
.container {
	height: var(--container-height,40px);
	width: var(--container-width,40px);
}
.linkedin-icon-bg {
    background: #1565c0;
    height: var(--height,40px);
    width: var(--width,40px);
    border-radius: var(--borderRadius,4px);
    box-shadow: 0 0 30px rgba(0,0,0,0.3);
    position: relative;
    overflow: hidden;
}
.i {
	position: absolute;
	height: var(--height,18px);
	width: var(--width,6px);
	background: #fff;
	bottom: var(--bottom,6px);
	left: var(--left,6px);
}
.i:after {
	content: "";
	position: absolute;
	background: #fff;
	height: var(--pseudo-after-height,7px);
	width:var(--pseudo-after-width,7px);
	border-radius: 50%;
	bottom: var(--pseudo-after-bottom,21px);
	left: var(--pseudo-after-left,-1px);
}    
.n {
	position: absolute;
	height: var(--height,18px);
	width: var(--width,6px);
	background: #fff;
	bottom: var(--bottom,6px);
	left: var(--left,16px);
}
.n:before {
	content: "";
	position: absolute;
	background: #fff;
	border-radius: 5000px 5000px 0 0;
	height: var(--pseudo-before-height,18px);
	width: var(--pseudo-before-width,14px);
	bottom: 0;
	left: var(--pseudo-beforeleft,5px);
}      
.n:after {
	content: "";
	position: absolute;
	background: #1565c0;
	border-radius: 5000px 5000px 0 0;
	height: var(--pseudo-after-height,14px);
	width: var(--pseudo-after-width,6px);
	bottom: 0;
	left: var(--pseudo-after-left,6px);
}
.letter {  
	background-color: #FFF;
	border: 1px solid #dee1e3;
    border-radius: 5px;
	position: relative;
	border-radius:var(--borderRadius,4px);
	height: var(--height,40px);
	width: var(--width,50px);
	overflow: hidden;
}
.letter:before, .letter:after {
	content: '';
	position: absolute;
	height: var(--pseudo-height, 50px);;
	width: var(--pseudo-width, 50px);;
	transform: rotate(45deg) skew(-5deg, -5deg);
	background-color: var(--pseudo-bgcolor,#fff);
}
.letter:before {
	bottom: var(--pseudo-before-bottom,-85%);
	box-shadow: var(--pseudo-before-hoffset, -1px) var(--pseudo-before-voffset, -1px) 0 0 #072711;
}
.letter:after {
	top: var(---pseudo-after-top,-85%);
	box-shadow: var(--pseudo-after-hoffset, 1px) var(--pseudo-after-voffset, 1px) 0 0 #072711;
}
.github_container{
	position:relative;
	width:var(--container-width,100px);
	height:var(--container-height,100px);
	border-radius:50%;
	background-color:#000;	
}
.top{
	position:absolute;
	width:var(--width,65px);
	height:var(--height,50px);
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	border-radius:45%;
	background-color:#fff;
}
.top:before{
	content:"";
	position:absolute;	
	height: var(--pseudo-before-height,25px);
	width: var(--pseudo-before-width,25px);
	border-radius: 0% 95%;
	background-color: #fff;			
}

.top:after{
	 content:"";
	 position:absolute;	 
	 right:0;
	 height: var(--pseudo-after-height,25px);
	 width: var(--pseudo-after-width,25px);
	 border-radius: 95% 0%;
	 background-color: #fff;		 
}

.bottom{
	position:absolute;
	width:var(--width,30px);
	height:var(--height,30px);
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	border-radius:50% 50% 0 0;
	background-color:#fff;
}

.whatsapp {
  position: relative;
  width: var(--whatsapp-height,100px);
  height: var(--whatsapp-width,100px);
  background-color: #25D366; /* Official WhatsApp green */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Phone earpiece and mouthpiece tips */
.message {
  position: absolute;
  width: var(--message-width,60px);
  height: var(--message-height,60px);
  border:var(--message-border,5px) solid #fff;
  background-color: #25D366;
  border-radius: 50%;
}

.point{
	position:relative;	
	width:var(--point-width,50px);
	height:var(--point-height,50px);
	left:var(--point-left,-14);
	bottom:var(--point-bottom,-20);
	clip-path: polygon(50% 0%, 80% 50%, 50% 100%, 20% 50%);
	transform:rotate(45deg);
	background:#fff;
}
.point:before{
	content:"";
	width:var(--point-before-width,30px);
	height:var(--point-before-height,30px);
	position:absolute;
	margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
	clip-path: polygon(50% 0%, 80% 50%, 50% 100%, 20% 50%);	
	background:#25D366;	
}

.phone-receiver{
	position:absolute;
	background-color:#25D366;
	height:var(--phone-receiver-height,60px);
	width:var(--phone-receiver-width,60px);
	margin:auto;
	left:0;
	top:0;
	right:0;
	bottom:0;	
	border-radius:50%;
}

.phone-receiver:before{
	content:"";
	position:absolute;
	margin:auto;
	left:0;
	top:0;
	right:0;
	bottom:0;
	height:var(--phone-receiver-before-height,40px);
	width:var(--phone-receiver-before-width,10px);
	transform:rotate(135deg);
	border-radius:0% 100% 100% 0% / 0% 100% 100% 0%;
	background-color:#ffffff;
}
.phone-receiver:after{
	content:"";
	position:absolute;
	margin:auto;
	left:var(--phone-receiver-after-left,10);
	top:var(--phone-receiver-after-top,-10);
	right:0;
	bottom:0;
	height:var(--phone-receiver-after-height,18px);
	width:var(--phone-receiver-after-width,14px);
	transform:rotate(135deg);
	border-radius:0% 50% 50% 0% / 0% 100% 100% 0%;
	background-color:#25D366;
}

.loader{
	position: absolute; 
	margin: auto; 
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;	
	width: 40px; 
	height: 40px; 
	border-radius: 50%; 
	border-width: 6px; 
	border-style: solid; 
	border-color: rgb(85 64 175) rgb(243, 243, 243) rgb(243, 243, 243); 		
	animation: 1s linear 0s infinite;
	display:none;
}

.close {
	position:relative;
	opacity: 0.3;
	width: var(--width,32px);
	height: var(--height,32px);
	display:none;
}
.close:hover {
	opacity: 1;
}
.close:before, .close:after {
	position: absolute;
	left: var(--pseudo-left,15px);
	content: ' ';
	height: var(--pseudo-height,33px);
	width: var(--pseudo-width,2px);
	background-color: #333;
}
.close:before {
	transform: rotate(45deg);
}
.close:after {
	transform: rotate(-45deg);
}
.content textarea{
	width: 100%; 
	height: 400px; 
	border: none; 
	resize: none; 
	background: none; 
	font-family: monospace;
}