html {
    scroll-behavior: smooth;
    height: 100%; /* Ensure the body and html take full height */
    margin: 0; /* Remove default margins */
}




/* General styles for the page and book */
@keyframes flyAndFold {
    0% {
        transform: translateX(-100%) scale(1); /* Start off-screen to the left */
        opacity: 0;
    }
    50% {
        transform: translateX(0) scale(1.2); /* Fly in and enlarge */
        opacity: 1;
    }
    100% {
        transform: translateX(0) scale(1); /* Return to normal position and size */
        opacity: 1;
    }
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-image: url('cloud1.jpg'); /* Replace with your image URL */
    border-radius: 200px;
    font-family: Arial, sans-serif;
    background-size: contain; /* Fits the entire image within the container */
}

.book {
    width: 75%;
    height: 94%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    background: white;
    border: 3px solid #696969;
    border-radius: 24px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    margin-left: -10px;
}                 

.page {
    position: relative;
    z-index: 1;
    height: 104%;
    display: none; /* Hide all pages by default */
    flex-direction: column;
    flex-grow: 1;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
}

/* Navigation Button Container */
.nav-buttons {
    position: absolute;
    display: flex;
    justify-content: space-between; /* Ensure buttons are at opposite ends */
    padding: 9px;
    background: #fff;
    border-top: 1px solid #ccc;
    bottom: 0;
    width: 100%;
    box-sizing: border-box; /* Include padding in the width */
    z-index: 2; /* Ensure the navigation buttons stay on top */
}

/* Button Styles */
.nav-btn {
    display: flex;                  /* Enable Flexbox */
    justify-content: center;        /* Horizontally center text */
    align-items: center;            /* Vertically center text */
    width: 100px;                   /* Set fixed width */
    height: 40px;                   /* Set fixed height */
    background: #007bff;            /* Button background color */
    color: #fff;                    /* Text color */
    border: none;                   /* Remove default border */
    border-radius: 10px;
    cursor: pointer;                /* Pointer cursor on hover */
    transition: background 0.3s;    /* Smooth background transition */
    margin-left: 10px;
    margin-right: 10px;
}

/* Disabled Button Styling */
.nav-btn:disabled {
    background: #e0e0e0;   /* Light gray */
    color: #a0a0a0;        /* Darker gray */
    cursor: not-allowed;
    opacity: 0.6;
}

.nav-btn:hover {
    background: #0056b3;            /* Darker background on hover */
}

/* Previous Button Specific Styles */
.prev-btn {
    margin-right: 10px;             /* Add space to the right of the Previous button */
}

/* Next Button Specific Styles */
.next-btn {
    margin-left: 20px;              /* Add space to the left of the Next button */
}

/* Light Wobble Animation */
@keyframes lightWobble {
    0% { transform: rotate(0deg) scale(1); }
    15% { transform: rotate(2deg) scale(1.02); }
    30% { transform: rotate(-2deg) scale(1.02); }
    45% { transform: rotate(1deg) scale(1.01); }
    60% { transform: rotate(-1deg) scale(1.01); }
    75% { transform: rotate(0.5deg) scale(1.005); }
    100% { transform: rotate(0deg) scale(1); }
}

.light-wobble {
    animation: lightWobble 1s ease-in-out;
}

/* Sweep Animation */
@keyframes sweep {
    0% {
        transform: translateX(-100%) scale(0.8);
        opacity: 0;
    }
    50% {
        transform: translateX(0) scale(1.05);
        opacity: 1;
    }
    100% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

.sweep {
    animation: sweep 1s ease-in-out;
}




/* Custom Scrollbar Styles for All Pages */
.page::-webkit-scrollbar {
    width: 8px; /* Width of the scrollbar */
}

.page::-webkit-scrollbar-thumb {
    background-color: #888; /* Color of the scrollbar thumb */
    border-radius: 50px; /* Fully rounded corners */
    border: 2px solid transparent; /* Space around the thumb */
    min-height: 20px; /* Prevent the scrollbar thumb from becoming too small */
}

.page::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Color when hovered */
}

.page::-webkit-scrollbar-track {
    background: #f1f1f1; /* Background color of the scrollbar track */
    border-radius: 50px; /* Fully rounded track corners */
    margin-top: 20px;
    margin-bottom: 58px;
}

/* Ensure proper spacing and visibility of content within pages */
.image-text-bottom, .image-grid, .image-container-top, .image-container-bottom {
    margin-bottom: 70px; /* Ensure there is space below content */
}


.page.active {
    display: flex; /* Show only the active page */
}

@media (min-width: 768px) {
    .book {
        padding: -10px; /* Default padding for larger screens */
    }

    h2 {
        font-size: 2rem; /* Default heading size */
    }

    p {
        font-size: 1rem; /* Default paragraph size */
    }
}

/* Home Icon Styling */
.home-icon {
    position: fixed;
    top: 35px;
    left: 1160px;
    width: 50px;
    height: 50px;
    z-index: 10; /* Ensures it stays above other elements */
}

.home-icon img {
    width: 100%;
    height: auto;
    cursor: pointer;
    transition: transform 0.3s ease; /* Adds hover effect */
}

.home-icon img:hover {
    transform: scale(1.1); /* Slightly enlarge icon on hover */
}

.home-icon.hidden {
    display: none !important;
}





#page-1 .logo-container {
    text-align: center;
    margin-bottom: 30px; /* Increased space between the logo and main image for uniformity */
}

#page-1 .logo-container {
    position: relative; /* Set relative positioning for the container */
    text-align: center;
    margin-bottom: 30px; /* Space below logo */
}

#page-1 img.logo-image {
    width: 260px; /* Adjust size as needed */
    height: auto;
    display: inline-block;
    margin-bottom: 10px; /* Ensure the logo has a small margin below */
}

#page-1 img.page-image {
    animation: flyAndFold 3s ease-in-out forwards;
    height: auto;
    display: block;
    margin: -28px auto 20px; /* Adjust this margin if needed to balance spacing between logo and image */
    width: 70%; /* Adjust size of main image as needed */
    position: relative;
    z-index: 1; /* Ensure the image is behind and not overlapping the logo */
    border: 3.4px solid black; /* Added black border */
    border-radius: 15px;
}

#page-1 .page-content h2 {
    text-align: center;
    margin-top: 65px; /* Added space between the image and heading */
    margin-left: -750px; /* Reset the margin-left for proper centering */
    font-size: 24px; /* Adjust the font size as needed */
    font-weight: bold; /* Emphasize the heading */
    color: #333; /* Set a subtle color for the heading */
}

#page-1 .page-content p {
    text-align: justify;
    margin-bottom: 10px;
}

/* Grid Container Styles */
#page-1 .image-grid {
    margin-top: 20px;
}

#page-1 .image-grid h3 {
    text-align: center;
    margin-top: -10px;
}

#page-1 .grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 35px; /* Adjust gap between images */
    overflow: hidden;
    margin-top: 20px;
}

#page-1 .grid-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px; /* Optional rounded corners */
    border: 3.5px solid black; /* Added black border */
}

/* Adjust image size and position */
#page-1 .grid-item img {
    width: 100%; /* Ensures images fit the grid item */
    height: auto; /* Maintain aspect ratio */
    display: block;
    position: relative;
}

/* Overlay Styles */
#page-1 .image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Dark overlay */
    color: #fff;
    opacity: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    transition: opacity 0.3s;
    z-index: 1;
}

#page-1 .grid-item:hover .image-overlay {
    opacity: 1;
}

#page-1 .image-overlay h4 {
    margin: 0;
    font-size: 18px; /* Adjust size to fit well */
    font-weight: bold;
    border-bottom: 2px solid #fff; /* White line below the heading */
    padding-bottom: 10px; /* Space between heading and line */
}

#page-1 .image-overlay p {
    margin: 10px 0;
    font-size: 14px; /* Adjust size for readability */
    line-height: 1.4; /* Improve readability */
}

