/* //Version: 1.94
//Last edited by: Ben Sowter
//Last edit date: 4/11/2022
 */


/* Font Family */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');

body {
   margin: 0;
   padding: 0;
   font-size: 16px;
   padding-top: 70px;
   background-color: white;
   font-family: 'Playfair Display', Garamond, serif;
   font-weight: 500;
   overflow-x: hidden;
 }
 
 /* back to top button */
 #btn-back-to-top {
   position: fixed;
   bottom: 30px;
   right: 30px;
   display: none;
   background-color: rgba(30, 30, 30, 0.6);
   border: 1px solid #000;
 }

 /* Bootstrap overrides */

.btn {
   padding: 5px 30px;
   border-radius: 5px;
   font-size: 1.1rem;
   font-family: 'Roboto', sans-serif;
   font-weight: 400;
}

.sub-text {
   font-family: 'Roboto', sans-serif;
   font-weight: 300;
   font-size: 1.2rem;
   color: #111;

}



.sub-text-price {
   font-family: 'Roboto', sans-serif;
   font-weight: 400;
   font-size: 1.2rem;
   color: #111;
}


.btn-main {
   padding: 10px 30px;
   border-radius: 5px;
   font-size: 1.1rem;
   font-family: 'Roboto', sans-serif;
   font-weight: 400;
   
}

 /* Navbar */

 
.navbar .navbar-nav a {
   font-family: 'Roboto', sans-serif;
   font-weight: 300;
   font-size: 1.2rem;
   color: #111;
   padding-top: 10px;
   
}

.navbar .nav-item.active {
   border-left: #333 1px solid;
}

.navbar .nav-item {
   padding-left: 1rem;
   padding-right: 1rem;
 }

.navbar .navbar-nav li a:hover {
   color: #fff;
   font-weight: 500;
}

.navbar .navbar-brand {
   font-family: 'Playfair Display', Garamond, serif;
   font-weight: 100;
   font-size: 1.6rem;
   
}

#navbar img {
   max-height: 60px;
}


/* Hero */

#hero .feature-text {
   font-weight: 300; 
   text-shadow: 3px 3px #666; 

}

#hero h2 {
   font-weight: 300; 
   text-shadow: 2px 2px #666; 

}


#hero .hero-section {
   background-image: url('../images/woman-in-fields.jpg');
   background-size: cover;
   background-position: right 50% bottom 20%;
   position: relative;
   height: 95vh;
   color: #FFFFFF;
   z-index: 0;

 }

 #hero .overlay-custom {
   background-color: #000;
   opacity: 0.2;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: -1; 
 }

 #hero .container-text {

   padding-top: 30vh;
   z-index: 5;
 }


.hero-section p {
   font-size: 1.4rem;
}


/* Signup Section */

#signup {
   background-color: rgb(237, 237, 253, 0.5);
}

#signup h4 {
   color: #111;
}



/* Dresses */

#dresses {
   background-color: rgb(251, 233, 236);
}

#dresses .card-footer {
   background-color: rgb(5, 83, 60);
   font-family: 'Roboto', sans-serif;
   font-size: 1.3rem;
   font-weight: 400;
   color: #fff;
}


/* Order Form */

#order {
   background-color: rgb(242, 248, 255);
}



/* FAQ's */

#FAQ {
   background-color: rgb(251, 233, 236);
}

/* About Us */

#about {
   background-color: rgb(242, 248, 255);
}


/* Contact Us */

#contact {
   background-color: rgb(251, 233, 236);
}

#contact .card {
   background-color: rgb(251, 233, 236);
}


/* Footer */

#footer .nav-link {
   text-decoration: none;
   color: #111;
}

#footer .external-link {
   font-family: 'Roboto', sans-serif;
   font-weight: 300;
   color: #111;
}

#footer .external-link:hover {
   text-decoration: none;
   color: #fff;
}



#footer .company-text a {
   text-decoration: none;
   
}

#footer .company-text a:hover {
   color: #fff
}

#footer .sub-text {
   font-weight: 300;
   font-size: 1rem;
   color: #111;

}

#footer .footer-contact {
   border-left: 1px solid #333;
   border-right: 1px solid #333;
}

.social i {
   color: #111;
   padding: 0px 10px;
}

.social i:hover {
   color: #fff;

}


 /* Media Queries */

 @media (min-width: 0) and (max-width: 576px) {
   body {
      padding-top: 40px;

    }

   #hero .hero-section {
   background-image: url('../images/woman-in-fields-750x1000.jpg');

   }

   .table img {
      max-width: 15vw;
   }

   #order .btn {
      padding: 5px 10px;
      border-radius: 5px;
      font-size: 0.8rem;
      
   }
   
   #order table .h5 {
      font-size: 0.8rem;
   }

   #signup .btn {
      padding: 5px 20px;
      font-size: 1rem;
   }

   #footer .nav-item {
      font-size: 0.7rem;
   }

   #footer .company-text h3 {
      font-size: 1.2rem;
   }

   #footer .company-text p,
   #footer .company-text span,
   #footer .company-text a {
      font-size: 0.7rem;
      margin-bottom: 0;
   }

   #footer img {
      max-height: 40px;
   }

   #footer .footer-contact {
      border-left: none;
      border-right: none;
   }

   .social i {
      font-size: 1rem;
      padding: 0px 10px;
   }

   .navbar .navbar-brand {
      font-size: 1.3rem;
      
   }
   .navbar .nav-link {
      font-size: 1rem;

   }

   .navbar .nav-item {
      padding-left: 0;
      padding-right: 0;
   }

   .navbar .nav-item.active {
      border-left: none;
   }

   #navbar img {
      max-height: 40px;
      
   }

   .sub-text-price {
      font-size: 0.8rem;

   }
}

@media (min-width: 577px) and (max-width: 768px) {
   body {
      padding-top: 55px;

   }


   .table img {
      max-width: 20vw;
   }

   .navbar .nav-item {
      padding-left: 0;
      padding-right: 0;
   }

   .navbar .nav-item.active {
      border-left: none;
   }

   #navbar img {
      max-height: 50px;
      
   }

   
   #footer .company-text h3 {
      font-size: 1.2rem;
   }
   #footer .company-text p,
   #footer .company-text span,
   #footer .company-text a {
      font-size: 1rem;
      
   }
   

   #footer img {
      max-height: 40px;
   }

   .social i {
      font-size: 1.3rem;
      padding: 0px 5px;
   }

}

@media (min-width: 769px) and (max-width: 993px) {
   body {
      padding-top: 55px;

   }

   .navbar .nav-item {
      padding-left: 0;
      padding-right: 0;
   }

   .table img {
      max-width: 20vw;
   }

   .navbar .nav-item.active {
      border-left: none;
   }

   #navbar img {
      max-height: 60px;
      
   }

   #footer img {
      max-height: 50px;
   }

   .social i {
      font-size: 1.4rem;
      padding: 0px 5px;
   }

}

@media (min-width: 994px) and (max-width: 1200px){
   .social i {
      font-size: 1.56rem;
      padding: 0px 5px;
   }

}