/* 1st step */
  /* $desktop:1200px;
  $laptop:1024px;
  $tablet:768px
  $phone:480px */

	* {
		margin: 0;
		padding: 0;
		border: 0;
		box-sizing: border-box;
	}

	body {
		width: 100%;
		/* padding: 0 7%; */
		min-height: 100vh;
		overflow-x: hidden;
		background-color: #ecf1fd;
	}

	html {
		scroll-behavior: smooth;
	}

	* {font-family: 'Poppins', sans-serif;}
/* 1st step end */	

/* ------------------------- nav ------------------------- */

#sec-1 {
	background-color: #ecf1fd;
	width: 100%;
	padding: 1% 8%;
	/* border: solid 1px red; */
}

.mylogo {
/* border: solid 1px red; */
height: 70px;
}

#nav {
background-color: #ecf1fd;
}

.navbar-nav {
gap: 15px;
}

#list-link {
color: rgba(0, 0, 0, 0.667);
text-decoration: none;
display: block;
position: relative;
padding-bottom: 0.25rem;
padding-right: 5px;
transition: width 0.35s ease-out;
}

#list-link::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 2px;
background-color: #0097a7;
transition: width 0.35s ease-out;
}

#list-link:hover::before {
width: 100%;
}

/* Responsive adjustments */
@media (max-width: 768px) {
.navbar-nav {
	text-align: center;
}
}

@media (max-width: 576px) {
.mylogo {
	width: 100px;
}

#button {
	font-size: 12px;
}

.name {
	font-size: 35px;
}

.stack {
	font-size: 12px;
}
}
  
  /* --------------------------------------- first content ------------------------- */

#sec-2 {
	display: flex;
	width: 100%;
	padding: 1% 10% 0 10%;
	background-color: #ecf1fd;
	justify-content: center;
	flex-wrap: wrap; 
		/* border: solid 1px red; */
}

@media (max-width: 992px) {
	#sec-2 {
		padding: 2% 5%; 
	}

	.intro {
		width: 100%;
		margin-bottom: 25px;
	}

	#dpic {
		width: 100%;
	}
}

.intro {
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* border: solid 1px red; */
}

#dpic img {
	width: 100%;
		/* border: solid 1px red; */
	height: auto;
	padding: 0 9%;
}

#hello {
	font-weight: 600;
	color: #263238;
	font-size: 17px;
	padding-bottom: 1%;
}

@media (max-width: 768px) {
	.name {
		font-size: 27px; 
	}
	.stack {
		font-size: 13px;
		line-height: 22px;
	}
	.full {
		font-size: 13px;
	}
	#button {
		font-size: 13px;
	}
	#iconic {
		font-size: 13px;
	}
}

@media (max-width: 576px) {
	.name {
		font-size: 20px; 
		line-height: 110%;
	}
	.stack {
		font-size: 12px;
		line-height: 20px; 
	}
	.full {
		font-size: 13px;
	}
	#button {
		font-size: 12px;
		padding: 10px 20px;
	}
	#iconic {
		font-size: 12px;
	}
}

.name {
	color: #263238;
	font-size: 38px;
	font-weight: 600;
	font-family: 'Poppins', sans-serif;
	letter-spacing: 4px;
}

.nate {
	color: #0097a7;
}

.stack {
	font-size: 17px;
	font-weight: lighter;
	word-spacing: 3px;
	line-height: 25px;
	margin-top: -3%;
}

.full {
	font-size: 17px;
	font-weight: 510;
}

#button {
	background-color: #0097a7;
	color: white;
	border-style: none;
	text-decoration: none;
	transition: 0.3s ease-out;
	font-size: 15px;
	text-transform: uppercase;
	font-weight: 400;
	margin-top: 6px;
	padding: 12px 25px;
}

#button:hover {
	transform: translate(0px, -10px);
}

.addB {
	display: flex;
	gap: 15px;
	margin-top: 5%;
}

#iconic {
	color: #263238;
	font-size: 15px;
}

