/* animation */
@keyframes neonBlackShadowHeaders {
    0%, 100% {
        color: rgb(43, 43, 255);
        text-shadow: 0 0 3px black;
    }
    50% {
        color: white;
        text-shadow: 0 0 10px black, 0 0 20px black;
    }
}

/* animation */
@keyframes neonBlackShadowHeaders2 {
    0%, 100% {
        color: black;
    }
    50% {
        color: white;
        text-shadow: 0 0 10px black, 0 0 20px black;
    }
}

@keyframes blacktoWhiteFade {
    0%, 100% {
        background: rgb(43, 43, 255);
        width: 0px;
        border: 0.5px solid black;
    }
    50% {
        background: white;
        width: 170px;
        border: 0.5px solid black;
    }
}

@keyframes blacktoWhiteFade2 {
    0%, 100% {
        background: rgb(43, 43, 255);
        width: 0px;
    }
    50% {
        background: rgb(43, 43, 255);
        width: 240px;
    }
}

@keyframes blacktoWhiteFade3 {
    0%, 100% {
        background: black;
        width: 0px;
        border: 0.5px solid black;
    }
    50% {
        background: white;
        width: 170px;
        border: 0.5px solid black;
    }
}

@keyframes fadeIn {
    0% {
      opacity: 0; /* Start with full transparency */
    }
    100% {
      opacity: 1; /* Fade in to full visibility */
    }
}

@keyframes neonBlackShadow2 {
    0%, 100% {
        text-shadow: 0 0 8px black;
    }
    50% {
        text-shadow: 0 0 10px black, 0 0 20px black;
    }
}

@keyframes neonBlackShadow3 {
    0%, 100% {
        text-shadow: 0 0 10px black;
    }
    50% {
        text-shadow: 0 0 10px black, 0 0 20px black;
    }
}
/* animation */

#welcome h2 {
    color: #ffffff;
    text-align: center;
    font-size: 36px;
    animation: 4s neonBlackShadow2 ease-in-out infinite;
}

#welcome h5 {
    color: white;
    text-shadow: 0 0 10px black, 0 0 20px black;
}

#welcome p {
    color: #ffe233;
    font-weight: bold;
    font-style: italic;
    animation: 4s neonBlackShadow3 ease-in-out infinite;
}

#portfolio h1,
#team2 h1,
#faq2 h1,
#faq4 h1,
#team h1,
#price2 h1,
#price4 h1,
#price6 h1 {
    text-align: center;
    padding-bottom: 10px;
    font-size: 36px;
    padding-top: 10px;
    animation: 4s neonBlackShadowHeaders ease-in-out infinite;
    font-weight: 100;
}

#portfolio h1::after,
#team2 h1::after,
#faq2 h1::after,
#faq4 h1::after,
#team h1::after,
#price2 h1::after,
#price4 h1::after,
#price6 h1::after {
	content: '';
	background: rgb(43, 43, 255);
	display: block;
	height: 3px;
	margin: 15px auto 5px;
    margin-bottom: 20px;
    animation: blacktoWhiteFade 4s ease-in-out infinite;
    border-radius: 20px;
}

#contact h1,
#services h1,
#faq h1,
#faq3 h1,
#faq5 h1,
#price h1,
#price3 h1,
#price5 h1 {
    text-align: center;
    padding-bottom: 10px;
    font-size: 36px;
    padding-top: 10px;
    animation: 4s neonBlackShadowHeaders2 ease-in-out infinite;
    font-weight: 100;
}

#contact h1::after,
#services h1::after,
#faq h1::after,
#faq3 h1::after,
#faq5 h1::after,
#price h1::after,
#price3 h1::after,
#price5 h1::after {
	content: '';
	background: rgb(43, 43, 255);
	display: block;
	height: 3px;
	margin: 15px auto 5px;
    margin-bottom: 20px;
    animation: blacktoWhiteFade3 4s ease-in-out infinite;
    border-radius: 20px;
}

@media screen and (min-width: 320px) {

    #welcome h2 {
        margin-top: 25px;
    }

    #welcome h5 {
        font-size: 14px;
    }
    
    #welcome img {
        margin-top: 20px;
    }

}

@media screen and (min-width: 440px) {

    #welcome h2 {
        margin-top: 65px;
    }

    #welcome h5 {
        margin-top: 20px;
        font-size: 18px;
    }

    #welcome p {
        font-size: 20px;
        margin-top: 15px;
    }

}

@media screen and (min-width: 620px) {

    #welcome h2 {
        margin-top: 65px;
    }

    #welcome h5 {
        margin-top: 20px;
        font-size: 18px;
    }

    #welcome p {
        font-size: 20px;
        margin-top: 15px;
    }

}

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

    #welcome h2 {
        margin-top: 15px;
        font-size: 26px;
    }

    #welcome h5 {
        margin-top: 10px;
        font-size: 18px;
    }

    #welcome p {
        font-size: 16px;
        margin-top: 15px;
    }

    .buy-btn1 {
        margin-top: 10px;
        font-size: 12px;
    }

    #welcome img {
        margin-top: 0px;
    }

}

@media screen and (min-width: 960px) {

    #welcome h2 {
        margin-top: 25px;
        font-size: 30px;
    }

    #welcome h5 {
        margin-top: 20px;
        font-size: 13px;
    }

    #welcome p {
        font-size: 16px;
        margin-top: 15px;
    }

}

@media screen and (min-width: 990px) {

    .buy-btn1 {
        font-size: 16px;
        margin-top: 10px;
    }

    #welcome h2 {
        margin-top: 20px;
    }

    #welcome h5 {
        margin-top: 20px;
        font-size: 16px;
    }

    #welcome p {
        font-size: 18px;
        margin-top: 15px;
    }

}

@media screen and (min-width: 991px) {

    .buy-btn1 {
        margin-top: 30px;
    }

    #welcome h2 {
        margin-top: 65px;
    }

    #welcome h5 {
        margin-top: 20px;
        font-size: 18px;
    }

    #welcome p {
        font-size: 20px;
        margin-top: 15px;
    }

}

@media screen and (min-width: 1000px) {

    .buy-btn1 {
        margin-top: 30px;
    }

    #welcome h2 {
        margin-top: 65px;
    }

    #welcome h5 {
        margin-top: 20px;
        font-size: 18px;
    }

    #welcome p {
        font-size: 20px;
        margin-top: 15px;
    }

}

@media screen and (min-width: 1100px) {

    #welcome h2 {
        margin-top: 40px;
    }

    #welcome h5 {
        margin-top: 20px;
        font-size: 20px;
    }

    #welcome p {
        font-size: 20px;
        margin-top: 15px;
    }

}

@media screen and (min-width: 1200px) {

    #welcome h2 {
        margin-top: 65px;
    }

    #welcome h5 {
        margin-top: 60px;
        font-size: 24px;
    }

    #welcome p {
        font-size: 20px;
        margin-top: 15px;
    }

}

@media screen and (min-width: 1300px) {

    #welcome h2 {
        margin-top: 65px;
    }

    #welcome h5 {
        margin-top: 60px;
        font-size: 24px;
    }

    #welcome p {
        font-size: 20px;
        margin-top: 15px;
    }

}

@media screen and (min-width: 1400px) {

    #welcome h2 {
        margin-top: 115px;
    }

    #welcome h5 {
        margin-top: 60px;
        font-size: 24px;
    }

    #welcome p {
        font-size: 20px;
        margin-top: 15px;
    }

}