#page-1 .image-overlay a {
    color: #ffdd57;
    text-decoration: none;
    font-size: 16px; /* Match the size to text content */
    font-weight: bold;
    margin-top: 10px; /* Space from description */
}

#page-1 .image-overlay a:hover {
    text-decoration: underline;
}

/* Custom Scrollbar Styles */
#page-1 .left::-webkit-scrollbar {
    width: 2px; /* Width of the scrollbar */
}

#page-1 .left::-webkit-scrollbar-thumb {
    background-color: #888; /* Color of the scrollbar thumb */
    border-radius: 4px; /* Rounded corners for the scrollbar thumb */
}

#page-1 .left::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Color when hovered */
}

#page-1 .left::-webkit-scrollbar-track {
    background: #f1f1f1; /* Background color of the scrollbar track */
}







/* General styles for Page 2 */
#page-2 .page-content h2 {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 20px;
    font-size: 30px;
    font-weight: bold;
    color: #2c3e50;
    text-transform: uppercase; /* Transform text to uppercase */
}

/* Grid container for the images */
.page#page-2 .grid-container {
    display: flex;
    flex-wrap: wrap;
    row-gap: 200px; /* Increase vertical gap between rows */
    column-gap: 70px; /* Keep horizontal gap the same */
    justify-content: center; /* Center the grid content */
    padding-top: 40px;
}

/* Flip container styles */
.page#page-2 .flip-container {
    width: 400px; /* Set the new width to 400px */
    height: 400px; /* Set the new height to 400px */
    perspective: 1000px;
    margin: 0 auto; /* Center align the flip container */
}

/* Flipper for the flipping effect */
.page#page-2 .flipper {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

/* Flip effect on hover */
.page#page-2 .flip-container:hover .flipper {
    transform: rotateY(180deg);
}

/* Front and back styles */
.page#page-2 .front, 
.page#page-2 .back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

/* Front side (image) */
.page#page-2 .front {
    z-index: 2;
    transform: rotateY(0deg);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Back side (content) */
.page#page-2 .back {
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #333;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
}

/* Image styling inside the flip container */
.page#page-2 .flip-container img {
    width: 100%; /* Make the image fill the container */
    height: 100%; /* Maintain height according to the container */
    object-fit: cover; /* Ensure the image covers the container while maintaining aspect ratio */
    border-radius: 15px; /* Optional: rounded corners */
    border: 3.6px solid black; /* Black border around the images */
}

/* Back content styling */
.page#page-2 .back h4 {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    position: relative;
    padding-bottom: 10px;
}

.page#page-2 .back h4::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 50%;
    height: 2px;
    background-color: #007bff;
}

.page#page-2 .back p {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 10px;
}

.page#page-2 .back a {
    color: #000000;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    padding: 10px 20px;
    border: 2px solid #ffdd57;
    border-radius: 5px;
    background: white;
    transition: background-color 0.3s, color 0.3s;
}

.page#page-2 .back a:hover {
    background-color: #ffdd57;
    color: #333;
}

.page#page-2 .page-content {
    margin-top: -10px; /* Add top margin for the specific container */
}






/* Ensure the parent container scrolls only as needed */
#page-3 {
    max-height: 100vh; /* Maximum height to viewport height */
    overflow-y: auto;  /* Enable vertical scrolling */
    box-sizing: border-box; /* Includes padding and borders in the height calculation */
    padding-right: 15px; /* To prevent content being hidden under the scrollbar */
    position: relative; /* For better layout control */
}

#page-3 .page-content h2 {
    text-align: center; /* Center the heading */
    margin-top: 10px; /* Adjust space above the heading */
    font-size: 30px; /* Adjust the font size */
    font-weight: 700; /* Bold weight */
    color: #2c3e50; /* Darker color for emphasis */
    text-transform: uppercase; /* Transform text to uppercase */
    letter-spacing: 1px; /* Add some space between letters */
}

/* Ensure inner content flows normally */
#page-3 .page-content {
    height: auto; /* Ensures the content takes its natural height */
    overflow: visible; /* No hidden content, allows full display */
}

/* Styles for the first two images on Page 3 */
#page-3 .image-container-top {
    margin-top: 40px;
    display: flex; /* Aligns images side by side */
    justify-content: space-between; /* Space between images */
    margin-bottom: 20px; /* Space below the images */
    margin-right: 20px;
}

#page-3 .image-item-top {
    width: 38%; /* Adjust as needed */
    margin-left: 50px;
    text-align: center; /* Center align text below images */
}

#page-3 .image-left-top, #page-3 .image-right-top {
    width: 100%; /* Ensures the image takes full width of its container */
    height: auto; /* Maintain aspect ratio */
    border-radius: 50px;
}

#page-3 .image-text-top {
    margin-top: 10px; /* Space between the image and text */
}

#page-3 .image-text-top h3 {
    margin: 0; /* Remove default margin */
    font-size: 1.2em; /* Adjust font size as needed */
}

#page-3 .image-text-top p {
    margin: 5px 0; /* Space between name and role */
    font-size: 1em; /* Adjust font size as needed */
    margin-left: 20px;
}

/* Styles for the last two images on Page 3 (Shobankumar and Narasimha) */
#page-3 .image-container-bottom {
    display: flex; /* Aligns images side by side */
    justify-content: space-between; /* Space between images */
    margin-bottom: 20px; /* Space below the images */
    margin-right: 20px;
}

#page-3 .image-item-bottom {
    width: 38%; /* Adjust as needed */
    margin-left: 50px;
    text-align: center; /* Center align text below images */
    margin-top: 91px; /* Adjust this to move the images down */
}

#page-3 .image-left-bottom, #page-3 .image-right-bottom {
    width: 100%; /* Ensures the image takes full width of its container */
    height: auto; /* Maintain aspect ratio */
    border-radius: 50px;
}

#page-3 .image-text-bottom {
    margin-top: 10px; /* Space between the image and text */
    margin-right: 20px;
}

#page-3 .image-text-bottom h3 {
    margin: 0; /* Remove default margin */
    font-size: 1.2em; /* Adjust font size as needed */
}

#page-3 .image-text-bottom p {
    margin: 5px 0; /* Space between name and role */
    font-size: 1em; /* Adjust font size as needed */
    margin-left: -10px;
}

/* Custom Scrollbar Styles for Page 3 */
#page-3::-webkit-scrollbar {
    width: 8px; /* Width of the scrollbar */
}

/* Rounded scrollbar thumb */
#page-3::-webkit-scrollbar-thumb {
    background-color: #888; /* Color of the scrollbar thumb */
    border-radius: 50px; /* Fully rounded corners (very high value for the radius) */
    border: 2px solid transparent; /* Ensure some space around the thumb */
    margin-top: 20px;
}

/* Hover effect for the scrollbar thumb */
#page-3::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Color when hovered */
}

/* Rounded scrollbar track */
#page-3::-webkit-scrollbar-track {
    background: #f1f1f1; /* Background color of the scrollbar track */
    border-radius: 50px; /* Fully rounded track corners */
    margin-top: 50px; /* Add margin at the top */
    margin-bottom: 98px; /* Add margin at the bottom */
}





/* Page Layout Styles */
.page#page-4 .page-content {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
    height: 100vh; /* Full viewport height */
    overflow: hidden;
}

.page#page-4 .page-part {
    width: auto; /* Adjust width as needed */
    box-sizing: border-box;
    position: relative; /* Add position relative to ensure line spans the full height */
    height: 100%;
}

#page-4 .page-content .page-part.left h2 {
    text-align: center; /* Align the heading to the left */
    margin-top: -10px; /* Adjust top margin for spacing */
    font-size: 30px; /* Larger font size */
    font-weight: bold; /* Bold font weight */
    padding-bottom: 10px; /* Space between the heading and the underline */
    color: #2c3e50; /* Darker color for emphasis */
    text-transform: uppercase; /* Transform text to uppercase */
}

