/* styles.css */

:root {
    --primary-color: #a28050;
    /* Light gold color */
    --secondary-color: #333; /* #9f8153 */
    /* Dark grey/black */
    --background-color: #f9f9f9;
    /* Light grey */
    --white-color: #fff;
    /* White */
    --font-family: 'Roboto', sans-serif;
    --spacing-unit: 1rem;
    /* Standard spacing */
}

body {
    font-family: var(--font-family);
    background-color: var(--background-color);
    color: var(--secondary-color);
}

main {
    padding: var(--spacing-unit);
}

section {
    margin-bottom: calc(var(--spacing-unit) * 3);
    background-color: var(--white-color);
    padding: var(--spacing-unit) * 2;
    border-radius: 8px;
  /*  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */ /* remove the comment if you want box shadow */
}

footer {
    background-color: #f4f4f4;
    color: var(--white-color);
    text-align: center;
    padding: var(--spacing-unit);
    margin-top: calc(var(--spacing-unit) * 3);
}

header {
    background-color: var(--white-color);
    padding: calc(var(--spacing-unit) / 2) var(--spacing-unit);
    /* Reduced header padding */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 10;
}

#customCarousel {
    margin-bottom: 0;
    /* Removes the space between the slider and the business section */
}

#customCarousel .carousel-caption {
    color: var(--primary-color);
    /* Uses the primary color */
    font-weight: 700;
    /* Use this to make the headings bold */
}

.container {
    max-width: 1300px;
    /* Increased width */
    margin: 0 auto;
    padding-left: 10px;
    /* Shift header to the left */
    padding-right: 10px;
    /* Shift header to the left */
}

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

.navbar-brand img {
    max-width: 250px;
    height: auto;
    display: block;
    margin-left: 20px;
    margin-right: 2rem;
}

.menu-lines {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: 10px;
    margin-bottom: 1rem;
    margin-left: -40px;
}

.menu-line {
    width: 32px;
    height: 0.15rem !important;
    background-color: #6c757d;
    margin-bottom: 4px;
}

.menu-line:nth-child(2) {
    width: 28px;
}

.menu-line:nth-child(3) {
    width: 24px;
}

.menu-line:nth-child(4) {
    width: 20px;
}

/* Menu Bar Styles */
.navbar-menu-bg {
    background-color: #e3e6e7;
    height: 70px;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    width: 100%;
}

.navbar-nav {
    align-items: center;
    width: 100%;
}

.navbar-nav .nav-item {
    margin: 0;
    padding-left: 0.5rem;
    padding-right: 1.5rem;
}

.navbar-nav .nav-item:last-child {
    border-bottom: none;
    
}

/* Menu Items Styles */
.menu-item {
    margin-right: 5px;
    /* Reduce space between menu items */
}

.nav-link {
    color: #333;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 4px;
    transition: all 0.3s ease;
    /* Smooth transition for underline */
    display: flex;
    align-items: center;
    margin-left: 10px;
    /* Reduce space between menu items */
    position: relative;
    /* Required for absolute positioning of underline */
}

.nav-link:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    /* Height of the underline */
    background-color: #f7b74b; /* Color of the underline  initially it wass #333 */
    /* Black underline */
    transition: width 0.3s ease;
    /* Smooth transition for underline width */
}

.nav-link:hover {
    background-color: transparent;
    /* Remove background color */
}

.nav-link:hover:after {
    width: 100%;
    /* Underline expands to full width */
}

.nav-link i {
    margin-right: 5px;
    /* For the home icon */
}

/* Search Bar Styles */
.search-item {
    margin-left: 1rem;
    /* Push search box to the right */
}

.search-box {
    display: flex;
    align-items: center;
}

.search-input {
    border: none;
    /* Remove the border */
    padding: 0.375rem 0.75rem;
    border-radius: 15px 0 0 15px;
    width: 450px;
    background-color: #d3d3d3;
    /* Darker grey color */
}

.search-input:focus {
    background-color: #d3d3d3;
    /* Darker grey color */
    outline: none;
    /* Remove the outline */
    box-shadow: none;
}

.search-button {
    color: #6c757d;
    border: none;
    /* Remove the border */
    border-radius: 0 15px 15px 0;
    background-color: #d3d3d3;
    /* Darker grey color */
}

.search-button:hover {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

button {
    display: inline-block;
    padding: 12px 30px;
    background-color: #c4a26f;
    color: var(--white-color);
    border-radius: 5px;
    text-decoration: none;
    font-size: 1.1em;
    transition: background-color 0.3s ease, color 0.3s ease;
    display: flex;          /* Create a flex container */
    flex-direction: column; /* Arrange children vertically */
    align-items: center;   /* Center children horizontally */
    margin: 20px auto ; /* Adjust the margin */
  }
  
  button:hover {
    background-color: var(--white-color);
    color: #9f8153;
    border: 2px solid #9f8153;
  }

/* Custom Slider */
#customCarousel {
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
    /* Adds some spacing between the slider and main content */
}

#customCarousel .carousel-inner {
    height: 600px;
    /* Set the height back to 600px */
}

#customCarousel .carousel-item {
    height: 100%;
    background-size: cover;
    background-position: center;
}

#customCarousel .carousel-caption {
    position: absolute;
    top: 47%;
    /* Changed to 40% */
    left: 10%;
    /* Further adjust left position for better responsiveness */
    transform: translateY(-50%);
    text-align: left;
    color: #ab8e62;
    /* Color changed */
    padding-right: 10%;
    /* Add padding to ensure text doesn't overflow in smaller screens */
}

#customCarousel h2 {
    font-size: 4em;
    /* Larger size */
    margin-bottom: 0.2em;
    font-family: 'Arial Narrow Bold', sans-serif;
    font-weight: 200;
    font-style: normal;
}

#customCarousel p {
    font-size: 5em;
    /* Larger size */
    font-family: 'Arial Narrow Bold', sans-serif;
    font-weight: 300;
    font-style: normal;
}

/* Black Strip Below Slider with Indicators */
.slider-controls {
    background-color: black;
    /* Black strip background */
    padding: 10px 0;
    /* Add some padding to the top and bottom */
    text-align: center;
    /* Center the indicators */
    width: 100%;
}

/* Custom Indicators */
.custom-indicators {
    display: inline-flex;
    /* Use inline-flex to only take up necessary width */
    align-items: center;
    /* Vertically align the indicator buttons */
    justify-content: center;
    /* Horizontally center the indicator buttons */
    padding: 0;
    /* Remove padding */
    margin: 0;
    /* Remove margin */
    background-color: transparent;
    /* Remove any background color that might be set */
    width: auto;
    /* Let the content determine the width */
}

.custom-indicators button {
    width: 30px;
    /* Strip width */
    height: 5px;
    /* Strip height */
    background-color: #c0b283;
    /* Light golden color for inactive */
    border: none;
    margin: 0 5px;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.3s;
}

.custom-indicators button.active {
    opacity: 1;
    /* Active strip is fully visible */
}


.explore-more-container {
    margin-top: 40px;
}


/* passion section starts here */
.passion-section {
    background-color: #f4f4f4; /* Off-white background */
    padding: 50px 0 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0 px;
}

.passion-section .container {
    max-width: 1200px;
    width: 100%; /* Ensure it takes full width of passion section */
}

.passion-content {
    display: flex;
    width: 100%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Shadow effect */
}

.passion-left {
    width: 40%;
    background-color: white;
    position: relative; /* To position the corner cut */
}

/* Corner Cut Effect */
.passion-left::after {
    content: '';
    position: absolute;
    top: 40px;
    right: -26px;
    border-width: 20px 0 20px 26.6px; /* for triangle like design */
    border-style: solid;
    border-color: transparent #fff; /* White corner */
    width: 0;
    height: 0;
    z-index: 1;
}

