/* CSS Document */

  /*Custom Colours*/
  :root {
    --atomic: #FCA17D;
    --blush: #DA627D;
    --green: #53917E;

  }

.atomic{
	color: var(--atomic)
}

.blush{
	color:var(--blush);
}

.green{
	color:var(--green);
}

.white{
	color: white;
}

.navbar{
	border-bottom: 1px solid var(--blush);
}


.logo{
	width: 300px;
}

.logo svg path{
	fill: transparent;
    stroke: #fff;
    stroke-width: 0.1;
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
    animation: textAnimation 4s ease-in-out forwards ;
}


.logo-shadow {
    -webkit-filter: drop-shadow( 3px 3px 2px rgba(252, 161, 125, .4));
    filter: drop-shadow( 3px 3px 2px rgba(252, 161, 125, .4));
    /* Similar syntax to box-shadow */
  }


@keyframes textAnimation{
    0%{
        stroke-dashoffset: 900;
    }
    50%{
        fill: transparent;
    }
    100%{
        fill: #fff;
        stroke-dashoffset: 0;
    }
}

.hero{
	min-height: 50dvh;
	display: flex;
	justify-content: center;
	align-items: center;
}


footer{
	margin: 5rem 0;
}

.portfolio .row{
	padding: 1rem 0;
}

.portfolio .row .title{
	padding: 3rem 0;
}

.portfolio-item{
	position:relative;
	padding-bottom: 20px;
}

.portfolio-item .description{
	position: absolute;
	z-index: 10;
    margin-top: -64px;
	padding: 15px;
    background-color: rgba(0, 0, 0, 0.8);
	cursor: pointer;
	color: white;
	border-bottom: 3px solid var(--atomic);
}


.portfolio-item img{
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

.portfolio-item:hover img{
	-webkit-filter: none;
  	filter: none;
	cursor: pointer;
}

.modal-lg-custom {
  max-width: 750px; /* Maximum width for the modal */
  width: 97%; /* Allow scaling based on available space */
}


.contact-column{
	padding: 0 0 20px 0;
}

#emailContainer, #phoneContainer {
            display: none;
            margin-top: 10px;
}

.row-5{
	padding: 5% 0;
}

.btn-margin{
	margin-bottom: 30px;
}