@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,300i,400,700');

/*********** Global Styles********/
body,
html {
		background-color: #E3E3E3;
}

h1, h2, h3, h4, h5, h6 {
		font-family: "Lato", sans-serif !important;
		font-weight: 900 !important;
}

.wrapper {
		background: #E3E3E3;
}

.img-circle {
		border-radius: 50%;
		display: block;
		margin-left: 465px;
		margin-top: 100px;
		margin-bottom: -50px;
}

.img-portrait {
		display: block;
		margin-left: 465px;
		margin-top: 100px;
		margin-bottom: -50px;
}

.my-button {
		font-size: 1em;
		line-height: normal;
		text-transform: uppercase;
		font-family: 'Lato', sans-serif;
		font-weight: 900;
		-webkit-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out, color 0.2s 0.3s;
		letter-spacing: 0;
		border-radius: 45px;
		height: auto;
		padding: .8em 2.1em;
}

.my-button:hover {
		cursor: pointer;
		padding: .8em 2.7em;
}

.my-button:active,
.my-button:focus,
.my-button.active {
		background-image: none;
		outline: 0;
		-webkit-box-shadow: none;
		box-shadow: none;
}

/* #my-modal {
	display: none;
}

.my-form {
	margin-top: 20em;
}

.custombox-content {
	background: #212332;
} */

/*** thin bar ***/
.home {
		background-color: #fff;
		border-top: 5px solid rgba(255, 103, 68, 0.91);
		border-bottom: 5px solid rgba(255, 103, 68, 0.91);
		margin-top: 2%;
		overflow: hidden;
		position: fixed;
		text-align: center;
		top: 0;
		width: 100%;
		z-index: 1;
}

.home .js-scroll-trigger {
		margin: 2rem;
		scroll-behavior: smooth;
}

/*** About Section ***/
#about {
		margin: 4em 0 2em 0;
		border: 1px solid #eee;
		background-color: white;
		padding-bottom: 1em;
}

#about img {
		max-width: 20em;
		position: relative;
		bottom: 10.5em;
		right: 2em;
}

#about .details {
		margin: 4em -15em 4em -15em;
}

#about h2 {
		color: #646464;
		font-size: 3.8em;
		padding-bottom: 1em;
}

#about span {
		font-weight: 300;
		font-size: .7em;
}

#about h5 {
		color: #8A8A8B;
}

#about p {
		margin-top: 1em;
		color: #646464;
		font-family: "roboto";
		font-weight: 300;
}

.cta .cta-button {
		color: #cc4b37;
		text-transform: uppercase;
		border: 2px solid rgba(255, 103, 68, 0.91);
		border-radius: 50px;
		background: white;
		position: relative;
		bottom: 3em;
}

.cta .cta-button:hover, .cta .cta-button:focus {
		box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 14px 1px rgba(0, 0, 0, 0.15);
		background-color: rgba(255, 103, 68, 0.91);
		color: white;
}

#about i {
		margin-top: 2em;
}

.fa {
		font-size: 1.2em;
		padding: 0.1em 0.4em;
		color: #8a8a8a;
}

.fa:hover {
		cursor: pointer;
}

/*** Experience ***/
#experience {
		background-color: #4c6d86;
		padding: 6em 4em 5.6em;
}

#experience h2 {
		color: #fff;
		margin-bottom: .7em;
}

#experience .tag-line {
		color: white;
		font-size: 1.4em;
}

#experience i {
		color: rgb(255, 138, 89);
		font-size: 4em;
}

#experience h3 {
		color: #fff;
}

.experience-topics p {
		color: #ACAEB2;
		font-family: "Maven pro", sans-serif;
		/*font-weight: 500;*/
}

.experience-topics ul li {
		list-style: none;
		color: #bbd2ff;
		font-family: "Maven pro", sans-serif;
		font-weight: 500;
}


/*** Linkedin Section ***/

#linkedin {
		padding: 6em 4em 3em;
		background-color: #fff;
}

#linkedin h2 {
		color: #FF6945;
		margin-bottom: .7em;
}

#linkedin .tag-line {
		color: #767779;
		font-size: 1.4em;
		margin-bottom: 4em;
}

#linkedin .work-row {
		margin-bottom: 5.5em;
}

.details h3 {
		color: #738182;
		text-transform: uppercase;
}

.details .platform {
		font-size: 0.8em;
		text-transform: uppercase;
		margin: 2em 0 -0.1em;
		font-family: "Maven pro", sans-serif;
		font-weight: 500;
		color: #ff7654;
}

