/*--- BASICS ---*/
* {
    box-sizing: border-box;
    color: #4F4F4F;
    font-family: 'Poppins', sans-serif;

}

body {
    background-color: white;
    overflow-x: hidden;
}

main {
    min-height: 90vh;
    /*scrollbar even with little content*/
}

/* --- HEADING & TEXT STYLES --- */
h1,
h2,
h3,
h4,
h5 {
    font-family: 'Lusitana', serif;
    line-height: 1.1;
    color: #4F4F4F;
    text-transform: none;
}

h1 {
    font-weight: 800;
    font-size: calc(100% + 4vw + 4vh);
}

h2 {
    font-weight: 900;
    font-size: calc(100% + 2.2vw + 2.2vh);
    padding-bottom: 1rem;
}

h3 {
    font-weight: 700;
    font-size: calc(100% + 1vw + 1vh);
    padding-bottom: 1rem;
    padding-top: 2rem;
}

h4 {
    font-family: 'Poppins', sans-serif;
    font-size: calc(100% + 0.1vw + 0.1vh);
}

h5 {
    font-size: calc(100% + 0.15vw + 0.15vh);
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    color: #4F4F4F;
}

p {
    font-size: calc(100% + 0.1vw + 0.1vh);
}

span {
    font-family: inherit;
}

.bold {
    font-weight: 600;
}

/* --- COLORS --- */
.bg-light {
    background-color: #F8F8F8 !important;
}

.color1 {
    background: #00DBB9;
}

.inlineColor1 {
    color: #00DBB9;
}

.details {
    color: #BDBDBD;
}

.white {
    color: #ffffff;
}

.black {
    color: black;
}

.grey1 {
    color: #4F4F4F;
}

/* IMAGES */
.projectImg {
    max-width: 100%;
}


/* TEXT OUTLINE STROKE*/

.starterText {
    position: relative;
    color: #4F4F4F;
    /* Fallback for older browsers */
    color: rgba(0, 0, 0, 0);
    min-height: 32vh;
}


.outline {
    -webkit-text-stroke: 2.5px #333333;
    color: rgba(0, 0, 0, 0);
    fill: none;
}

.inlineWhite {
    color: white;
}

/* --- COLUMS & ROWS Definitions--- */

/* delete
.starterDiv {
    min-height: 36vh;
} */

.secA {
    padding: 0vw 10vw 0vw 10vw;
    animation-delay: 5s;
}

.row {
    padding: 2rem;
}

.addPadding {
    padding: 4vw 15vw 4vw 15vw;
}





/* --- Navbar Adjustments--- */

.navbar-light .navbar-nav .nav-link {
    color: rgba(0, 0, 0, .3);
    font-size: calc(100% + 0.1vw + 0.1vh);
}

.nav-link.active {
    font-weight: 600;
}

.navbar {
    box-shadow: 0 4px 12px 0 rgb(0 0 0 / 7%), 0 2px 4px rgb(0 0 0 / 5%);
    padding-top: .5625rem;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}

/* Footer */
footer {
    text-align: end;
    padding-right: 1.5rem !important;
}

#footerText {
    margin: 2vh 2vh 0.2vh 2vh;
    font-size: 0.8rem;
}





/* --- ANIMATIONS --- */

/* HOVER ZOOM */


.hover-zoom img,
.hover-zoom video {
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

.hover-zoom:hover img,
.hover-zoom:hover video {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.bg-image {
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%
}




/* --- LAZY-LOAD EFFECT --- */

.lazy-load {
    opacity: 0;
    top: 50px;

    transition: all 1s ease-out;
    transition-property: opacity, top;
}

.lazy-load-triggered {
    opacity: 1;
    top: 0;
}


/* --- FADE IN LEFT --- */

@-webkit-keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translatex(-10px);
        -moz-transform: translatex(-10px);
        -o-transform: translatex(-10px);
        transform: translatex(-10px);
    }

    to {
        opacity: 1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
}

@-moz-keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translatex(-10px);
        -moz-transform: translatex(-10px);
        -o-transform: translatex(-10px);
        transform: translatex(-10px);
    }

    to {
        opacity: 1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translatex(-100px);
        -moz-transform: translatex(-100px);
        -o-transform: translatex(-100px);
        transform: translatex(-100px);
    }

    to {
        opacity: 1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
}

.in-left {
    -webkit-animation-name: fadeInLeft;
    -moz-animation-name: fadeInLeft;
    -o-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    -o-animation-duration: 0.5s;
    animation-delay: 0.5s;
}