.passion-right {
    width: 60%;
    height: 550px;
    background: linear-gradient(90deg, #b2956a 10%, #d1b48d 90%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
    padding: 30px;
}

.passion-text {
    color: white;
    margin-bottom: 20px;
    position: relative;
    z-index: 1; /* Ensure text is above the image */
}

.passion-text h2 {
    font-size: 2.5em;
    font-weight: bold;
    margin-bottom: 10px;
    line-height: 1.2;
}

.passion-text a {
    color: white;
    text-decoration: none;
    font-size: 1.1em;
    display: inline-block;
    margin-top: 15px;
}

.passion-image {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40%; /* Adjust size as needed */
    z-index: 0; /* Behind the text */
}

.passion-image img {
    max-width: 90%;
    height: auto;
    display: block;
    padding-bottom: 3rem;
    margin-bottom: 1rem;
}
/* About Section Styles */
.about-section {
    background-color: #f4f4f4;
    padding: 0px;
    display: flex;
    justify-content: center;
}

.about-section .container {
    max-width: 1200px;
    width: 100%;
}

.about-content {
    display: flex;
    width: 100%;
    border-radius: 0px; /* change this to make the content bg section rounded corner */
    overflow: hidden;
}

.about-left {
    width: 40%;
    background-color: #fff;
    box-shadow: 10px 4px 8px rgba(0, 0, 0, 0.1); /* Shadow effect */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px;
    text-align: justify;
}

.about-left .about-logo {
    max-width: 200px;
    margin-bottom: 20px;
}

.about-left p {
    font-size: 1.1em;
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px;
}

.about-right {
    width: 60%;
    display: flex;
    align-items: stretch; /* Stretch the image to fill the height */
    justify-content: center;
}

.about-right img {
    width: 100%;
    height: 100%; /* Make the image fill the height */
    display: block;
    object-fit: cover; /* Ensure the image covers the area */
}
/* Project Section Styles */
.project-section {
    background-color: #f4f4f4;
    padding: 0;
}

.project-section .container {
    max-width: 1200px;
}

.project-content {
    display: flex;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 0px;
    overflow: hidden;
}

.project-left {
    width: 60%;
    position: relative;
}

.project-left img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.image-title {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 20px;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    text-align: left;
}

.image-title h2 {
    font-size: 1.5em;
    margin-bottom: 5px;
}

.image-title p {
    font-size: 1em;
}

.project-right {
    width: 40%;
    padding: 30px;
    display: flex;
    flex-direction: column;
}

.project-text {
    margin-bottom: 30px;
}

.decorative-line {
    height: 5px;
    background: linear-gradient(to right, #ffd466, transparent);
    display: block;
    margin-left: auto;
    margin-right: auto;
    width:20%;
    padding: 0;
}

.project-text p {
    font-size: 1.1em;
    color: #555;
    line-height: 1.6;
}

.project-stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    align-items: center;
}

.stat {
    display: flex;
    align-items: center;
    color: #777;
    padding-left: 10px;
    padding-right: 10px;
}

/* Style for Font Awesome Icons */
.stat i {
    color: #c0b283;
    font-size: 2em;
    margin-right: 10px;
}

/* Style for texts */
.stat-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.stat-text span {
    font-size: 1em;
}

.stat-text p {
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stat-divider {
    border-left: 3px solid #bfbdbd;
    height: 70px;
}

.project-thumbnails {
    display: flex;
    justify-content: space-between;
}

.thumbnail {
    width: 48%;
    cursor: pointer;
    border-radius: 4px;
    transition: transform 0.3s ease;
}

.thumbnail:hover {
    transform: scale(1.1);
}
/* Awards Section Styles */
.awards-section {
    background-color: #fff;
    padding: 50px 0;
}

.awards-section .container {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.awards-content {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 20px;
}

.award {
    text-align: center;
    width: 20%;
    position: relative; /* Required for the transition effect */
    transition: transform 0.3s ease; /* Smooth transition for the scaling */
}

.award:hover {
    transform: scale(1.1);
    /* Scale up the whole award div on hover */
    z-index: 1; /* Ensure the hovered item is above others */
}

.award-year {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 10px;
}

.award-logo {
    max-width: 80px;
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

.award p {
    font-size: 0.8em;
    color: #555;
    line-height: 1.4;
}

/* Styles for the Central Award */
.award-center .award-logo {
    max-width: 100px;
    /* Increased Size */
}

@media (max-width: 480px) {
    .award {
        width: 100%;
        /* One award per row on very small screens */
    }

    .award p {
        font-size: 0.7em;
    }
}

/* styles.css */

/* CSR Section Styles */
.csr-section {
    background-color: #f4f4f4;
    padding: 0px;
}

.csr-section .container {
    max-width: 1200px;
}

.csr-content {
    display: flex;
    justify-content: space-between;
    border-radius: 0px;
    overflow: hidden;
    position: relative;
    /* Required for positioning the triangle correctly */
    align-items: stretch;
    /* To stretch the right side to fill the height */
}

.csr-left {
    width: 60%;
}

.csr-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.csr-right {
    width: 40%;
    display: flex;
    flex-direction: column;
    position: relative;
    background: white;
    padding: 30px;
}

/* Triangle Style */
.csr-right:before {
    content: '';
    position: absolute;
    left: -25px;
    /* Adjust for overlap */
    top: 30px;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-right: 25px solid #fff;
    /* White triangle */
}

.csr-text h2 {
    font-size: 2em;
    color: #333;
    margin-bottom: 20px;
    margin-top: 2rem;
    display: inline-block;
    /* Make it inline to contain the pseudo-element */
}

.csr-text h2:after {
    content: "";
    display: inline-block;
    margin-left: 0.5em;
    vertical-align: middle;
    /* Decorative line */
    height: 3px;
    background: linear-gradient(to left, #ac8e62, #b59971, #caae86 100%, transparent);
    /* Replace with your gradient */
    width: 150px;
}

.csr-text ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.csr-text li {
    font-size: 1em;
    color: #555;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    width: 48%;
    padding-left: 20px;
    /* Add space before the list items */
}

.csr-text li i {
    margin-right: 10px;
    color: #a28050;
}

/* Adjust the image container so there isn't a background color */
.csr-images {
    padding: 1rem;
    /* Setting equal value for padding all sides */
    width: 100%;
    display: flex;
    justify-content: center; /* Center the image */
    align-items: center;
}

.csr-images img {
    border-radius: 8px;
    width: 100%;
    /* Set image width to 100% */
    height: 200px;
    /* Reduced height of images */
    object-fit: cover;
    transition: transform 0.3s ease;
    /* Smooth transition for the hover effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.csr-images img:hover {
    transform: scale(1.1);
    /* Scale the image on hover */
}

/* Development Partner Section */
.development-partner-section {
    background-image: url('../images/partner_bg.png');
    background-size: cover;
    background-position: center;
    padding: 40px 0;
    overflow: hidden;
    color: #fff;
    max-height: 300px;
    margin-bottom: 0 !important;
}

.development-partner-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.development-partner-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.development-text {
    flex: 1;
    text-align: left;
}

.development-text h2 {
    font-size: 2.5em;
    font-weight: bold;
    margin-bottom: 10px;
    color: #000;
    padding-top: 2rem;
}

.development-text .decorative-line {
    height: 5px;
    background: linear-gradient(to right, #c0b283, transparent);
    width: 70%;
    margin-top: 5px;
}

.agp-logo {
    flex: 0 0 auto;
    width: 30%;
    text-align: right;
}

.agp-logo img {
    max-width: 100%;
    height: auto;
    display: block;
    padding-top: 2rem;
}
/* Partnerships Section Styles */
.partnerships-section {

    background-size: cover;
    background-position: center;
    padding: 50px 0;
    overflow: hidden;
    position: relative;
    min-height: 300px;
}

.partnerships-section .container {
    max-width: 100%;
    padding: 0 20px;
}

.partnerships-section h2 {
    text-align: center;
    color: var(--secondary-color);
    margin-bottom: 20px;
    position: relative;
    display: inline-block; /* Ensure the line is below the text */
    width: 100%; /* Allow text to be centered */
}
/* Heading Line */
.partnerships-section h2 .heading-line {
    position: absolute;
    bottom: -5px; /* Adjust for positioning */
    left: 50%;
    transform: translateX(-50%);
    width: 18%;  /* Adjust for desired width */
    height: 3px;  /* Adjust line thickness */
    background-color: var(--primary-color);  /* Or any desired color */
    background: linear-gradient(to left, #dece97, #a28050);
    /* Gradient colors */
}

.partners-carousel {
    position: relative;
    overflow: hidden;
}

.carousel-slide {
    display: flex;
    width: calc(225px * 14); /*Double the width and logos*/
    animation: slide 20s linear infinite;  /* Adjust duration as needed */
}

.partner-logo {
    width: 225px;
    height: 175px;
    object-fit: contain;
    margin: 0 15px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.partner-logo:hover {
  transform: scale(1.1);
}

/* CSS Animation for Sliding */
@keyframes slide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-225px * 7)); /* slide only for 7 elements */
    }
}
/* Footer Styles */
.site-footer {
    background-color: #f9f9f9;
    padding: 0;
    color: #333; /* Updated all text color to black */
}

.site-footer .container {
    max-width: 1200px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    /* Allow columns to wrap on smaller screens */
}

/* Footer Column Styles */
.footer-logo,
.footer-businesses,
.footer-about,
.footer-group-companies {
    margin-bottom: 30px;
    text-align: left; /* set the text align to left as requested */
}
.footer-logo,
.footer-businesses,
.footer-about{
    padding-top: 2rem;
}
/*Adjusting for image size of rnp logo at left */
.footer-logo img {
    max-width: 225px;
    /* Increased size */
}
.footer-logo{
    width: 30%;
}

/* Business Section */
.footer-businesses h3 {
    font-size: 1.5em;
    /* Slightly bigger */
    margin-bottom: 10px;
}
.footer-businesses{
    width: 25%;
    /* Roughly equal width for each column */
}

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

.footer-businesses li {
    margin-bottom: 5px;
}

.footer-businesses li a {
    color: #333;
    text-decoration: none;
}

/* The below section styles the Download Button */
.download-button {
    border: 1px solid #9f8153;
    background: none;
    color: #333;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 1.2em;
}

/* About Section */
.footer-about {
    width: 12%;
    /* Roughly equal width for each column */
}
.footer-about ul {
    list-style: none;
    padding: 0;
}

.footer-about ul li {
    margin-bottom: 10px;
    /* Increased spacing between menu items */
}

.footer-about ul li a {
    color: #333;
    text-decoration: none;
}

/* Group Companies Section */
.footer-group-companies {
    text-align: center; /*All images align towards the left side*/
    position: relative;
    width: 33%;
    background-color: #fff;
}

.footer-group-companies::before {
    content: '';
    position: absolute;
    top: 15px;
    left: -15px; /* Adjust position of the triangle */
    border-style: solid;
    border-width: 20px 20px 20px 0; /* Adjust triangle size */
    border-color: transparent #fff transparent transparent;
    /* Triangle points to the left */
}

.footer-group-companies .group-logos {
    display: flex;
    flex-direction: column;

    /* Arrange logos vertically */
    align-items: flex-start;
    /*adjust items for each group logo in proper fashion*/
    gap: 5px;
    /* Space between logos */
}

.footer-group-companies .group-logos img {
    width: 80%;
    height: auto;
    /*set the height to scale according to height */
    object-fit: contain;
    align-items: center;
    padding: 0.5rem 2rem 0 3rem;
    min-width: 310px;
    max-width: 310px;
}

/* This adds the border to the first two images */
.footer-group-companies .group-logos img:nth-child(-n+2) {
    border-bottom: 1px solid black; /* Black line under the last group logo */
    margin-left: 2rem;
 }
 
 /*Ensure to remove all black borders from the last group logo */
 .footer-group-companies .group-logos img:last-child{
  border-bottom:none; /*Remove any borders here */
  margin-left: 2rem;
 }

/* Copyright Section */
.copyright {
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    color: #777;
    border-top: 1px solid #ccc;
    /* Add a top border */
}

 /* Mobile Menu Styles */
 @media (max-width: 768px) {
    
    .search-item {
        display: none;
    }
    
    .menu-lines {
           display: none;
       }
   
       .navbar-brand {
           margin-right: 2rem;
       }
   
       .navbar-collapse {
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           z-index: 1;
           background-color: #f2f2f2;
           overflow-y: auto;
           padding-top: 60px;
           display: none;
       }

       .navbar-collapse.show {
        display: block; /* Show when the 'show' class is present */
    }
   
       .navbar-nav {
           flex-direction: column;
           text-align: left;
           width: 100%;
       }
   
       .navbar-nav .nav-item {
           margin: 0;
           padding: 0.5rem 1rem;
           border-bottom: 1px solid #ccc;
           width: 100%;
       }
   
       .navbar-nav .nav-item:last-child {
           border-bottom: none;
       }
   
       .form-inline {
           display: block;
           width: 100%;
           margin-top: 10px;
       }
   
       .form-inline .input-group {
           width: 100%;
       }
   
       .form-control {
           width: 100%;
       }
   
       .navbar-brand img {
           max-width: 150px;
       }
   
       /* Style for the close button */
       .mobile-header {
           display: flex;
           justify-content: flex-end;
           padding: 10px;
           position: relative;
       }
   
       .close-button {
           background: none;
           border: none;
           color: black;
           font-size: 2em;
           cursor: pointer;
           position: absolute;
           top: 0;
           right: 0;
           padding: 10px;
       }
   
       .search-input {
           width: 100%;
       }
   
       .search-button {
           border-radius: 0 0.25rem 0.25rem 0;
       }

       /*  removing the border from the menu bar */
     .navbar-toggler:focus {
        outline: none !important;
        box-shadow: none !important;
    }

.nav-link:hover,
.nav-link:focus {
    background-color: rgba(0, 0, 0, 0.1);
        /* Subtle grey background on hover/focus */
}

.nav-link:hover:after,
.nav-link:focus:after {
    width: 0; /* Remove Underline hover*/
}
   
       #customCarousel .carousel-inner {
           height: 300px;
           /* Further reduce height on small screens */
       }
   
       #customCarousel .carousel-caption {
           left: 5%;
           /* Even more adjustment for small screens */
           padding-right: 5%;
       }
   
       #customCarousel h2 {
           font-size: 1.6em;
           /* Further reduced font size */
       }
   
       #customCarousel p {
           font-size: 1em;
           /* Further reduced font size */
       }
       .businesses-section {
        background-image: url('images/scafolding_bg.png');
        background-size: cover; /* Make background responsive */
        background-position: center; /* Center the image */
        padding: 50px 0; /* Add padding to the section */
        text-align: center;
    }
   
       .explore-more-button {
           font-size: 1em;
       }
       .passion-content {
           flex-direction: column;
           box-shadow: none; /* Remove shadow on smaller screens */
       }
   
       .passion-left {
           width: 100%;
       }
   
       .passion-left::after {
           display: none; /* Hide corner cut on smaller screens */
       }
   
       .passion-right {
           width: 100%;
           align-items: center;
           padding: 20px;
       }
   
       .passion-text {
           text-align: center;
           margin-bottom: 30px;
           padding-top: 5rem;
       }
   
       .passion-text h2 {
           font-size: 2em;
       }
   
       .passion-image {
           position: relative;
           width: 100%; /* Adjust size as needed */
           margin: 0 auto;
       }
       .passion-image img{
           position: relative;
           max-width: 38%;
           height: auto;
           display: block;
           align-items: center;
           margin-left: 7rem; 
           padding-left: 1rem;     
       }
       .about-content {
           flex-direction: column;
       }
   
       .about-left {
           width: 100%;
           padding: 20px;
           align-items: center;
       }
   
       .about-left p {
           text-align: justify;
       }
   
       .about-right {
           width: 100%;
       }
       .project-content {
           flex-direction: column;
       }
   
       .project-left {
           width: 100%;
       }
   
       .project-right {
           width: 100%;
           padding: 20px;
       }
   
       .project-stats {
           flex-direction: column;
           align-items: center;
       }
   
       .stat {
           margin-bottom: 20px;
           text-align: center;
           padding-left: 0;
           padding-right: 0;
       }
   
       /*For text in responsive layout*/
       .stat-text{
           text-align: center;
       }
   
       .project-thumbnails {
           flex-wrap: wrap;
       }
   
       .thumbnail {
           width: 48%;
           margin-bottom: 10px;
       }
       .awards-content {
           flex-wrap: wrap;
           justify-content: center;
           /* Keep them centered on smaller screens */
       }
   
       .award {
           width: 45%;
           /* Two awards per row */
           margin-bottom: 20px;
       }
   
       .award p {
           font-size: 0.7em;
       }
   
       /* Center Award on smaller screens*/
       .award-center {
           width: 100%;
           /* Center Award take up full width */
       }
       .csr-content {
           flex-direction: column;
       }
   
       .csr-left {
           width: 100%;
       }
   
       .csr-right {
           width: 100%;
           padding: 20px;
       }
   
       .csr-right:before {
           display: none;
       }
   
       .csr-images {
           flex-direction: column;
           /* Stack images on small screens */
           align-items: center;
       }
   
       .csr-images img {
           margin-top: 1rem;
           width: 80%;
           /* Wider images on small screens */
           height: auto;
           /* To prevent distortion on different layout*/
       }
       .development-partner-content {
           flex-direction: column;
           align-items: center;
       }
   
       .development-text {
           text-align: center;
           margin-bottom: 5px;
           margin-top: -15px;
       }
   
       .development-text h2 {
           padding-top: 20px;
       }
   
       .development-text .decorative-line {
           margin: 10px auto;
       }
   
       .agp-logo {
           width: 60%;
           text-align: center;
           order: 1;
           margin-top: 5px;
       }
   
       .agp-logo img {
           max-width: 100%;
           height: auto;
           display: block;
       }
       .partner-logo {
           width: 150px;
           height: 120px;
           margin: 0 10px;
       }
   
       .carousel-slide {
           width: calc(150px * 14); /* Recalculate for smaller screens and logo number*/
           animation: slide 15s linear infinite;  /* Adjust duration */
       }
   
       @keyframes slide {
           0% {
               transform: translateX(0);
           }
           100% {
               transform: translateX(calc(-150px * 7)); /* New end value */
           }
       }
       .footer-logo,
       .footer-businesses,
       .footer-about,
       .footer-group-companies {
           width: 100%;
           /*Take one column width and put images and text center*/
           text-align: center;
       }
   
       .copyright {
           text-align: center;
           /*Text align should be at the center of the footer in small width*/
       }
   
       /*Aligns all items to the center in case of responsive*/
       .footer-content {
           flex-direction: column;
           align-items: center;
       }
   
       .footer-group-companies {
           position: relative;
           background-color: transparent;
       }
   
       .footer-group-companies::before {
           display: none
       }
       .footer-group-companies .group-logos img {
           min-width: 310px;
           max-width: 310px;
           background-color: #fff;
       }
       
       /* This adds the border to the first two images */
       .footer-group-companies .group-logos img:nth-child(-n+2) {
           border-bottom:none; /*Remove any borders here */
        }
        
        /*Ensure to remove all black borders from the last group logo */
        .footer-group-companies .group-logos img:last-child{
         border-bottom:none; /*Remove any borders here */
         margin-left: 2rem;
        }
   }

   /* CSS for the Businesses Section */

