:root {
    --default-font: "Poppins", sans-serif;
    --heading-font: "Poppins", sans-serif;
    --nav-font: "Poppins", sans-serif;
}


/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */

:root {
    --background-color: #ffffff;
    --default-color: #000000;
    --heading-color: #52565e;
    --primary-color: #90c541;
}


/* Smooth scroll */

:root {
    scroll-behavior: smooth;
}


/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/

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

a {
    color: var(--accent-color);
    text-decoration: none;
    transition: 0.3s;
}

a:hover {
    color: color-mix(in srgb, var(--accent-color), transparent 25%);
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--heading-color);
    font-family: var(--heading-font);
}


/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/


/* Custom CSS for the header */

.violaheader {
    font-family: var(--default-font);
    background-color: white;
    padding: 1.5rem 0;
    position: sticky;
    top: 0;
    z-index: 1020;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.violaheader .upper-section {
    padding: 0 1rem;
    border-bottom: 1px solid rgb(233, 231, 231);
    padding-bottom: 20px;
}

.violaheader .lower-section {
    margin-top: 1.5rem;
}

.violaheader .lower-section h1 {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.2rem;
    color: #333;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 20px;
}

.violaheader .logo img {
    max-height: 80px;
    /* Adjust as needed */
}

.violaheader .menu-btn {
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 0.5rem 1rem;
    background-color: transparent;
    color: #000000;
    font-weight: 500;
    transition: all 0.3s ease;
}

.violaheader .menu-btn i {
    color: #000000;
}

.violaheader .menu-btn:hover {
    background-color: var(--primary-color);
    color: white;
}


/* Off-canvas menu styles */

.offcanvas-menu {
    position: fixed;
    top: 0;
    right: -50%;
    /* Hidden by default, now 50% */
    width: 50%;
    height: 100vh;
    background-color: #000;
    color: #fff;
    z-index: 1050;
    transition: right 0.7s ease-in-out;
    padding: 20px 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.offcanvas-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/home/header_img.png");
    background-position: 60% 40%;
    background-repeat: no-repeat;
    opacity: 0.1;
    z-index: 0;
}

.header_imgage img {
    height: 100%;
    width: 100%;
}

.offcanvas-menu.show {
    right: 0;
}

.offcanvas-menu .close-btn {
    display: block;
    margin-left: auto;
    font-size: 2rem;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
    z-index: 1;
}

.offcanvas-menu .close-btn:hover {
    transition: 0.70s;
    transform: rotate(90deg);
}

.offcanvas-menu .main-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 2rem;
    z-index: 1;
}

.offcanvas-menu .main-menu li {
    margin-bottom: 18px;
}

.offcanvas-menu .main-menu a {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 300;
    transition: color 0.3s;
}

.main-menu li a.active::before {
    content: "\2022";
    transform: translateY(-50%);
    font-size: 1rem;
    padding-right: 5px;
    color: var(--primary-color);
}

.offcanvas-menu .main-menu a:hover {
    color: var(--primary-color);
    /* Viola green for hover effect */
}

.offcanvas-menu .main-menu a.active {
    color: #a3e635;
    /* Active link color */
    font-weight: 700;
}

.offcanvas-menu .main-menu .has-submenu>a {
    cursor: pointer;
}

.offcanvas-menu .main-menu .has-submenu .dropdown-icon {
    transition: transform 0.3s ease-in-out;
}

.offcanvas-menu .main-menu .has-submenu.open .dropdown-icon {
    transform: rotate(180deg);
}

.offcanvas-menu .sub-menu-dropdown {
    list-style: none;
    padding: 12px 0 8px 20px;
    /* Indent sub-menu */
    margin: 0.5rem 0 0 0;
    display: none;
}

.offcanvas-menu .sub-menu-dropdown li a {
    font-size: 16px;
    font-weight: 400;
    color: #ccc;
}

.offcanvas-menu .bottom-menu {
    margin-top: auto;
    /* Pushes this section to the bottom */
    height: 180px;
    z-index: 1;
}

.offcanvas-menu .sub-menu {
    list-style: none;
    padding: 0;
    margin: 2rem 0 1rem 0;
}

.offcanvas-menu .sub-menu li {
    margin-bottom: 0.5rem;
}

