/*======================*/
/*=== GENERAL STYLES ===*/
/*======================*/

html{
  /*border-top: 24px solid #000000;*/
  /*background-color: #FEFBE8;*/
  /*font-family: 'Alegreya Sans', sans-serif;*/
  font-family: "degular", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(1.5em, .4167vw + .8875em, 1.125em);
  line-height: 1.4em; 
  scroll-behavior: smooth;
}
body {
  margin: 0;
  padding: 0;
  color: #1A1A1A;
}

h1 {
  font-size: 45px; 
  /*letter-spacing: -1.8px;*/
  /*text-transform: uppercase;*/
  font-weight: 500;
  font-style: normal;
}

h2 { 
  margin-top: 59px;
  margin-bottom: 0px;
  padding-bottom: 0px;
  font-size: 37.4649px; 
  /*letter-spacing: -1.8px;*/
  font-weight: 400;
}

h3 { 
  font-size: 31.1915px; 
  /*letter-spacing: -1.8px;*/
  font-weight: 400;
}

h4 { 
  font-size: 25.9686px; 
  /*letter-spacing: -1px;*/
  font-weight: 500;
}

h5 { 
  font-size: 21.6202px; 
  /*letter-spacing: -1px;*/
}

small { 
  font-size: 16.986px; 
}

h1, h2, h3, h4, h5 {
  /*font-family: 'Rubik', sans-serif;*/
  font-family: "degular", sans-serif;
  /*color: #531DAB;*/
  text-align: left;
}

a{
  /*color: #0050b3;*/
  color: #531DAB;
  text-decoration: none;
}

a:hover{
  text-decoration: underline;
}

.button{
  padding: 8px 64px; /* Adjust padding as needed */
  margin-top: 32px; /* Space below button */
  /*background-color: #096DD9; /* Button color */
  background-color: #531DAB; /* Button color */
  border-radius: 4px;
  font-size: 24px;
  font-weight: 500;
  color: #fff; /* Text color */
  text-decoration: none; /* Removes underline from links */
  text-align: center;
}

.small{
  padding: 8px 24px;
  margin-top: 40px;
  margin-right: 24px;
  font-size: 16px;
  font-weight: 400;
  border-radius: 20px;
}

.back-to-top {
  position: fixed; /* Fixed position to make it float */
  bottom: 20px; /* Distance from bottom */
  right: 20px; /* Distance from right */
  background-color: #3498db; /* Button color */
  color: white; /* Arrow color */
  width: 50px; /* Width and height to make it round */
  height: 50px;
  border-radius: 50%; /* Makes it circular */
  text-align: center; /* Aligns the arrow in the center horizontally */
  line-height: 50px; /* Centers the arrow vertically */
  font-size: 24px; /* Size of the arrow */
  text-decoration: none; /* Removes the underline from the link */
  opacity: 0; /* Button is initially invisible */
  transition: opacity 0.3s; /* Smooth transition for the button appearance */
  z-index: 1000; /* Ensure it's above other content */
}

/* Show the button when it's scrolled 100px down from the top */
.back-to-top.show {
  opacity: 1;
}

/* You can also add a hover effect */
.back-to-top:hover {
  background-color: #2980b9; /* Button color on hover */
}

/*======================*/
/*=== SITE HEADER ======*/
/*======================*/

header {
  margin-top: 54px;
  padding: 20px; /* Adjust the padding as needed */
}

.header-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.logo {
  display: block;
  max-height: 50px; /* Adjust the size as needed */
  margin-bottom: 20px; /* Space between logo and navigation on small screens */
}

/*================================*/
/* === SITE PRIMARY NAVIGATION ===*/
/*================================*/

.navigation {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 64px; /* Space between logo and navigation */
}

.navigation li {
  padding: 12px 20px; /* Adjust the padding as needed */
}

.navigation li a {
  padding: 4px 8px;
  text-decoration: none;
  /*color: #1A1A1A; Adjust the color as needed */
  color: #531DAB;
  font-size: 24px;
}

.navigation li .active,
.navigation li a:hover{
  padding: 4px 8px;
  /*background-color: #096DD9;*/
  background-color: #531DAB;
  color: #FFFFFF;
  border-radius: 2px;
}

/*================================*/
/* === SITE FOOTER ===============*/
/*================================*/

footer {
  margin-top: 54px;
  padding: 20px 0; /* Top and bottom padding for the footer */
  /*background-color: #FEF7E8; Your desired footer background color */
  background-color: #531DAB;
  color: #ffffff;
}

footer p, 
footer ul, 
footer a{
  font-size: 18px;
}
footer a{
  color: #ffffff;
}

.footer-content-container {
  max-width: 1194px;
  margin: 0 auto;
  padding: 0 20px; /* Match with the .page-container to keep content aligned */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* Other styles for footer content */
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  
}

.footer-column {
  flex: 1;
  min-width: 200px; /* Minimum width of columns to prevent them from getting too narrow */
  margin: 10px;
}