#iconic:hover {
	color: #0097a7;
}


/* section ------------------------------------------------------------------ABOUT ME------------------ */

/* ABOUT ME */
.aboutmain {
    width: 100%;
    background-color: #ffffff;
    display: flex;
    flex-direction: row;
    padding: 4% 8% 0 8%;
    /* Adjust padding for smaller screens */
}


.about1 {
    width: 50%;
}

.about2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 50%;
}

.aboutitle {
    font-size: 25px;
    font-weight: 600;
}

.imgabout {
    height: auto;
    object-fit: contain; /* Maintain aspect ratio */
	width: 100%;
	height: auto;
	padding: 0 2%;
}

.divider {
    height: 8px; 
    background-color: #0097a7;
    width: 18%;
    margin-bottom: 2%;
}

.webDev {
    text-align: left;
    font-size: 15px;
    font-weight: 300;
}

/* Media Queries for Responsiveness */

/* Medium to Large Screens */
@media (max-width: 1200px) {
    .aboutmain {
        padding: 4% 5%;
    }

    .about1, .about2 {
        width: 50%;
    }

    .aboutitle {
        font-size: 22px; /* Adjust font size */
    }

    .webDev {
        font-size: 14px; /* Adjust font size */
    }
}

/* Tablets */
@media (max-width: 768px) {
    .aboutmain {
        flex-direction: column; /* Stack the sections */
        padding: 4% 3%;
    }

    .about1, .about2 {
        width: 100%; /* Full width for smaller screens */
    }

    .aboutitle {
        font-size: 20px; /* Adjust font size */
    }

    .webDev {
        font-size: 13px; /* Adjust font size */
    }

    .divider {
        width: 30%; /* Wider divider for smaller screens */
    }
}

/* Mobile Phones */
@media (max-width: 576px) {
    .aboutmain {
        padding: 2% 1%; /* Less padding for mobile */
    }

    .aboutitle {
        font-size: 18px; /* Smaller font size */
    }

    .webDev {
        font-size: 12px; /* Smaller font size */
    }

    .imgabout {
        height: 200px; /* Smaller image height */
    }

    .divider {
        width: 50%; /* Even wider divider */
    }
}


/* section -------------------------------------------------------------------PROGRESS BAR----------------- */

/*progress bar*/
	
	.progB {
		width: 100%;
		padding-bottom: 50px;
		padding-top: 10px;
	}

	.iconss{
		width: 100%;
		display: flex;
		justify-content: center;
		padding-top: 2%;
		border-top: solid 2px #007a8a; 
	}

	.wanD {
		border-style: solid;
		padding-right: 8%;
		padding-left: 8%;	
		background-color: #ffffff
	}	

	.wanDiv {
		border-style: dotted;
		justify-content: center;
		
	}

  .wanDiv1 {
		border-style: dotted;
		justify-content: center;
		
	}

	#pcar {
		font-weight: bolder;
		font-size: 45px;
		color: #0097a7;
	}

	#pbar-p {
		font-size: 20px;
	}

/*progress bar end */

/* section -----------------------------------------------------------------------EXPERTISE AREA------------- */

/* General Styles */
.expertArea {
    background-color: #f8f9fd;
    padding: 10%;
    width: 100%;
}

.h2e {
    font-size: 25px;
    font-weight: 600;
    margin-bottom: -20px;
}

.cardexpert {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Allows cards to wrap on smaller screens */
    gap: 15px;
    margin-top: 1%;
}

.title {
    padding-top: 20px;
    color: #263238;
    font-size: 20px;
    font-weight: 600;
    padding: 2%;
}

.firstD {
    background-color: #f8f9fd;
    transition: 0.3s ease-out;
    width: 45%; 
    height: auto;
}

.firstD:hover {
    transform: translate(0px, -5px);
}

.firstD:hover::after,
.firstD:hover::before {
    transform: translate(0px, 5px);
}

.box, .box1 {
    background-color: #ecf1fd;
    padding: 20px;
}