.page#page-4 .left {
    width: 48%; /* Adjust width to fit with the right section */
    padding-right: 20px; /* Add padding for spacing */
    border-right: 2px solid #000; /* Border to separate the left section */
    height: 100%; /* Ensure it takes up full height of the container */
    overflow-y: auto; /* Enable vertical scrolling */
    box-sizing: border-box; /* Include padding and border in width */
    margin-left: -20px; /* Move the left section content to the left */
}

/* Custom Scrollbar Styles for Left Part */
.page#page-4 .left::-webkit-scrollbar {
    width: 8px; /* Width of the scrollbar */
}

.page#page-4 .left::-webkit-scrollbar-thumb {
    background-color: #888; /* Color of the scrollbar thumb */
    border-radius: 4px; /* Rounded corners for the scrollbar thumb */
    margin-top: 20px;
}

.page#page-4 .left::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Color when hovered */
}

.page#page-4 .left::-webkit-scrollbar-track {
    background: #f1f1f1; /* Background color of the scrollbar track */
}

/* Custom scrollbar track with margin adjustments */
.page#page-4 .left::-webkit-scrollbar-track {
    background: #f1f1f1; /* Background color of the scrollbar track */
    border-radius: 50px; /* Fully rounded track corners */
    margin-top: 50px; /* Margin from the top of the track */
    margin-bottom: 65px; /* Margin from the bottom of the track */
}

.page#page-4 .right {
    width: 50%; /* Set the width to fit the remaining space */
    padding-left: 20px; /* Maintain padding */
    padding-right: 40px; /* Add padding on the right */
    box-sizing: border-box; /* Ensure padding is included in the width */
    height: 100%; /* Make sure it takes up the full height */
    overflow-y: auto; /* Enable vertical scrolling */
    margin-top: -20px; /* Pushes the section down */
}

/* Custom Scrollbar Styles for Right Part */
.page#page-4 .right::-webkit-scrollbar {
    width: 8px; /* Width of the scrollbar */
}

.page#page-4 .right::-webkit-scrollbar-thumb {
    background-color: #888; /* Color of the scrollbar thumb */
    border-radius: 4px; /* Rounded corners for the scrollbar thumb */
}

.page#page-4 .right::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Color when hovered */
}

.page#page-4 .right::-webkit-scrollbar-track {
    background: #f1f1f1; /* Background color of the scrollbar track */
}

/* Button Styles */
.page#page-4 .left .buttons-container {
    display: flex;
    margin-left: 20px;
    flex-wrap: wrap;
    gap: 6px; /* Adjust gap between buttons as needed */
    padding: 0 10px;
    justify-content: flex-start;
    margin: 0;
    box-sizing: border-box;
}

.page#page-4 .page-part.right p {
    margin-top: 10px;
}

.page#page-4 .left .btn {
    flex: 1 1 calc(25% - 10px); /* 4 buttons per row with a gap */
    padding: 10px;
    margin: 4px 0 4px 0; /* Adjust margins to fit layout */
    background-color: lightcoral;
    font-size: 12px; /* Uniform text size */
    text-align: center; /* Center text */
    cursor: pointer;
    box-sizing: border-box; /* Ensure padding and border are included in the width */
    border-radius: 4px; /* Optional: rounded corners for buttons */
    transition: background-color 0.3s, border-color 0.3s; /* Smooth transition on hover */
    margin-bottom: 20px; /* Add space below the buttons */  
}

.page#page-4 .left .btn:hover {
    background-color: lightblue;
}

@media (max-width: 600px) {
    .page#page-4 .left .btn {
        flex: 1 1 calc(50% - 12px); /* 2 buttons per row on smaller screens */
    }
}

/* Style for the image gallery */
.page#page-4 #image-gallery {
    display: flex;
    margin-left: -20px; /* Adjust as needed */
    flex-direction: row; /* Align images horizontally */
    justify-content: flex-start; /* Align images to the left */
    gap: 20px; /* Space between images */
    padding-left: 0;
    width: 100%; /* Ensure the gallery takes full width */
    overflow-x: auto; /* Allow horizontal scrolling if needed */
    margin-left: 4px;
    margin-top: 20px; /* Add top margin to create space above the images */
}

/* Style for each image container */
.page#page-4 #image-gallery .page-4-image-container {
    position: relative;
    display: inline-block;
    width: auto; /* Adjust to fit the container properly */
    max-width: 100%; /* Keep the max width for large screens */
    height: auto;
    overflow: hidden; /* Hide overflow to maintain clean edges */
    margin-bottom: 24px;
    border-radius: 50px;
}

/* Image Styling */
.page#page-4 #image-gallery .page-4-image-container img {
    width: 100%; /* Ensure the image fits the container width */
    height: auto; /* Maintain aspect ratio */
    transition: transform 0.5s ease; /* Smooth transition for transform */
}

/* Hover Effect Info Container */
.page#page-4 #image-gallery .page-4-info {
    position: absolute;
    bottom: 0; /* Start from the bottom of the container */
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 0; /* Initially hidden */
    transform: translateY(100%); /* Initially positioned below the container */
    transition: transform 0.7s ease, opacity 0.7s ease; /* Smooth transition for both transform and opacity */
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden; /* Ensure that text does not overflow */
}

/* Hover effect to slide up the info container */
.page#page-4 #image-gallery .page-4-image-container:hover .page-4-info {
    transform: translateY(0); /* Slide up into view */
    opacity: 1; /* Make it visible on hover */
}

/* Info text styling adjustments */
.page#page-4 #image-gallery .page-4-info h2 {
    margin: 0 0 10px 0; /* Space below heading */
    font-size: 16px; /* Size for heading */
    line-height: 1.3; /* Line height for readability */
    white-space: normal; /* Allow text to wrap */
    color: white;
}

.page#page-4 #image-gallery .page-4-info p {
    margin: 0 0 10px 0; /* Space below paragraph */
    font-size: 15px; /* Size for paragraph text */
    line-height: 1.8; /* Line height for better fit */
    padding-left: 14px; /* Left padding for paragraph */
    color: white;
}

.page#page-4 #image-gallery .page-4-info a {
    color: #ff0; /* Yellow color for links */
    text-decoration: none; /* Remove underline by default */
    font-size: 14px; /* Size for link text */
    margin-top: 5px; /* Space above the link */
    /* Consider allowing wrapping for better responsiveness */
}

.page#page-4 #image-gallery .page-4-info a:hover {
    text-decoration: underline; /* Underline on hover */
}

.page-part.right {
    margin-top: -20px; /* Pushes the section down */
}

.page-part.right img {
    width: 100%; /* Makes the image responsive to the container's width */
    height: auto; /* Maintains the aspect ratio */
    max-width: 400px; /* Sets a maximum width for the image */
    padding: 10px; /* Adds padding around the image */
    margin-top: 10px; /* Adds space above the image */
}

/* Inside book-style.css */
.page-part.right p {
    margin-left: 20px; /* Adjust the value as needed */
}





/* Page 5 specific styles */
#page-5 .page-content {
    padding: 20px; /* Adds 20 pixels of padding around the page content for spacing */
}


/* Styles for the <h2> element */
#page-5 .page-content h2 {
    font-size: 30px; /* Sets the font size of the heading to 2 times the default size */
    margin-top: -10px; /* Moves the heading 10 pixels upwards (negative margin) */
    margin-bottom: 60px; /* Adds 60 pixels of space below the heading */
    text-align: center; /* Centers the heading text horizontally */
    color: #333; /* Sets the text color to a dark gray for better readability */
    text-transform: uppercase; /* Transform text to uppercase */
    font-weight: bold;
}

/* Content wrapper for better layout control */
#page-5 .content-wrapper {
    display: flex; /* Uses flexbox layout for the content wrapper */
    align-items: flex-start; /* Aligns child items to the top of the container */
}

/* Styles for the left content container */
#page-5 .left-content {
    flex: 1; /* Allows the left content to grow and fill available space */
    max-width: 50%; /* Sets a maximum width of 50% of the container's width */
    margin-right: 50px; /* Adds 50 pixels of space to the right of the left content */
    position: relative; /* Allows absolute positioning of child elements within this container */
}