.offcanvas-menu .sub-menu a {
    color: #fdfdfd;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s;
}

.offcanvas-menu .sub-menu a:hover {
    color: #fff;
}

.offcanvas-menu .social-icons {
    margin-top: 10px;
}

.offcanvas-menu .social-icons a {
    color: #ffffff;
    font-size: 24px;
    margin-right: 1rem;
    transition: color 0.3s;
}

.offcanvas-menu .social-icons a:hover {
    color: #a3e635;
}


/* Responsive adjustments */

@media (max-width: 767.98px) {
    .violaheader .lower-section h1 {
        font-size: 1rem;
        letter-spacing: 5px;
    }
    .offcanvas-menu {
        width: 100%;
        right: -100%;
        padding: 10px 30px;
    }
    .violaheader .logo img {
        max-height: 50px;
    }
    .violaheader {
        padding: 10px 0;
    }
    .violaheader .upper-section {
        padding-bottom: 10px;
    }
}


/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/

.footer-section {
    background-color: #fff;
    padding: 4rem 0;
    color: #333;
}

.contact-card {
    background-color: #f8f9fa;
    border-radius: 1rem;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.contact-card .icon-circle {
    background-color: var(--primary-color);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 1rem;
}

.contact-card .icon-circle i {
    color: #fff;
    font-size: 1.5rem;
}

.contact-card .contact-info {
    font-size: 0.9rem;
    color: #555;
}

.footer-logo-container {
    margin-bottom: 2rem;
}

.footer-logo {
    width: 180px;
    height: auto;
    margin-bottom: 1rem;
}

.footer-social-icons a {
    display: inline-block;
    color: #000000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.5rem;
    transition: all 0.3s ease-in-out;
    font-size: 24px;
}

.footer-social-icons a:hover {
    background-color: var(--primary-color);
}

.footer-heading {
    color: var(--primary-color);
    font-weight: bold;
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
}

.footer-links li a {
    color: #555;
    text-decoration: none;
    transition: color 0.3s ease-in-out;
    font-size: 0.9rem;
}

.footer-links li a:hover {
    color: var(--primary-color);
}

.newsletter-input-group {
    display: flex;
    align-items: center;
}

.newsletter-input-group .form-control {
    border-radius: 0.5rem 0 0 0.5rem;
    border: 1px solid #ced4da;
    box-shadow: none;
}

.newsletter-input-group .btn-send {
    background-color: var(--primary-color);
    color: #fff;
    border: 1px solid var(--primary-color);
    border-radius: 0 0.5rem 0.5rem 0;
    padding: 0.5rem 1rem;
    transition: background-color 0.3s ease-in-out;
}

.newsletter-input-group .btn-send:hover {
    background-color: var(--primary-color);
}

.footer-bottom-text {
    border-top: 1px solid #e9ecef;
    padding-top: 2rem;
    margin-top: 3rem;
    text-align: center;
    font-size: 0.9rem;
    color: #6c757d;
}

@media (max-width: 768px) {
    .contact-card {
        flex-direction: column;
        text-align: center;
    }
    .contact-card .icon-circle {
        margin: 0 0 1rem 0;
    }
}


/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/

.page-title {
    color: var(--default-color);
    background-color: var(--background-color);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 160px 0 60px 0;
    text-align: center;
    position: relative;
}

.page-title:before {
    content: "";
    background-color: color-mix(in srgb, var(--background-color), transparent 40%);
    position: absolute;
    inset: 0;
}

.page-title h1 {
    font-size: 56px;
    font-weight: 500;
    margin-bottom: 10px;
}

.page-title .breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    justify-content: center;
    padding: 0;
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

.page-title .breadcrumbs ol li+li {
    padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
    content: "/";
    display: inline-block;
    padding-right: 10px;
    color: color-mix(in srgb, var(--default-color), transparent 20%);
}


/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/

.section {
    color: var(--default-color);
    background-color: var(--background-color);
    padding: 100px 0;
    scroll-margin-top: 92px;
    overflow: clip;
}

.custom_section {
    color: var(--default-color);
    background-color: var(--background-color);
    padding: 0 0 100px 0;
    scroll-margin-top: 92px;
    overflow: clip;
}

@media (max-width: 1199px) {
    section,
    .section {
        scroll-margin-top: 76px;
        padding: 40px 0;
    }
}

.viola-container {
    width: 80%;
    margin-left: 10%;
}

.viola-container-background {
    width: 80%;
    margin-left: 10%;
    background-color: #EEF2F4;
    border-radius: 15px;
}

@media (max-width: 1199px) {
    .viola-container {
        width: 92%;
        margin-left: 4%;
    }
    .viola-container-background {
        width: 92%;
        margin-left: 4%;
    }
}


/*--------------------------------------------------------------
# Home Hero Section
--------------------------------------------------------------*/

.violahomeheader {
    position: relative;
    width: 100%;
    height: 74vh;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.slider-item {
    position: relative;
    height: 74vh;
    border-radius: 10px;
}

.slider-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    -webkit-filter: grayscale(100%);
    /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.664);
    /* Black overlay */
    z-index: 2;
}