/* Background image */
.businesses-section {
    background-image: url('../images/scafolding_bg.png');
    background-size: cover; /* Make background responsive */
    background-position: center; /* Center the image */
    padding: 50px 0; /* Add padding to the section */
    text-align: center;
    margin-bottom: 0 !important;
}

/* Section title */
.businesses-section h2 {
    font-size: 2.5em;
    margin-bottom: 20px;
    color: #333; /* Adjust the color */
}

/* Business Items */
.businesses-content {
    display: flex;
    justify-content: center; /* Center the items horizontally */
    align-items: center; /* Vertically align items */
    gap: 100px; /* Adjust the space between the items */
    flex-wrap: wrap; /* Allows items to wrap on smaller screens */
    max-width: 600px; /* Maximum width for the container, adjust as needed */
    margin: 0 auto; /* Center the content horizontally within the container */
}

/* Style for each business item container */
.business-item {
    background-color: rgba(255, 255, 255, 0.8); /* White with slight transparency */
    padding: 30px;
    text-align: center;
    border-radius: 10px;
    width: 250px; /* Adjust as needed */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
    cursor: pointer; /* Change cursor to indicate it's clickable */
   
    box-sizing: border-box; /* Include padding in width calculations */
    max-width: 250px; /* Ensures the items don't exceed a maximum width */
}

