/*   Top img   */
 .top-img-container {
     width: 100%;
     height: 400px;
     position: relative;
 }

 .top-img-container img {
     height: 400px;
     width: 100%;
 }

 .img-content-post {
     position: absolute;
     color: white;
     top: 12vh;
     width: 800px;
     margin-left: 19vw;
     text-align: center;
 }

 .img-content-post h1 {
     font-weight: 600;
     font-size: 40px;
 }

 .playBtn {
     max-width: 100px;
     height: auto !important;
     cursor: pointer;
 }

 .playBtn:hover {
     transform: scale(0.9);
 }

 /*   Sections   */
 .edi-section .container {
     padding-top: 80px;
     padding-bottom: 80px;
 }

 .edi-section .row {
     display: flex;
 }

 .edi-section .col-sm-5 h1 {
     font-weight: 500;
     color: black;
 }

 .edi-section .col-sm-5 p {
     font-size: 17px;
     color: #676a6c;
 }

 .edi-section img {
     width: 450px;
 }

 .edi-video-section h1 {
     font-weight: 500;
     color: black;

 }

 .edi-video-section p {
     font-weight: 600;
     color: #575757;
     text-align: center;
 }

 .edi-video-section .col-lg-4 {
     text-align: center;
 }

 /*   FAQ   */
 .FAQ-heading {
     font-weight: 500;
     color: black;
     margin-top: 5vh;
 }

 .card-body {
     padding: 0px 10px 10px 10px;
 }

 .card {
     background-color: #eeedee;
     padding: 0.01vw;
     margin: 0.5vw;
 }

 /*   RESPONSIVE   */
 @media screen and (max-width: 1100px) {
     .img-content-post {
         width: 700px;
         top: 7vh;
         margin-left: 15vw;
     }

     .edi-section img {
         width: 350px;
     }

     .edi-video-section .col-lg-4 {
         margin-top: 5vh;
     }
 }

 @media screen and (max-width: 850px) {
     .img-content-post h1 {
         font-size: 25px;
     }

     .img-content-post {
         width: 700px;
         top: 15vh;
         margin-left: 4vw;
     }

     .edi-section img {
         width: 280px;
     }

     .edi-section .col-sm-5 {
         width: 100%;
     }

     .btn-link,
     .faq-item h3 .btn {
         font-size: 14px;
     }
 }

 @media screen and (max-width: 450px) {
     .top-img-container {
         height: 200px;
     }

     .top-img-container img {
         height: 200px;
     }

     .img-content-post h1 {
         font-size: 18px;
     }

     .img-content-post {
         width: 300px;
         top: 8vh;
         left: 6vh;
     }

     .edi-section .row {
         display: block;
     }

     .edi-section img {
         width: 200px;
     }

     .playBtn {
         max-width: 50px;
     }

     .computer-img {
         margin-top: 2vh;
     }

     .btn-link, .faq-item h3 .btn {
         font-size: 12px;
     }
 }

 @media screen and (max-width: 400px) {
     .img-content-post {
         width: 300px;
         top: 8vh;
         left: 3vh;
     }
 }