.content {
    position: relative;
    z-index: 3;
    color: white;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
    height: 100%;
    width: 100%;
}

.content .header-section {
    position: absolute;
    top: 48%;
    transform: translate(0, -50%);
    left: 10%;
    right: 10%;
}

.content .header-text {
    font-size: 70px;
    font-weight: 700;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    color: white;
}

.content .bottom-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    bottom: 15%;
    left: 10%;
    right: 10%;
}

.content .paragraph-header {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 0;
    max-width: 80%;
    color: white;
}

.content .paragraph-text {
    font-size: 20px;
    font-weight: 300;
    line-height: 1.5;
    margin-bottom: 0;
    max-width: 80%;
    color: white;
}

.content .btn-custom-viola {
    background-color: transparent;
    color: #ffffff;
    border: 1px solid white;
    border-radius: 10px;
    padding: 10px 20px;
    font-weight: 300;
    transition: background-color 0.3s;
    font-size: 18px;
}

.content .btn-custom-viola i {
    color: var(--primary-color);
    font-size: 24px;
    margin-left: 10px;
}

.content .btn-custom-viola:hover {
    background-color: #8ac02b;
    color: black;
}

.content .btn-custom-viola:hover i {
    color: #000000;
}

.slick-prev,
.slick-next {
    top: 45%;
}

.slick-prev,
.slick-next {
    z-index: 4;
}

.slick-next {
    right: 5%;
}

.slick-prev {
    left: 2%;
}

.slick-prev::before {
    content: " ";
    border-left: 10px solid #acacac;
    border-bottom: 10px solid #acacac;
    width: 70px;
    height: 70px;
    transform: rotate(45deg);
    cursor: pointer;
    display: block;
}

.slick-next::before {
    content: " ";
    border-right: 10px solid #acacac;
    border-top: 10px solid #acacac;
    width: 70px;
    height: 70px;
    transform: rotate(45deg);
    cursor: pointer;
    display: block;
}

.slick-dots {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
    z-index: 4;
    color: white;
}

.slick-dots li button:before {
    font-size: 10px;
    color: rgb(255, 255, 255);
    opacity: 0.5;
}

.slick-dots li.slick-active button:before {
    opacity: 1;
}

.slick-dots li.slick-active button::before {
    color: white;
}

@media (max-width: 900px) {
    .violahomeheader {
        height: 64vh;
    }
    .slider-item {
        height: 64vh;
    }
    .content {
        left: 2%;
        right: 2%;
    }
    .content .header-section {
        top: 40%;
        left: 15%;
        right: 15%;
    }
    .content .header-text {
        font-size: 2rem;
    }
    .content .paragraph-text {
        font-size: 1rem;
        max-width: 100%;
    }
    .content .paragraph-header {
        font-size: 16px;
    }
    .content .bottom-section {
        flex-direction: column;
        align-items: flex-start;
        position: absolute;
        bottom: 10%;
        left: 15%;
        right: 15%;
    }
    .content .btn {
        margin-top: 1rem;
        align-self: flex-start;
    }
    .content .btn-custom-viola {
        font-size: 16px;
        padding: 10px 15px;
    }
    .content .btn-custom-viola i {
        font-size: 16px;
    }
    .slick-next {
        right: 7%;
    }
    .slick-prev {
        left: 2%;
    }
    .slick-prev::before {
        width: 40px;
        height: 40px;
    }
    .slick-next::before {
        width: 40px;
        height: 40px;
    }
}