/* Container for the image and hover effect */
#page-5 .image-container {
    position: relative; /* Allows absolute positioning of child elements */
    background-color: #ffffff; /* Sets the background color to white for the image container */
    border-radius: 50px; /* Match image border radius */
    overflow: hidden; /* Ensures that content does not get clipped (visible outside) */
}

/* Line break for spacing */
.line-break {
    display: block; /* Makes it behave like a block element */
    margin-top: 10px; /* Adjust as needed for spacing */
}

/* Keyframes for the rotation effect */
@keyframes rotate-in {
    0% {
        transform: rotateY(-720deg); /* Start rotated to the left */
        opacity: 0; /* Fully transparent */
    }
    100% {
        transform: rotateY(0deg); /* End in the default position */
        opacity: 1; /* Fully opaque */
    }
}

/* Product image styling */
#page-5 .product-image {
    max-width: 450px; /* Set a maximum width for the image */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Ensure no extra space below */
    margin: 0 auto; /* Center the image horizontally */
    padding: 0; /* Removes any padding */
    border: none; /* Removes any border */
    box-shadow: none; /* Removes any shadow */
    border-radius: 50px; /* Match hover info border radius */
    opacity: 1; /* Ensures image is fully opaque */
    animation: rotate-in 2s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; /* Apply the rotation effect */
}

/* Hover information styling */
.hover-info {
    position: absolute; /* Position it absolutely within the container */
    bottom: -100%; /* Start off-screen below the image */
    left: 0; /* Align to the left */
    width: 100%; /* Cover full width of the image */
    height: 100%; /* Cover full height of the image */
    background: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
    color: #fff; /* White text for visibility */
    display: flex; /* Use flexbox for centering */
    flex-direction: column; /* Stack items vertically */
    justify-content: center; /* Center items vertically */
    align-items: center; /* Center items horizontally */
    text-align: center; /* Center text */
    opacity: 0; /* Initially hidden */
    transition: bottom 1.2s ease, opacity 0.3s ease; /* Increased slide duration to 1.2s */
    border-radius: 50px; /* Match image border radius */
    z-index: 1; /* Ensure it is behind the link */
}

/* Show the hover effect only when the image is hovered over */
.image-container:hover .hover-info {
    bottom: 0; /* Move into view */
    opacity: 1; /* Show hover info on hover */
    pointer-events: auto; /* Ensure hover info is clickable */
}

/* Prevent interaction with hover-info initially */
.hover-info {
    pointer-events: none; /* Disable interaction until spinning is complete */
}

/* Class to enable hover interaction */
.image-container.hover-enabled .hover-info {
    pointer-events: auto; /* Allow interaction when enabled */
}

/* Add a class to disable hover effect */
.image-container.no-hover .hover-info {
    opacity: 0; /* Keep it hidden */
}

/* Styles for the right content container */
#page-5 .right-content {
    flex: 1; /* Allows the right content to grow and fill available space */
    max-width: 50%; /* Sets a maximum width of 50% of the container's width */
}





/* General Styles */
#page-6 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


#page-6 {
    overflow: hidden; /* Ensure no scroll for the entire page */
    height: 100vh; /* Full viewport height */
    position: relative; /* Needed for positioning the separator */
}

/* Custom Scrollbar Styles for Page 6 */
#page-6 .left-part::-webkit-scrollbar,
#page-6 .right-part::-webkit-scrollbar {
    width: 8px; /* Width of the scrollbar */
}

/* Custom scrollbar thumb with rounded corners and hover effect */
#page-6 .left-part::-webkit-scrollbar-thumb,
#page-6 .right-part::-webkit-scrollbar-thumb {
    background-color: #888; /* Color of the scrollbar thumb */
    border-radius: 50px; /* Fully rounded corners */
    border: 2px solid transparent; /* Space around the thumb */
    min-height: 20px; /* Prevent the scrollbar thumb from becoming too small */
}

#page-6 .left-part::-webkit-scrollbar-thumb:hover,
#page-6 .right-part::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Color when hovered */
}

/* Custom scrollbar track with margin adjustments */
#page-6 .left-part::-webkit-scrollbar-track,
#page-6 .right-part::-webkit-scrollbar-track {
    background: #f1f1f1; /* Background color of the scrollbar track */
    border-radius: 50px; /* Fully rounded track corners */
    margin-top: 20px; /* Margin from the top of the track */
    margin-bottom: 100px; /* Margin from the bottom of the track */
}

/* Page Layout Styles */
#page-6 .page-content {
    display: flex;
    height: 100%; /* Full viewport height */
    padding: 20px;
    box-sizing: border-box;
}

/* Independent Heading Style - Professional Blogs */
#page-6 .professional-blogs-heading {
    position: relative;
    font-size: 29px;
    text-align: center; /* Center the text */
    margin-top: 0; /* Remove any margin from the top */
    margin-bottom: 20px; /* Add space below the heading */
    width: 100%; /* Ensure it spans across the entire top */
    color: #2c3e50; /* Darker color for emphasis */
    text-transform: uppercase; /* Transform text to uppercase */
    font-weight: bold;
}

/* Left Part Styles */
#page-6 .left-part {
    flex: 1;
    display: flex;
    flex-direction: column; /* Stack children vertically */
    padding-right: 15px; /* Increase padding to create space from the separator */
    box-sizing: border-box;
    overflow-y: auto; /* Enable vertical scrolling */
    padding-bottom: 10%;
    position: relative;
}

/* Left Part - Heading */
#page-6 .left-part .left-heading {
    position: relative;
    font-size: 14px;
    text-align: center;
    margin-top: -10px;
    color: #333;
}

/* Left Part - Centered Image */
#page-6 .left-part .centered-image-left {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    height: auto;
    border-radius: 30px;
    border-bottom: 30px;
}

/* Left Part - Electric Shaver Heading */
#page-6 .left-part .electric-shaver-heading {
    margin-top: 20px;
    text-align: left;
    font-size: 20px;
    color: #333;
    margin-left: 20px;
    margin-right: 20px;
}

/* Left Part - Electric Shaver Paragraph */
#page-6 .left-part .electric-shaver-paragraph {
    margin-top: 14px;
    text-align: justify;
    font-size: 16px;
    line-height: 1.5;
    margin-left: 20px;
    margin-right: 20px;
}

/* Left Part - Additional Content */
#page-6 .left-part .extra-content {
    margin-top: 10px;
    text-align: justify;
    font-size: 15px;
    line-height: 1.5;
    margin-left: 20px;
    margin-right: 20px;
}

/* Left Part - Read More Link */
#page-6 .left-part .read-more-link {
    display: block;
    margin: 28px 20px 0; /* Adjusted to move up */
    text-align: center;
    font-size: 16px;
    color: #007BFF; /* Blue color for the link */
    text-decoration: none;
    font-weight: bold;
}

#page-6 .left-part .read-more-link:hover {
    text-decoration: underline;
}

/* Right Part Styles */
#page-6 .right-part {
    flex: 1;
    display: flex;
    flex-direction: column; /* Stack children vertically */
    padding-left: 10px;
    box-sizing: border-box;
    overflow-y: auto; /* Enable vertical scrolling */
    padding-bottom: 10%;
    position: relative;
    margin-left: 20px; /* Adjust this value as needed */
}

/* Right Part - Centered Image */
#page-6 .right-part .centered-image-right {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: calc(100% - 40px);
    height: auto;
    border-radius: 30px;
}

/* Right Part - Heading Style - Prof blog 2 */
#page-6 .right-part .right-part-heading {
    margin-top: 20px;
    text-align: left;
    font-size: 20px;
    color: #333;
    margin-left: 20px;
    margin-right: 20px;
}

/* Right Part - First Paragraph */
#page-6 .right-part .first-additional-content-paragraph {
    margin-top: 10px;
    text-align: justify;
    font-size: 16px;
    line-height: 1.5;
    margin-left: 20px;
    margin-right: 20px;
}

