body
{

}
header .intro-text {
	height: fit-content;
	 margin: 20% 0;
    position: relative;
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: fadeIn ease-in-out 2s;}

header .fade-in {
    animation: fadeIn ease 5s;
    -webkit-animation: fadeIn ease 5s;
    -moz-animation: fadeIn ease 5s;
    -o-animation: fadeIn ease 5s;
    -ms-animation: fadeIn ease 5s;}

@keyframes fadeIn{0% {opacity:0;}100% {opacity:1;}}

@-moz-keyframes fadeIn {0% {opacity:0;}100% {opacity:1;}}

@-webkit-keyframes fadeIn {0% {opacity:0;}100% {opacity:1;}}

@-o-keyframes fadeIn {0% {opacity:0;}100% {opacity:1;}}

@-ms-keyframes fadeIn {0% {opacity:0;}100% {opacity:1;}}}

header .page-scroll .btn .btn-xl{
    animation-delay: 2s;
    animation: fadeIn ease-in-out 2s;}
    
.btn-xl {
        padding: 10px;
        padding-right: 40px;
        padding-left: 40px;}

.btn-xl2 {
        padding: 10px;}

.btn-primary,.btn-xl,h1,h2,h4,h6{font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:initial;font-weight:600;}
.btn-primary,.btn-xl,h3{font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:initial;font-weight:400;}

.h1, h1 {
    font-size: 50px;
    letter-spacing: 0;
    padding-bottom: 1rem;
    color: #000;
    text-align: center;
    font-weight: 500px}

.h3, h3{
    font-size: 25px;
    letter-spacing: ;
    margin-top:20px;
    margin-bottom:20px;
font-weight: 200px}

.h4, h4{
    font-weight:600;
    font-size:16px;
    text-align: left;
    margin-top: 0px;
    margin-bottom: 10 px;}

.img-profile {
	position: relative;
	top: 80px;
    border-radius: 50%;
    border: 5px solid #fff;
    width: 20%;
    max-width: 180px;
    box-shadow: 0px 0px 5px black;}

.carousel {
	width:60%;
	max-width:600px;
		margin: auto;
	position: relative;
	float:center;}

@media screen 
and (max-device-width: 480px) {
header .h1, h1 {
    font-size:50px;
    letter-spacing: 0;
    padding-bottom: 1rem;
    color:#000;}

@media screen 
and (min-device-width: 480px) {
header .intro-text {
	height: 20%;
	 margin: 10% 0;
    position: relative;
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: fadeIn ease-in-out 2s;
    padding-top: 50%;}
header .intro-heading {
    padding-top: 50px}}

header .page-scroll .btn .btn-xl{
    animation-delay: 2s;
    animation: fadeIn ease-in-out 2s;}
    
.btn-xl {padding: 10px;}
}

.fa-youtube {
    padding-top:10px;}
.fa-facebook {
    padding-top:10px;}
.fa-instagram {
    padding-top:10px;}
.fa-behance {
    padding-top:10px;}
.fa-linkedin {
    padding-top:10px;}

.fa-briefcase {
    padding-top:2px;
    color: #fff;}
.fa-file-alt {
    padding-top:2px;
    color: #fff;}
.fa-user-circle {
    padding-top:2px;
    color: #fff;}
.fa-envelope-open-text {
    padding-top:0rem;
    color: #fff;}

.grey-bg {
    background-color:#ffffffcc;
    border: 0px solid #FC6763;
    backdrop-filter:blur(30px);
    }

.orange-bg {
    background-color:#FC6763;
height:5px;}

.orange-container {
    background-color:#FC6763;
    align-content: center;
    margin-left: auto;
    margin-right: auto;
    width: content;
    padding-left: 20vw;
    padding-right: 20vw;
    margin-top: -50px;
    margin-bottom: 10px;
    border-radius: 50%;
    max-width: 100%}

.orange-circle-briefcase {
    background-color:#FC6763;
    align-content: center;
    height:fit content;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 30px;
    padding-bottom: 30px;
    margin-bottom: -50px;
    border-radius: 50%;
    transform: translate(0px, -50%);}

.orange-circle-file-alt {
    background-color:#FC6763;
    align-content: center;
    height:fit content;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 30px;
    padding-bottom: 30px;
    margin-bottom: -50px;
    border-radius: 50%;
    transform: translate(0px, -50%);}

.orange-circle-user-circle {
    background-color:#FC6763;
    align-content: center;
    height:fit content;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 30px;
    padding-bottom: 30px;
    margin-bottom: -50px;
    border-radius: 50%;
    transform: translate(0px, -50%);}

.orange-circle-envelope-open-text {
    background-color:#FC6763;
    align-content: center;
    height:fit content;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 30px;
    padding-bottom: 30px;
    margin-bottom: -50px;
    border-radius: 50%;
    transform: translate(0px, -50%);}

.icon-container {
    width:50px;
    height:50px;
}

.white-text{
    color: #fc6763;
    text-align: center;
}

.circle {
  position: center;
  width: 20px;

  padding: 10% 0;
  border-radius: 50%;
  
  /* Just making it pretty */
  @shadow: rgba(0, 0, 0, .1);
  @shadow-length: 4px;
  -webkit-box-shadow: 0 @shadow-length 0 0 @shadow;
          box-shadow: 0 @shadow-length 0 0 @shadow;
  text-shadow: 0 @shadow-length 0 @shadow;
  background: #FC6763;
  color: white;
  font-family: Helvetica, Arial Black, sans;
  font-size: 48px;
  text-align: center;
}

@media screen 
and (max-device-width: 768px) {
header .intro-text {
    top: 250;}

.separator-line {
    width: 100%;
    height:10px;
    color: #FC6763;
}

#boxshadow {
  position: relative;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
  padding: 10px;
}
}


.portfolio-item { 
    border-radius: :20px;
    box-shadow: 20px
}

.navbar-fixed-bottom {

    background-color: #fc6763c9;
    backdrop-filter:blur(20px);
    max-height: auto;
    margin: 0px;
}

.bottom-bar {
    margin-bottom:4px
    max-width: 100vw;
}

.rounded-corners {
    border-top-left-radius:20px;
    border-top-right-radius:20px;
}

.logo-circle {
    max-height: 150px;
}

.logo-circle-small {
    max-height: 60px;
    transform: translate(0, -20px);
}

.header-bar {
    min-height: fit-content;
    max-height: 100vh;
}

.fixed-bg {
  /* The background image */
  background-image: url("https://images.unsplash.com/photo-1533038590840-1cde6e668a91?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=634&q=80");

  /* Set a specified height, or the minimum height for the background image */
  min-height: 80%;
  max-width: 100%;

  /* Set background image to fixed (don't scroll along with the page) */
  background-attachment: fixed;

  /* Center the background image */
  background-position: center;

  /* Set the background image to no repeat */
  background-repeat: no-repeat;

  /* Scale the background image to be as large as possible */
  background-size: cover;
}

.index {width: 100%}

.container {border-radius: 20px}

@media screen 
and (max-device-width: 768px) {.container {width: fit-content;}

.grow { 
transition: all .1s ease-in-out; 
}

.grow:hover { 
transform: scale(1.2); 
}
}

.body {
    background color: #d0d0d0;
}

html, body {
margin:0;
padding:0;
}