/*--------------------------------------------------------------
# Viola Home About Section
--------------------------------------------------------------*/

.viola_home_about_box {
    position: relative;
    padding: 100px 0;
}

.viola_home_about_background {
    position: absolute;
    right: 15%;
    top: 0;
    bottom: 0;
    opacity: .1;
    z-index: 0;
}

.viola_home_about_background img {
    height: 100%;
    width: auto;
}

.viola_home_about {
    z-index: 1;
    width: 90%;
}

.viola_home_about h5 {
    font-size: 14px;
    letter-spacing: 15px;
    color: var(--primary-color);
    font-weight: 400;
    margin-bottom: 40px;
}

.viola_home_about h2 {
    font-size: 32px;
    color: black;
    font-weight: 600;
    text-align: justify;
    margin-bottom: 40px;
}

.viola_home_about p {
    font-size: 18px;
    color: black;
    font-weight: 400;
    text-align: justify;
    padding-bottom: 10px;
}

@media (max-width: 900px) {
    .viola_home_about_background {
        display: none;
    }
    .viola_home_about {
        width: 100%;
    }
    .viola_home_about h5 {
        font-size: 12px;
    }
    .viola_home_about h2 {
        font-size: 24px;
        text-align: left;
    }
    .viola_home_about p {
        font-size: 16px;
    }
}


/*--------------------------------------------------------------
# Viola Home Solutions Section
--------------------------------------------------------------*/

.home_solutions_header {
    background-color: #EEF2F4;
    padding: 50px 10px;
    width: 98%;
    margin-left: 1%;
    text-align: center;
    border-radius: 10px;
}

.home_solutions_header h6 {
    font-size: 14px;
    letter-spacing: 20px;
    color: var(--primary-color);
    font-weight: 400;
}

.home_solutions_header h2 {
    font-size: 32px;
    color: black;
    font-weight: 600;
}

.solution-card {
    background-color: #fff;
    border-radius: 1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem;
}


/* Custom background images for each card */