.details i {
		color: #ff7654;
		margin-right: 1em;
}

.details p {
		color: #738182;
		font-family: "Maven pro", sans-serif;
		font-weight: 500;
		font-size: 1.2em;
		margin-bottom: 1.8em;
}

.details a, .details a:link, .details a:active {
		color: rgba(255, 103, 68, 0.91);
		border: 2px solid rgba(255, 103, 68, 0.91) !important;
		background-color: #fff;
}

.details a:hover, .details a:focus {
		/*box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 14px 1px rgba(0, 0, 0, 0.15);*/
		background-color: rgba(255, 103, 68, 0.91) !important;
		color: #fff;
}

/*** work ***/
#work {
		padding: 6em 4em 3em;
		background-color: #fff;
}

#work h2 {
		color: #FF6945;
		margin-bottom: .7em;
}

#work .tag-line {
		color: #767779;
		font-size: 1.4em;
		margin-bottom: 4em;
}

#work .work-row {
		margin-bottom: 5.5em;
}

.details h3 {
		color: #738182;
		text-transform: uppercase;
}

.details .platform {
		font-size: 0.8em;
		text-transform: uppercase;
		margin: 2em 0 -0.1em;
		font-family: "Maven pro", sans-serif;
		font-weight: 500;
		color: #ff7654;
}

.details i {
		color: #ff7654;
		margin-right: 1em;
}

.details p {
		color: #738182;
		font-family: "Maven pro", sans-serif;
		font-weight: 500;
		font-size: 1.2em;
		margin-bottom: 1.8em;
}

.details a, .details a:link, .details a:active {
		color: rgba(255, 103, 68, 0.91);
		border: 2px solid rgba(255, 103, 68, 0.91) !important;
		background-color: #fff;
}

.details a:hover, .details a:focus {
		/*box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 14px 1px rgba(0, 0, 0, 0.15);*/
		background-color: rgba(255, 103, 68, 0.91) !important;
		color: #fff;
}

/*** coding ***/
#coding {
		margin: 5em 0 10em;
		padding: 6em 4em 5em;
}

#coding h2 {
		color: #595959;
}

#coding .tag-line {
		color: #848282;
		font-size: 1.4em;
}

#coding .coding-domains {
		height: 500px;
		width: auto;
		margin-top: -4em;
}

/*** Footer Call-to-action ***/
#footer-cta {
		background-color: rgba(255, 103, 68, 0.91);
		padding: 6em 4em 5.6em;
}

#footer-cta h2 {
		color: white;
}

#footer-cta p {
		color: #fff;
		font-family: "Maven pro", sans-serif;
		font-weight: 500;
		font-size: 1.2em;
}

#startButtonDiv {
		margin-top: 3em;
}

#footer-cta a {
		border: 2px solid #fff;
		border-radius: 45px;
		color: #fff;
}

#footer-cta a:hover {
		background: #fff;
		color: rgba(255, 103, 68, 0.91);
		box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 14px 1px rgba(0, 0, 0, 0.15);
}

#contact-linkedin-text {
		margin-top: 2em;
}


#contact-github-text {
		margin-top: 2em;
}

.contact-btn {
		font-size: 2em;
		vertical-align: middle;
		padding-bottom: 3px;
}

.thank-you {
		padding-top: 2em;
}

/*** footer starts ***/
#footer {
		padding: 5em 4em 2em;
}

#footer #logo {
		background-color: rgba(255, 103, 68, 0.91);
		border-radius: 50%;
		color: #fff;
		padding: .4em;
		font-family: "Maven pro", sans-serif;
		font-size: 1.6em;
		font-weight: 500;
		display: inline;
}

#footer #copyright {
		margin-top: 1.6em;
		font-family: "Maven pro", sans-serif;
		font-weight: 500;
		color: #7d7d7d;
}

.email {
		display: inline-block;
}

.form-div {
		display: block;
		text-align: center;
}

textarea {
		width: 33rem;
		height: 6rem;
}
 /* Add rounded corners to the outer container */
  .fiverr-seller-widget {
    border-radius: 50px; /* Adjust the value to control the roundness */
    overflow: hidden; /* This ensures content within the container respects the rounding */
		z-index: 0;
  }

  /* Add rounded corners to the inner content (optional) */
  .fiverr-seller-content {
    border-radius: 50px; /* Adjust the value to control the roundness */
		z-index: 0;
  }

.img .fiverr-icon {
	z-index: 0;
}

.fiverr-profile-img {
	z-index: 0;
}

.crop {
	z-index: 0;
}