/* styles.css */

:root {
    --primary-color: #a28050;
    /* Light gold color */
    --secondary-color: #333; /* #9f8153 */
    /* Dark grey/black */
    --background-color: #f4f4f4;
    /* 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: var(--secondary-color);
    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) / 1) 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: #3a4256;
    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: #fff;
    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: #fff; /* 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 */
    color: #ff521c
}

.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;
}
/* 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: #000;
    /* 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 */
}

/* Business Section Styles */
.business-section {
    background-image: url('../images/business_bg.png');
    background-size: cover;
    background-position: center;
    padding: 50px 0;
    text-align: center;
}

.business-section .container {
    max-width: 1400px;
    /* Adjust container width as needed */
}

.business-section h2 {
    font-size: 2.5em;
    color: var(--secondary-color);
    margin-bottom: 20px;
}

.business-section .business-description {
    font-size: 1.1em;
    color: #555;
    margin-bottom: 30px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.business-cards-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
}

.business-card {
    width: 300px;
    background-color: var(--white-color);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease;
}

.business-card:hover {
    transform: translateY(-5px);
}

.business-card img {
    width: 50%;
    height: auto;  /* Make height auto for responsiveness */
    object-fit: cover;  /* or contain, depending on desired behavior */
}

.business-card h3 {
    font-size: 1.3em;
    color: var(--secondary-color);
    margin: 15px 0;
    padding: 0 15px;
}

.business-card a {
    display: inline-block;
    padding: 10px 15px;
    background-color: #f0f0f0;
    color: #555;
    text-decoration: none;
    border-top: 1px solid #ddd;
    width: 100%;
    text-align: center;
    transition: background-color 0.3s ease;
}

.business-card a:hover {
    background-color: #ddd;
}

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

.explore-more-button {
    display: inline-block;
    padding: 12px 30px;
    background-color: #ee5b32;
    color: var(--white-color);
    border-radius: 15px;
    text-decoration: none;
    font-size: 1em;
    transition: background-color 0.3s ease, color 0.3s ease;
    border: none;
    box-sizing: border-box;
}

.explore-more-button:hover {
    background-color: #fff;
    color: #ee5b32;
    outline: 2px solid #ee5b32;
}
/* 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, #c0b283, transparent);
    margin-bottom: 20px;
}

.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: #303f55;
    padding: 30px;
    color: #fff;
}

/* 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 #303f55;
    /* White triangle */
}

.csr-text h2 {
    font-size: 2em;
    color: #fff;
    margin-bottom: 15px;
    margin-top: 2rem;
    display: inline-block;
    /* Make it inline to contain the pseudo-element */
}
.csr-text p {
    font-size: 0.9em;
    line-height: 1.5;
    margin-bottom: 20px;
    color: #fff !important;
    text-align: justify;
    padding: 0 30px;
  }

  .csr-explore-button {
    background-color: #ee5b32;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    border-radius: 5px;
    width: fit-content;
    margin-left: 30px;
  }
  .csr-explore-button:hover {
    background-color: #fff;
    color: #ee5b32;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    border-radius: 5px;
    width: fit-content;
    margin-left: 30px;
  }


  .csr-quote {
    color: #e07a5f;
    font-size: 3rem;
  }
/* 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-color: #fff;
    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: #f4f4f4;
    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 #ee5b32;
    background: none;
    color: #333;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 1.2em;
}

.download-button:hover {
    border: 1px solid #ee5b32;
    background: #ee5b32;
    color: #fff;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 1.2em;
}

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;
  }
/* 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) {
    
  
    
    .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: #303f55;
           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 i {
    color: #fff;
    /* For the home icon */
}
.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 */
       }
       .business-section {
           padding: 30px 0;
       }
   
       .business-section h2 {
           font-size: 2em;
       }
   
       .business-section .business-description {
           font-size: 1em;
           padding: 0 20px;
       }
   
       .business-cards-container {
           flex-direction: column;
           align-items: center;
       }
   
       .business-card {
           width: 90%;
           /* Make cards take up more width on smaller screens */
           max-width: 400px;
       }
   
      
       .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;
        }
   }
   /* styles.css */