.card-bg-1 {
    background-image: url('../img/home/icon/construction.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    filter: grayscale(100%);
}

.card-bg-2 {
    background-image: url('../img/home/icon/renewable.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    filter: grayscale(100%);
}

.card-bg-3 {
    background-image: url('../img/home/icon/power.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    filter: grayscale(100%);
}

.card-bg-4 {
    background-image: url('../img/home/icon/water_solution.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    filter: grayscale(100%);
}

.card-bg-5 {
    background-image: url('../img/home/icon/climate.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    filter: grayscale(100%);
}


/* Overlay to make the text readable on top of the background image */

.card-overlay {
    background-color: rgba(255, 255, 255, 0.932);
    padding: 40px 60px;
    display: flex;
    align-items: center;
    width: 100%;
    /* Add a transition for a smooth size change */
    transition: padding 0.5s ease-in-out;
}

.icon-box {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 50px;
    transition: opacity 0.5s ease-out;
}

.icon-box img {
    height: 100%;
    width: 100%;
}

.solution-card h3 {
    color: black;
    font-size: 35px;
    padding-bottom: 50px;
    letter-spacing: 2px;
}

.download-btn {
    background-color: #000;
    color: #fff;
    border: none;
    padding: 0.75rem 2.5rem;
    border-radius: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}


/* Style for the text that will be hidden by the scroll event */

.scroll-hide-text {
    transition: opacity 0.2s ease-out;
    opacity: 1;
    font-size: 20px;
}

.scroll-hide-text.hidden {
    opacity: 0;
    height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
}


/* Class to hide the icon-box */

.icon-box.hidden {
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    overflow: hidden;
}


/* Media query for smaller screens */

@media (max-width: 767px) {
    .home_solutions_header h2 {
        font-size: 24px;
    }
    .solution-card h3 {
        font-size: 24px;
    }
    .card-overlay.collapsed h3 {
        padding-top: 15px;
    }
    .card-overlay {
        flex-direction: column;
        text-align: center;
    }
    .icon-box {
        margin-right: 0;
        margin-bottom: 1rem;
    }
    .card-overlay.collapsed {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
}


/*--------------------------------------------------------------
# Home Project Section
--------------------------------------------------------------*/

.viola_home_project_box {
    background-color: #EEF2F4;
    border-radius: 10px;
    width: 98%;
    margin-left: 1%;
}

.viola_section_small {
    font-size: 14px;
    letter-spacing: 20px;
    color: var(--primary-color);
    font-weight: 400;
}

.viola_section_header {
    font-size: 32px;
    color: black;
    font-weight: 600;
}

.violahomeproject {
    background-color: transparent;
    border-radius: 1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 1px solid rgb(223, 221, 221);
}

.violahomeproject-image {
    width: 100%;
    height: auto;
    border-radius: 1rem;
}

.violahomeproject-features-container {
    transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

.violahomeproject-features-container.visible {
    max-height: 500px;
    /* A large enough value for the transition */
    opacity: 1;
}

.violaprojecttitle {
    font-size: 18px;
    color: black;
    font-weight: 400;
    margin-bottom: 15px;
}

.violaprojectdes {
    font-size: 22px;
    color: black;
    font-weight: 500;
    margin-bottom: 15px;
}


/* Flexbox container for features */

.violahomeproject-flex-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    /* Spacing between items */
    margin-bottom: 1.5rem;
    align-items: stretch
}

.violahomeproject-feature-item {
    flex-grow: 1;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    text-align: center;
    background-color: #ffffff;
    color: #000000;
    font-weight: bold;
}

.violahomeproject-feature-item-small {
    font-size: 0.8rem;
    color: #777;
    font-weight: normal;
}

.violahomeproject-view-all-btn {
    color: var(--primary-color);
    border: none;
    font-size: 30px;
    cursor: pointer;
}

@media (max-width: 767px) {
    .viola_section_header {
        font-size: 24px;
    }
}


/*--------------------------------------------------------------
# Home Company logo Section
--------------------------------------------------------------*/

.logo-grid {
    padding: 2rem 0;
}

.logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 0.5rem;
    padding: 25px;
    height: 120px;
    /* Fixed height for uniform size */
    margin-bottom: 1rem;
}

.logo-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}


/* Custom 5-column layout for medium and larger screens */

@media (min-width: 768px) {
    .col-md-2_4 {
        width: 20%;
    }
}


/* Responsive grid adjustments */


/* On screens smaller than 768px, display 2 logos per row */

@media (max-width: 767px) {
    .logo-item-container {
        width: 50%;
    }
}


/*--------------------------------------------------------------
# Home Banner Section
--------------------------------------------------------------*/

.viola_home_banner {
    background-color: var(--primary-color);
    padding: 80px 0;
    position: relative;
}

.viola_home_banner_background {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 10%;
}

.viola_home_banner_background img {
    height: 100%;
    width: 100px;
    opacity: .1;
    object-fit: cover;
}

.banner_small {
    font-size: 14px;
    letter-spacing: 10px;
    color: rgb(255, 255, 255);
    padding-bottom: 15px;
}

.banner_header {
    font-size: 24px;
    font-weight: bold;
    color: black;
}


/*--------------------------------------------------------------
# Viola Service Page Css Design
--------------------------------------------------------------*/

.viola_page_header h1 {
    font-size: 70px;
    text-align: center;
    letter-spacing: 35px;
    font-weight: 600;
    color: black;
    margin-bottom: 60px;
    margin-top: 20px;
    text-transform: uppercase;
}

.viola_page_bottom_header h2 {
    font-size: 24px;
    text-align: center;
    color: black;
    font-weight: 500;
    letter-spacing: 1px;
}

.viola_page_bottom_header p {
    font-size: 18px;
    text-align: center;
    letter-spacing: 2px;
    font-weight: 300;
    color: rgb(54, 54, 54);
}


/* Card container styling using the new class name */

.violaservicepage {
    position: relative;
    background-color: #f8f9fa;
    border-radius: 1rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-bottom: 2rem;
    width: 100%;
    transition: box-shadow 0.3s ease-in-out;
}


/* The common pseudo-element styling for the background image */

.violaservicepage::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    opacity: 0.1;
    z-index: 0;
    transition: opacity 0.5s ease-in-out;
    filter: grayscale(100%);
}

.violaservicepagebox {
    padding: 60px;
}


/* Individual background images based on a unique class */

.violaservicepage.bg-construction::before {
    background-image: url('../img/home/icon/construction.jpg');
}

.violaservicepage.bg-renewable::before {
    background-image: url('../img/home/icon/renewable.jpg');
}

.violaservicepage.bg-power::before {
    background-image: url('../img/home/icon/power.jpg');
}

.violaservicepage.bg-water::before {
    background-image: url('../img/home/icon/water_solution.jpg');
}

.violaservicepage.bg-climate::before {
    background-image: url('../img/home/icon/climate.jpg');
}


/* The main header section of the card */

.violaservicepage .card-header-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    min-height: 20px;
    /* Set a minimum height for the collapsed state */
}


/* Styles for the header and icon */

.violaservicepage .card-header-content img {
    width: 40px;
    height: 40px;
    margin-right: 20px;
}

.violaservicepage .card-header-content .title {
    color: black;
    font-size: 35px;
    letter-spacing: 2px;
}


/* The collapsible content area using Grid for a smoother transition */

.violaservicepage .card-details-content {
    display: grid;
    grid-template-rows: 0fr;
    /* Collapsed state */
    transition: grid-template-rows 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
}

.violaservicepage .card-details-content .content-inner {
    overflow: hidden;
    /* Hide content when grid row is 0 */
    padding: 5px 0 0 62px;
}


/* The button to expand/collapse the card */

.violaservicepage .toggle-btn {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    color: var(--primary-color);
    border: none;
    z-index: 2;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
    font-size: 30px;
    background-color: transparent;
}

.violaservicepage .toggle-btn:hover {
    background-color: transparent;
}


/* The styles for when the card is expanded */

.violaservicepage.expanded {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.violaservicepage.expanded .card-details-content {
    grid-template-rows: 1fr;
    /* Expanded state */
}


/* Rotate the icon when the card is expanded */

.violaservicepage.expanded .toggle-btn {
    transform: rotate(180deg);
}


/* Bullet point styling for the services list */

.violaservicepage .list-group-item {
    border: none;
    padding: 0.25rem 0;
    background: none;
}

.violaservicepage .list-group-item::before {
    content: "";
    display: inline-block;
    height: 10px;
    width: 10px;
    background-color: black;
    margin-right: 0.75rem;
}


/* Responsive adjustments for smaller screens */

@media (max-width: 768px) {
    .violaservicepage .card-header-content {
        padding: 1rem;
        min-height: 100px;
    }
    .violaservicepage .card-header-content .title {
        font-size: 1.25rem;
    }
    .violaservicepage .card-header-content .icon {
        font-size: 1.5rem;
        margin-right: 1rem;
    }
    .violaservicepage .card-details-content .content-inner {
        padding: 0 1rem;
    }
    .violaservicepage.expanded .card-details-content .content-inner {
        padding: 1rem;
    }
    .violaservicepage .toggle-btn {
        bottom: 1rem;
        right: 1rem;
    }
}

.viola_process_steps {
    width: 100%;
    margin: auto;
}


/* Main grid for the three-column layout */

.process-step {
    border-bottom: 1px solid #e9ecef;
    padding: 3rem 0;
    align-items: center;
    position: relative;
    background-color: white;
    z-index: 1;
    height: 140px;
}

.process-step:last-child {
    border-bottom: none;
}

.process-step .step-number {
    font-size: 10rem;
    font-weight: 700;
    color: rgba(233, 236, 239, 0.7);
    line-height: 1;
    text-align: left;
    position: absolute;
    left: 0;
    bottom: -40px;
    z-index: 0;
}

.process-step:last-child .step-number {
    bottom: -10px;
}

.process-step .step-box {
    width: 88%;
    position: absolute;
    left: 14%;
    top: 0;
    bottom: 0;
}

.process-step .step-title {
    font-size: 22px;
    font-weight: 500;
    color: #212529;
    margin: 0;
}

.process-step .step-description {
    font-size: 18px;
    font-weight: 400;
    color: #495057;
    line-height: 1.6;
    margin: 0;
}


/* Responsive adjustments for smaller screens */

@media (max-width: 768px) {
    .viola_process_steps {
        padding: 1rem;
    }
    .process-step {
        padding: 1rem 0;
    }
}


/*--------------------------------------------------------------
# Viola About Us page
--------------------------------------------------------------*/

.viola_page_header_image {
    position: relative;
    height: 250px;
    width: 100%;
    border-radius: 15px;
    overflow: hidden;
}

.viola_page_header_image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.viola_page_header_image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.37);
}

.viola_aboutpage_header h2 {
    font-size: 32px;
    color: black;
    font-weight: 600;
    margin-bottom: 40px;
    letter-spacing: 15px;
}

.viola_aboutpage_header p {
    font-size: 18px;
    color: black;
    font-weight: 300;
    text-align: justify;
    padding-bottom: 10px;
}


/* mission vission */


/* Renamed container class */

.viola_about_mission {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}


/* Renamed card class */

.viola_about_mission-card {
    background-color: transparent;
    border-radius: 1rem;
    text-align: center;
    flex: 1;
    transition: transform 0.3s ease-in-out;
}

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


/* Renamed header class */

.viola_about_mission-card .viola_about_mission-header {
    background-color: #e9ecef;
    padding: 1rem;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #212529;
    text-transform: uppercase;
    border-radius: 1rem;
}


/* Renamed content class */

.viola_about_mission-card .viola_about_mission-content {
    padding: 2rem;
}

.viola_about_mission-card .icon {
    font-size: 3rem;
    color: #ced4da;
    margin-bottom: 1rem;
}

.viola_about_mission-card .icon-target {
    position: relative;
    display: inline-block;
    font-size: 3rem;
    color: #ced4da;
    margin-bottom: 1rem;
}

.viola_about_mission-card .icon-target .fa-crosshairs {
    color: #adb5bd;
}

.viola_about_mission-card .icon-target .fa-arrow-right {
    position: absolute;
    top: -0.25rem;
    right: -0.5rem;
    color: #28a745;
    font-size: 1.5rem;
    transform: rotate(-45deg);
}

.viola_about_mission-card p {
    font-size: 1rem;
    color: #495057;
    line-height: 1.6;
}


/* Responsive layout for tablets and desktops */

@media (min-width: 768px) {
    .viola_about_mission {
        flex-direction: row;
    }
    /* Renamed divider class */
    .viola_about_mission-divider {
        width: 1px;
        height: auto;
        background-color: #e9ecef;
        align-self: stretch;
        margin: 0 0.75rem;
    }
}


/* Hide the divider on mobile */

@media (max-width: 767px) {
    .viola_about_mission-divider {
        display: none;
    }
}


/* The main grid container */

.viola_about_principles {
    display: grid;
    border-radius: 1rem;
    overflow: hidden;
    /* Ensures rounded corners */
}


/* Each cell in the grid */

.principle-cell {
    background-color: transparent;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    padding: 30px 10px;
}

.principle-cell .header {
    font-size: 19px;
    font-weight: 300;
    letter-spacing: 15px;
    color: #28a745;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    min-height: 80px;
}

.principle-cell .description {
    font-size: 18px;
    font-weight: 600;
    color: #212529;
    line-height: 1.5;
    margin: 0;
}


/* Responsive grid layout */

@media (min-width: 768px) {
    .viola_about_principles {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }
    .principle-cell {
        border-right: 1px solid #e4e5e6;
        border-bottom: 1px solid #e4e5e6;
    }
    .principle-cell:nth-child(4n) {
        border-right: none;
    }
    .principle-cell:nth-child(n+5) {
        border-bottom: none;
    }
}

@media (max-width: 767px) {
    .principle-cell {
        border-right: 0;
        border-bottom: 1px solid #e4e5e6;
    }
}


/* team */

.viola_about_team {
    border-radius: 1rem;
    /* Using Bootstrap's .row class handles flexbox layout */
    overflow: hidden;
}

.viola_about_team .profile-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

.viola_about_team .profile-image-container img {
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    object-fit: cover;
}

.viola_about_team .profile-text-content {
    padding: 1.5rem;
    text-align: left;
}

.viola_about_team .profile-text-content h3 {
    font-size: 26px;
    font-weight: 700;
    color: #212529;
    margin-bottom: 0;
}

.viola_about_team .profile-text-content .title {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 15px;
    color: #495057;
    text-transform: uppercase;
    margin-bottom: 40px;
}

.viola_about_team .profile-text-content p {
    font-size: 18px;
    line-height: 1.6;
    color: #495057;
    margin-bottom: 1rem;
    text-align: justify;
}


/* New CSS for the drop cap effect */

.viola_about_team .profile-text-content .first-letter-dropcap::first-letter {
    font-size: 3rem;
    font-weight: 700;
    color: #212529;
    float: left;
    line-height: 1;
    padding-right: 0.5rem;
}


/*--------------------------------------------------------------
# Viola Contact form
--------------------------------------------------------------*/

.viola_contact_form {
    width: 100%;
    border-radius: 1rem;
}

.viola_contact_form h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color);
    letter-spacing: 1.5px;
    margin-bottom: 40px;
}


