/* Style sheet containing CSS for the Tringks and Rings webpage */

/* Font Style  */

/* Directly from Google Fonts */
.archivo-narrow-bold {
  font-family: "Archivo Narrow", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.david-libre-regular {
  font-family: "David Libre", serif;
  font-weight: 400;
  font-style: normal;
}

.david-libre-medium {
  font-family: "David Libre", serif;
  font-weight: 500;
  font-style: normal;
}

.david-libre-bold {
  font-family: "David Libre", serif;
  font-weight: 700;
  font-style: normal;
}



/* Styles */

/* CSS Variables */
*{
  /* to clear any default browser styles */
  
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root{
  --primary-font: "Archivo Narrow", sans-serif;
  --secondary-font: "David Libre", serif;
  --primary-color: lightcyan;
  --secondary-color: #591680;
  --highlight-color-light: #a795fb;
  --highlight-color: #8067d6; 
  --alt-color: #b1b4fc; 
  --primary-footer-color: #000000;
  --subheading-color: #161c80;
  
}

.section {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

h1, h2, h3, h4 {
  font-family: var(--secondary-font);
  color: var(--secondary-color);
  text-transform: uppercase;
}

h2 {
  font-size: 300%;
  line-height: 120%;
  font-weight: 900;
}

p {
  font-family: var(--primary-font);
  font-weight: 400;
  text-transform: capitalize;
}

/* Navigation bar */
#navbar {
  background-color: var(--highlight-color-light);
  font-family: var(--primary-font);
  font-weight: 700;
  color: black;
  font-size: 110%;
}

/* News bar */
.news-bar {
  display: flex;
   background-color: var(--highlight-color);
 font-family: var(--primary-font);
 font-style: oblique;
 text-indent: 4em;
}


/* Header */

#site-hero-image {
  height: auto;
  width: 100%;
}



/* Main */
main{
    background-color: #fafafa;

}

#product-cards{
  margin-bottom: 5px;
}



#site-logo{
  
  width: 50px;
  display: inline-block;
}



#logo{
     
    display: inline-block;
    flex-basis: 100px;
    
    padding-top: 10px;
    flex-grow: 1;
   
    height: fit-content;

    color: var(--secondary-color);
    text-size-adjust: 110%;
    font-weight: 700;
    font-weight: bold;
}


/* Product Section */

.product-list {
  border: 5px solid var(--highlight-color-light);
  font-family: var(--primary-font);
  border-radius: 3%;
}

.product-price {
  text-transform: uppercase;
  font-weight: 400;
}

.alternative-materials-description {
  color: #5d5c5e;
}

.hidden {
  visibility: collapse;
}

.product-text {
  --bs-list-group-border-width: 0 ; 
}

.product-card {
  margin-bottom: 20px;
}


/* Footer */

footer {
    background-color: lightseagreen;
    
}

footer>section{
  margin-top: 10px;
  margin-bottom: 10px;
}

.footer-title {
  width: fit-content;
  align-self: center;
}
#footer-logo{
  width: 200px;
  
}

.social-links {
  margin-right: 2px;
  color: var(--secondary-color);
}

.social-links > a {
  margin-right: 20px;
  justify-content: space-between;
  color: var(--secondary-color);
  font-size: 3rem;
}




#address, #contact-info-address {
  color: var(--primary-footer-color); 
  width: fit-content;
  text-align: left;
}
#contact #copyright {
  color: var(--primary-footer-color);
}
#contact p {
  color:var(--primary-footer-color);
}


/* --- About us page styles --- */


#about-us-background {
  background-image: url(../images/gallery-pictures/dwayne-joe-man-hands-with-ring-unsplash.jpg);
  background-size: contain;
  min-height: 50vh;
}

#about-us {
  
  min-height: 40vh;
  top: -5%;
}

.about-us-header {
  position: relative;
  top: -5vh;
  background-color:  #F6D5AE; 
}

#about-us-header-text {
  margin-left: 5%;
}


.contact-us-header {

  background-color:  #F6D5AE;
  width: 100%;
  
  
}

#contact-us-header-text {
  margin-left: 5%;
  align-content: center; 
  
}

#about-us-text {
  margin-left: 5%;
  text-indent: 2vw;
}

#contact-us {
  min-height: 40vh 
}

#contact-us-main h3 {
  color: var(--subheading-color);
}

.contact-us-background {
  background-image: url(../images/tringks-and-rings-logo-transparent.png) ;
  background-size: contain;
  
}

.contact-ring { 
  font-size:  200%;
  display: flex;
  justify-content: flex-end;
  margin-right: 5%;
  color: var(--alt-color);
  
}

.contact-us-full-detail {
  display: none;
 
}

.dropdown-custom:hover  #contact-us-header-text  {
  background-color: #F6D5AE;
}

.dropdown-custom:hover .contact-us-full-detail  {
  display: block;
}

#contact-us button {
  position: relative;
  top: -5vh;
  left: 50%;
  
}

/*--- Gallery page Styles --- */

#gallery-wall {
 
display: flex;
flex-wrap: wrap;
align-content: center;


}
#gallery-wall img {
  width: 350px;
  height: fit-content;
  padding: 2%;
  
}

/* Order form styles */


.choose-item {
  display: inline-block;
  align-content:flex-end;
}

.quantity  {
  width: 10px;
  align-content: center;
  justify-content: flex-end;
}


/* Success Page */

.success-image img {
   width: 350px;
  height: fit-content;
  ;
}


  .about-us-information {
  background-image: url(../images/gallery-pictures/morefun_boy-woman-sea-unsplash.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  display: flex ;
  height: 50vh;
  width: auto;
  
  }


/* Media Querries */

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

  .footer-text {
    justify-content: flex-end;

  }

    .footer-title {
   justify-content: center;
  }
  
}

@media screen and (-width: 768px) {

  #about-us-information {
  background-image: url(../images/gallery-pictures/morefun_boy-woman-sea-unsplash.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  

  }


}