/* --- FADE IN RIGHT --- */
@-webkit-keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translatex(10px);
        -moz-transform: translatex(10px);
        -o-transform: translatex(10px);
        transform: translatex(10px);
    }

    to {
        opacity: 1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
}

@-moz-keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translatex(10px);
        -moz-transform: translatex(10px);
        -o-transform: translatex(10px);
        transform: translatex(10px);
    }

    to {
        opacity: 1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translatex(100px);
        -moz-transform: translatex(100px);
        -o-transform: translatex(100px);
        transform: translatex(100px);
    }

    to {
        opacity: 1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
}

.in-right {
    -webkit-animation-name: fadeInRight;
    -moz-animation-name: fadeInRight;
    -o-animation-name: fadeInRight;
    animation-name: fadeInRight;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    -o-animation-duration: 0.5s;
    animation-delay: 0.5s;
}



/* DELAYED FADE IN*/

.delay {
    -webkit-animation: 5s ease 0s normal forwards 1 fadein;
    animation: 5s ease 0s normal forwards 1 fadein;
}

/* short delayed fade in >> .shortDelay */

.shortDelay {
    -webkit-animation: 2s ease 0s normal forwards 1 fadein;
    animation: 2s ease 0s normal forwards 1 fadein;
}


@keyframes fadein {
    0% {
        opacity: 0;
    }

    66% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadein {
    0% {
        opacity: 0;
    }

    66% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


/* --- LINK SYTLES --- */
/* unvisited link */
a:link {
    color: #00DBB9;
    text-decoration: none;
    /* not underlined */
    font-weight: 600;
}

/* visited link, mouse over link & clicked link */
a:visited,
a:hover,
a:active {
    color: #00DBB9;
    text-decoration: none;
}

/*--- BUTTON STYLES ---*/

.btn-group-lg > .btn,
.btn-lg {
    padding: .75rem 1.6875rem .6875rem;
    font-size: .875rem;
    line-height: 1.6;
}

.btn {
    border: 0;
    -webkit-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%), 0 2px 10px 0 rgb(0 0 0 / 10%);
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%), 0 2px 10px 0 rgb(0 0 0 / 10%);
    -webkit-appearance: none;

}

/* about btn on index page */
#aboutBtn {
    color: white;

}

#aboutBtn:hover {
    color: #4F4F4F;
    background-color: #F8F8F8;
}

/* little arrow icon */
#aboutBtn > i {
    color: inherit;
}

/* email btn on contact page */
#emailBtn {
    color: white;
    text-transform: lowercase;
}

#emailBtn:hover {
    background-color: #00DBB9;
    color: #4F4F4F;
}

#emailBtn > i {
    color: inherit;
}

/* social btns on contact page */

.socialIconBtn > i {
    font-size: calc(100% + 0.2vw + 0.2vh);
    color: white;
    padding: 0.2rem 0.3rem 0.2rem 0.3rem;
}

.socialIconBtn {
    background-color: #000;
}

#linkedIn:hover {
    background-color: #0082ca;
}

#xing:hover {
    background-color: #026466;
}

#behance:hover {
    background-color: #053eff;
}


/* Back to top btn*/

.back-to-top {
    position: fixed;
    bottom: 5vh;
    right: 3vh;
    display: none;
    padding: 0.8rem 1rem 0.8rem 1rem;
    font-size: 1.3rem;
    line-height: 0;
}




/* OTHERS */

/* higher index */
.zIndex3 {
    z-index: 3;
}


@media only screen and (max-width: 768px) {

    /*  navbar padding on small screens  */
    .navbar {
        padding-left: 0rem;
    }

    p, h1, h2 {
        overflow-wrap: break-word;
    }

}


/*CONTACT CSS*/
.envelope {
    margin-bottom: 15%;
    font-size: calc(100% + 1vw + 1vh);
    color: white;
}

.starterDivlessPad {
    padding-top: 5vh;
}

.ContactFormDivLeft {
    background: #00DBB9;
    padding: 1.3vw;
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}


.contact-info img {}

.ContactFormDiv {
    background: #fff;
    padding: 3%;
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

.contact-form label {
    font-weight: 600;
    margin-top: 1.2vh;
}

.contact-form button {
    background: #00DBB9;
    color: #fff;
    font-weight: 600;
    width: 25%;
    margin-top: 2vh;
}

.contact-form button:focus {
    box-shadow: none;
}