.box1 {
    padding-bottom: 40px;
}

@media (max-width: 992px) {
    .firstD {
        width: 100%; 
    }

    .h2e {
        font-size: 22px;
    }

    .title {
        font-size: 18px;
    }
}

@media (max-width: 768px) {
    .expertArea {
        padding: 5%;
    }

    .h2e {
        font-size: 20px;
    }

    .title {
        font-size: 16px;
    }

}

@media (max-width: 576px) {
    .expertArea {
        padding: 3%;
    }

    .h2e {
        font-size: 18px;
    }

    .title {
        font-size: 14px;
    }

    .cardexpert {
        gap: 20px; 
    }

    .box, .box1 {
        padding: 15px; 
    }
}

/* section ---------------------------------------------------------------------RECENT PROJECTS--------------- */


   /* Main heading */
.h2eee {
    border-style: solid;
    font-size: 30px;
    font-weight: 600;
    margin-bottom: -20px;
}

.layn222 {
    border-style: solid;
    position: inherit;
    margin-top: -20px;
}

.texxt {
    font-size: 14px;
    font-weight: lighter;
    color: #787878;
    margin-bottom: 22px;
}

.mainDee {
    padding: 100px 9%;
    background-color: white;
    width: 100%;
}

.prmain {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.prsec {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
	padding: 1%;
	/* border: solid 1px red; */
}

.boxxx {
    padding: 20px;
    width: 48%;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
	
}

.titleee {
    margin-top: 20px;
    color: #3e4355;
    font-size: 18px;
    font-weight: 600;
    padding: 5px 0;
}

.para {
    font-size: 14px;
    color: #899096;
    margin-top: 10px;
}

.button4 {
    background-color: #0097a7;
    border: none;
    color: white;
    border-radius: 6px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

.button4:hover {
    background-color: #007a8a;
}

.tc-container {
    position: relative;
    border: none;
}

.tc-container img {
    width: 100%;
    height: 100%;
}

.top-img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.top-img:hover {
    opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    /*  tablet */
    .boxxx {
        width: 100%; 
        padding: 15px;
    }

    .h2eee {
        font-size: 26px;
    }

    .para, .texxt {
        font-size: 13px;
    }

    .button4 {
        font-size: 14px;
        padding: 8px 15px;
    }
}

@media (max-width: 768px) {
    /* mobile */
    .prsec {
        flex-direction: column; 
    }

    .boxxx {
        width: 100%; 
        padding: 10px;
    }

    .h2eee {
        font-size: 22px;
    }

    .titleee {
        font-size: 16px;
    }

    .para, .texxt {
        font-size: 12px;
    }

    .button4 {
        font-size: 13px;
        padding: 6px 10px;
    }
}

  /* section ---------------------------------------------------------------------RESUME--------------- */
/*RESUME*/

  	.newRes {
		background-color: #f8f9fd;
		padding: 10% 9% 30% 9%;
		width: 100%;
	}

	.cont3 {
		/* border: solid 1px green; */
		display: flex;
		flex-direction: column;
	}

	.cont3 h5{
		font-size: 17px;
	}	

	.cont3 h3{
		font-size: 15px;
		font-weight: 600;
		padding: 5px 0;
	}	

	.cont3 p{
		font-size: 14px;
		font-weight: 400;
		padding: 5px 0;
	}	

	.expe {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		/* border: solid 1px red; */
	}

	.educ{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
 		/* border: solid 1px red; */
	}
	
	.cont5 {
		flex-basis: calc(49.5% - 1px); /* Adjust 20px as the gap between columns */
		margin-bottom: 20px; /* Add margin between rows */
		border-style: dotted;
		padding: 40px;
		background-color: #ecf1fd;
		transition: 0.3s ease-out;
		margin-bottom: 10px;
	}
	
	.cont5 h5, .cont5 h3, .cont5 p {
		margin: 0; /* Adjust as needed */
	}
	
	/* For smaller screens, make adjustments if necessary */
	@media (max-width: 768px) {
		.cont5 {
			flex-basis: calc(50% - 10px); /* Two columns on medium-sized screens */
		}
	}
	
	@media (max-width: 576px) {
		.cont5 {
			flex-basis: 100%; /* Full width on small screens */
		}
	}

	.cont5:hover {
		transform:  translate(0px, -5px)
	}

	.cont5:hover::after {
		transform:  translate(0px, 6px)
	}

	.cont5:hover::before {
		transform:  translate(0px, 5px)
	}

	.subTit {
		border-style: solid;
		font-size: 35px;
		font-weight: 600;
	   }
   
	   .subName {
		border-style: solid;
		font-size: 20px;
		font-weight: 600;
		padding: 2% 3px 1% 3px;
	   }
	
/*RESUME end*/

/* section ------------------------------------------------------------------CONTACT ME------------------ */

/*contact form*/

	#conSection {
		margin-top: -270px;
		padding-right: 4%;
		padding-left: 4%;
		width: 100%;
		border-style: dotted;
	}

	.mainC:hover {
		transform:  translate(0px, -5px)
	}

	.mainC:hover::after {
		transform:  translate(0px, 6px)
	}

	.mainC:hover::before {
		transform:  translate(0px, 5px)
	}

	#mainCont {
	 	padding: 7% 3% 7% 15%;
	 	border-style: solid;
	}

	#mainCont1 {
	 	padding: 3% 7% 7% 10%;
	 	border-style: solid;
		/*  */
	}

	.eml {
		font-weight: 500;
	}

	.nds {
		font-size: 14px;
		margin-top: -20px;
	
	}

	.mainC {
		background-color: #f8f9fd;
		border-style: dashed;
		padding: 5%;
		margin-right: 80px;
		box-shadow: 1px 10px 20px;
		transition: 0.3s ease-out;
	}

	.CntMe {
		color: #3e4355;
		font-size: 30px;
		font-weight: 600;
		margin-bottom: -20px;
	}

	.lane {
		margin-bottom: -20px;
	}

	.looking {
		color: #3e4355;
		font-size: 18px;
		margin-top: -20px;
		margin-bottom: 95px;
	}

	.email {
	  font-size: 18px;
	  font-family: 'Poppins', sans-serif;
	  font-weight: 500;
	}
	
	.email {
	  font-size: 18px;
	  font-family: 'Poppins', sans-serif;
	  font-weight: 500;
	}

	.formC {
		color: red;
		content: "*";
		font-size: 20px;

	}


	#contact {
		background-color: #ecf1fd;
	}

	#button3 {
		background-color: #0097a7;
		color: white;
		font-size: 15px;
		padding: 10px;
		margin-bottom: 17px;
		width: 100%;
		border-style: none;
		border-radius: 6px;
		transition: 0.3s ease-out;
	}

	#iconic1 {
		color: #0097a7;
		font-size: 15px;
		background-color: white;
		
	}

	#iconic1:hover {
		color: #263238;
	}


	#button3:hover {
		transform:  translate(0px, -5px)
	}

	#button3:hover::after {
		transform:  translate(0px, 6px)
	}

	#button3:hover::before {
		transform:  translate(0px, 5px)
	}
	
/*contact form end */

/* section ----------------------------------------------------------------------FOOTER-------------- */

/*footer*/
	#foot {
		color: gray;
		background-color: #1b1b1b;
		font-size: 12px;
	}
/* foot end */

#arrowUp {
	position: fixed;
	width: 35px;
	height: 35px;
	background-color: #40404133;
	bottom: 20px;
	right: 15px;
	text-decoration: none;
	text-align: center;
	line-height: 37px;
	color: #ffffffac;
	font-size: 18px;
	pointer-events: none;
	transition: all .4s;
	opacity: 0;
}

#arrowUp:hover {
	background-color: #4040416c;
	color: #ffffffc9
}

#arrowUp.active {
	bottom: 32px;
	pointer-events: auto;
	opacity: 1;
}