.no-padding{
	margin: 0;
	padding: 0;
}

body{
	background: linear-gradient(rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.93)), url("../images/bg25.jpg") no-repeat center center;
	background-size: cover;
	min-height: 100vh;
}

.container{
	padding: 4px;
}
.left-box{
//border: 1px solid #000;
}
.left-box .inner{
//border: 1px solid #a7cdc9;
	padding-bottom: 1em;
}
.personal-info{
	border: 1px solid rgba(191, 191, 191, 0.6);
}
.personal-info p{
	padding-left: 4px;
}

#pp img{
	margin-top: 8px;
	border: 1px solid #cbcbcb;
	border-radius: 5px;
}
.name{
	font-size: 1.4em;
//margin-top: 8px;
	text-align: center;
//font-family: 'Raleway', sans-serif;
	font-family: 'Roboto Slab', serif;
	color: #000;
	font-weight: 400;
}
.designation{
	text-align: center;
	font-size: 1.2em;
	font-family: 'Oswald', sans-serif;
}


#left-info{
	font-size: 1.2em;
	font-family: 'Oswald', sans-serif;
}
.personal-info .aca-heading{
	margin-top: 1em;
	text-align: center;
	font-size: 1.4em;
}
.aca-heading span{
	color: #2e6da4;
	border-bottom: 2px solid #2e6da4;
	padding: 0 2em 4px 2em;
}
.department{
	margin-top: 1em;
}
#left-info .department .heading span{
//padding: 0 1em 2px 0;
	padding-bottom: 2px;
	border-bottom: 1px solid #c1c1c1;
	color: #2e6da4;
}
#left-info .dept-name{
	margin-top: 4px;
}
#left-info{
	padding-bottom: 2em;
}

.institute{
	margin-top: 0.5em;
}
.institute .heading span{
//padding: 0 2.7em 2px 0;
	padding-bottom: 2px;
	border-bottom: 1px solid #c1c1c1;
	color: #2e6da4;
	font-family: 'Oswald', sans-serif;
}
.inst-name{
	margin-top: 4px;
}


.dev-links{
	margin-top: 0.6em;
}
.dev-links .heading{
	margin-top: 1em;
	text-align: center;
	font-size: 1.3em;
	margin-bottom: 20px;
	font-family: 'Oswald', sans-serif;
}
.dev-links .heading span{
	color: #2e6da4;
	border-bottom: 2px solid #2e6da4;
	padding: 0 1.8em 4px 1.8em;
}
.dev-links .stack, .github{
	margin-top: 6px;
}
.dev-links .stack a, .dev-links .github a, .linkedin a{
	color: #00f;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.contact{
	margin-top: 1em;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.contact .heading{
	margin-top: 1em;
	text-align: center;
	font-size: 1.3em;
	margin-bottom: 1em;
	font-family: 'Oswald', sans-serif;
}
.contact .heading span{
	color: #2e6da4;
	border-bottom: 2px solid #2e6da4;
	padding: 0 1.8em 4px 1.8em;
}

.residence{
	margin-top: 1em;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
//font-family: 'Roboto Slab', serif;
	font-weight: 300;
}
.residence .heading{
	margin-top: 1em;
	text-align: center;
	font-size: 1.3em;
	margin-bottom: 1em;
	font-family: 'Oswald', sans-serif;
}
.residence .heading span{
	color: #2e6da4;
	border-bottom: 2px solid #2e6da4;
	padding: 0 1.8em 4px 1.8em;
}

.interest{
	margin-top: 1em;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
}
.interest .heading{
	margin-top: 1em;
	text-align: center;
	font-size: 1.3em;
	margin-bottom: 1em;
	font-family: 'Oswald', sans-serif;
}
.interest .heading span{
	color: #2e6da4;
	border-bottom: 2px solid #2e6da4;
	padding: 0 1.8em 4px 1.8em;
}

.communication{
	margin-top: 1em;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
}
.communication .heading{
	margin-top: 1em;
	text-align: center;
	font-size: 1.3em;
	margin-bottom: 1em;
	font-family: 'Oswald', sans-serif;
}
.communication .heading span{
	color: #2e6da4;
	border-bottom: 2px solid #2e6da4;
	padding: 0 1.8em 4px 1.8em;
}
.communication .p{
	margin-top: 10px;
}


.left-box{
	padding-bottom: 4em;
}

.email{
	margin-top: 0.8em;
}


.right-box{
//border: 1px solid #2e6da4;
}
.right-box .inner{
//border: 1px solid #a7cdc9;
	border: 1px solid rgba(191, 191, 191, 0.6);
}



#intro{
	padding: 1em 0;
}
#intro h1, h3{
	font-family: 'Roboto Slab', serif;
}
#intro .msg1{
	background-color: rgba(0, 140, 9, 0.97);
	color: #fff;
	padding: 4px 20px;
	border-radius: 30px;
	font-family: "Courier New";
}