/* Image styling */
.business-item img {
    width: auto;    /* Make the image scale proportionally */
    height: 100px;  /* Set a maximum height for the image */
    max-width: 100%; /* Image shouldn't exceed container */
    display: block;
    margin: 0 auto 20px; /* Center the image horizontally and add spacing */
}

.business-item h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
    color: #333; /* Adjust the color */
}

.business-item a {
    color: #555;
    text-decoration: none;
    
}

/* Styles applied *specifically* when the 'scaffolding' item is 'selected' */
.business-item.scaffolding.selected {
    /* Specific styles for the scaffolding item when it's selected */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* More prominent shadow */
}

/* General "Selected" state (applied to *any* .business-item that has the .selected class) */
.business-item.selected {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* More prominent shadow */
    /* Apply common styles to any selected item here */
    /* For example, a different background color or border */
}

/* Hover effect (applied to items that are *not* selected) */
.business-item:not(.selected):hover {
    box-shadow: 10px 8px 16px rgba(0, 0, 0, 0.4); /* Highlight on hover */
}



/* Responsiveness */
@media (max-width: 768px) {
    .businesses-content {
        flex-direction: column; /* Stack items vertically on smaller screens */
        max-width: 400px;
    }

    .business-item {
        width: 80%; /* Adjust width for mobile */
        margin: 0 auto 20px; /* Center items and add spacing */
    }

    .business-section h2 {
      font-size: 2em; /* Decrease font size */
    }

    .business-item img {
      height: 80px; /* Further reduce image height */
    }
}

/* Add these rules for the decorative-line, if not already present in your CSS */
.decorative-line {
    width: 250px; /* Adjust as needed */
    height: 3px; /* Adjust as needed */
    background-color: #ffd466; /* Use your brand color */
    margin: 10px 0; /* Add spacing above and below */
}

.center-decorative-line {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/* product class  */


/* ==========================================================================
   Common Product Thumbnail Styles
   ========================================================================== */

/* Common Container for a group of thumbnails */
.product-thumbnail-container {
    display: flex;
    overflow-x: auto;       /* Enable horizontal scrolling if content overflows */
    flex-wrap: nowrap;      /* IMPORTANT: Prevent thumbnails from wrapping to the next line */
    padding: 10px 0 15px 0; /* Add some padding, especially bottom for scrollbar space */
    justify-content: flex-start; /* Align items to the start */
    align-items: center;    /* Vertically align items */

    /* Optional: Hide scrollbar visually */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE/Edge */
}
.product-thumbnail-container::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera */
}

/* Common Styling for each individual thumbnail image */
.product-thumbnail {
    /* 1. Define the Box Size */
    width: 80px;         /* Standard width */
    height: 80px;        /* Standard height (making it square) */

    /* 2. Layout & Spacing */
    display: block;      /* Treat as block */
    margin-right: 8px;   /* Space between thumbnails */
    flex-shrink: 0;      /* Prevent shrinking within the flex container */
    box-sizing: border-box; /* Include border in size */

    /* 3. Image Fitting (Handles different image dimensions) */
    object-fit: cover;   /* Scale image to maintain aspect ratio while filling the element's entire content box. Crop if necessary. */
    object-position: center center; /* Center the image within the box if cropped */

    /* 4. Appearance */
    border: 1px solid #ddd;
    border-radius: 3px; /* Optional: slightly rounded corners */
    cursor: pointer;
    overflow: hidden;    /* Hide any potential overflow */
    background-color: #f0f0f0; /* Placeholder bg color */
    transition: opacity 0.3s ease, border-color 0.3s ease;
    opacity: 0.85;
}

.product-thumbnail:hover {
    opacity: 1;
    border-color: #a28050; /* Example hover border color */
}

/* Ensure last thumbnail doesn't have extra margin */
.product-thumbnail:last-child {
    margin-right: 0;
}


/* --- Responsive Adjustments for Thumbnails --- */
@media (max-width: 768px) {
    .product-thumbnail {
        width: 70px;  /* Slightly smaller size for mobile */
        height: 70px;
        margin-right: 5px; /* Smaller gap */
    }
    /* Scrolling behavior is already handled by the base styles */
}


/* Product New Section - Full Screen */
.product_new {
    width: 100%;
    background-color: #f9f9f9;
    display: flex;
    flex-direction: column; /* Stack top strip, heading, and content */
 
}

/* Top Strip */
.product_new-top-strip {
    background-color: #000;
    color: #fff;
    padding: 10px;
    justify-content: center; /* Horizontal center */
    align-items: center; /* Vertical center */
}

.product_new-top-strip .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.product_new-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center; /*Align to the left*/
    /*remove following properties*/
    overflow-x: auto; /*Enable horizontal scrolling*/
    white-space: nowrap; /*Prevent wrapping*/
   
}

.product_new-nav ul li {
    margin: 0 15px;
}

.product_new-nav ul li a {
    color: #fff;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 5px;
    display: block;
    transition: background-color 0.3s ease;
}

.product_new-nav ul li a:hover {
    background-color: #f3b24a;
    color: #333;
}

/* Product Heading (Main Title) */
.product_new h2 {
    font-size: 2.5em;
    margin: 20px 0;
    text-align: center;
}
/* Inner Heading Styles (e.g., Cuplock title) */
.product_new_heading h2{
    color: #f3b24a;  /* Golden Yellow for Inner Title */
    font-size: 2em;
}
/* ==========================================================================
   Product Content (Image + Text)
   ========================================================================== */
   .cuplock-container {
    display: flex;
    flex-wrap: wrap; /* Important for responsiveness */
    width: 100%;
    box-sizing: border-box; /* Ensures padding/border don't affect width */
  }
  
  .cuplock-left {
    width: 40%;
    padding: 10px;
    box-sizing: border-box;
  }
  
  .cuplock-right {
    width: 60%;
    box-sizing: border-box;
    background-color: #fff;
  }
  
  .cuplcok-left img {
    width: 100%;
    height: auto;
    display: block; /* Remove any default inline spacing */  
  }




/* Main Container for Product Content */
.product_new-content {
    display: flex;
  
    justify-content: center; /* center horizontal */
    align-items: stretch; /* Stretch to fill available space */
    padding: 20px;
    box-sizing: border-box; /* Include padding in width calculation */
    text-align: justify;
  
}

