/* Logo styles */
.header-logo .logo-img {
    height: auto;
}

/* Header text styles */
.header-text {
    text-align: right;
    /* Align the text to the right */
}

    .header-text p {
        margin: 0;
        padding: 0;
        color: white;
    }

    .header-text .sub-text {
        font-size: 12px;
        /* Style for the second paragraph */
        color: white;
        font-family: cursive;
        margin-top: -2px;
        font-size: 18px;
        /* Add space between the two paragraphs */
    }

.fixed_enquiry_btn_web {
    position: fixed;
    bottom: 5%;
    left: 3%;
    z-index: 99;
}

    .fixed_enquiry_btn_web a:nth-child(1) {
        background-color: #f15d30;
        padding: 10px 15px 10px 15px;
        border-radius: 100px;
        font-size: 15px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        word-spacing: 1px;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        display: inline-block;
        margin-bottom: 20px;
        color: #fff;
    }

    .fixed_enquiry_btn_web a span {
        font-size: 20px;
        color: #fff;
    }

    .fixed_enquiry_btn_web a:nth-child(2) {
        background-color: #24cc63;
        padding: 5px 10px 5px 10px;
        border-radius: 100px;
        font-size: 15px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        word-spacing: 1px;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        display: block;
        margin-bottom: 20px;
        color: #fff;
    }

    .fixed_enquiry_btn_web > a:nth-child(3),
    .envelope {
        background-color: #0693e3;
        padding: 11px 15px 11px 15px;
        border-radius: 100px;
        font-size: 15px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        word-spacing: 1px;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        display: block;
        margin-bottom: 20px;
        color: #fff;
    }

    .fixed_enquiry_btn_web svg path {
        fill: #fff;
    }

.bar-bottom.scrolled {
    background-color: blue !important; /* New color when scrolled */
}

.scrollable-area {
    height: 300px; /* Adjust height as needed */
    overflow-y: auto; /* Enable vertical scrolling */
    border: 1px solid #ccc; /* Optional border */
    background-color: #fff; /* Background color of the scrollable area */
    padding: 10px; /* Padding for content */
}

    /* Custom scrollbar styles for WebKit browsers (Chrome, Safari) */
    .scrollable-area::-webkit-scrollbar {
        width: 12px; /* Width of the scrollbar */
    }

    .scrollable-area::-webkit-scrollbar-thumb {
        background-color: #888; /* Default scrollbar color */
        border-radius: 6px; /* Rounded corners */
    }

        .scrollable-area::-webkit-scrollbar-thumb:hover {
            background-color: #555; /* Color on hover */
        }

/* Custom scrollbar styles for Firefox */
.scrollable-area {
    scrollbar-width: thin; /* Thin scrollbar */
    scrollbar-color: #888 #f1f1f1; /* Thumb color and track color */
}
@media (max-width: 992px) {
    .about-section {
        padding: 80px 15px;
    }

        .about-section h1 {
            font-size: 40px;
        }

    .breadcrumb {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .about-section {
        padding: 60px 10px;
    }

        .about-section h1 {
            font-size: 36px;
        }

    .breadcrumb {
        font-size: 14px;
    }

        .breadcrumb .icon {
            font-size: 18px;
        }
}

@media (max-width: 480px) {
    .about-section {
        padding: 40px 5px;
    }

        .about-section h1 {
            font-size: 32px;
        }

    .breadcrumb {
        font-size: 12px;
    }

        .breadcrumb .icon {
            font-size: 16px;
        }
}