/* Basic Reset */
body, html, ul, li, p, a {
  margin: 0;
  padding: 0;
}

/* Headings */
h1, h2 {
  margin: 0;
  padding: 0;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 21px;
  text-decoration: none;
}

/* Hyperlinks */
a {
  color: #000080; /* Primary blue color */
  text-decoration: none; /* Remove underline by default */
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 15px;
}

a:hover {
  color: #1976D2; /* Darker blue on hover */
  font-weight: bold;
  text-shadow: 1px 1px 0px #87CEEB;
}

a:active {
  color: #004085; /* Even darker blue when clicked */
}

a:visited {
  color: #6610f2; /* Purple/blue color after the link is visited */
}




/* Body */
body {
  background-color: #fff;
  margin: 0;
}

/* Header */
header {
  background-color: #E3F2FD; /* Light Blue */
  padding: 12px 0;
  position: static;
  top: 0;
  z-index: 1000;
}

.header-logo a {
  margin-left: 20px;
}

.navbar ul {
  display: flex;
  justify-content: center;
  list-style: none;
}

.navbar ul li {
  margin: 0 15px;
}

/* Default state of navigation links (buttons) */
.navbar ul li a {
  position: relative;
  text-decoration: none;
  font-family: MS UI Gothic, Franklin Gothic Medium, Trebuchet MS, Verdana, Arial;
  color: #1E88E5; /* Light Blue */
  font-weight: bold;
  padding: 5px 3px;
  background-color: #E3F2FD; /* Medium Blue */
  border-radius: 8px;
  overflow: hidden;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0px;
  transition: color 0.3s ease, transform 0.3s ease;
  z-index: 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Border Animation using ::before and ::after */
.navbar ul li a::before, 
.navbar ul li a::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  z-index: -1; /* Position behind the button */
  transition: all 0.4s ease;
}

.navbar ul li a::before {
  border-top: 2px solid #90CAF9; /* Light Blue Border */
  border-right: 2px solid #90CAF9;
  transform: scale(0);
  transform-origin: top right;
}

.navbar ul li a::after {
  border-bottom: 2px solid #90CAF9;
  border-left: 2px solid #90CAF9;
  transform: scale(0);
  transform-origin: bottom left;
}

/* Hover Effect */
.navbar ul li a:hover::before {
  transform: scale(1);
}

.navbar ul li a:hover::after {
  transform: scale(1);
}

.navbar ul li a:hover {
  transform: scale(1.1); /* Slightly enlarge the button */
  background-color: #1565C0; /* Darker Blue on Hover */
  color: #E3F2FD; /* Keep Light Blue Text */
}

/* Active state (when the button is clicked) */
.navbar ul li a:active {
  background-color: #0D47A1; /* Deep Blue */
  transform: scale(0.98); /* Slight shrink when clicked */
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1); /* Soft shadow when clicked */
  animation: flip 0.6s ease-in-out; /* Flip animation on click */
}