/* Inner Container (Image and Text Side-by-Side) */
.product_new-content .product-details {
    display: flex; /* inner Flex for Image Text */
    width: 100%; /* takes up the entire screen with flex */
    align-items: flex-start;
    justify-content: space-between; /* Distribute space between image/text */
    max-width: 1200px; /* Consistent max width*/
}
/* Left Side - Product Image */
.product_new-content .product-details .product-image {
    width: 35%; /* 30% for Image - Relative to the parent (product details) */
    padding: 15px 0 0 0;
    box-sizing: border-box;
   
}
/* Product Image Styling */
.product_new-content .product-details .product-image img {
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    display: block;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  
}


/* New Structure for Text - Two Divisions: Title/Table & Features */
.product_new-content .product-details .product-text  {
    width: 65%;
    padding: 30px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-color: white;
    display: flex;             /* Flex container for two sections */
    /*flex-direction: column; */ /* Stack them vertically*/
}
/* Title Table Section */
.product_new-content .product-details .product-text .title-table-section {
  flex: 1; /* equal width, use 100 to have equal width in section */
  margin-right: 20px; /* Add space between the sections */
  box-sizing: border-box; /* Ensure padding doesn't break layout */
  width: 50%; /* Ensure it stays consistent  */
  margin-bottom: 20px; /* Add spacing below table */
}
/* Feature Content Section */
.product_new-content .product-details .product-text .feature-section {
  flex: 1; /* take equal width */
  box-sizing: border-box; /* Keep padding inside section */
  width: 50%; /* consistent width */
  font-size: 1em !important;     /* Paragraph font-adjust to look*/
}

.product_new-content .product-details .product-text h3 {
    font-size: 1.8em;
    margin-bottom: 15px;
}

.product_new-content .product-details .product-text p {
    line-height: 1.6;
    margin-bottom: 15px;
    font-size: 1em;
}

/* styles for the table standard-sizes*/
table.standard-sizes {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px; /* Space below the table */
}

table.standard-sizes th,
table.standard-sizes td {
  border: 1px solid #ddd; /* Add borders */
  padding: 8px 12px; /* Add spacing */
  text-align: left;  /* align text */
}

table.standard-sizes th {
  background-color: #f2f2f2; /* Background */
  font-weight: bold;      /* Bold headings */
}

/* Styles for the section aditional-desciption in the content*/
.product_new-content .product-details .product-text .additional-description {
  margin-bottom: 20px;
}
.additional-description h4{
    font-size: 1.2em;
}
.additional-description p {
    line-height: 1.2em !important;     /* Paragraph font-adjust to look*/
}
/* Responsive Styling */
@media (max-width: 768px) {
    .product_new-content {
      padding: 10px; /* Reduce padding */
      align-items: center;  /* Center items on smaller screens */
    }

    .product_new-content .product-details {
        flex-direction: column; /* Stack image and text */
        align-items: center;    /* Image and test align to center of elements */
    }
 /* Product Content parts - Set width to nearly full Screen */
     .product_new-content .product-details .product-image,
     .product_new-content .product-details .product-text, 
     .product_new-content .product-details .product-text .feature-section,
    .product_new-content .product-details .product-text .title-table-section {
        width: auto;  /* Adjusted width */
    
    }
 /* Set image and paragraph padding in this location to be aligned better*/
    .product_new-content .product-details .product-image {
      margin-right: 0;  /* remove right margin */
      margin-bottom: 20px; /* Add bottom spacing */
    }
 /* code to decrease all content area spacing*/
    .product_new-content .product-details .product-text {
        padding: 15px; /* Reduce padding on smaller screens */
    }
 /*Smaller font size for mobile display*/
    .product_new h2 {
      font-size: 2em; /* Decrease font size on smaller screens */
    }

     /* 1. Cuplock: Stack Text Sections on Mobile */
     .product_new-content .product-details .product-text {
        flex-direction: column; /* Ensure children stack vertically */
        padding: 15px; /* Keep reduced padding */
    }
    .product_new-content .product-details .product-text .title-table-section,
    .product_new-content .product-details .product-text .feature-section {
        width: 100%;        /* Make each section take full width */
        margin-right: 0;    /* Remove horizontal margin */
        margin-bottom: 20px; /* Add some space below the table section */
    }
    .product_new-content .product-details .product-text .feature-section {
         margin-bottom: 0; /* Remove bottom margin from the last element if needed */
    }
    /* ==========================================================================
   Table Styles (Standard Sizes)
   ========================================================================== */

table.standard-sizes {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

table.standard-sizes th,
table.standard-sizes td {
    border: 1px solid #ddd;
    padding: 8px 12px;
    text-align: left;
}

table.standard-sizes th {
    background-color: #f2f2f2;
    font-weight: bold;
}

}

/* For Small devices show the dropdown for the rest of other show menu options */
/* Responsive Styling */
@media (max-width: 768px) {
    /* Show the select dropdown on small screens */
    #product-select {
        width: 200px; /* Adjust width as needed */
        padding: 10px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #fff;
        appearance: none; /* Remove default arrow */
        -webkit-appearance: none; /* For older browsers */
        cursor: pointer;
        margin: 10px auto; /* Center the dropdown */
        display: block; /* Make it a block element */
    }

    .product_new-nav ul {
        display: flex;
    }

    /* CSS Code for menu styling */
    /*The following code will split the menus into the required design. For every type of the device*/
    .product_new-nav ul {
        flex-direction: row; /* Arrange menu items in a row */
        flex-wrap: wrap;  /* allow items to wrap to next line*/
        justify-content: space-between; /* Distribute items evenly */
    }

    .product_new-nav ul li {
        width: 30%; /* Take up 2 parts of the screen in each of the row */
        max-width: 40%;  /* no items should  be expanded beyong limit*/
    }

    /* Style for Product options  */
    .product_new-nav ul li a {
        display: block;
        text-align: center;
        padding: 10px;          /* pad the sections*/
        border: 1px solid #ffd466; /* Set border and styling if needed*/
        box-sizing: border-box;    /* Keep padding and border within the element's size*/
    }
}

/* CSS for Standard Sections and Explore Button */

/* Standard of Vertical */
.vertical-standard h4,
.horizontal-standard h4 {
    background-color: #6f7270; /* Dark grey background */
    color: white;
    padding: 8px 12px;
    display: inline-block; /* Adjust width to content */
    margin-bottom: 10px;
    
}

.vertical-standard p,
.horizontal-standard p {
    margin-bottom: 15px;
    line-height: 1.2em !important;
}