/* Right Part - Additional Content */
#page-6 .right-part .additional-content {
    margin-top: 10px;
    text-align: justify;
    font-size: 16px;
    line-height: 1.5;
    margin-left: 20px;
    margin-right: 20px;
}

/* Right Part - Read More Link */
#page-6 .right-part .read-more-link {
    display: block;
    margin: 38px 20px 0; /* Adjusted to move up */
    text-align: center;
    font-size: 16px;
    color: #007BFF; /* Blue color for the link */
    text-decoration: none;
    font-weight: bold;
}

#page-6 .right-part .read-more-link:hover {
    text-decoration: underline;
}

/* Separator line between left and right parts */
#page-6 .separator {
    width: 2px;
    background-color: #000;
    height: calc(100vh - 40px); /* Adjusted to fit within viewport minus padding */
    position: absolute;
    top: 72px; /* Adjust according to your layout */
    left: 51%;
    transform: translateX(50%);
}




/* General Styles */
#page-7 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#page-7 {
    overflow-y: auto;
    height: 100vh;
    margin-bottom: 76px;
    padding-right: 10px; /* Adjust this value as needed */
}

/* Custom Scrollbar Styles for Page 7 */
#page-7::-webkit-scrollbar {
    width: 8px; /* Width of the scrollbar */
}

#page-7::-webkit-scrollbar-thumb {
    background-color: #888; /* Color of the scrollbar thumb */
    border-radius: 4px; /* Rounded corners for the scrollbar thumb */
}

#page-7::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Color when hovered */
}

#page-7::-webkit-scrollbar-track {
    background: #f1f1f1; /* Background color of the scrollbar track */
}

/* Page content and image styles */
#page-7 h2 {
    margin-top: -10px;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    color: #2c3e50; /* Darker color for emphasis */
    text-transform: uppercase; /* Transform text to uppercase */
}

#page-7 .page-content {
    padding: 20px;
    box-sizing: border-box;
    min-height: 100%;
}

#page-7 .image-grid-page-7 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: -10px;
}

#page-7 .image-item-page-7 {
    padding: 8px;
    border-radius: 50px;
    text-align: center;
    height: 242px;
    margin-top: 20px;
    overflow: hidden;
}

#page-7 .image-item-page-7 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
    transition: transform 0.3s ease;
    cursor: pointer;
}

#page-7 .image-item-page-7 img:hover {
    transform: scale(1.05);
}

/* Modal Styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh; /* Full-screen modal */
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content {
    width: 79% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: 100% !important;
    object-fit: cover !important;
    border-radius: 50px;
}

#imageModal .modal-content {
    width: auto;
    height: 100%;
    max-width: none;
    max-height: 100%;
    object-fit: cover;
    margin-top: -26px; /* Adjust this value to bring the modal image down */
}

.close {
    position: absolute;
    top: 50px;
    margin-right: 35px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* Common styling for both navigation buttons */
.nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5); /* semi-transparent background */
    color: white; /* Arrow color */
    border: none;
    font-size: 40px;
    padding: 10px;
    cursor: pointer;
    border-radius: 50%; /* Rounded button */
    transition: background-color 0.3s ease; /* Smooth hover effect */
    z-index: 10; /* Make sure buttons are above other content */
}

/* Hover effect for navigation buttons */
.nav-button:hover {
    background-color: rgba(0, 0, 0, 0.8); /* Darken background on hover */
}

/* Specific styling for the previous button */
.prev {
    left: 10px; /* Position it on the left side of the modal */
}

/* Specific styling for the next button */
.next {
    right: 10px; /* Position it on the right side of the modal */
}

/* Optional: Add styling for touchscreens to increase button size */
@media (max-width: 768px) {
    .nav-button {
        font-size: 50px; /* Larger font size for smaller screens */
        padding: 15px;   /* Increase padding */
    }
}






/* General Styles */
#page-8 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#page-8 {
    overflow-y: auto;
    height: 100vh;
    margin-bottom: 76px;
}

/* Custom Scrollbar Styles for Page 8 */
#page-8::-webkit-scrollbar {
    width: 8px; /* Width of the scrollbar */
}

#page-8::-webkit-scrollbar-thumb {
    background-color: #888; /* Color of the scrollbar thumb */
    border-radius: 4px; /* Rounded corners for the scrollbar thumb */
}

#page-8::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Color when hovered */
}

#page-8::-webkit-scrollbar-track {
    background: #f1f1f1; /* Background color of the scrollbar track */
}

#page-8 .page-content {
    padding: 20px;
    box-sizing: border-box;
    min-height: 100%;
}

#page-8 .image-grid-page-8 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px; /* Increase this value to add more space between images */
    margin-top: -28px; /* Adjust this value if needed */
}

#page-8 .image-item-page-8 {
    padding: 8px;
    border-radius: 50px; /* Keeps the border radius as 50px */
    text-align: center;
    height: 280px;
    margin-top: 10px;
    overflow: hidden;
}

#page-8 .image-item-page-8 img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images cover the space without distortion */
    border-radius: 5px; /* Keeps the border radius of images as 5px */
    transition: transform 0.3s ease; /* Smooth transition for hover effect */
    cursor: pointer; /* Cursor changes to pointer on hover */
}

#page-8 .image-item-page-8 img:hover {
    transform: scale(1.05);
}

/* Modal styles (shared between pages) */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.8);
}

.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

.close {
    position: absolute;
    top: 50px;
    right: 35px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

.nav-button {
    position: absolute;
    top: 50%;
    font-size: 24px;
    color: red;
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 1001;
    border-radius: 50%;
    transform: translateY(-50%);
}




/* Page 9 Styles */
.unique-heading {
    font-size: 2em;
    margin-bottom: 20px;
    text-align: center;
    color: #333;
}

/* Page Layout Styles for Page 9 */
#page-9 .page-content {
    display: flex;
    height: 100%; /* Full viewport height */
    padding: 20px;
    box-sizing: border-box;
}

/* Page Layout Styles for Page 9 */
#page-9 {
    overflow: hidden; /* Ensure no scroll for the entire page */
    height: 100vh; /* Full viewport height */
    position: relative; /* Needed for positioning the separator */
}

/* Independent Heading Style - Page 9 */
#page-9 .unique-heading {
    position: relative;
    font-size: 30px;
    font-weight: bold;
    text-align: center; /* Center the text */
    margin-top: 0; /* Remove any margin from the top */
    margin-bottom: 20px; /* Add space below the heading */
    width: 100%; /* Ensure it spans across the entire top */
    color: #2c3e50; /* Darker color for emphasis */
    text-transform: uppercase; /* Transform text to uppercase */
}

/* Left Part Styles for Page 9 */
#page-9 .unique-left-part {
    flex: 1;
    display: flex;
    flex-direction: column; /* Stack children vertically */
    padding-right: 25px; /* Increase padding to create space from the separator */
    box-sizing: border-box;
    overflow-y: auto; /* Enable vertical scrolling */
    padding-bottom: 10%; /* Adjust padding to fit the content */
    position: relative;
    scroll-snap-type: y mandatory; /* Ensure snapping on scroll */
}

/* Adjust the heading style inside the left part */
#page-9 .unique-left-heading {
    font-size: 18px; /* Slightly smaller font size for headings */
    margin-top: 30px; /* Space above the heading */
    margin-bottom: 10px; /* Space below the heading */
    color: #333;
    text-align: left; /* Align text to the left */
    margin-left: 10px; /* Optional: Add margin for left alignment */
}

/* Adjust video containers inside the left part */
#page-9 .unique-left-video {
    margin-bottom: 17.5vh; /* Increase vertical space between videos */
    scroll-snap-align: center; /* Each video snaps to the top when scrolled */
}

#page-9 .unique-left-video iframe {
    width: 102%; /* Ensure videos are responsive */
    max-width: 800px; /* Remove any maximum width restriction */
    height: 245px; /* Fixed height */
    border-radius: 30px;
}