/* Development Partner Section Styles */
.dev-partner-section {
    background-color: #f4f4f4;
    /* Light grey background */
    padding: 50px 0;
}

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

.dev-partner-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    display: flex;
    width: 100%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Shadow effect */

}

.dev-partner-left {
    width: 40%;
    text-align: justify;
    /* Justify text alignment */
    padding: 40px;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.8);
    /* Add a subtle background to help readability */
}

.dev-partner-left .dev-partner-header {
    position: relative;
    margin-bottom: 20px;
}

.dev-partner-left .dev-partner-header h2 {
    font-size: 2em;
    margin-bottom: 10px;
    color: #333;
}

/* New Decorative Line */
.dev-partner-left .dev-partner-header .new_decorative_line {
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 350px;
    height: 5px;
    background: linear-gradient(to left, #c0b283, #a28050);
    border-radius: 5px;
}

.dev-partner-left p {
    font-size: 0.921em;
    color: #555;
    line-height: 1.4;
    /* Reduced line spacing */
    margin-bottom: 20px;
}

.dev-partner-right {
    width: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.dev-partner-right img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover; /* ensures the image fills properly*/
}

/* Responsiveness for smaller screens */
@media (max-width: 768px) {
    .dev-partner-content {
        flex-direction: column;
    }

    .dev-partner-left {
        width: 100%;
        padding: 20px;
    }

    .dev-partner-right {
        width: 100%;
        margin-top: 20px;
    }

    .dev-partner-right img {
        height: auto;
    }
}

/* styles.css */

/* Transport Section Styles */
.transport-section {
    background-color: #f4f4f4;
    padding: 0;
    display: flex;
    /* Add to align items horizontally */
    justify-content: center;
    /*Add to set from the center from the container */
}

.transport-section .container {
    max-width: 1200px;
    width: 100%;
    /* Add so that content can align properly inside the container */
}

.transport-content {
    display: flex;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Shadow effect */
    align-items: center;
}

/* Left: Image Column */
.transport-left {
    width: 60%;
    /*Take 605% of the website in large screens*/
    position: relative;
}

.transport-left .transport-image-container {
    position: relative;
    /* Needed for the pseudo-element */
    overflow: hidden;
}

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

/* Right: Text Column */
.transport-right {
    width: 40%;
    /*Take 30% for responsive design*/
    padding: 30px 60px 30px;
    box-sizing: border-box;
    background-color: #fff;
    display: flex;
    flex-direction: column;
}

.transport-right p {
    font-size: 0.91em;
    color: #555;
    line-height: 1.4;
    margin-bottom: 20px;
    text-align: justify;
}

.transport-right .explore-more-button {
    margin-top: auto;
    /* Pushes the button to the bottom */
    width: 200px;
    /* Set a fixed width */
    max-width: 100%;
    /* Ensure it doesn't overflow on smaller screens */
    text-align: center;
    /* Center the text inside the button */
}

/* Responsive Design */
@media (max-width: 768px) {

    .transport-section {
        text-align: center;
        display: block;
    }

    /*For every thing responsive*/
    .transport-content {
        flex-direction: column;
    }

    .transport-left {
        width: 100%;
    }

    .transport-right {
        width: 100%;
        padding: 20px;
    }
}

/* styles.css */

/* Site Description Section Styles */
.site-description-section {
    background-color: #f4f4f4;
    /* Light grey background */
    padding: 0;
    font-size: 0.9em;
}

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

.site-description-content {
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    background-color: #f4f4f4;
}

/* Left: Text Column */
.site-description-left {
    width: 35%;
    padding: 40px;
    box-sizing: border-box;
    text-align: left;
    background-color: #fff;
    position: relative;
    /* For absolute positioning of the divider */
}

.site-description-left .site-description-header h2 {
    font-size: 1.5em;
    color: red;
    /* Set title to red color */
    margin-bottom: 20px;
}

/*Add a devider to make the code responsive and design of the code*/
.site-description-left::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1px;
    /* Adjust thickness */
    background-color: #ddd;
    /* Adjust color for the horizontal content */
}