.footer-column h4 {
  margin-top: 0;
}

.footer-column ul {
  list-style-type: none;
  padding: 0;
}

.footer-column ul li {
  margin-bottom: 10px;
}

.footer-column ul li a img {
  width: 24px; /* Adjust social media icon size as needed */
  vertical-align: middle;
  margin-right: 10px;
}

/*================================*/
/* === HOME ======================*/
/*================================*/

.page-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px; /* Or any other padding you prefer */
  /* Other styles */
}

.intro {
  display: flex;
  flex-wrap: wrap;
  margin: 20px 20px 64px 64px; /* Adjust margin as needed */
  justify-content: space-between; /* This ensures space between the two columns */
  border-left: 1px solid #722ED1;

}

.content, .image {
  flex: 1; /* This makes both columns take up half the width of the container */
  /*margin: 10px; /* Adjust margin as needed for spacing */
}

.content{
  flex: 1; /* Takes up 1 part of the available space */
  margin: 12px 12px 12px 54px;
  padding-right: 64px;
}

.content p{
  /* margin-bottom: 20px; Space below paragraph */
  margin: 44px 0 20px 0px; /* Space around paragraph */
  font-size: 28px;
  font-weight: 400;
}

.intro-shop-button {
  display: inline-block;
}

.learn-more-link {
  /* display: block; Makes link take the full width available */
  margin-left: 32px; /* new, adjust styles in media queries*/
  margin-top: 32px; /* Space above link */
  font-size: 18px;
  /*color: #000;  Text color */
}

.image{
  flex: 1.8; /* Takes up 1.5 parts of the available space, making it larger */
}
.image img {
  width: 100%; /* Makes the image responsive */
  height: auto; /* Keeps the aspect ratio */
}

.recent-work {
  text-align: center;
  margin: 20px 20px 20px 139px;  /* Adjust margin as needed */
}

.recent-work h2 {
  margin: 32px 0px 32px 0px; /* Space above and below the section title */
}

.recent-work p{
  text-align: left;
  margin: 20px 0 80px 0;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Creates two columns */
  grid-gap: 54px; /* Space between columns and rows */
  margin-bottom: 54px; /* Space at the bottom of the gallery */
}

figure {
  margin: 0; /* Removes default margin from the figure element */
}

figure img {
  width: 100%; /* Makes the image responsive */
  height: auto; /* Maintains aspect ratio */
  display: block; /* Prevents default inline behavior */
  border: 1px solid #EEE8F7;
}

figcaption {
  margin-top: 12px; /* Space above caption */
  font-size: 24px;
  text-align: left;
}

/*================================*/
/* === ABOUT =====================*/
/*================================*/

.about {
  max-width: 1200px;
  /*padding: 20px;*/
}

.about-intro-wrapper {
  margin: 20px 20px 20px 84px; /* Adjust margin as needed */
  border-left: 1px solid #722ED1;
}

.about-intro {
  margin-left: 54px;
  margin-bottom: 54px;
}

.about-intro img{
  margin-top: 54px;
}

.about-intro p{
  font-size: 32px;
  font-weight: 300;
}

.about-content{
  margin-left: 139px;
}

/*================================*/
/* === SHOP ======================*/
/*================================*/

.shop-intro, 
h2 {
  margin-left: 138px;
}

.shop h2::before {
  content: url('../images/accent-pattern.png'); /* Replace with the path to your image */
  display: block;
  width: 50px; /* Adjust the width as needed */
  height: auto; /* This maintains the aspect ratio of your image */
}

.shop h3{
  color: #1A1A1A;
}

.secondary-nav{
  margin-top: 54px;
  padding-bottom: 40px;
}

.secondary-nav ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
}

.featured-section {
  margin-left: 84px;
  padding-left: 54px; /* Space between border and content */
  margin-bottom: 112px;
  border-left: 1px solid #722ED1;
}

.featured-section h3,
.featured-section p,
.featured-section .action-area {
  text-align: left; /* Aligns text to the left */
}

.image-gallery {
  display: flex;
  justify-content: space-between; /* Distributes space between images */
  margin-bottom: 20px; /* Space below the image gallery */
}

.image-gallery .image-link {
  flex: 1; /* Distributes space equally among images */
  margin-right: 10px; /* Space between images, adjust as necessary */
}

.image-gallery .image-link:last-child {
  margin-right: 0; /* Removes margin from the last image to prevent overflow */
}

.image-gallery .image-link img {
  width: 100%; /* Ensures images are fully contained within their links */
  height: auto; /* Maintains aspect ratio */
  display: block; /* Ensures images do not have extra space for inline elements */
}

.action-area a{
  display: inline-block;
}

.action-area small{
  display: block;
  margin-top: 16px;
}

/*================================*/
/* === GALLERY ===================*/
/*================================*/

.gallery-intro h1, 
.gallery-intro p {
  margin-left: 138px;
}

.gallery-intro p{
  margin-bottom: 54px;
}