/* Right Part Styles for Page 9 */
#page-9 .unique-right-part {
    flex: 1;
    display: flex;
    flex-direction: column; /* Stack children vertically */
    padding-left: 30px; /* Increase padding to create space from the scrollbar */
    padding-right: 10px; /* Add padding to create space on the right side */
    box-sizing: border-box;
    overflow-y: auto; /* Enable vertical scrolling */
    padding-bottom: 10%; /* Adjust padding to fit the content */
    position: relative;
    margin-left: 20px;
    scroll-snap-type: y mandatory; 
}

/* Adjust iframe styling to ensure visibility */
#page-9 .unique-right-video {
    margin-bottom: 17.5vh; /* Increase vertical space between videos */
    scroll-snap-align: center; /* Each video snaps to the top when scrolled */
}

#page-9 .unique-right-part .unique-right-video iframe {
    width: 100%; /* Ensure videos are responsive */
    max-width: 800px; /* Remove any maximum width restriction */
    height: 245px; /* Fixed height */
    border-radius: 30px;
}

/* Right Part - Heading Style for Page 9 */
#page-9 .unique-right-heading {
    font-size: 18px; /* Same font size as left part headings */
    margin-top: 30px; /* Space above the heading */
    margin-bottom: 10px; /* Space below the heading */
    color: #333;
    text-align: left; /* Align text to the left */
    margin-left: 10px; /* Optional: Add margin for left alignment */
}

/* Separator line between left and right parts for Page 9 */
#page-9 .unique-separator {
    width: 2px;
    background-color: #000;
    height: calc(100vh - 40px); /* Adjusted to fit within viewport minus padding */
    position: absolute;
    top: 72px; /* Adjust according to your layout */
    left: 50%;
    transform: translateX(-50%); /* Center the separator */
}

/* Fullscreen overlay styling */
.video-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent background */
    align-items: center;
    justify-content: center;
    z-index: 1000; /* Ensure it sits on top of other content */
}

/* Fullscreen video styling */
#overlay-video {
    width: 80%; /* Adjust width as needed */
    height: 80%; /* Adjust height as needed */
}

/* Close button styling */
.video-overlay .close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 36px;
    color: #fff;
    cursor: pointer;
    z-index: 1001; /* Ensure it sits above the video */
}

/* Custom Scrollbar Styles for Page 9 */
#page-9 .unique-left-part::-webkit-scrollbar,
#page-9 .unique-right-part::-webkit-scrollbar {
    width: 8px; /* Width of the scrollbar */
}

#page-9 .unique-left-part::-webkit-scrollbar-thumb,
#page-9 .unique-right-part::-webkit-scrollbar-thumb {
    background-color: #888; /* Color of the scrollbar thumb */
    border-radius: 4px; /* Rounded corners */
}

#page-9 .unique-left-part::-webkit-scrollbar-thumb:hover,
#page-9 .unique-right-part::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Color when hovered */
}

/* Adjust scrollbar positioning in the right part */
#page-9 .unique-right-part {
    padding-right: 16px; /* Add padding to create space for the scrollbar */
    margin-right: -4px; /* Move the scrollbar 8px to the right */
    margin-top: 20px;
    margin-bottom: 68px;
}

/* Adjust scrollbar positioning in the right part */
#page-9 .unique-left-part {
    padding-right: 16px; /* Add padding to create space for the scrollbar */
    margin-right: -4px; /* Move the scrollbar 8px to the right */
    margin-top: 20px;
    margin-bottom: 68px;
}








/* Page Layout Styles */
#page-10 .page-content {
    display: flex;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
}

#page-10 {
    overflow: hidden;
    height: 100vh;
    position: relative;
}

/* Heading Style - Blog Posts */
#page-10 .blog-section-heading {
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    margin-top: 0;
    margin-bottom: 20px;
    width: 100%;
    color: #2c3e50; /* Darker color for emphasis */
    text-transform: uppercase; /* Transform text to uppercase */
}

/* Left Column Styles */
#page-10 .left-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-right: 36px;
    box-sizing: border-box;
    overflow-y: auto;
    padding-bottom: 10%;
    position: relative;
}

/* Custom Scrollbar Styles and Positioning for Page 10 */

/* Adjust scrollbar positioning in the left column */
#page-10 .left-column {
    padding-right: 16px; /* Add padding to create space for the scrollbar */
    margin-right: -4px; /* Move the scrollbar 8px to the right */
    margin-top: 16px;
    margin-bottom: 68px;
}

/* Optional: Custom scrollbar styling */
#page-10 .left-column::-webkit-scrollbar {
    width: 8px; /* Adjust the width of the scrollbar */
}

/* Custom scrollbar thumb with rounded corners */
#page-10 .left-column::-webkit-scrollbar-thumb {
    background: #888; /* Thumb color */
    border-radius: 10px; /* Rounded corners for the thumb */
}

#page-10 .left-column::-webkit-scrollbar-thumb:hover {
    background: #555; /* Darker color when hovered */
}

/* Left Blog Image */
#page-10 .left-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    height: auto;
    border-radius: 30px;
}

/* Left Blog Title */
#page-10 .gadget-title {
    margin-top: 20px;
    text-align: left;
    font-size: 20px;
    color: #333;
    margin-left: 20px;
    margin-right: 20px;
}

/* Left Blog Description */
#page-10 .gadget-description {
    margin-top: 14px;
    text-align: justify;
    font-size: 16px;
    line-height: 1.5;
    margin-left: 20px;
    margin-right: 20px;
}

/* Left "View More" Link */
#page-10 .view-more-link {
    display: block;
    margin: 30px 20px 0;
    text-align: center;
    font-size: 16px;
    color: #007BFF;
    text-decoration: none;
    font-weight: bold;
}

#page-10 .view-more-link:hover {
    text-decoration: underline;
}

/* Right Column Styles */
#page-10 .right-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-right: 26.5px;
    box-sizing: border-box;
    overflow-y: auto;
    padding-bottom: 10%;
    position: relative;
    margin-left: 50px; /* Adjust this value to move right column content */
}

/* Custom Scrollbar Styles and Positioning for Page 10 - Right Column */

/* Adjust scrollbar positioning in the right column */
#page-10 .right-column {
    padding-right: 16px; /* Add padding to create space for the scrollbar */
    margin-right: -4px; /* Move the scrollbar 8px to the right */
    margin-top: 12px;
    margin-bottom: 68px;
}

/* Optional: Custom scrollbar styling */
#page-10 .right-column::-webkit-scrollbar {
    width: 8px; /* Adjust the width of the scrollbar */
}

/* Custom scrollbar thumb with rounded corners */
#page-10 .right-column::-webkit-scrollbar-thumb {
    background: #888; /* Thumb color */
    border-radius: 4px; /* Rounded corners for the thumb */
}

#page-10 .right-column::-webkit-scrollbar-thumb:hover {
    background: #555; /* Darker color when hovered */
}

/* Right Blog Image */
#page-10 .right-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: calc(100% - 40px);
    height: auto;
    margin-left: 30px;
    border-radius: 50px;
}

/* Right Blog Title */
#page-10 .blog-title {
    margin-top: 20px;
    text-align: left;
    font-size: 20px;
    color: #333;
    margin-left: 30px;
    margin-right: 20px;
}

/* Right Blog Description */
#page-10 .content-paragraph {
    margin-top: 10px;
    text-align: justify;
    font-size: 16px;
    line-height: 1.5;
    margin-left: 30px;
    margin-right: 20px;
}

/* Divider line between left and right columns */
#page-10 .divider {
    width: 2px;
    background-color: #000;
    height: calc(100vh - 40px);
    position: absolute;
    top: 72px;
    left: 51.5%;
    transform: translateX(50%);
}

/* Second Blog Styles */

/* Left Column - Second Blog */
#page-10 .second-blog-left {
    margin-top: 40px; /* Spacing between blogs */
}

/* Right Column - Second Blog */
#page-10 .second-blog-right {
    margin-top: 40px; /* Spacing between blogs */
}