/* Style table to be as per the requirements*/
.site-description-left .site-description-table {
    width: 100%;
    /* occupy full horizontal container*/
    border-collapse: collapse;
    margin-bottom: 20px;
    /* Adding space around other components*/
    border: none;
    /* Removing all table borders */
    border-spacing: 0;
    /* removing table corner spacing*/
    padding: 0;
    /*remove border spacing to 0*/
}

/*Style for tables to perform desired function*/
.site-description-left .site-description-table td {
    padding: 4px;
    /*Remove space between content*/
    text-align: left;
    border-top: 1px solid #ddd; /* Light grey for the top border */
    border-bottom: 1px solid #ddd; /* Light grey for the bottom border */
}

.site-description-left .site-description-table tr:first-child td{
    color: #333;
    border-top: none;
}

.site-description-left .site-description-table tr:last-child td {
    color: #333;
    border-bottom: none;
}

.site-description-left .explore-more-button {
    margin-top: 10px;
    /*Space between the text and the button*/
}

/*Right Image Column*/
.site-description-right {
    width: 65%;
    position: relative;
    overflow: hidden;
}

.site-description-right img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.right_design {
    font-size: 32px;
    background-color: rgba(255, 255, 255, 0.6);
    display: grid;
    position: absolute;
    bottom: 25px;
    font-family: 'Times New Roman', Times, serif;
    color: #000;
    margin-left: 12px;
    padding: 100px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .site-description-content {
        flex-direction: column;
    }

    .site-description-left {
        width: 100%;
        padding: 20px;
    }

    .site-description-right {
        width: 100%;
    }

    .site-description-right img {
        height: auto;
        /*height auto so the image will occupy fully*/
    }
}

/* Amenities Section Styles */
.amenities-section {
    background-color: #fff;
    /* White background */
    padding: 50px 0;
}

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

#amenitiesCarousel {
    position: relative;
}

.amenities-slide {
    display: flex;
    justify-content: center;
    /* Space evenly */
    align-items: center;
}

.amenity {
    text-align: center;
    width: 20%;
    /* Adjust for screen size */
    padding: 15px;/* Reduced padding */
    box-sizing: border-box; /* Important to prevent overflow */

}

.amenity i {
    font-size: 40px;
    color: #f05d35;
    /* Adjust size as needed */
    margin-bottom: 10px;
    display: block;
    text-align: center;
    /* Center horizontally */
}

.amenity p {
    font-size: 0.9em;
    color: #555;
}

/* Custom Carousel Controls */
.carousel-control-prev,
.carousel-control-next {
    width: 5%;
    /* Adjust width of the controls */
    
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 1);
    /* Add some padding for visibility*/
    width: 30px;
    height: 30px;
    /* Make it circle */
    background-size: 50%;
    padding: 5px;
}

/* Responsive Design */
@media (max-width: 768px) {

    .amenities-section {
        padding: 20px 0;
        /* Less padding on smaller screens */
    }

    .amenities-slide {
        flex-direction: column;
        /* Stack amenities vertically */
    }

    .amenity {
        width: 80%;
        /* occupy the screen*/
        margin-bottom: 20px;
        /* Add spacing between stacked content*/
    }
}

/* styles.css (or your existing stylesheet) */

/*--------------------------------------------------------------
# Location Section
--------------------------------------------------------------*/
.location-section {
    /* You might want to add some padding or margin if the image is too close to other sections */
    padding: 0; /* Adjust as needed */
    margin: 0;
}

.location-section .container-fluid {
    padding: 0; /* Remove container padding for full width */
    margin: 0;
}

.location-section .location-image {
    width: 100%; /* Make image full width of the screen */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove any potential extra spacing below the image */
}

/* Add more styles below as required */