/* Main */
main {
   width: 100%;
   height: 600px;
   background-image: url('../image/navbar-bg.jpg');
   background-size: cover;
   position: relative;
   color: #ffffff !important;
}

/* Navbar */
.fortuneteller-header-logo {
   color: #ffffff !important;
}

.nav-scroller {
   width: 100%;
   background: rgba(10, 10, 10, 0.3);
   overflow-y: hidden;
}

.nav-scroller .nav {
   flex-wrap: nowrap !important;
   overflow-x: hidden !important;
   white-space: nowrap !important;
}

.nav-scroller .nav-link {
   opacity: 0.8;
}

/* Navbar Section-1 */
.nav-btn,
.section-1-content-btn {
   font-size: 14px;
   border-radius: 15px;
   font-weight: bold;
}

/* Section-1 */
.section-1-content {
   white-space: nowrap;
}

.section-1-content-btn {
   background-color: rgb(36, 102, 138);
   border-color: rgba(255, 255, 255, 0.5);
}

/* Section-1-Cards */
.section-1-cards {
   bottom: 40px;
}

.section-1-cards .col {
   padding-left: 1px !important;
   padding-right: 1px !important;
}

.section-1-cards .card {
   height: 190px !important;
   overflow-y: auto !important;
   box-shadow: 1px 3px 5px rgb(168, 167, 167);
}

.section-1-cards .card .card-title-block {
   margin-top: 15px;
   margin-bottom: 20px;
}

.section-1-cards .card .card-title {
   color: #000000 !important;
   font-weight: bold !important;
   line-height: 0.8 !important;
}

.section-1-cards .card .card-text {
   padding-left: 5px !important;
   padding-right: 5px !important;
   color: gray !important;
   opacity: 0.7 !important;
   line-height: 1.6 !important;
}

/* Body Section */
.body-section .fortuneteller-card .fortuneteller-card-btn {
   min-width: 175px;
   background-color: #0fa50f;
   color: #ffffff;
   font-weight: bold;
   white-space: nowrap;
   overflow: hidden;
}


/* Section-3 */
.section-3 .social-media-btn {
   display: inline-block !important;
   width: 34px !important;
   height: 34px !important;
}

.section-3 .social-media-btn:hover,
.section-3 .contact-info-btn:hover {
   opacity: 0.4 !important;
}

.section-3 .contact-info {
   font-weight: 600 !important;
}

.section-3 .contact-info-btn {
   display: inline-block !important;
   width: 34px !important;
   height: 34px !important;
}

/* Footer */
footer {
   background-color: rgb(33, 37, 47);
}

.footer-subtitle {
   color: #ffffff;
   margin-bottom: 20px;
}

.footer-subtext,
.footer-sublink {
   color: rgb(118, 127, 134);
   text-decoration: none;
   font-weight: bold;
}

.footer-sublink {
   line-height: 2;
}

.footer-sublink:hover {
   color: rgb(118, 127, 134);
   opacity: 0.5;
}

.footer-email-input {
   padding-left: 20px !important;
   color: rgb(118, 127, 134) !important;
}

.footer-email-input:focus {
   background-color: #2f353a !important;
}

.footer-email-input,
.footer-email-button {
   background-color: #2f353a;
   border: none;
}

/* General CSS*/

.ps-20px {
   padding-left: 20px !important;
}

.pe-20px {
   padding-right: 20px !important;
}

.pt-20px {
   padding-top: 20px !important;
}

.pb-20px {
   padding-bottom: 20px !important;
}

.ps-50px {
   padding-left: 50px !important;
}

.pe-50px {
   padding-right: 50px !important;
}

.ps-100px {
   padding-left: 100px !important;
}

.pe-100px {
   padding-right: 100px !important;
}

.ms-10px {
   margin-left: 5px !important;
}

.me-10px {
   margin-right: 5px !important;
}

.mt-100px {
   margin-top: 100px !important;
}

.mb-100px {
   margin-bottom: 100px !important;
}

.border-radius-10px {
   border-radius: 10px;
}

.border-radius-20px {
   border-radius: 20px;
}

/* Responsive */

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

   /* Section-1 */
   .section-1-cards .card {
      height: auto !important;
      overflow-y: auto !important;
   }

   .section-1-content h2 {
      font-size: 45px;
   }

   .section-1-content h1 {
      font-size: 50px;
   }

   /* Section-1-Cards */
   .section-1-cards {
      bottom: 0 !important;
      margin-top: 20px !important;
      margin-bottom: 20px !important;
   }

   .section-1-cards .row .col {
      width: 100% !important;
   }
}

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

   /* Section-1 */
   .section-1-cards .card {
      height: auto !important;
      overflow-y: auto !important;
   }

   /* Section-1-Cards */
   .section-1-cards {
      bottom: 0 !important;
      margin-top: 20px !important;
      margin-bottom: 20px !important;
   }

   .section-1-cards .row .col {
      width: 100% !important;
   }

   /* Section-3 */
   .section-3 .contact-info {
      text-align: center !important;
   }

   .section-3 .contact-info,
   .section-3 .social-media {
      width: 100% !important;
   }

   .section-3 .contact-info .input-group {
      justify-content: center !important;
   }

   /* General CSS*/
   .ps-lg-10px {
      padding-left: 10px !important;
   }

   .pe-lg-10px {
      padding-right: 10px !important;
   }
}