/* Meta Information Container */
#page-10 .meta-info {
    display: flex;
    align-items: center; /* Align items vertically centered */  
    gap: 10px; /* Space between items */
    font-size: 14px;
    color: #777;
    margin: 10px 20px 0;
    white-space: nowrap; /* Prevent text wrapping */
    margin-left: 23px;
}

/* Meta Information Icons */
#page-10 .meta-info .author-icon,
#page-10 .meta-info .date-icon,
#page-10 .meta-info .comments-icon {
    display: flex;
    align-items: center; /* Align icon and text vertically centered */
    gap: 5px; /* Space between icon and text */
    margin: 0; /* Remove default margins */
    padding: 0; /* Remove default padding */
}

/* FontAwesome Icons */
#page-10 .meta-info i {
    font-size: 14px; /* Adjust icon size if needed */
    color: #777;
}

/* Author Link Styling */
#page-10 .author-link {
    color: #000; /* You can adjust this color as per your theme */
    text-decoration: none;
    font-size: 14px; /* Adjust this size as needed */
}

#page-10 .author-link:hover {
    text-decoration: underline;
}

/* Comments Link Styling */
#page-10 .comments-link {
    color: #000; /* You can adjust this color as per your theme */
    text-decoration: none;
}

#page-10 .comments-link:hover {
    text-decoration: underline;
}





/* General styling for Page 11 */
#page-11 {
    position: relative;
    padding: 20px;
    box-sizing: border-box;
    max-height: 100vh; /* Limit the height to viewport height */
    overflow-y: auto; /* Vertical scrollbar only if needed */
    overflow-x: hidden; /* Hide horizontal scrollbar */
}

/* General styling for the top-right image on Page 11 */
#page-11 .top-right-image-container {
    position: absolute;
    top: -20px;
    right: 40%;
}

#page-11 .top-right-image {
    width: 200px; /* Adjust size as needed */
    height: auto;
    border-radius: 5px;
}

/* Contact Information Section specific to Page 11 */
#page-11 .contact-info-section {
    margin-top: 130px; /* Ensure it’s below the top-right image */
    padding: 20px;
}

#page-11 .section-heading {
    font-size: 30px;
    margin-bottom: 20px;
    color: #2c3e50; /* Darker color for emphasis */
    text-transform: uppercase; /* Transform text to uppercase */
    font-weight: bold;
}

#page-11 .contact-list {
    list-style-type: none;
    padding: 0;
}

#page-11 .contact-item {
    font-size: 20px;
    margin-bottom: 25px;
}

/* Ensuring the label has a fixed width so the address starts aligned */
#page-11 .contact-label {
    display: inline-block;
    width: 120px; /* Adjust this width based on your layout */
    vertical-align: top; /* Keeps label aligned with the address */
}

/* Address details aligned properly under the label */
#page-11 .contact-detail {
    display: inline-block;
    max-width: calc(100% - 120px); /* Adjust based on the label width */
    white-space: normal;
    vertical-align: top;
}

/* Specific Styling for Each Contact Type on Page 11 */
#page-11 .address .contact-detail {
    color: #333;
    line-height: 1.8; /* Adjust as needed for readability */
    margin-top: 8px;
}

#page-11 .phone .contact-detail {
    color: #007BFF;
}

#page-11 .fax .contact-detail {
    color: #6C757D;
}

#page-11 .email .contact-detail {
    color: #28A745;
}

#page-11 .email .contact-detail a {
    color: inherit; /* Ensures link inherits color from .email */
    text-decoration: none;
}

#page-11 .email .contact-detail a:hover {
    text-decoration: underline;
}

/* Reset and make the line visible */
.section-divider {
    display: flex; /* Ensure it is visible */
    height: 5px; /* Ensure a height is set */
    margin: 25px 0; /* Space around the line */
    color: blue;
}

/* Styles for the Contact Form Section */
.contact-form-section {
    margin: 20px 0;
    padding: 40px; /* Increase padding for more height */
    background-color: #f9f9f9;
    border-radius: 8px;
    border: 2px solid black; /* Add black border */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column; /* Ensure a column layout */
    align-items: flex-start; /* Align items to the start */
    max-width: 700px;
    margin-bottom: 46px;
}

/* Existing styles remain unchanged */
.form-heading {
    font-size: 30px;
    margin-bottom: 15px;
    color: #333;
}

.responsive-form {
    display: flex;
    flex-direction: column;
    width: 100%; /* Ensure form takes full width */
}

/* Styles for Form Groups */
.form-group {
    margin-bottom: 15px;
    width: 100%; /* Ensure form groups take full width */
}

/* Styles for Labels */
label {
    margin-bottom: 5px;
    font-weight: bold;
    color: #555; /* General color for all labels */
}

/* Specific adjustment for Message Label */
.message-label {
    margin-bottom: 5px; /* Original bottom margin */
    margin-top: -10px !important; /* Move it up by 10px */
}

/* Styles for Input Fields */
input[type="text"],
input[type="email"],
textarea,
select {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box; /* Ensure padding and border are included in width */
}

/* Specific Widths for Input Fields */
input#name {
    width: 300px;
}

input#email {
    width: 350px;
}

select#country-code {
    width: 230px; /* Adjust width for country code dropdown */
}

input#phone {
    width: 200px;
}

/* Styles for Message Textarea */
textarea#message {
    width: 100%; /* Use full width of the form */
    max-width: 500px; /* Maximum width */
    height: 100px; /* Set a fixed height */
    resize: vertical; /* Allow vertical resizing only */
    box-sizing: border-box; /* Include padding in height */
    margin-bottom: -45px;
}

/* Focus Styles */
input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: #007bff; /* Focus color for all inputs */
}

/* Styles for Submit Button */
.submit-button {
    background-color: #007bff;
    color: white;
    padding: 8px 12px; /* Adjust padding if needed */
    border: none;
    border-radius: 4px; 
    font-size: 14px; 
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 120px; /* Set a specific width */
    align-self: flex-start; /* Align button to the start of the form */
    margin-top: 50px;
}

.submit-button:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