/* Styling for the form inputs */

.form-control {
    border: none;
    border-bottom: 1px solid #ced4da;
    border-radius: 0;
    padding: 0.75rem 0;
    font-size: 1rem;
    color: #495057;
    background-color: transparent;
}

.form-control:focus {
    box-shadow: none;
    border-color: #28a745;
}

.form-control::placeholder {
    color: #adb5bd;
    font-style: italic;
}

.form-floating label {
    left: 0;
    color: #adb5bd;
    font-style: italic;
}


/* Styling for the custom select arrow */

.form-select {
    border: none;
    border-bottom: 1px solid #ced4da;
    border-radius: 0;
    padding: 0.75rem 0;
    font-size: 1rem;
    color: #495057;
    background-color: transparent;
}

.viola_contact_form select:focus {
    box-shadow: none;
    border: transparent;
}


/* Styling for the submit button */

.btn-custom-contact {
    background-color: var(--primary-color);
    color: #fff;
    font-weight: 700;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    margin-top: 2rem;
    transition: all 0.3s ease;
}


/* Responsive adjustments for smaller screens */

@media (max-width: 768px) {
    .viola_contact_form {
        padding: 1rem;
    }
    .viola_contact_form h2 {
        font-size: 1.25rem;
        margin-bottom: 2rem;
    }
}

