/* styles.css */

:root {
    --primary-color: #206389;
    /* 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) / 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: #206389; /* 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;
}

.explore-more-button {
    display: inline-block;
    padding: 12px 30px;
    background-color: var(--white-color);
    color: #206389;
    border: 2px solid #206389;
    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: #206389;
    color: var(--white-color);
}
/* 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;
    margin-bottom: 0 !important;
}

.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 */
}



/* Partnerships Section Styles */
.partnerships-section {
    background-size: cover;
    background-position: center;
    padding: 50px 0 0 0;
    overflow: hidden;
    position: relative;
    min-height: 300px;
    margin-top: 0 !important;
}

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

   /* Quality Section Styles */
.quality-section {
    width: 100%;
    background-image: url("../images/business_bg.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    overflow: hidden;
    margin-bottom: 0 !important;
}

.quality-content {
    width: 80%;
    max-width: 1200px;
    display: flex;
    flex-wrap: wrap;
    /* Removing space between image and text */
    margin: 7rem auto; /* Center horizontally */
}

/* Image Styles */
.quality-image {
    width: 45%;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

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

/* Text Styles */
.quality-text {
    width: 55%;
    padding: 50px;
    background: linear-gradient(to right, #133971, #257795);
    color: white;
    position: relative;
     /* Adding box-shadow */
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); /* Adjust values as needed */
}

.quality-text h2 {
    margin-top: 0;
    font-size: 3.5em;
    font-weight: 500;
    line-height: 1.2;
}

.quality-text p {
    font-size: 1em;
    line-height: 1.6;
    opacity: 0.8;
    text-align: justify;
}

/* Triangle Style (Pseudo-element) */
.quality-text::before {
    content: "";
    position: absolute;
    left: -28px;
    top: 10%;
    transform: translateY(-50%);
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-right: 30px solid #133971;
}

/* Button style */
.quality-text button {
    background-color: white;
    border-radius: 25px;
    border: none;
    font-size: 15px;
    padding: 10px 20px;
    margin-top: 20px;
    cursor: pointer;
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
    .quality-content {
        width: 95%;
        flex-direction: column;
    }

    .quality-image {
        width: 100%;
        order: 1;
    }

    .quality-text {
        width: 100%;
        order: 2;
    }

    .quality-text::before {
        display: none;
    }

}
/* Truck Section Styles */
.truck-section {
    width: 100%;
    height: 30em;  /* 100% of viewport height */
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to bottom, #f7f7f7, #ffffff); /* Subtle background gradient */
    overflow: hidden; /* Prevent potential scrollbar issues */
    margin-top: 0 !important;
}

.truck-section img {
    max-width: 85%;  /* Adjust as needed for different screen sizes */
    max-height: 85vh; /* Limit image height to viewport height */
    width: auto;      /* Maintain aspect ratio */
    height: auto;
    display: block;
    margin: 0 auto;   /* Center the image horizontally */
    animation: truckSlide 2s linear infinite alternate; /* Apply animation */
}

/* Keyframes for animation */
@keyframes truckSlide {
    0% {
        transform: translateX(-10px); /* Start position */
    }
    100% {
        transform: translateX(10px);   /* End position */
    }
}

/* Media Query for smaller screens (optional) */
@media (max-width: 768px) {
    .truck-section img {
        max-width: 95%; /* Take up more width on smaller screens */
    }
    .truck-section {
        margin: -2rem auto;
        padding: 0px ;
    }
}

/* Centering the section of cement drum*/
.working-cement-section {
    min-height: 500px; /* Or whatever height you desire */
    max-width: 1200px; /* Set a maximum width for the section */
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    overflow: hidden;
    margin-bottom: 60px !important;
    background-color: #f4f4f4;
}

/* Ensuring no gap between columns */
.row.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.row.no-gutters > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

/* Image styling */
.image-container {
    padding: 0; /* Remove default column padding */
}

.image-container img {
    width: 100%;
    height: auto;
    object-fit: cover; /* Ensure the image covers the entire area */
    display: block; /* Remove any extra space below the image */
}

/* Text container styling */
.text-container {
    position: relative; /* For absolute positioning of the triangle */
    background: linear-gradient(to right, #133971, #257795);
    color: white;
    display: flex;
    align-items: center;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); /* Adjust values as needed */
}

.text-content {
    position: relative;
    z-index: 2; /* Ensure text is above the triangle */
    padding: 50px;
    text-align: justify;
}

.text-content p{
    line-height: 1.4em;
    font-size: 1em;
}

/* Triangle effect */
.text-container:before {
    content: '';
    position: absolute;
    left: -29px;
    top: 5%;
    width: 0;
    height: 0;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-right: 30px solid #133971; /* Match background color */
    z-index: 1; /* Put triangle behind the text */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .text-container:before {
        border: none; /* Remove triangle on smaller screens */
    }

    .text-container {
        padding-left: 15px;
    }
}

/* RNP footer Image Section Styling */
/* 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 */
  }
}