.working-sector{
	margin-top: 1em;
	font-family: 'Roboto Slab', serif;
	font-size: 1.2em;
}
.working-sector .heading span{
	border-bottom: 1px solid #c1c1c1;
}
.experience{

}
.experience .exp-heading {
	color: #333; /* Darker text color for better readability */
	font-size: 1.8rem; /* Slightly larger font size */
	font-weight: bold; /* Bold text for emphasis */
	text-align: center; /* Center align the text */

	//padding: 1rem 0; /* Padding for top and bottom */
	//border-bottom: 2px solid #eee; /* Light border for separation */

	margin-top: 1rem;
	margin-bottom: 0;
	transition: background 0.3s ease; /* Smooth transition for hover effects */
}





.experience .tags{
	margin-top: 0.5em;
}
.experience .tags .tag{
	font-size: 1.3em;
	margin-top: 8px;
}
.experience .tags .tag .tag-text{
	background-color: rgba(214, 233, 231, 0.43);
	border: 1px solid rgb(215, 223, 221);
	margin: 0 4px;
	padding: 4px 0;
	transition: 0.3s;
}

.experience .tags .tag .tag-text.cat1 {
    background-color: #e3f2fd;  /* light blue */
    border: 1px solid #bbdefb;
}

.experience .tags .tag .tag-text.cat1:hover {
    background-color: #009dd6;  /* deeper blue on hover */
    border: 1px solid #3b3bb0;
}

.experience .tags .tag .tag-text.cat2 {
    background-color: #f3e5f5;  /* light lavender */
    border: 1px solid #ce93d8;
}

.experience .tags .tag .tag-text.cat2:hover {
    background-color: #ba68c8;  /* deeper lavender on hover */
    border: 1px solid #ab47bc;
}

.experience .tags .tag .tag-text.cat3 {
    background-color: #e8f5e9;  /* light green */
    border: 1px solid #a5d6a7;
}

.experience .tags .tag .tag-text.cat3:hover {
    background-color: #66bb6a;  /* deeper green on hover */
    border: 1px solid #4caf50;
}

.experience .tags .tag .tag-text.cat4 {
    background-color: #fff3e0;  /* soft orange */
    border: 1px solid #ffcc80;
}

.experience .tags .tag .tag-text.cat4:hover {
    background-color: #e5854b;  /* deeper orange on hover */
    border: 1px solid #ffa726;
}

.experience .tags .tag .tag-text.cat5 {
    background-color: #eceff1;  /* light gray */
    border: 1px solid #b0bec5;
}

.experience .tags .tag .tag-text.cat5:hover {
    background-color: #699aae;
    border: 1px solid #78909c;
}
.tag:hover{
	color: #fff;
}


.env-container{
	margin-top: 0.5em;
	font-size: 1.2em;
	font-family: 'Roboto Slab', serif;
}
.env-container .heading{
	color: #000;
}
.env-container .heading span{
	border-bottom: 1px solid #c1c1c1;
}



.job-experience{
	margin-top: 2rem;
}
.job-container{
	margin-top: 0.5rem;
	opacity: 0; /* Start with opacity 0 */
	transform: translateY(20px); /* Start slightly below */
	animation: fadeInUp 0.5s forwards; /* Animation name, duration, and forwards to maintain end state */
}
.job-role{
	background: linear-gradient(to right, rgba(206, 194, 255, 0.3), rgb(255, 255, 255));
	padding: 6px 12px;
	border-radius: 20px;
}


.projects{
	margin-top: 1em;
}
.projects .proj-heading{
	color: #fafafa;
	font-size: 1.7em;
	font-weight: 300;
	margin-top: 8px;
	padding: 0.2em 0;
	text-align: center;
	font-family: 'Roboto Slab', serif;
	text-shadow: 1px 1px 1px #000000;

	background: linear-gradient(rgba(9, 21, 29, 0.29), rgba(0, 0, 0, 0.3)), url("../images/bg20.jpg") ;

	margin-bottom: 0.5em;
}



