/*div#head{
    height: 100px;
}

.headingText{text-align: center; font-size: 32px; padding-top: 20px;
font-weight: bold}
.alright{text-align: right; padding-top: 10px; padding-right: 20px }

.sp{padding-left: 10px;}   */


/*body {
            background-color: #808080; /* Light background for a paper-like effect */
            /*font-family: 'Arial', sans-serif; /* font */*/
        /*}

        .page {
            width: 95%; /* Set a fixed width */
            /*margin: 20px auto; /* Center the page */
            /*padding: 10px; /* Add some padding */*/
            /*background-color: white; /* White background for the page */
            /*box-shadow: 0 3px 10px rgba(0, 0, 0, 20); /* Soft shadow for depth */
            /*border-radius: 0px; /* Rounded corners */
            /*border: 1px solid #ccc; /* Light border for definition */
            /*align-content: center;
        }
        */

.container2{
    display: flex;
    gap: 10px;
}

.box1 {
  flex: 1;
  padding: 20px;
  background-color: #ccc;
  text-align: center;
}

/* Responsive: stack vertically on small screens */
@media (max-width: 600px) {
  .container2 {
    flex-direction: column;
  }
}
/*stack divs if the screen is small*/




/*navigation bar*/

navi {
    margin: 0px;
    background-color: #fffff;
    font-family: 'Work Sans', sans-serif;
    font-weight: 800;
    align-content: center;
    width:auto;
    

}

.container {
    width: fit-content;
    margin: 0 auto;
    align-content: center;
}

.logo {
  float: right;
  padding: 10px 0;
}

nav {
  float: center;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  position: sticky;  /* Makes the navbar sticky */
  top: 0;            /* Sticks it to the top of the viewport */
  width: 100%;       /* Ensures it spans the full width */
  /*background-color: #ffffff; /* Optional: Set a background color */
  background-color: rgba(255,255,255, 0.2);  /* Transparent black background */
  backdrop-filter: blur(5px);  /* Optional: blur the background */
  align-content: center;
  z-index: 1000;     /* Keeps it above other content */
}

nav li {
  display: inline-block;
  /*margin-left: 4.27%;
  margin-right: 4.27%;*/
/*  padding-top: 3%;*/
  padding-top: 50px;
  width:20%;
  position: relative;
  text-align: center;
}

nav a {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 18px;  /*    font size in top menu*/
  align-items: center;
  color: white;

}

nav a:hover {
  color: #fff;
}

nav a::before {
  content: '';
  display: block;
  height: 5px;
  background-color: #fff;

  position: absolute;
  top: 0;
  width: 0%;

  transition: all ease-in-out 250ms;
}

nav a:hover::before {
  width: 100%;
}

/*navigation bar end*/


/* Sidebar - Positioned at the top */
.side-menu {
    position: fixed;
    top: 0;             /* Stick to the top of the page */
    left: 0;            /* Stick to the left side */
    width: 100%;        /* Make it span the full width */
    background-color: rgba(255,255,255, 0.7);  /* Transparent black background */
    color: white;
    padding: 10px 0;  /* Padding for the links inside the menu */
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.5);  /* Optional: Soft shadow for the top */
    z-index: 1000;      /* Ensure the sidebar stays above other content */
    display: none;      /* Initially hidden */
    backdrop-filter: blur(5px);  /* Optional: blur the background */
    transition: top 0.3s ease-in-out;  /* Smooth transition for showing the menu */
}

/* Menu items styling */
.side-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;       /* Use flex to spread items horizontally */
    justify-content: space-between;  /* Distribute the items evenly */
    align-items: center;  /* Vertically align items */
    width: 100%;          /* Make the menu span the full width */
}

.side-menu li {
    padding: 15px;
    text-align: center;
    transition: background-color 0.3s, transform 0.3s;
    flex-grow: 1;         /* Each item takes up equal space */
}

/* Menu links */
.side-menu a {
    color: black;
    text-decoration: none;
    font-size: 18px;
/*    font size in scrolling menu*/
    display: block;
    transition: background-color 0.3s, transform 0.3s;
    text-transform: uppercase;
}

/* Hover effect for the menu items */
.side-menu a:hover {
    background-color: rgba(255, 255, 255, 0.2);  /* Light hover effect */
    transform: translateY(5px);  /* Slight movement downwards */
}

/* Button to toggle the menu */
.menu-toggle {
    position: fixed;
    top: 20px;
    left: 20px;
    background-color: rgba(0, 0, 0, 0.7);  /* Same background color */
    color: white;
    border: none;
    padding: 10px;
    font-size: 20px;
    cursor: pointer;
    border-radius: 5px;  /* Optional: round the edges of the button */
    z-index: 1100;  /* Ensure the button stays above everything */
    display: block;  /* Button is visible initially */
}

.menu-toggle:hover {
    background-color: rgba(255, 255, 255, 0.3);  /* Light hover effect */
}

/* When button is hidden after scrolling */
.menu-toggle.hide {
    display: none;
}

/* Optional: Add a smooth transition for the sidebar */
.side-menu {
    transition: top 0.3s ease-in-out;
}