/* Explore More Button */
.explore-more-new-button {
    background-color: #f0ad4e; /* Correct golden yellow color */
    color: #000000;
    padding: 12px 24px;
    border: 2px solid #f0ad4e;
    border-radius: 5px;
    cursor: pointer;
    display: inline-block;
    text-decoration: none; /* Remove underline from link */
    font-size: 1.1em;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.explore-more-new-button:hover {
    opacity: 0.9; /* Gives the feel of a button */
    background-color: #fff;
    color: #333;
}
.explore-more-button {
    display: inline-block;
    padding: 12px 30px;
    background-color: #f4f4f4;
    color: #333;
    border: 2px solid #9f8153;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1.1em;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.explore-more-button:hover {
    background-color: #9f8153;
    color: var(--white-color);
}

/* General Style for Product section
   This section sets the font family and initial color to what
   was intended
   This also takes into account , the responsive element
*/

.product-details {
    font-family: Arial, sans-serif; /* A font base - Can change to desired font name*/
    color: #333;   /* Sets the initial text*/
}

/* the properties that set the heading for various sizes . Adjust text property accordingly  */
.product-details h3 {
    font-size: 2em; /* Size for most screens */
    border-bottom: 2px solid #eee;
    padding-bottom: 0.4em;   /* makes content well formatted */
    margin-bottom: 0.5em;   /* spacing to content */
}
/* Styles for section for additonal description*/

.additional-description {
    background-color: #fff;  /* sets tone */
}
/* This applies to description of standards*/
.additional-description h4{
    font-size: 1.2em;
}
/* for addional text description setting size. If the size is higher, the page content , it can disturb alignment, so be careful while working  with page sizes*/
.additional-description p {
    font-size: 1em;     /* Paragraph font-adjust to look*/
}

/* CSS for H Frame and other product sections*/

/*General styles */
.hframe-container {
    max-width: 1200px;
    margin: 20px auto;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Top code  HFrame details formatting  */
.hframe-content {
    display: flex; /* Use flex */
    align-items: flex-start; /*  image and text start at the same pt*/
    justify-content: space-between;  /* place bits nicely */
}

.hframe-left {
    width: 60%;           /* takes 70% , from screen*/
    background-color: white;  /* code colour for user experince!*/
    box-sizing: border-box;
    padding: 50px;
        
}
 /* code for the elements and setting them ,  also make this all function with every touch*/
 .hframe-bottom-images img {
    height: 250px;            /* allighn with screen size*/
    width: auto;/* and set to % */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  
}
.hframe-bottom-right-im2{
    margin-left: 15px;
}
.hframe-right {
    width: 40%; 
    /* all image  codes, here */
     padding: 5px;      /* code to remove all padding */
}

.hframe-right img {
    max-width: 470px;
    max-height:auto;   /*set height to number !*/
    align-items:left ;    /*and where tag is place */
    margin : auto;         /* Code to set margin value automatic */
}

/*Set hfram imges
set all properties from CSS to format nicely*/
.hframe-images {
    display: flex;     /* image align */
    justify-content: space-around; /* and gap  evenly*/
    margin-top: 20px;      /* set gap for the top */
}

.hframe-images img {
    border: 1px solid #eee;  /* sets nice boundaries */
    border-radius: 5px;  /* make boundary corners*/
    
}

.load-capacity table {
    width: 100%;
    border-collapse: collapse;  /*No empty spaces set for elements  */
    margin-top: 10px;    /* margin for top */
}

.load-capacity th,
.load-capacity td {
    border: 1px solid #ddd; /* colour setting here to make  boundaries */
    padding: 8px;   /* inside space setting */
    text-align: left; /* aligns to the left in section  */
}

.load-capacity th {
    background-color: #f2f2f2;/* back color settings */
}

/*
 * @media code starts now
    For more designs, view documentation at getbootsrap.com
Set mobile version here:
*/
/*
 * @media query, sets code for phone version here
    * make the web look well formed for small screen sizes
*/
@media (max-width: 768px) {
    /* set the base layout here */
    /* code for hframe */
    .hframe-content {
        flex-direction: column;    /*Set images and writing to top each*/
        align-items: center;/* all centered*/
    }

    /* more set-up the section of styling*/
    .hframe-left {
        width: 100%;           /*Each uses space on phones*/
        padding: 20px;
    }
    .hframe-right {
        width: 100%;           /*Each uses space on phones*/
        padding: 0;              /* no  needed in small sized display*/
    }

    /* code with image so it fits to screen */
    .hframe-right img {
        width: 100%;     /* Force the image to take the full width of its container */
        max-width: 100%; /* Explicitly override any previous max-width (like 80%) */
        height: auto;    /* Maintain aspect ratio */
        display: block;  /* Ensure it's a block element */
        margin: 10px 0;  /* Remove horizontal auto margin (if any), keep vertical */
                         /* The container (.hframe-right) is already width: 100% */
                         /* and centered via the parent (.hframe-content) using align-items: center */
    }

    /* make images and code into screen */
    .hframe-images {
        flex-direction: column;     /* up  each layout */
    }

    /* and scale those images set here as responsive*/
    .hframe-images img {
        width: 80%;                /* takes 80 % */
        margin: 10px auto;           /* and set it center point  */
    }

    /* code to allign data or contents to small devices*/
    .load-capacity table {
        font-size: 0.9em;           /* make size small*/
    }

    /* Code for making title appear to phone*/
    #title-of-web {
        font-size: 1.5em;         /* and more smaller to match*/
    }
}

/* for explore button , text colour set here
can alter any of text related code in this selector */
.explore-more-new-button {
    color: #fff; /* set new color property*/
}

/* hopup.css */

.hopup-container {
    display: flex;
    flex-wrap: wrap; /* Important for responsiveness */
    width: 100%;
    box-sizing: border-box; /* Ensures padding/border don't affect width */
  }
  
  .hopup-left {
    width: 60%;
    padding: 10px;
    box-sizing: border-box;
  }
  
  .hopup-right {
    width: 40%;
    padding: 10px 40px 30px 40px;
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  }
  
  .hopup-left img {
    width: 100%;
    height: auto;
    display: block; /* Remove any default inline spacing */  
  }
  
  .hopup-right h2 {
    font-size: 2em;
    margin-bottom: 0.5em;
    text-align: left;
  }
  
  .hopup-right h3 {
    font-size: 1.5em;
    margin-bottom: 0.5em;
  }
  
  .hopup-right p {
    font-size: 1em;
    line-height: 1.4;
    margin-bottom: 1em;
  }
  
  /* Media Queries for Responsiveness */
  @media (max-width: 768px) {
    .hopup-left,
    .hopup-right {
      width: 100%;  /* Stack on smaller screens */
    }
  
    .hopup-right h2 {
      font-size: 1.8em;
    }
  
    .hopup-right h3 {
      font-size: 1.3em;
    }
  }
  
  /* Optional:  Further adjustments for very small screens */
  @media (max-width: 480px) {
    .hopup-right h2 {
      font-size: 1.5em;
    }
  
    .hopup-right h3 {
      font-size: 1.1em;
    }
  }
/* clamp.css */

.clamp-container {
    width: 100%;
    box-sizing: border-box;
  }
  
  .clamp-top {
    display: flex;
    flex-wrap: wrap;
  }

  clamp-description {
  height: 100px;  /* Example limiting height */
  overflow: hidden;
}
  
  .clamp-left {
    width: 55%; /* Adjusted for equal split with thumbnail area below */
    padding: 40px;
    box-sizing: border-box;
    background-color: white; /* Changed background color */
    margin-right:  0  !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  #clamp-description {
    font-size: 1em;  /* Adjust as needed */
    line-height: 1.4; /* Improves readability */
    overflow-wrap: break-word; /* Prevents long words from overflowing */
    word-break: break-word; /* Forces line breaks within words if necessary */
    white-space: normal; /* Allows text to wrap */
    height: auto;
    max-height: none;
  }

  .clamp-left h2{
    text-align: left;
    font-size: 2em;
  }

  .clamp-right {
    width: 45%; /* Adjusted for equal split with thumbnail area below */
  
    box-sizing: border-box;
    margin-left: 0 !important;
  }
  
  .clamp-right img {
    width: 100%;
    height: 500px; /* Fixed height for the right side image */
    object-fit: contain; /* Ensure the image fits within the fixed size */
    display: block;
  }
  
  .clamp-thumbnails {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Align thumbnails to the start */
    padding: 0; /* Remove padding */
    margin: 10px 0 0 0;
  }
  
  .clamp-thumbnail {
    width: auto; /* Fixed width for thumbnail */
    height: 204px; /* Fixed height for thumbnail */
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    margin-right: 0; /* Remove gaps between thumbnails */
    object-fit: cover;
    border: 1px solid #ddd;
  }
  
  .clamp-thumbnail:hover {
    opacity: 1;
  }
  
  /* Responsive adjustments */
  @media (max-width: 768px) {
    .clamp-left,
    .clamp-right {
      width: 100%; /* Stack on smaller screens */
    }
  
      .clamp-top {
          flex-direction: column; /* stack the left and right on top of one another */
      }
  
    /* 2. Clamp: Make Thumbnails Horizontally Scrollable */
    .clamp-thumbnails {
        flex-wrap: nowrap;       /* Prevent thumbnails from wrapping */
        overflow-x: auto;        /* Enable horizontal scrolling */
        justify-content: flex-start; /* Align items to the start */
        padding-bottom: 10px;    /* Add some padding for scrollbar space */
        /* Optional: Hide scrollbar */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none;  /* IE/Edge */
    }
    .clamp-thumbnails::-webkit-scrollbar {
        display: none; /* Chrome/Safari/Opera */
    }
    .clamp-thumbnail {
        width: 100px;        /* Slightly larger fixed width */
        height: 100px;       /* Maintain aspect ratio or set fixed height */
        flex-shrink: 0;      /* Prevent thumbnails from shrinking */
        margin-right: 5px;   /* Add a small gap between thumbnails */
        margin-bottom: 0;    /* Remove bottom margin as they are inline */
        object-fit: cover;   /* Ensure image covers the area */
    }
    .clamp-right img {
      height: 250px; /* Smaller fixed height on smaller screens */
    }

  }

/* Platform Section Styles */
.platform-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}

.platform-left {
    width: 50%;
    padding: 10px 0 10px 0;
    box-sizing: border-box;
}

.platform-left img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 0px;
    
}

.platform-thumbnails {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: left;

}

.platform-thumbnail {
    width: 200px; /* To make the image size small*/
    max-width: 200px; /* max width */
    height: 200px; /* To make the image size small*/
    max-height: 200px; /* fixed height , so there are no changes */
    padding: 5px;
    cursor: pointer;
    object-fit: contain;
    text-align: left;
    margin: 3px auto;
}

.platform-right {
    width: 50%;
    padding: 10px 0 10px 0;
    box-sizing: border-box;
    background-color: #fff;
}

.platform-right p{
    padding: 0 50px 0 50px ;
}

.platform-right li{
    padding: 0 50px 0 50px ;
}

.platform-right h3{
    padding: 0 50px 0 50px ;
    text-align: left;
}

.platform-right h2{
    padding: 0 50px 0 50px ;
    text-align: left;
    color: #f0ad4e;
    font-size: 2em;
}