.project{
	border: 1px solid #cdcdcd;
	border-top: 1px solid #575757;
	margin-bottom: 1em;
	background-color: rgba(234, 234, 234, 0.36);
}
.project .title{

}
.project .title .text{
	color: #000;
	background-color: rgba(223, 223, 223, 0.42);
	border-bottom: 1px solid rgba(170, 170, 170, 0.8);
	padding: 0.2em 0 0.2em 0.5em;
	font-size: 1.2em;
	font-family: 'Roboto Slab', serif;
}
.project .details-btn{
	position: absolute;
	right: 1em;
	top: 0.3em;
	color: #00f;
}
.project .details-btn:hover{
	cursor: pointer;
	color: #0000bf;
}
.project .details-icon{
	transition: transform 0.3s;
}
.project .details-btn:hover .details-icon{
	transform: rotate(180deg);
//display: none;
}
.project .details-btn img{
	margin-top: -2px;
}

.project .description{
	background-color: #fff;
	padding: 0.5em;
//font-family: 'Roboto Slab', serif;
	font-family: 'Raleway', sans-serif;
	font-size: 1.2em;
}
.project .proj-category{
	margin-top: 0.4em;
	color: rgba(226, 111, 11, 0.97);
	font-style: italic;
}
.proj-description a{
	color: #0000bf;
}


/*highlight phrase*/
span.hl{
	font-weight: 600;
	//color: rgba(4, 190, 66, 0.97);
}

.android{
	//color: #009522;
}
.web{
	//color: #d76c06;
}
.laravel{
	//color: #be7dc4;
}
.desktop{
	//color: #d00e03;
}
.iot{
	//color: #b100b4;
	//font-weight: 600;
}
.chrome{
	//color: #932a47;
}
.linux{
	//color: #000;
	//font-weight: bold;
}

#footer{
	background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.38)), url("../images/bg49.png") ;
	color: #e6e480;
	font-size: 1.5em;
	padding: 1em 0;
	font-family: 'Roboto Slab', serif;
	font-weight: 300;
	letter-spacing: 3px;
}




@media (min-width:320px)  {
	/* smartphones, iPhone, portrait 480x320 phones */
	.device-specific-margin{
		margin: 0;
	//color: red;
	}
	.device-specific-padding{
		padding: 0 4px;
	}
	.tags{
		margin-bottom: 1em;
	}
}
@media (min-width:481px)  {
	/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
}
@media (min-width:641px)  {
	/* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
}
@media (min-width:961px)  {
	/* tablet, landscape iPad, lo-res laptops ands desktops */
}
@media (min-width:1025px) {
	/* big landscape tablets, laptops, and desktops */
	.device-specific-margin{
		margin: 0 8px;
		color: #000;
	}
	.device-specific-padding{
		padding: 0 8px;
	}
	.tags{
		margin-bottom: 0;
	}

}
@media (min-width:1281px) {
	/* hi-res laptops and desktops */
}



.project, .exp-heading, .proj-heading{
	transform: scale(0.9);
	opacity: 0;
}
.scaleup{
	-webkit-animation: scaleUp 0.5s ;
	-o-animation: scaleUp 0.5s ;
	-moz-animation: scaleUp 0.5s ;
	animation: scaleUp 0.5s ;
	animation-fill-mode: forwards;
}
@keyframes scaleUp {
	100%{
		transform: scale(1);
		opacity: 1;
	}
}


#pp .name{
	opacity: 0;
	margin-top: 1em;
}
.popup{
	-webkit-animation: popUp 0.5s ;
	-o-animation: popUp 0.5s ;
	-moz-animation: popUp 0.5s ;
	animation: popUp 0.5s ;
	animation-fill-mode: forwards;
}
@keyframes popUp {
	100%{
		opacity: 1;
	}
}



.appear{
	-webkit-animation: contentAppear 0.5s;
	-o-animation: contentAppear 0.5s;
	-moz-animation: contentAppear 0.5s;
	animation: contentAppear 0.5s;

	-moz-animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	-o-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
@keyframes contentAppear {
	100%{
		opacity: 1;
	}
}




@keyframes fadeInUp {
	0% {
		opacity: 0; /* Start invisible */
		transform: translateY(20px); /* Start slightly below */
	}
	100% {
		opacity: 1; /* End fully visible */
		transform: translateY(0); /* End at original position */
	}
}