/* Social Media Menu styles */
.social-media-menu {
    position: fixed;             /* Fix the position on the screen */
    top: 85%;                    /* Center vertically */
    right: 0;                    /* Align to the right */
    transform: translateY(-50%); /* Fine-tune centering */
    background-color: rgba(255, 255, 255, 0.8); /* Transparent white background */
    padding: 2px;
    border-radius: 1px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 999;               /* Ensure the menu is on top */
    width: 40px;                /* Set a fixed width for the menu */
    backdrop-filter: blur(10px); /* Optional: Apply a blur effect to the content behind */
}

.menu-title {
    color: #333;    /* Dark text color for the title */
    text-align: center;
    margin: 0 0 15px;
    font-size: 18px;
    font-weight: bold;
}

.menu-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.menu-list li {
    margin: 10px 0;
}

.social-link {
    color: #333;           /* Dark color for the links */
    text-decoration: none;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    transition: background-color 0.3s, transform 0.3s; /* Add transition for zoom effect */
}

.social-link i {
    margin-right: 10px;     /* Space between the icon and text */
    font-size: 20px;        /* Icon size */
    transition: transform 0.3s; /* Ensure smooth zoom effect on the icon */
}

.social-link:hover {
    background-color: #ddd; /* Light gray on hover */
}

.social-link:hover i {
    transform: scale(1.2);  /* Zoom in the icon 1.2x when hovering */
}





/* Modal styling for email */
.email-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1001; /* Sit on top of the page */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Dark transparent background */
    padding-top: 50px;
    overflow-y: auto; /* Add scrolling if the content is too long */
}

/* Modal content box */
.email-modal-content {
    background-color: #fff;
    margin: 5% auto;
    padding: 30px;
    border-radius: 12px; /* Rounded corners for elegance */
    width: 80%;
    max-width: 450px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
    animation: fadeIn 0.3s ease-in-out; /* Smooth animation */
}

/* Modal close button */
.email-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
}

.email-close:hover {
    color: #333; /* Darker color on hover */
}

/* Form Styling */
.email-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Label Styling */
.email-form label {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333; /* Dark text color for labels */
}

/* Input and Textarea Styling */
.email-form input,
.email-form textarea {
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 6px; /* Rounded corners for form elements */
    font-size: 16px;
    width: 100%;
    box-sizing: border-box; /* Make sure the padding doesn't affect the width */
}

/* Make Textareas and Inputs Consistent */
.email-form input,
.email-form textarea {
    margin-bottom: 16px; /* Ensures uniform space between fields */
}

/* Focus Effect for Input Fields */
.email-form input:focus,
.email-form textarea:focus {
    border-color: #4CAF50; /* Green focus border for input elements */
    outline: none;
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5); /* Green glow effect */
}

/* Submit Button Styling */
.email-form button {
    padding: 12px 20px;
    background-color: #4CAF50;
    color: white;
    font-size: 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.email-form button:hover {
    background-color: #45a049; /* Slightly darker green on hover */
}

/* Status message styling */
#email-status {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    text-align: center;
}

/* Smooth fade-in animation for the modal */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* go to top button */
#goTopBtn {
  display: none; /* Hidden by default */
  position: fixed;
  bottom: 30px;
  right: 60px;
  z-index: 999;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #000000;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  transition: background-color 0.3s ease;
}

#goTopBtn:hover {
  background-color: #555;
}





/*collection Image gallery start*/
/* Main image gallery */
.img-gallery-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px 0;
}

.img-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.img-gallery-image {
    width: 100%;
    height: auto;
    cursor: pointer;
    border-radius: 6px;
    transition: transform 0.2s ease;
}

.img-gallery-image:hover {
    transform: scale(2);
}

.img-gallery-more-btn {
    margin: 20px auto;
    padding: 10px 20px;
    background: #4CAF50;
    color: white;
    font-size: 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.img-gallery-more-btn:hover {
    background: #45a049;
}

/* Modal for previewing images */
.img-gallery-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    justify-content: center;
    align-items: center;
    z-index: 1200;
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#gallery-modal-img {
    max-width: 90%;
    max-height: 80%;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
}

.modal-nav {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 800px;
}

.modal-btn {
    background: transparent;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
    transition: background 0.3s;
}

.modal-btn:hover {
    background: #ddd;
}



/* Styles for the floating map container */
        .floating-map-container {
            position: fixed; /* Makes the element fixed relative to the viewport */
            bottom: 6%;    /* Distance from the bottom of the viewport */
            right: 6%;     /* Distance from the right of the viewport */
            width: 30%;    /* Desired width of the map miniview */
            height: 30%;   /* Desired height of the map miniview */
            border-radius: 12px; /* Rounded corners for the container */
            overflow: hidden; /* Ensures the iframe corners match the container */
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Adds a shadow for a floating effect */
            z-index: 1000;   /* Ensures the map stays on top of other content */
            transition: transform 0.3s ease-in-out; /* Smooth transition for hover effect */
        }

        .floating-map-container:hover {
            transform: translateY(-5px); /* Slight lift on hover */
        }

        .floating-map-container iframe {
            width: 100%;
            height: 100%;
            border: 0; /* Remove default iframe border */
            border-radius: 12px; /* Apply border-radius to the iframe as well */
        }

        /* Responsive adjustments for smaller screens */
        @media (max-width: 768px) {
            .floating-map-container {
                width: 70%; /* Make it wider on smaller screens */
                height: 80%; /* Adjust height */
                bottom: 15px;
                right: 20%; /* Center it more horizontally */
                left: 20%;
                margin: 0 auto; /* Ensures it's centered */
            }