/* Responsiveness */
@media (max-width: 768px) {
    .platform-container {
        flex-direction: column;
    }

    .platform-left,
    .platform-right {
        width: 100%;
    }
    .platform-left img{
        height: 400px;
    }
    /* 3. Platform: Make Thumbnails Horizontally Scrollable */
    .platform-thumbnails {
        flex-wrap: nowrap;      /* Prevent thumbnails from wrapping */
        overflow-x: auto;       /* Enable horizontal scrolling */
        justify-content: flex-start; /* Align items to the start */
        padding-bottom: 10px;   /* Add some padding for scrollbar space */
        /* Optional: Hide scrollbar */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none;  /* IE/Edge */
    }
     .platform-thumbnails::-webkit-scrollbar {
        display: none; /* Chrome/Safari/Opera */
    }
    .platform-thumbnail {
        width: 110px;        /* Keep existing width or adjust */
        height: 110px;       /* Keep existing height or adjust */
        flex-shrink: 0;      /* Prevent thumbnails from shrinking */
        margin-right: 5px;   /* Add a small gap between thumbnails */
        margin-bottom: 0;    /* Remove bottom margin */
        padding: 2px;        /* Adjust padding if needed */
        object-fit: contain; /* Keep contain or change to cover */
    }
}
/* Css for the list */
.platform-right ul {
 list-style-type: none; /* Remove default bullets */
 padding: 0; /* Remove default padding */
 margin: 0; /* Remove default margins */
}

/* Each item within the list */
.platform-right ul li {
 font-size: 1em; /* Set to make sure the text does not exceed dimensions*/
 line-height: 1.6; /* Vertical text spacing.  Good spacing to the eye is 1.4 - 1.6 */
 margin-bottom: 5px; /* Set distance to spacing of each elements for good UX practices */
}

/* Accessories Section Styles */
/* accessories.css */

.accessories-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}

.accessories-left {
    width: 48%;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
}

.accessories-left img {
    width: 100%;
    max-height: 500px; /* You can adjust this value */
    object-fit: contain; /* Prevent image cropping */
    display: block;
    margin: 0 auto;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Container for horizontal scrolling (mostly relevant for mobile) */
.accessories-thumbnails-container {
    overflow-x: auto;    /* Enable horizontal scroll if needed */
    white-space: nowrap; /* Keep items in one line */
    padding: 10px 0;   /* Add some padding */
    display: block;    /* Ensure it behaves as a block */

    /* Optional: Hide scrollbar visually */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE/Edge */
}

.accessories-thumbnails-container::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera */
}


/* Flex container holding the actual thumbnails */
.accessories-thumbnails {
    display: flex; /* Use flexbox to lay out thumbnails */
    /* align-items: center; /* Optional: Vertically align if heights differ slightly */
}

.accessories-thumbnail {
    width: 95px; /* Make thumbnails smaller */
    height: 95px;
    flex-shrink: 1;
    margin-right: 3px;   /* Add consistent spacing between thumbnails */
    cursor: pointer;
    border: 1px solid #ddd;
    box-sizing: border-box; /* Include border in width/height calculation */
    display: block;      /* Treat as a block element */
    overflow: hidden;    /* Hide any parts of the image that might technically overflow */
    background-color: #f0f0f0; /* Optional: Placeholder color for loading/missing images */
    object-fit: contain;
    cursor: pointer;
    margin-right: 5px;
    transition: opacity 0.3s ease; /* Keep hover effect if desired */
    opacity: 0.8; /* Example hover effect */
}

.accessories-right {
    width: 52%;
    padding: 40px;
    box-sizing: border-box;
    background-color: white;
}

.accessories-right h2 {
    font-size: 1.8em;
    margin-bottom: 10px;
    text-align: left;
    color: #f0ad4e;
}


.accessories-right h3 {
    font-size: 1.4em;
    margin-top: 15px;
    margin-bottom: 5px;
}

.accessories-right p {
    font-size: 1em;
    line-height: 1.4;
    margin-bottom: 10px;
}
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0; /* adjust text position */
}

th, td {
    border: 1px solid #ddd;/*Add colors*/
    padding: 8px;   /* Code the data here */
    text-align: left; /*align to side*/
}

th {
    background-color: #f2f2f2; /*adjust back colr*/
    font-weight: bold;      /* code style and adjust*/
}

@media (max-width: 768px) {
    .accessories-container {
        flex-direction: column;
    }

    .accessories-left,
    .accessories-right {
        width: 100%;
    }
    /* Mobile images to take up more area if they are small */
    .accessories-left img{
        max-width: 99%; /*  Image width */
        max-height: 510px;   /* image should be height ,  set as a large number so not disturb  */
    }
     /* 4a. Accessories: Make Thumbnails Horizontally Scrollable */
     .accessories-thumbnails-container {
        overflow-x: auto;        /* Enable horizontal scrolling */
        white-space: nowrap;     /* Prevent wrapping (works with inline-block/flex items) */
        padding-bottom: 10px;    /* Add padding for scrollbar */
         /* Optional: Hide scrollbar */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none;  /* IE/Edge */
    }
     .accessories-thumbnails-container::-webkit-scrollbar {
        display: none; /* Chrome/Safari/Opera */
    }
    .accessories-thumbnails {
        /* Ensure it's still a flex container if needed, but wrapping is handled by parent */
        display: flex; /* Keep flex display */
        /* justify-content: flex-start; /* Align to start if needed */
    }
    .accessories-thumbnail {
        width: 80px;         /* Consistent small size */
        height: auto;        /* Consistent small size */
        flex-shrink: 1;      /* Prevent shrinking */
        margin-right: 3px !important;   /* Add gap */
        object-fit: contain;
        border: 1px solid #ddd;/*Add colors*/

    }

    /* 4b. Accessories: Make Table Responsive (Horizontally Scrollable) */
    .table-responsive-wrapper { /* This is the new wrapper div you'll add in HTML */
        overflow-x: auto;
        display: block;
        width: 100%;
        -webkit-overflow-scrolling: touch; /* Optional: Smooth scrolling on iOS */
    }
    /* Optional: Style the table within the wrapper if needed */
    .accessories-right .table-responsive-wrapper table {
         width: 100%; /* Ensure table tries to fit, but wrapper handles overflow */
         min-width: 500px; /* Force horizontal scroll below this width */
    }
}
/* stylesheet for safety */

.safety-container {
    padding: 20px;
}

.safety-content {
    display: flex;
    flex-wrap: wrap; /* Allows content to wrap on smaller screens */
}

.safety-left{
    width: 100%; /* Full width by default for small screens */
    padding: 10px;
    box-sizing: border-box;
}

.safety-right {
    width: 100%; /* Full width by default for small screens */
    padding: 10px;
    box-sizing: border-box;
}

.safety-thumbnails {
    display: flex;
    justify-content: center; /* Center thumbnails horizontally */
    align-items: center;      /* Center thumbnails vertically (if needed) */
    margin-top: 10px;
    overflow-x: auto; /* Enable horizontal scrolling if thumbnails overflow */
}

.safety-thumbnail {
    /* Keep your existing thumbnail styles */
    width: 80px; /* Adjust as needed */
    height: 80px; /* Adjust as needed */
    margin-right: 5px; /* Adjust for spacing between thumbnails */
    cursor: pointer;
    border: 1px solid #ccc;
    object-fit: cover; /* Prevents thumbnails from stretching */
}

/* Medium screens and larger */
@media (min-width: 768px) {
    .safety-left {
        width: 50%; /* Divide into two columns on medium screens and up */
       
       
    }

    .safety-right {
        width: 50%; /* Divide into two columns on medium screens and up */
        background: linear-gradient(to bottom, #f4f4f4, #f1f5f3 50%, #d5dbd7);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Example Box Shadow */
       
    }
}

#safety-main-image {
    max-width: 100%;
    height: auto;
    display: block;
}

#safety-text-content {
    padding-left: 70px;
    padding-right: 70px;
    text-align: left; /* Align text to the right */
}

#safety-text-content h2 {
    text-align: left;  /* Ensure the heading is also right-aligned */
}

/* staircase Tower css stylesheet */

.staircase-container {
    padding: 20px;
}

.staircase-content {
    display: flex;
    flex-wrap: wrap;
}

.staircase-left, .staircase-right {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

/* Staircase Thumbnails */
.staircase-thumbnails {
    display: flex;
    justify-content: center; /* Centered Thumbnails */
    margin-top: 10px;
    overflow-x: auto;
}

.staircase-thumbnail {
    width: 80px;
    height: 80px;
    margin-right: 5px;
    cursor: pointer;
    border: 1px solid #ccc;
    object-fit: cover;
}

/* Media Queries for Responsiveness */
@media (min-width: 768px) {
    .staircase-left {
        width: 50%;
       
    }

    .staircase-right {
        width: 50%;
        background: linear-gradient(to bottom, #f4f4f4, #f1f5f3 50%, #d5dbd7);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Example Box Shadow */
    }
}

/* Staircase Images */
#staircase-main-image {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Staircase Text Content */
#staircase-text-content {
    padding-left: 50px;
    padding-right: 50px;
    text-align: justify;
}

#staircase-text-content h2 {
    text-align: left;
}



