/*
 * UnderConstructionPage
 * Plain Text theme CSS
 * (c) WebFactory Ltd, 2015 - 2025
 */


body {
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 1.65em;
    color: #fff;
    text-rendering: optimizeLegibility;
	background-image: 
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
    url('https://rangariti.com/wp-content/uploads/2026/04/shop-1.jpg');
  	background-size: cover;
  	background-position: center;
  	background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed; /* Keeps it covering the screen even when scrolling */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* Your Image & Overlay */
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
    url('image.jpg');
  background-size: cover;
  background-position: center;
  
  /* The Blur Effect */
  filter: blur(6px);
  
  /* Scale it up slightly to hide the "white edges" caused by blurring */
  transform: scale(1.1);
  
  /* Send it to the back */
  z-index: -1; 
}

header {
  text-align: center;
}

#logo {
  max-width: 200px;
  transition: transform 1s ease-out;
  
  /* Apply the animation on page load */
  animation: spinOnce 1.5s ease-out;
}

/* Keep your hover effect as is */
#logo:hover {
  transform: rotate(360deg);
}

/* Define the automatic animation */
@keyframes spinOnce {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

#logo-wrap {
  padding: 25px;
  display: inline-block;
}

h1 {
  font-size: 6rem;
  color: #fff;
  font-family: "Montserrat", "Helvetica-Neue", "Helvetica", "Arial", "san-serif";
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  padding: 0;
  margin: 8.875rem 0 1.5rem 0;
  text-align: center;
}

.content {
  text-align: center;
  font-size: 1.875rem;
  color: #fff;
  letter-spacing: 2px;
  margin-top: 60px;
  font-family: "Montserrat", "Helvetica-Neue", "Helvetica", "Arial", "sans-serif";
}

#social {
  text-align: center;
  margin-top: 3rem;
}

#social a i {
  color: #23272a;
  margin: 10px;
  box-sizing: content-box;
}

#social a:hover i {
  color: #de2a13;
}

@media(max-width:767px){
  h1 {
     font-size: 4rem;
     margin: 7rem 0 1.5rem 0;
  }
}