/*================================*/
/* === NEWS ======================*/
/*================================*/

.news-items {
  display: flex;
  flex-direction: column;
  gap: 84px;
  margin: 32px 0;
}

.news-item {
  display: flex;
  gap: 24px;
  align-items: flex-start; /* Ensures the items align at the top */
}

.news-item img {
  width: 100%;
  max-width: 300px;
  height: auto;
  /*border-radius: 2px;*/
  text-align: left;
}

.news-text {
  display: flex;
  flex-direction: column;
  text-align: left;
  margin-left: 24px;
}

.news-text .date {
  font-family: 'Rubik', sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: #454444;
  margin: 0 0 4px 0;
  padding: 0;
}

.news-text .source {
  font-size: 32px;
  font-weight: 400;
  margin: 8px 0 0 0;
  padding: 0;
}

.news-text a {
  margin-top: 8px;

  color: #531DAB;
  text-decoration: underline;
}

/*================================*/
/* === NEWSLETTER ================*/
/*================================*/

.newsletter-content{
  margin-left: 138px;
  max-width: 1200px;
}

.newsletter-footer{
  text-align: center;
}

/*=========================*/
/*=== MEDIA QUERIES =======*/
/*=========================*/

@media (max-width: 768px) {
  

   /*=== SITE HEADER ===*/

  .header-container {
    flex-direction: column;
    align-items: flex-start;
  }

  .logo {
    margin-bottom: 0; /* Remove the space between logo and navigation on small screens */
  }

  /*=== PRIMARY NAVIGATION ===*/

  nav {
    margin-top: 48px;
  }

  .navigation {
    margin-left: 0;
    flex-direction: column;
    align-items: flex-start;
  }

  .navigation li {
    padding: 10px 0; /* Adjust the padding for smaller screens */
  }

  /*=== FOOTER ======*/

  .footer{
    margin-top: 0px;
  }

  .footer-container{
    flex-direction: column;
    align-items: center;
    margin: 20px; /* Adjust margin as needed */
  }

  .footer-column {
    width: 100%;
    margin: 10px 0;
  }

  .footer-column ul li a img {
    width: 20px; /* Smaller icon size on mobile */
  }

  footer .footer-container {
    max-width: 1440px;
    margin: 0 auto; /* Centers the container within the footer */
    padding: 0 20px; /* Add padding to maintain consistent spacing */
  }

  /*=== HOME ======*/

  .intro {
    flex-direction: column; /* Stacks the content vertically */
    margin: 20px;
    border-left: none;
  }

  .content, .image {
    flex: none; /* Resets any flex settings */
    width: 100%; /* Makes each section take the full width */
    margin: 10px 0; /* Adjust margin as needed for spacing */
  }

  .content{
    margin: 12px;
  }

  .content p{
    margin: 0px 0px 0px 0px; /* Space around paragraph */
  }

  .learn-more-link {
    margin-bottom: 44px;
  }

  .recent-work{
    margin: 20px; /* Adjust margin as needed */
  }
  .recent-work h2 {
    margin: 32px 0px 32px 0px; /* Space around the section title */
  }

  .gallery {
    grid-template-columns: 1fr; /* Only one column on small screens */
  }

  /*=== ABOUT ======*/

  .about {
    padding: 20px;
  }

  .about-intro-wrapper {
    margin: 0px 0px 0px 0px; /* Adjust margin as needed */
    border-left: none;
  }
  .about-intro {
    margin-left: 0px
  }

  .about-intro img{
    margin-top: 0px;
  }

  .about-intro p{
    font-size: 32px;
    font-weight: 300;
  }

  .about-content{
    margin-left: 0px;
  }

  /*=== SHOP ======*/

  .shop-intro, 
    h2 {
    margin-left: 20px;
  }

  .secondary-nav{
    margin-top: 54px;
    padding-bottom: 0px; /* Resets padding for smaller screens */
  }

  .secondary-nav ul{
    margin-left: 0;
    flex-direction: column;
    align-items: flex-start;
  }
  .secondary-nav ul li{
    margin-bottom: 32px;
  }

  .featured-section {
    border-left: none;
    margin: 20px;
    padding-left: 0; /* Resets padding for smaller screens */
  }

  .image-gallery {
    flex-direction: column; /* Stacks images vertically */
  }

  .image-gallery .image-link {
    margin-right: 0; /* Resets margin for smaller screens */
    margin-bottom: 24px; /* Space between stacked images */
  }

  .image-gallery .image-link:last-child {
    margin-bottom: 0; /* Removes bottom margin from the last image */
  }

  /*=== GALLERY ======*/

  .gallery-intro h1 {
    margin-left: 20px;
  }

  /*=== NEWS =========*/

  .news-item {
    flex-direction: column;
  }

  .news-item img {
    max-width: 100%;
  }

  /*=== NEWSLETTER ======*/

  .newsletter-content{
    margin: 20px;
  }


} /* MEDIA QUERIES END */