/* Coding for Formwork */
/* Aluminum Formwork Section Styles */
.aluminum-container {
    display: flex;
    flex-wrap: wrap; /* for responsiveness */
    width: 100%;
    max-width: 1200px; /* Adjust as needed */
    margin: 0 auto; /* Centering the container */
    box-sizing: border-box;
}

.aluminum-left {
    width: 25%;
    box-sizing: border-box;
}

.aluminum-left img {
    width: 100%;
    height: auto;
    display: block;
    max-height: 800px;    /* code for small images */
    object-fit: contain;
    margin: 0 auto;    
}

.aluminum-right {
    width: 75%;
    padding: 20px;
    box-sizing: border-box;
    background-color: #3e3f41;
}

.aluminum-right h2 {
    font-size: 2em;
    /* Increased for prominence */
    margin-bottom: 0.5em;
    color: #d8d8d8;
    padding: 30px 30px 40px 30px;
}

.aluminum-right h3 {
    font-size: 1.3em;
    margin-bottom: 1em;
    color: #d8d8d8;
    padding: 0 30px 0 30px;
}

.aluminum-right p {
    font-size: 1.1em;
    line-height: 1.4;
    /* Improved readability */
    padding: 0 30px 0 30px;
    margin-bottom: 1.5em;
    color: #d8d8d8;
    text-align: justify;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .aluminum-container {
        flex-direction: column;
        /* Stack left and right */
    }

    .aluminum-left,
    .aluminum-right {
        width: 100%; /* Full-width on mobile */
    }

    .aluminum-left img {
        max-height: 400px;    /* code for small images */
        margin-bottom: 20px;
    }
}

.alum-components-container {
    display: flex;
    flex-wrap: wrap;
    width: 90%; /* Adjust as needed */
    max-width: 1200px; /* Adjust as needed */
    margin: 100px auto; /* Center the container */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.alum-left {
    width: 55%; /* Adjust image width */
    padding: 10px 0px 10px 0; /* Add some spacing around the image */
    box-sizing: border-box; /* Include padding in width calculation */
    display: flex;               /* Enable Flexbox */
    align-items: center;        /* Vertically center items */
    justify-content: center;     /* Optionally center items horizontally */
}

.alum-left img {
    width: 100%;
    height: auto;
    display: block;
    
}

.alum-right {
    width: 45%; /* Adjust text/list width */
    padding: 20px;
    box-sizing: border-box; /* Include padding in width calculation */
    background-color: #fff;
}

.alum-right h2 {
    font-size: 1.6em;
}

.component-list {
    display: flex;
    flex-direction: column; /* Stack components vertically */
}

.component-item {
    margin-bottom: 20px; /* Spacing between items */
}

.item-container {
    /* Add styling to the item container */
    width: 100%;
}

.item-con-container{
    display: flex; /* This enables Flexbox */
    background-color: #ffd167;
    border-radius: 5px; /* Optional: Rounded corners for the image */
    flex-direction: row; /* Align items in a row */
    align-items: center; /* Center items vertically */}

.item-con-text {width: 60%; padding: 1em;}
.item-con-image{width: 40%;}

.responsive-image {
    width: 100%;       /* Make the image take the full width of its parent */
    max-width: 100%;   /* Ensure it does not exceed its original width */
    height: auto;      /* Maintain the aspect ratio */
    object-fit: cover; /* Cover the container while maintaining aspect ratio */
    display: block;    /* Prevents extra space below the image */
    overflow: hidden;  /* Hide any overflowing content */
}


.item-container-box {
    border: 1px solid #ddd;
    padding: 5px;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.text_content h3 {
    font-size: 1.2em;
    margin-bottom: 5px;
}

.text_content p {
    font-size: 0.9em;
    line-height: 1.4;
    color: #555;
}

.component-image {
    width: 150px;
    height: auto;
    margin-left: 15px;
    
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .alum-components-container {
        flex-direction: column; /* Stack image and text on smaller screens */
    }

    .alum-left,
    .alum-right {
        width: 100%; /* Full width on smaller screens */
        padding: 10px;
    }
    .item-container {
        /* Add styling to the item container */
        width: 100%;
    }

    .item-con-image img{max-width: 130px;}
    
}

/* General styles */


.formwork-section {
    display: flex;
    width: 90%; /* Adjust for desired overall width */
    max-width: 1200px; /* Maximum width for larger screens */
    margin: 40px auto;
    background-color: #fff; /* Section background */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Optional: Shadow */
    overflow: hidden; /* Prevent content from overflowing rounded corners */
}

/* Left side (Image) */
.image-area {
    width: 60%;
    box-sizing: border-box;
}

.image-area img {
    width: 100%;
    height: auto;
    display: block; /* Remove any default inline spacing */
}

/* Right side (Text) */
.text-area {
    width: 40%;
    background-color: white;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribute content vertically */
}

.text-area p {
    font-size: 1em;
    line-height: 1.6;
    color: #555;
    padding: 80px 50px 10px 50px;
    text-align: justify;
}

.action-button {
    width:220px;
    margin-left: 50px;
    text-align: center;
}

.action-button:hover {
    cursor: pointer;
}

/* Responsive design */
@media (max-width: 768px) {
    .formwork-section {
        flex-direction: column; /* Stack left and right sides */
        width: 95%; /* Take up more width on smaller screens */
    }

    .image-area,
    .text-area {
        width: 100%;
    }
    .text-area p{
        padding-top: 2rem;
    }
}

/* Gallery images css code*/
.gallery_section {
    overflow: hidden;
}

.gallery_container {
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
    width: 90%;
    max-width: 1200px;
    margin: 20px auto;
}

.gallery_scroll_area {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0 10px;
}

.gallery_scroll_area::-webkit-scrollbar {
    display: none;
}

.gallery_card {
    width: 250px;
    height: 200px;
    margin: 10px;
    border-radius: 5px;
    overflow: hidden;
    scroll-snap-align: start;
    flex-shrink: 0;
    perspective: 1000px;
    cursor: pointer;
}

.gallery_card_inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.gallery_card:hover .gallery_card_inner {
    transform: rotateY(180deg);
}

.gallery_card_front,
.gallery_card_back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gallery_card_front {
    background-color: transparent;
    color: black;
}

.gallery_card_back {
    background-color: #ffd167;
    color: black;
    transform: rotateY(180deg);
}

/* Alternate background colors */
.gallery_card:nth-child(odd) .gallery_card_back {
    background-color: #ffd167;
}

.gallery_card:nth-child(even) .gallery_card_back {
    background-color: #fff;
    color: #000;
}

.gallery_card_image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery_card_content {
    padding: 15px;
    text-align: center;
}

.gallery_card_content h3 {
    margin-top: 0;
    font-size: 1.1em;
    font-weight: bold;
}

.gallery_card_content p {
    font-size: 0.9em;
    line-height: 1.4;
}

.gallery_scroll_button {
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    padding: 10px 10px;
    font-size: 1.2em;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.gallery_scroll_button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.gallery_prev {
    left: -50px;
}

.gallery_next {
    right: -50px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .gallery_card {
        width: 100%;
        min-width: calc(100% - 20px); /* Ensure the card is at least as wide as the viewport minus padding */
        padding: 1rem;
    }

    .gallery_prev {
        left: 0;
    }

    .gallery_next {
        right: 0;
    }
}

@media (max-width: 480px) {
    .gallery_card {
        width: 100%; /* Ensure it takes the full width */
        min-width: calc(100% - 20px); /* Ensure the card is at least as wide as the viewport minus padding */
    }
}

/* Image Section Styling */
.image-section {
    width: 100%; /* Full width */
    background-color: #f4f4f4; /* Background color */
    overflow: hidden; /* Prevent scrollbars if image exceeds the container */
    margin-bottom: 0 !important;
    border-radius: 0px;
}

.image-section img {
    width: 100%; /* Image takes full width */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove extra space below the image */
    object-fit: contain; /* Make sure whole image is always visible */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .image-section img {
    width: 100%;
    height: auto;
    /* Adjust image height if needed for smaller screens */
    /* height: auto;  Or you can specify a specific height value here */
  }
}

@media (min-width: 769px) and (max-width: 1200px) {
  .image-section img {
    width: 100%;
    height: auto;
    /* Adjust image height if needed for medium screens */
    /* height: auto;  Or you can specify a specific height value here */
  }
}