/* Styles for the Success Message */
.success-message {
    margin-top: 15px;
    padding: 10px;
    background-color: #e6ffed;
    border: 1px solid #a3d9a5;
    color: #2b8a3e;
    font-weight: bold;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tick-mark {
    font-size: 18px;
    margin-right: 8px;
    color: #2b8a3e;
}

/* Responsive Styles */
@media (max-width: 600px) {
    .form-heading {
        font-size: 20px;
    }
    .submit-button {
        width: 100%; /* Optional: full width on smaller screens */
    }

    #page-1 .image-overlay h4 {
        font-size: 10px;
    }

    #page-1 .page-content p {
        margin-top: -10px;
    }

    /* Adjust .book width on mobile */
    .book {
        width: 95%;  /* Increase the width of the book on smaller screens */
        height: 94%;
        margin-left: 0;  /* Remove negative margin */
        margin-right: 0; /* Remove any margin on the right */
    }

    /* Adjust .page width */
    .page {
        width: 100%;  /* Ensure page takes up full width inside the book */
    }
    
    #page-3 .image-container-top, 
    #page-3 .image-container-bottom {
        margin-left: 10px; /* Shift the image containers to the left */
    }
    
    #page-3 .image-item-top, 
    #page-3 .image-item-bottom {
        margin-left: 10px; /* Shift each image item to the left */
    }


    .page#page-4 .left {
        width: 180%; /* Adjust width to fit with the right section */
        padding-right: 20px; /* Add padding for spacing */
        border-right: 2px solid #000; /* Border to separate the left section */
        height: 100%; /* Ensure it takes up full height of the container */
        overflow-y: auto; /* Enable vertical scrolling */
        box-sizing: border-box; /* Include padding and border in width */
        margin-left: -20px; /* Move the left section content to the left */
    }

     /* Remove the border on mobile */
     .page#page-4 .left {
        border-right: none; /* Remove the border for mobile devices */
    }

    /* Adjust button layout for mobile */
    .page#page-4 .left .btn {
        flex: 1 1 calc(50% - 12px); /* 2 buttons per row on smaller screens */
    }

    /* Stack the left and right parts vertically */
    .page#page-4 .page-content {
        flex-direction: column; /* Stack elements vertically */
    }

    .page#page-4 .left,
    .page#page-4 .right {
        width: 100%; /* Make both parts take up the full width */
        padding: 0 10px; /* Adjust padding for better spacing */
    }

    /* Adjust margin for the right section */
    .page#page-4 .right {
        margin-top: 20px; /* Adds spacing between the sections */
        min-width: 300px;
        margin-left: -20px;
    }

    /* Stack left-content and right-content vertically */
    #page-5 .content-wrapper {
        flex-direction: column; /* Stack items vertically */
        gap: 20px; /* Add space between left-content and right-content */
    }

    /* Ensure full width for both left-content and right-content on mobile */
    #page-5 .left-content,
    #page-5 .right-content {
        max-width: 100%; /* Full width */
        margin: 0; /* Remove side margins */
    }

    /* Adjust the image size if needed to avoid overflow */
    #page-5 .product-image {
        width: 100%; /* Full width of container */
        height: auto; /* Maintain aspect ratio */
    }

    /* Stack left-part and right-part vertically */
    #page-6 .page-content {
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center the content horizontally */
    }

    /* Adjust left-part and right-part to full width on mobile */
    #page-6 .left-part,
    #page-6 .right-part {
        max-width: 100%; /* Full width */
        margin: 0; /* Remove side margins */
    }

    #page-6 .left-part {
        margin-top: -25px;
    }

    /* Increase max-height of right-part for scrollable area */
    #page-6 .right-part {
        max-height: 400px; /* Adjust as needed to ensure full visibility */
        overflow-y: auto; /* Enable scrolling within right-part */
        padding-bottom: 150px; /* Extra padding for the read-more-link */
    }

    /* Modify the separator to be a horizontal line */
    #page-6 .separator {
        width: 90%; /* Width of the horizontal line */
        height: 2px; /* Thin line for separator */
        background-color: #000;
        position: relative; /* Position it relative to the flow */
        top: 0; /* Remove the absolute top position */
        left: 0; /* Remove the absolute left position */
        margin: 20px 0; /* Add vertical spacing around the separator */
        transform: none; /* Remove any transform applied */
    }
    
    #page-9 .page-content {
        display: flex;
        flex-direction: column; /* Stack left and right parts vertically */
        padding: 0 10px; /* Add smaller horizontal padding */
        box-sizing: border-box;
        height: 100vh; /* Full viewport height */
        overflow: hidden; /* Prevent scrolling the full page */
    }

    /* Left Part Styling */
    #page-9 .unique-left-part {
        flex: 1;
        padding: 10px 0;
        box-sizing: border-box;
        margin-bottom: 20px; /* Space below left section */
        overflow-y: auto; /* Enable vertical scrolling */
        max-height: calc(50vh - 20px); /* Control height to fit separator */
        position: relative;
        z-index: 0; /* Ensure it scrolls below the separator */
    }

    /* Right Part Styling */
    #page-9 .unique-right-part {
        flex: 1;
        padding: 10px 0;
        box-sizing: border-box;
        margin-top: 20px; /* Space between left and right parts */
        overflow-y: auto; /* Enable vertical scrolling */
        max-height: calc(50vh - 20px); /* Control height to fit separator */
        position: relative;
        z-index: 0; /* Same z-index as left to maintain structure */
    }

    /* Separator Styling */
    #page-9 .unique-separator {
        width: 90%; /* Full width for mobile */
        height: 2px; /* Thin separator line */
        background-color: #000;
        position: fixed; /* Fixed position */
        top: 50%; /* Center vertically on the viewport */
        left: 50%;
        z-index: 1; /* Higher z-index to stay above scrolling content */
    }

    /* Video Styling for Left and Right Parts */
    #page-9 .unique-left-video iframe,
    #page-9 .unique-right-video iframe {
        width: 100%; /* Ensure videos fill available width */
        height: auto; /* Keep aspect ratio */
        border-radius: 15px; /* Optional rounded corners */
        margin-bottom: 20px; /* Space between videos */
    }

    /* Heading Styling for Left and Right Parts */
    #page-9 .unique-left-heading,
    #page-9 .unique-right-heading {
        font-size: 16px; /* Slightly smaller font for mobile */
        color: #333;
        margin-top: 20px; /* Space above heading */
        margin-bottom: 10px; /* Space below heading */
        text-align: center; /* Center the heading */
    }

    /* Custom Scrollbar Styles for Left and Right Parts */
    #page-9 .unique-left-part::-webkit-scrollbar,
    #page-9 .unique-right-part::-webkit-scrollbar {
        width: 8px; /* Width of the scrollbar */
    }

    #page-9 .unique-left-part::-webkit-scrollbar-thumb,
    #page-9 .unique-right-part::-webkit-scrollbar-thumb {
        background-color: #888; /* Color of the scrollbar thumb */
        border-radius: 4px; /* Rounded corners */
    }

    #page-9 .unique-left-part::-webkit-scrollbar-thumb:hover,
    #page-9 .unique-right-part::-webkit-scrollbar-thumb:hover {
        background-color: #555; /* Color when hovered */
    }

    /* Stack left and right columns vertically */
    #page-10 .page-content {
        flex-direction: column; /* Stack left-column and right-column vertically */
        align-items: center; /* Center-align content horizontally */
        padding: 10px; /* Adjust padding for mobile */
        overflow-x: hidden;
    }

    /* Full-width columns on mobile */
    #page-10 .left-column {
        max-width: 100%;
        margin: 0; /* Remove side margins */
        padding: 0 10px; /* Add padding for content spacing */
        box-sizing: border-box; /* Ensure padding and borders don't exceed width */
    }
    
    #page-10 .right-column {
        padding-bottom: 60px;
        overflow-x: hidden; /* Prevent horizontal overflow */
        max-width: 100%; /* Ensure it's not wider than the screen */
        margin-left: 20px;
    }

    /* Adjust divider to a horizontal line */
    #page-10 .divider {
        width: 90%; /* Full width of the page content */
        height: 2px; /* Thin line for horizontal divider */
        background-color: #000;
        position: relative; /* No absolute positioning */
        top: 0;
        left: 0;
        margin: 20px 0; /* Add vertical space around the divider */
        transform: none; /* Remove any transformation */
    }

    /* Adjust images and content padding for a better fit */
    #page-10 .left-image,
    #page-10 .right-image {
        max-width: 100%; /* Ensure images fit within mobile screen width */
        height: auto; /* Maintain aspect ratio */
    }

    /* Adjust title, description, and other text styles for better readability */
    #page-10 .gadget-title,
    #page-10 .blog-title {
        font-size: 18px; /* Slightly smaller font for mobile */
    }

    #page-10 .gadget-description,
    #page-10 .content-paragraph {
        font-size: 14px; /* Adjust font size for readability */
    }

    /* Ensure meta-info section is well-spaced */
    #page-10 .meta-info {
        flex-wrap: wrap; /* Allow wrapping for better fit */
        justify-content: center; /* Center content in mobile view */
        gap: 5px; /* Reduce space between items */
    }

    .navigation-buttons {
        position: fixed;
        bottom: 5px;
        width: 100%;
        text-align: center;
        z-index: 0; /* Keep below the main content */
    }
    
    input#name {
        width: 240px;
    }
    
    input#email {
        width: 240px;
    }
    
}

.notification {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px;
    border-radius: 5px;
    font-size: 16px;
    z-index: 1000;
    display: none; /* Hidden by default */
    opacity: 0;  /* Start with zero opacity */
    transition: opacity 0.5s ease; /* Smooth transition for opacity */
}

.notification.show {
    display: block; /* Display the notification */
    opacity: 1; /* Make the notification visible */
}

@media (max-width: 600px) {
    /* Only show the notification on mobile (600px or below) */
    .notification {
        display: none; /* Hide it by default for mobile */
    }
}