.viola_contact_info {
    width: 100%;
    background-color: #fff;
    border-radius: 1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    /* Add the background image with low opacity */
    background-image: url('../img/home/header_img.png');
    background-repeat: no-repeat;
    background-position: 80% 20%;
    position: relative;
    z-index: 1;
}


/* Use a pseudo-element for the low opacity effect to not affect text color */

.viola_contact_info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #e7e7e7;
    opacity: .98;
    z-index: -1;
    border-radius: 1rem;
}

.viola_contact_info .info-section {
    padding: 1.5rem 0;
    border-bottom: 1px solid #ced4da;
}


/* Remove the border from the last item */

.viola_contact_info .info-section:last-child {
    border-bottom: none;
}

.viola_contact_info .info-section .header {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #28a745;
    text-transform: uppercase;
    margin-bottom: 35px;
}

.viola_contact_info .info-section .contact_content {
    font-size: 1rem;
    font-weight: 500;
    color: #212529;
    line-height: 1.6;
}

.viola_contact_info .social-icons a {
    color: #212529;
    font-size: 40px;
    margin-right: 1.5rem;
    transition: color 0.3s ease;
}

.viola_contact_info .social-icons a:hover {
    color: #28a745;
}

@media (max-width: 767px) {
    .viola_page_header h1 {
        margin-bottom: 15px;
        margin-top: 0;
        font-size: 32px;
        letter-spacing: 15px;
    }
    .viola_page_bottom_header h2 {
        font-size: 18px;
    }
    .viola_page_bottom_header p {
        font-size: 16px;
        letter-spacing: 0;
    }
    .violaservicepagebox {
        padding: 20px;
    }
    .viola_home_about h5 {
        letter-spacing: 8px;
    }
    .viola_section_small {
        letter-spacing: 8px;
    }
    .home_solutions_header h6 {
        letter-spacing: 8px;
    }
    .process-step .step-box {
        left: 30%;
    }
    .process-step {
        height: 250px;
    }
}