@import url('https://fonts.googleapis.com/css2?family=Neucha&family=Permanent+Marker&family=Ubuntu:wght@300;400&display=swap');

body {
   background-color: #fafafa;
   overflow-x: hidden;
}

.row{
   width: 100%;   
}

/*keep footer at the bottom of the screen where there's not enough content to push it down
https://www.youtube.com/watch?v=US_3XvufMLU&ab_channel=CodingJourney*/

main{
min-height: calc(100vh - 55px - 108px);
}

.heading {
   text-align: center;
   color: #1A1A1A;
   font-family: 'Permanent Marker', sans-serif;
   font-size: 50px;
   text-align: center;
   margin: auto;
   padding: 30px;
   -webkit-filter: drop-shadow(0 0 0.75rem rgb(0, 0, 0, 0.3));
           filter: drop-shadow(0 0 0.75rem rgb(0, 0, 0, 0.3));
}

/*---Nav-Bar---*/
.navbar {
   background-color: #151712;
   font-family: "Ubuntu", sans-serif;
   z-index: 2;
}

hr {
   margin: auto;
   width: 70%;
   padding: 2px;
   border-radius: 55%;
}

/*---HERO-IMG-&-Τext---*/
.hero {
   height: 75vh;

   /* Perfecst Full Page Background Image https://css-tricks.com/perfect-full-page-background-image/ */
   background: url(../images/hero/abel3.jpg) no-repeat center center fixed;
   background-size: cover;
}

.hero-text {
   text-align: center;
   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
       -ms-transform: translate(-50%, -50%);
           transform: translate(-50%, -50%);
   color: #dbdbdb;
   line-height: 1.0;
   z-index: 1;
}

.lead {
   font-family: "Ubuntu", sans-serif;
   letter-spacing: 1px;
   text-align: center;
   font-weight: 400;
}

.hero-h1-text {
   font-family: "Permanent Marker", sans-serif;
   font-size: 50px;
   margin-bottom: 10px;
   text-align: center;
   letter-spacing: 2px;
   -webkit-filter: drop-shadow(0 0 0.75rem rgb(0, 0, 0));
           filter: drop-shadow(0 0 0.75rem rgb(0, 0, 0));
}

@media only screen and (max-width: 320px){
   .hero-h1-text{
   font-size: 38px;
}}

/*--Welcome--*/
.welcome-container {
   margin-top: 35px;
   margin-bottom: 35px;
}

.welcome-container p {
   font-family: "Ubuntu", sans-serif;
   padding: 30px;
   margin-top: 10px;
   margin-bottom: 10px;
   font-size: 20px;
   text-align: justify;
}

.welcome-container div {
   margin: auto;
}

/*-------Renviews-----*/
.reviews {
   margin: 10px;
   padding-bottom: 20px;
   margin: auto;
}

.reviews .img-thumbnail {
   border-radius: 50%;
   width: 200px;
   background-color: #b4b4b4;
   margin: auto;
   border: none;
   -webkit-filter: drop-shadow(0 0 0.75rem rgb(0, 0, 0));
           filter: drop-shadow(0 0 0.75rem rgb(0, 0, 0));
}

.reviews h3 {
   font-family: 'Permanent Marker', sans-serif;
   text-align: center;
}

.reviews p {
   font-family: "Ubuntu", sans-serif;
   text-align: justify;
}

/*--Footer--*/
footer ul {
   list-style-type: none;
   margin: auto;
}


footer {
   background-color: #151712;
   color: #ababaa;
   padding: 3vh;
   bottom: 0px;
   width: 100%;
}

.footer-social a {
   font-size: x-large;
   color: #ababaa;
   margin: auto;
}

footer h5 {
   margin: auto;
}

@media only screen and (max-width: 768px) {
   .contact-footer {
      text-align: center;
   }
}

/*--Contact--*/
.form-container {
   background-color: #ababaa;
   padding: 40px;
   margin-bottom: 50px;
   margin-top: 50px;
}

.form-container h2 {
   font-family: 'Permanent Marker', sans-serif;
   text-align: center;
}

.form-container label {
   font-family: "Ubuntu", sans-serif;
}

.form-row{
   margin: 0px;
}

/*--Contact Page Social Media--*/
.contact-social{
   margin: auto;
}

.contact-social ul li a {
   font-size: xxx-large;
   color: #a8a8a8;
}

.contact-social ul li a:hover {
   color: #151712;
}

.contact-social h2 {
   text-align: center;
   color: #1A1A1A;
   font-family: 'Permanent Marker', sans-serif;
   font-size: 50px;
   text-align: center;
   margin: auto;
   padding: 30px;
   -webkit-filter: drop-shadow(0 0 0.75rem rgb(0, 0, 0, 0.3));
           filter: drop-shadow(0 0 0.75rem rgb(0, 0, 0, 0.3));
}

/*---Lessons----*/
.lessons-cards {
   margin-top: 50px;
   margin-bottom: 50px;
}

.lessons-container {
   padding: 20px;
}

.about-the-lessons p {
   font-family: "Ubuntu", sans-serif;
   text-align: justify;
   margin-bottom: 50px;
}

.card-title {
   font-family: 'Permanent Marker', sans-serif;
}

.card-text {
   font-family: "Ubuntu", sans-serif;
   text-align: justify;
}

.prices {
   text-align: center;
   list-style: none;
   font-family: "Ubuntu", sans-serif;
}

.prices i {
   padding: 4px;
   color: #ababaa;
}

/*-----------about-me----------*/

.aboutme-row {
   margin: auto;
}

.about-me p {
   font-family: "Ubuntu", sans-serif;
   font-size: 20px;
   text-align: justify;
   padding: 20px;
}

.about-me .img-thumbnail {
   background-color: #bababa;
   vertical-align: middle;
}

@media (min-width: 992px){
.about-me .col-lg-6 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 50%;
    margin: auto;
   }}

/*--Code from https://flaviocopes.com/responsive-youtube-videos/--*/
.video-container {
   overflow: hidden;
   position: relative;
   margin-bottom: 15px;
}

.video-container::after {
   padding-top: 56.25%;
   display: block;
   content: '';
}

.video-container iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border: 0px;
}

/*--FAQ--*/
.faq-questions-container h3 {
   font-family: 'Permanent Marker', sans-serif;
   color: #1A1A1A;
}

.faq-questions-container p {
   font-family: "Ubuntu", sans-serif;
   text-align: justify;
}

.faq-questions-container {
   padding: 25px;
   margin: auto;
}

.faq i {
   padding: 5px;
   font-size: 25px;
   color: #ababaa
}
.contact-btn{
   margin: auto;
   font-family: "Permanent Marker";
}

.faq-contact{
   margin-bottom: 40px;
}