.container{width: 95%; max-width: 1200px; margin: 50px auto; padding: 20px;}
.title{font-size: 5em; font-family: titleImpact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; color:#003049; margin-bottom: 0; text-align: center;}
.welcome{font-size: 2.5em; font-family:'Times New Roman', Times, serif; text-align: center;}
h1{color:#8e44ad;text-align: center; }
.image-container{max-width: 100%; margin-bottom: 50px;}
.image-container img {width: 100%; height: auto;}
.des{font-size: 22px; text-align: center; margin: 15px 0; line-height: 1.5em;}
.image-container img{ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
p{font-size: 20px; line-height: 1.8em;}

  body{scroll-behavior: smooth;}
/* YouTube Video CSS */
.wrapper {max-width: 1000px;width: 100%; margin: 60px auto;padding: 0 20px;}
.youtube {background-color: #000;margin-bottom: 30px; position: relative;padding-top: 56.25%;overflow: hidden;cursor: pointer;}
.youtube img {width: 100%;top: -16.82%;left: 0;opacity: 0.9;}
.youtube .play-button {width: 90px;height: 60px;background-color: #333; box-shadow: 0 0 30px rgba( 0,0,0,0.6 ); z-index: 1;opacity: 0.8;border-radius: 6px;}
.youtube .play-button:before {content: "";border-style: solid;border-width: 15px 0 15px 26.0px;border-color: transparent transparent transparent #fff;}
.youtube img,.youtube .play-button {cursor: pointer;background-color: red;}
.youtube img,.youtube iframe,.youtube .play-button,.youtube .play-button:before {position: absolute}
.youtube .play-button,.youtube .play-button:before {top: 50%;left: 50%;transform: translate3d( -50%, -50%, 0 );}
.youtube iframe {height: 100%;width: 100%;top: 0;left: 0;}

.screnshotImg {width: calc(25% - 10px); margin-bottom: 20px}
.link-container{text-align: center; padding: 30px 0 0}
.link-container .btn{padding: 8px 30px; text-decoration: none; font-size: 1.3em; margin: 15px; border: 1px solid #8338ec; border-radius: 5px}


@media only screen and (min-width: 800px){
    .container{width: 98%; margin: 100px auto; padding: 0px;}
    .screnshotImg {width: calc(33.33% - 10px); margin-bottom: 20px}
}


@media screen and (max-width: 600px){
    .title{font-size: 2.5em; font-family: titleImpact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;}  
    .welcome{font-size: 1.5em;}
    .des{font-size: 18px;}
    .image-container{max-width: 100%; margin-bottom: 20px;}
    p{font-size: 18px;}
    .screnshotImg {width: calc(50% - 10px); margin-bottom: 10px}
.link-container .btn{line-height: 3em}
}