/* Flip Effect */
@keyframes flip {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

/* Main Content */
main {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

.main-content {
  width: 100%;	/* It is generally 71% */
}

.sidebar {
  width: 26%;
  display: flex;            /* Turn the sidebar into a flex container */
  flex-direction: column;   /* Make the flex container stack items vertically */
  align-items: right;      /* Center content horizontally */
  justify-content: top;  /* Align content to Top vertically */
}

.sidebar img {
  margin-bottom: 0px;
  margin-right: 0px;
  width: 100%;
  height: auto;
}

.text1 {
  text-decoration: none;
  font-family: Arial Unicode MS, Verdana, Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 21px;
  text-align: justify;
}
.text2 {
  text-decoration: none;
  font-family: Arial Unicode MS, Verdana, Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 21px;
  text-align: center;
}
.text3 {
  text-decoration: none;
  font-family: Arial Unicode MS, Verdana, Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 21px;
  text-align: left;
  margin-left: 30px;
}
.other-products {
  text-decoration: none;
  font-family: Arial Unicode MS, Verdana, Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: normal;
  line-height: 21px;
  text-align: left;
  margin-left: 15px;
  margin-bottom: 25px;
}

/* Footer */
footer {
  background-color: #F2F2F2;
  padding: 5px;
  text-align: center;
}

footer .contact-info,
footer .other-products {
  font-family: Trebuchet MS, Arial Unicode MS, Verdana, Arial, Helvetica, sans-serif;
  font-size: 17px;
  margin-bottom: 15px;
}

footer a {
  text-decoration: none;
  color: #0066cc;
}

footer a:hover {
  text-decoration: underline;
}

.back-to-top {
  position: fixed; /* Fixes the position relative to the viewport */
  bottom: 15px; /* Distance from the bottom of the page */
  right: 15px; /* Distance from the right edge of the page */
  background-color: rgba(0, 123, 255, 0.3); /* Background color with 70% transparency */
  color: gray; /* Text color */
  padding: 3px 7px; /* Padding around the text */
  border-radius: 5px; /* Rounded corners */
  text-decoration: none; /* Removes underline from the link */
  font-size: 15px; /* Font size */
  font-weight: bold;
  font-family: Arial Narrow, sans-serif; /* Font style */
  transition: background-color 0.3s ease; /* Smooth background transition on hover */
}

.back-to-top:hover {
  color: white; /* Text color */
  background-color: rgba(0, 86, 179, 0.7); /* Darker background with transparency on hover */
  text-decoration: underline;
}

/* Additional Blue-Themed Button

/* Enquiry Button */
.enquiry-button a {
  display: inline-block;
  background-color: #1E88E5; /* Medium Blue */
  color: #fff;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  text-transform: uppercase;
  transition: background-color 0.3s ease, transform 0.3s ease;
  animation: glow 2s infinite ease-in-out; /* Add looping glow effect */
  box-shadow: 0 5px 15px rgba(30, 136, 229, 0.4); /* Initial subtle glow */  
}

/* Hover Effect for Enquiry Button */
.enquiry-button a:hover {
  background-color: #0D47A1; /* Darker Blue */
  transform: scale(1.1); /* Slightly enlarge on hover */
  box-shadow: 0 8px 20px rgba(21, 101, 192, 0.6); /* Enhanced glow on hover */
}

/* Glow Animation */
@keyframes glow {
  0% {
    transform: scale(1); /* Normal size */
    box-shadow: 0 5px 15px rgba(30, 136, 229, 0.4); /* Subtle glow */
  }
  50% {
    transform: scale(1.05); /* Slightly enlarged */
    box-shadow: 0 8px 20px rgba(30, 136, 229, 0.6); /* Stronger glow */
  }
  100% {
    transform: scale(1); /* Back to normal size */
    box-shadow: 0 5px 15px rgba(30, 136, 229, 0.4); /* Subtle glow */
  }
}


/* Basic Navbar Styles */
.navbar {
  font-family: Arial, sans-serif;
  font-size: 16px;
  padding: 10px;
  text-decoration: none;
  color: #333;
}

/* Blinking effect for Enquiry link with color change */
.enquiry {
  animation: blink-animation 1s infinite;
  color: transparent; /* Start with transparent color */
}

/* Keyframes for blinking effect */
@keyframes blink-animation {
  3% {
    color: blue; /* Initially transparent */
  }
  80% {
    color: ADD8E6; /* Blue color during the "blink" */
  }
  100% {
    color: ADD8E6; /* Keep blue color at the end */
  }
}


.reveal-text {
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
  width: 0;
  animation: reveal 3s forwards;
}

@keyframes reveal {
  100% { width: 100%; }
}

/* Flexbox to center the button */
.button-wrapper {
  display: flex;
  justify-content: center;  /* Horizontally center the button */
  align-items: center;      /* Vertically center the button */
  height: 100vh;            /* Full viewport height for vertical centering */
}

/* Shake effect button styles */
.shakebutton {
  color: white;             /* Text color */
  font-weight: bold;
  padding: 7px 7px;
  background-color: #87CEEB; /* Medium Blue */
  border-radius: 8px;
  display: inline-block;
  font-size: 16px;
  border: none;
  cursor: pointer;
  font-family: "Arial Unicode MS", sans-serif;
  animation: shake 1s ease-in-out 2s infinite; /* Shake for 1 second with 2s delay */
  text-align: center;        /* Center text inside the button */
}

/* Hover effect */
.shakebutton:hover {
  background-color: #0056b3;  /* Darker Blue */
  /* Optional: add a subtle box-shadow for visual effect */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Shake animation */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
}


/* Wrap the images with text */
.image-wrapper {
  overflow: hidden; /* Clearfix for floated images */
  margin-right: 20px; /* Space between images and text */
  margin-bottom: 10px; /* Space below the images */
}

.image-wrapper img {
  float: center; /* Float images to the left */
  margin-right: 15px; /* Space between images */
  margin-bottom: 10px; /* Space below images */
}

/* Optional: Clear floats after sidebar */
.sidebar {
  clear: both; /* Ensures proper layout after floating images */
}

    .shakebutton {
        display: flex;
        justify-content: center; /* Centers the content horizontally */
        align-items: center; /* Centers the content vertically */
        height: 5vh; /* Full viewport height to center vertically */
    }

    .shakebutton a {
        background-color: #0056b3; /* Button background color */
        color: white; /* Button text color */
        padding: 5px 5px; /* Button padding */
        text-align: center; /* Align text in the middle */
        text-decoration: none; /* Remove underline */
        font-size: 16px; /* Text size */
        border-radius: 8px; /* Rounded corners */
        transition: background-color 0.3s; /* Smooth transition */
    }

    .shakebutton a:hover {
        background-color: #007bff; /* Hover effect */
		box-shadow: 0 8px 20px rgba(21, 101, 192, 0.6); /* Enhanced glow on hover */
		
    }


/* Header container */
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background-color: #E3F2FD; /* Light Blue */
}

.header-logo a {
  display: block;
}

.navbar ul {
  display: flex;
  list-style: none;
}

.navbar ul li {
  margin: 0 15px;
}

.navbar ul li a {
  text-decoration: none;
  color: #1E88E5;
  font-weight: bold;
  padding: 5px 10px;
  background-color: #E3F2FD;
  border-radius: 8px;
  transition: color 0.3s ease, transform 0.3s ease;
}

.navbar ul li a:hover {
  color: white;
  background-color: #0288D1; /* Darker blue on hover */
  text-decoration: underline;
}

/* Add this media query to make the navbar items vertical on smaller screens */
@media screen and (max-width: 768px) {
  /* Navbar - make the links stack vertically */
  .navbar ul {
    flex-direction: column; /* Stack links vertically */
    align-items: center; /* Center the links horizontally */
  }

  .navbar ul li {
    margin: 7px 0; /* Space out the links vertically */
  }

  .navbar ul li a {
    width: 100%; /* Make the links take up the full width */
    text-align: center; /* Center the text inside the links */
    padding: 1px 0; /* Add some padding for the links */
    font-size: 16px; /* Adjust font size if needed */
  }
}



.slideshow {
            float: right;
            width: 260px; /* Fixed slideshow width */
            height: 219px; /* Fixed slideshow height */
            overflow: hidden;
            border: 2px solid #ddd;
            border-radius: 15px;
            margin: 10px 0 10px 25px; /* Spacing for the text wrapping */
            position: relative;
        }
.slideshow img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0;
            animation: fade 6s infinite;
        }
.slideshow img:nth-child(1) {
            animation-delay: 0s;
        }
.slideshow img:nth-child(2) {
            animation-delay: 3s; /* Half of the animation duration */
        }
        @keyframes fade {
            0% {
                opacity: 0;
            }
            25% {
                opacity: 1;
            }
            50% {
                opacity: 1;
            }
            75% {
                opacity: 0;
            }
            100% {
                opacity: 0;
            }
        }