/* .navbar-nav li:hover{
background-color: red;
color: white;

    } */


    body{
        background-color: #F1F1F1;
    }
    .about-section {
        background-image: url('background.jpg');
        background-size: cover;
        color: #333;
       /* শুরুতে দেখানো হবে না */

    }

    .products-section .card {
        margin-top: 20px;
    }

    .testimonials-section {
        background-color: #F1F1F1;
    }

.dropdown-menu {
    display: none; /* Default state is hidden */
}

    .footer a:hover {
        text-decoration: underline;
    }
    .vision-box-1 p {
    font-size: 14px;
    white-space: pre-line; /* Preserve line breaks */
    margin: 0; /* Remove any default margin around the paragraph */
    padding: 0; /* Remove any padding */
}

.vision-box-1 p span {
    display: block; /* Ensure each item is displayed on a new line */
}
.logo-change {
    height: 60px;
}

   .navbar-brand img {
        max-width: 100%;
    height: 32px;
    transform: scale(2.2);
     margin-top: 10px;
         margin-left: -254px;
    }
.navbar-brand div {
    text-align: left;
    font-size: 18px;
    margin-left: 9px;
    font-weight: 600;
    color: #3b7d59;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
}
    /* Adjust for smaller screens if needed */
 @media (max-width: 768px) {
    .navbar-brand img {
        height: 30px;
        transform: scale(1.3);
        margin-left: 0px;
    }
    .navbar-brand div {
    text-align: left;
    font-size: 10px;
    margin-left: 4px;
    font-weight: 700;
    color: #3b7d59;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
}
}

    .nav-new li {
        /*margin-right: 18px;*/
        font-family: "Roboto", Sans-serif;
        font-size: 17px;
        font-weight: 600;
        text-transform: capitalize;
        color: black;
    }
    .nav-new li a {
        color: #000;
    }
    header {
        position: sticky;
        top: 0;
        z-index: 1000; /* Ensures the header stays on top of other elements */
        width: 100%;
    }
@media (max-width: 768px) {
   

    .about-dropdown {
        position: fixed;
    top: 0px; 
     left: 0px; 
    right: 0;
     width: 440px; 
    margin: -53px;
    background-color: #ffffff;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    display: none;
    z-index: 1000;
    padding: 20px;
    border: 4px solid red;
    background-color: #ffffff;
    border-left: none;
    border-right: none;
    border-bottom: none;
} /* মোবাইলে প্যাডিং ছোট করা হলো */
    
}

@media (max-width: 576px) {
        .about-dropdown {
        position: fixed;
    top: 0px; 
     left: 0px; 
    right: 0;
     width: 440px; 
    margin: -53px;
    background-color: #ffffff;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    display: none;
    z-index: 1000;
    padding: 20px;
    border: 4px solid red;
    background-color: #ffffff;
    border-left: none;
    border-right: none;
    border-bottom: none;
}
}
    /*.navbar {*/
    /*    padding: 1rem;*/
    /*}*/

    /* Optional: Add a background color on scroll */
    header.scrolled {
        background-color: #f8f9fa; /* Adjust the color to your needs */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow */
        transition: background-color 0.3s ease;
    }
    /* Full-width dropdown */

    .about-dropdown {

        position: fixed;
        top: 75px;
        left: -35px;
        right: 0;
        /*width: 1618px;*/
        margin: -53px;
        background-color: #ffffff;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
        display: none;
        z-index: 1000;
        padding: 20px;
           border: 3px solid #86ac7d;
        background-color: #ffffff;
        border-left: none;
        border-right: none;
        border-bottom: none;

    }

.content {
    position: relative;
    width: 591px;
    padding: 71px;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0; /* প্রথমে লুকানো থাকবে */
    transform: translateY(20px); /* স্লাইড আপ হওয়ার জন্য */
    transition: opacity 0.5s ease, transform 0.5s ease; /* অ্যানিমেশন *//* কালো ব্যাকগ্রাউন্ড ৫০% অস্বচ্ছতা */
}

    /* Show dropdown on hover */
    .nav-item.dropdown:hover .about-dropdown {
        display: block;
    }
    .nav-item.dropdown:hover .about-dropdown-1 {
        display: block;
    }
    .nav-item.dropdown:hover .about-dropdown-2 {
        display: block;
    }
    .nav-item.dropdown:hover .about-dropdown-3 {
        display: block;
    }

    /* Center content within the dropdown */
    .dropdown-content {
        /* max-width: 1200px;  */
        max-width: 1552px;
        margin: 0 auto;
        display: flex;
        align-items: flex-start;
        gap:100px;
    }

    .dropdown-image img {
        max-width: 250px;
        margin-right: 20px;
        border-radius: 5px;
        background-size: cover;
    }
    .dropdown-links li a {
        color: rgba(0, 0, 0, .5);
        font-size: 12px;
    }
    .dropdown-links ul {
        padding: 0;
        margin: 0;
    }

    .dropdown-links li {
        margin-bottom: 10px;
    }

    .dropdown-links a {
        text-decoration: none;
        color: #333;
    }

    /* //dropdown-2 */
    .about-dropdown-1{
        position: fixed;
      top:113px;
        left: 54px;
        right: 0;
        width: 1606px;
        margin: -53px;
        background-color: #ffffff;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
        display: none;
        z-index: 1000;
        padding: 20px;
        border: 4px solid red;
        background-color: #ffffff;
        border-left: none;
        border-right: none;
        border-bottom: none;
    }

    .dropdown-content-1{
        /* max-width: 1200px;  */
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        align-items: flex-start;
        gap:100px;
    }
    /*.about-dropdown-2{*/
    /*    position: fixed;*/
    /*  top:113px;*/
        /*left: 54px;*/
    /*    left: 75px;*/
    /*    right: 0;*/
    /*    width: 1606px;*/
    /*    margin: -53px;*/
    /*    background-color: #ffffff;*/
    /*    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);*/
    /*    display: none;*/
    /*    z-index: 1000;*/
    /*    padding: 20px;*/
    /*    border: 4px solid red;*/
    /*    background-color: #ffffff;*/
    /*    border-left: none;*/
    /*    border-right: none;*/
    /*    border-bottom: none;*/
    /*}*/

    .dropdown-content-2{
        /* max-width: 1200px;  */
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        align-items: flex-start;
        gap:100px;
    }
    .dropdown-content-1{
        /* max-width: 1200px;  */
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        align-items: flex-start;
        gap:100px;
    }
    .about-dropdown-3{
        position: fixed;
      top:113px;
        left: 54px;
        right: 0;
        width: 1606px;
        margin: -53px;
        background-color: #ffffff;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
        display: none;
        z-index: 1000;
        padding: 20px;
        border: 4px solid red;
        background-color: #ffffff;
        border-left: none;
        border-right: none;
        border-bottom: none;
    }

    .dropdown-content-3{
        /* max-width: 1200px;  */
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        align-items: flex-start;
        gap:100px;
    }

    .nav-item:hover .nav-link {
        background: linear-gradient(to right, #7db277, #388E3C);
        color: white;
    }
    /* Dropdown styling */

    /* Dropdown menu visibility on hover */
    .nav-item.dropdown:hover .dropdown-menu {
        display: block; border:none;
    }
.icon-down-arrow1 {
    font-size: 0.8rem; /* Adjust icon size if necessary */
    margin: 0; /* Remove any extra margin */
    padding: 0; /* Remove any extra padding */
}
    /* Dropdown content image and text visibility on hover */
    .nav-item.dropdown:hover .dropdown-content,
    .nav-item.dropdown:hover .dropdown-content-1 {
        display: flex;
    }
    .carousel-item {
                position: relative;
                overflow: hidden; /* Hide overflow for smooth effect */
            }

            .base-image {
                width: 100%;
                 /* Set a fixed height */
                transform: none; /* Start with a smaller scale */
                transition:none;
                object-fit:cover;/* Transition effect for 1 second */
            }

            .base-image.zoom-in {
                /*transform: scale(1); */
            }

            .overlay-image {
        position: absolute;
        top: 41%;
        right: 53px;
        transform: translateY(-50%);
        width: 22%;
        height: auto;
        z-index: 1;
    }



            .text-overlay {
                position: absolute;
                bottom: 35%; /* Position text above the bottom */
                left: 50%;
                transform: translateX(-50%);
                color: white;
                text-align: center;
                z-index: 2; /* Ensures text is above both images */
            }
            .about-section p {
        line-height: 1.6; /* লাইনগুলোর মধ্যে ফাঁকা জায়গা */
        text-align: justify; /* টেক্সটকে সুবিন্যস্তভাবে দেখাবে */
        margin: 15px 0; /* উপরে এবং নীচে মার্জিন */
        padding: 0 20px;
        color: #000;
        font-weight: 400;/* বাম এবং ডানদিকে প্যাডিং */
    }
    .about-section h2 {
        text-align: left; /* বাম দিকে সাজানোর জন্য */
        margin: 20px 19px ; /* উপরে এবং নিচে মার্জিন */
    }
    .about-section h2 {
        text-align: left; /* বাম দিকে সাজানোর জন্য */
        margin: 20px 19px; /* উপরে এবং নিচে মার্জিন */
    }
.name-.line {
    height: 3.5px;
    background-color: #207e52;
    width: 100%;
    /* margin-left: 471px; */
    margin-bottom: 10px;
}
/* For tablets (screen size 768px or smaller) */
@media (max-width: 768px) {
    .product-details {
           display: flex
;
    justify-content: space-between;
    align-content: space-between;
    flex-wrap: wrap;
    }
    .popup-content {
     position: relative;
    background-color: white;
    border-radius: 8px;
     padding: 0px; 
    max-width: 0px; 
     width: 0%;
}
 .popup {
        padding: 20px; /* Extra padding add korar jonno */
        overflow-y: scroll;
        height:0%;/* Vertical scroll korar sujog */
    }
}

/* For mobile devices (screen size 576px or smaller) */
@media (max-width: 576px) {
    .product-details {
            display: flex
;
    justify-content: space-between;
    align-content: space-between;
    flex-wrap: wrap;
    }
    .popup-content {
    position: relative;
    background-color: white;
    border-radius: 8px;
     padding: 0px; 
    max-width: 0px; 
     width: 0%; 
}
 .popup {
        padding: 20px; /* Extra padding add korar jonno */
        overflow-y: scroll;
         height:0%;/* Vertical scroll korar sujog */
    }
}
    /* মিডিয়া কোয়ারি - ছোট স্ক্রীনের জন্য */
    @media (max-width: 768px) {
        .about-section h2 {
            margin: 15px 10px; /* ছোট স্ক্রীনের জন্য মার্জিন কমানো */
            font-size: 1.5em; /* ফন্ট সাইজ পরিবর্তন */
        }
        .product-details .line {
    border-bottom: 2px solid rgb(36, 65, 33);
    width: 0%;
     margin-left: 0px;
}
    }

    /* মিডিয়া কোয়ারি - মোবাইল স্ক্রীনের জন্য */
    @media (max-width: 576px) {
        .about-section h2 {
            margin: 10px 18px; /* মোবাইল স্ক্রীনের জন্য মার্জিন আরও কমানো */
            font-size: 1.2em; /* ফন্ট সাইজ আরও কমানো */
        }
        .product-details .line {
    
   border-bottom: 2px solid rgb(36, 65, 33);
        width: 94%;
        margin-left: 4px;
}
    }
    .responsive-image {

        width: 100%; /* পুরো ডিভের প্রস্থে তৈরি করবে */
        height: auto; /* উচ্চতা স্বয়ংক্রিয়ভাবে পরিবর্তন হবে */
        transition: transform 0.5s ease; /* মসৃণ ট্রানজিশন */
    }


    .image-slide:hover .responsive-image {
        transform: scale(1.2); /* হোভার করার সময় 10% জুম ইন হবে */
    }
    .image-slide img {
        height: 301px;
        width: 441px;
        margin-top: 81px;
    }
   /* Initial hidden state */
.text-slide, .image-slide {
    opacity: 0;
    transform: translateX(100px);
    transition: all 0.8s ease;
}

/* Image slide-in effect */
.image-slide {
    transform: translateX(-100px);
}

/* Show state */
.text-slide.show, .image-slide.show {
    opacity: 1;
    transform: translateX(0);
}

.about-section button{
    /*margin-left: -441px;*/
    padding: 17px;
    width: 158px;

    font-weight: bold;
}
.content {
    position: relative;
    width: 591px;
    padding: 71px;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0; /* প্রথমে লুকানো থাকবে */
    transform: translateY(20px); /* স্লাইড আপ হওয়ার জন্য */
    transition: opacity 0.5s ease, transform 0.5s ease; /* অ্যানিমেশন *//* কালো ব্যাকগ্রাউন্ড ৫০% অস্বচ্ছতা */
}
.content h3, h2, p {
    opacity: 0; /* প্রথমে লুকানো থাকবে */
    transform: translateY(20px); /* স্লাইড আপ হওয়ার জন্য */
    transition: opacity 0.5s ease, transform 0.5s ease 0.5s; /* অ্যানিমেশন */
}
.content p {
    font-size: 20px;
    font-weight: 600;
    color: #25d852;
}
/* Subtitle text */
.content h3 {
    font-size: 1.2rem;
    font-weight: normal;
    margin: 0;
    padding-bottom: 10px;
    letter-spacing: 2px;
}

/* Main title text */
.content h1 {
    font-size: 3rem;
    font-weight: bold;
    margin: 0;
}

/* Different color for a specific word */
.highlight {
    color: #4CAF50; /* Green color */
}

/* Corner brackets for a stylish effect */
.corner-brackets {
    position: absolute;
    border: 10px solid white;
    width: 42px;
    height: 35px;
}

/* Position each corner */
.top-left {
    top: 20px;
    left: 20px;
    border-right: none;
    border-bottom: none;
}

.top-right {
    top: 20px;
    right: 20px;
    border-left: none;
    border-bottom: none;
}

.bottom-left {
    bottom: 20px;
    left: 20px;
    border-right: none;
    border-top: none;
}

.bottom-right {
    bottom: 20px;
    right: 20px;
    border-left: none;
    border-top: none;
}
.content {
    opacity: 0; /* প্রথমে লুকানো থাকবে */
    transform: translateY(20px); /* স্লাইড আপ হওয়ার জন্য */
    transition: opacity 0.5s ease, transform 0.5s ease; /* অ্যানিমেশন */
}
.content h2 {
    font-size: 26px;
}
.img-overlay-container {
    position: relative;
    /* padding: 6px; */
    height: 307px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.underline {
    width: 250px;
    height: 3px;
    background-color: #dc3545;
    margin: 16px 4px;
    display: inline-block;
}
.card-style-new-1{
    margin-top: -13px;
}
.card-img-top {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    opacity: 0.9;
        border-radius: 0px;
    /* মাউস হোভার করলে কিছুটা জুম হবে */
}
.product-style{
    margin-top: 20px;
    margin: 20px;
    border: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

}
.product-style h4 {
    color: rgb(16, 121, 49);
    padding: 10px;
}
.hover-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex
;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5);
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}

.img-overlay-container:hover .hover-content {
    transform: translateX(0); /* হোভার করলে বাঁ দিক থেকে স্লাইড ইন করবে */
}
.products-section{
    background-color: #F1F1F1;
}
.overlay-image-new {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7;

}

.overlay-text {
    position: absolute;
    /* top: 10%; */
    /* left: 10%; */
    color: white;
    text-align: left;
    opacity: 0;
    transition: opacity 2s ease;
    z-index: 1;
    text-decoration: none;
}
.img-overlay-container:hover .overlay-text {
    opacity: 1; /* হোভার করলে প্রদর্শন হবে */
}
.overlay-text li {
    color: white; /* লেখার রঙ সাদা */
    font-weight: bold; /* লেখাকে গাঢ় করতে */
}

.hover-content button{
    background-color: #F1F1F1;
    width: 100px;
    color: #000;
}
.overlay-text ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.view-all-btn {
    margin-top: 10px;
    padding: 5px 10px;
    background-color: #28a745;
    color: white;
    border: none;
    cursor: pointer;
    text-decoration: none;

font-size: 20px;

}

.view-all-btn:hover {
    background-color: #218838;
    color: white;
}
/* .video-testimonial iframe {
    width: 100%;
    height: auto;
} */
.red-line {
    width: 250px;
    height: 3px;
    background-color: #dc3545;
    margin: 23px 4px;
    display: inline-block;
}
.red-line-1 {
    width: 250px;
    height: 3px;
    background-color: #dc3545;
    margin: 23px 4px;
    display: inline-block;
    margin-top: 2px;
}
.blockquote {
    position: relative;
    font-family: cursive;
    background-color: #fff;
    padding: 29px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
    height: 230px;
    line-height: 30px;
}

.blockquote::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-37%) rotate(53deg);
    width: 14px;
    height: 14px;
    background-color: #fff;
    /* border-left: 1px solid #ddd; */
    /* border-top: 1px solid #ddd; */
    /* box-shadow: -3px -3px 5px rgba(0, 0, 0, 0.05); */
    z-index: 1;
}

.stat-number {
    font-size: 2em;
    font-weight: bold;
    color: white;
}
.stat-item h4 {
    margin-top: 1px;
    font-size: 19px;
    color: white;
}
.stat-item h4 {
    margin-top: 1px;
    font-size: 15px;
}
.stats-section {
    /* Replace with your image path */
    background-size: cover;
    background-position: center;
    position: relative;
    color: white; /* Text color for better contrast on the background */
    padding: 40px 0;
    height: 340px;
}
.stats-section-middle{
margin-top: 54px;
}
.stats-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1F2B3A;
    opacity: 0.9;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s; /* Adjust color and opacity for overlay */
    z-index: 1;
}

.stats-section .container {
    position: relative;
    z-index: 2;
}

.stat-item .stat-number {
    font-size: 2em;
    font-weight: bold;
    color: #c00; /* Red color for numbers */
}

.blockquote p {
    margin-top: -30px;
    font-size: 18px;
}
footer .name {
    color:  #dc3545; /* Makes "Subhash Yadav" text red */
    font-weight: bold;
    font-size: 1.2em;
    margin: 0;
}

 footer .location {
    color: rgb(180, 102, 29); /* Makes "Purnea, Bihar" text green */
    font-size: 1em;
    display: block;
    margin-top: 5px;
    font-weight: 600;
}

.stats-section {
    background-color: #f8f8f8; /* Light background color */
    padding: 40px 0;
}

.stats-section h2 {
    font-size: 1.8em;
    font-weight: bold;
    margin-bottom: 20px;
}

.stat-item {
    margin-bottom: 20px;
}

.stat-number {
    font-size: 2em;
    font-weight: bold;
    color: #c00; /* Red color for numbers */
}

@media (min-width: 768px) {
    .stats-section .row {
        display: flex;
        align-items: center;
    }

    .stats-section h2 {
        text-align: left;
    }

    .stats-section .stat-item p {
        margin: 0;
    }
}
.company-news h1 {
    color: #000;
    font-size: 25px;
}
.company-news{
    background-color: #F1F1F1;
}
.news-label {
    position: absolute;
    /* bottom: 10px; */
    left: 11%;
    transform: translateX(-50%);
    background-color: #d8232a;
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 16px;
    margin-top: -29px;
}
.news-label-1 {
    position: absolute;
    /* bottom: 10px; */
    left: 40%;
    transform: translateX(-50%);
    background-color: #d8232a;
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 16px;
    margin-top: -29px;
}
.news-label-2{
    position: absolute;
    /* bottom: 10px; */
    left: 70%;
    transform: translateX(-50%);
    background-color: #d8232a;
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 16px;
    margin-top: -29px;
}

.news-card {
    background-color: #fff;
    border: 1px solid #eaecef;
    overflow: hidden;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-card:hover {
    transform: translateY(-5px); /* Moves the card up by 5px */
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15); /* Adds a more pronounced shadow on hover */
}

.news-content {
    padding: 15px;
}
.location-1{
    color: rgb(165 85 10);
    font-weight: bolder;
}
.news-content h5 {
    font-size: 16px;
    font-weight: 600;
    margin: 10px 0;
    color: #333;
    line-height: 1.4;
}

.news-footer {
    /* /* display: flex; */
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #aaa;
    border-top: 1px solid #e0e0e0;
    padding-top: 10px;
    margin-top: 10px;
}

.news-date, .news-comments {
    color: #777;
}

.news-arrow {
    font-size: 16px;
    color: #333;
    background-color: #dee2e6;
    padding: 7px;
    /*margin-left: 166px;*/
}
.news-image {
    position: relative;
}

.news-image img {
    width: 100%;
    height: auto;
}
.news-arrow {
    font-size: 16px;
    color: #6a6767;
    font-weight: 600;
}

.footer-links i {
    color: #fff; /* White color for arrows */
    margin-right: 5px;
}

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

.footer-links a:hover {
    color: #d8232a;
    text-decoration: underline;
}
 h4 {
    position: relative;
    font-size: 18px;
    margin-bottom: 8px;
    color: #333;
}

.underline-about {
    width: 80%;
    height: 3px;
    background-color:white;
    /* margin: 0 auto; */
    /* margin-bottom: 15px; */
}
.footer {
    background: linear-gradient(to right, #7db277, #388E3C);
}
.footer h5{
    color: white;
    text-transform: uppercase;
}
.footer-paragraph {
    color: #fff;
    font-family: Poppins;
    line-height: 30px;
}
.footer .icon {
    font-size: 24px; /* আইকনের আকার */
    margin: 0 10px; /* আইকনের মধ্যে ফাঁকা জায়গা */
    color: #fff; /* আইকনের রঙ */
    transition: color 0.3s; /* রঙ পরিবর্তনের অ্যানিমেশন */
}
.footer-links  li{
    list-style-type: none;
    color: white;
    padding: 8px;
}
.footer-links {
    margin-left: -32px;
}
.footer-links  li a{

    color: white;
}

.office-info i{
    color: white;
}
.contact-info,.office-info,.business-hours i{
    color: white;
}
.business-hours span{
    color:
    white;
}
ul.navbar-nav.nav-new.ms-auto {
    background-color: #ffffff;
   
}
.text-color-change{
   color:black;
}








/* //contact us */
.aboutus-section {
    position: relative;
    background-image: url('path/to/your-image.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 20px;
    color: #333;
}

.aboutus-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.6);
    z-index: 1;
}

.aboutus-section .header-about {
    color: rgb(92, 57, 1);
    margin-top: -12px;
    position: relative; /* z-index কাজ করার জন্য */
    z-index: 2;
}

.aboutus-section .paragraph-about {
    font-family: Poppins;
    font-size: 17px;
    position: relative; /* z-index কাজ করার জন্য */
    z-index: 2;
}

.aboutus-section button {
    padding: 1px;
    width: 159px;
    background-color: #FAE7E5;
    border: 1px solid rgb(92, 57, 1);
    border-radius: 42px;
    font-weight: 600;
    color: rgb(92, 57, 1);
    position: relative; /* z-index কাজ করার জন্য */
    z-index: 2;
}

.contact-info-about {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Spacing between items */
}
.phone-icon i{
    color: #dc3545;
    background-color: #f4e9da;
    padding: 20px;
    border-radius: 46px;
    font-size: 23px;
    z-index: 2;
}
.location-icon i{
    color: #dc3545;
    background-color: #f4e9da;
    padding: 20px;
    border-radius: 46px;
    font-size: 23px;
    z-index: 2;
}
.timing-icon i{
    color: #dc3545;
    background-color: #f4e9da;
    padding: 20px;
    border-radius: 46px;
    font-size: 23px;
    z-index: 2;
}
.email-icon i{
    color: #dc3545;
    background-color: #f4e9da;
    padding: 20px;
    border-radius: 46px;
    font-size: 23px;
    z-index: 2;
}
.contact-item {
    display: flex;
    align-items: center; /* Center the icon and text vertically */
}

.contact-item i {
    margin-right: 10px;
     /* Space between the icon and text */
}

.contact-details {
    display: flex;
    flex-direction: column;
    margin-left: 20px;
    position: relative;
    z-index: 2; /* overlay-এর উপরে দেখাবে */
   /* লেখাকে গাঢ় করতে */
}
.label {
    font-weight: bold; /* Make the label bold */
}

.number {
    color: #212529;
}
.label {
    color: #212529;
    font-size: large;
}
.aboutus-section {
    position: relative;
    background-image: url('../image/pngwing.com-22.png'); /* ছবির পাথ দিন */
    background-size: cover; /* ইমেজ পুরো এলাকা ঢেকে রাখবে */
    background-position: center; /* ইমেজ কেন্দ্রস্থ হবে */
    background-repeat: no-repeat; /* ইমেজ রিপিট হবে না */
}

.aboutus-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.9); /* সাদা overlay */
    z-index: 1;
}
.image-container {
    position: relative; /* Overlay এর জন্য */
}


.custom-image {
    width: 100%;
    border-radius: 10px;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 2;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    height: 528px;
    object-fit: cover;
    top: 40px;
}
.custom-image:hover {
    transform: scale(1.05); /* হোভার করলে ইমেজ সামান্য বড় হবে */
}
section.aboutus-section {
    padding: 157px;
    margin-top: -73px;
}
@media (min-width: 1024px) {
    .full-paragraph {
        padding: 0px; /* বড় স্ক্রীনের জন্য প্যাডিং */
        margin-top: -100px; /* বড় স্ক্রীনের জন্য মার্জিন */
    }
}

/* ছোট স্ক্রীন (মোবাইল এবং ট্যাবলেট) */
@media (max-width: 1023px) {
    .full-paragraph {
        padding: 0px; /* ছোট স্ক্রীনের জন্য প্যাডিং পরিবর্তন */
        margin-top: 0; /* মার্জিন পরিবর্তন */
        width: 100%; /* পুরো জায়গা নেবে */
        box-sizing: border-box; /* প্যাডিং হিসেব করে পুরো জায়গা নেবে */
    }

    img {
        width: 100%; /* ইমেজ পুরো জায়গা নেবে */
        height: auto; /* ইমেজের উচ্চতা অটোমেটিকভাবে সামঞ্জস্য করবে */
        /* ইমেজ এবং টেক্সটের মধ্যে ফাঁকা জায়গা */
    }
}
.product-inquiry {
    background-image: url('../image/2148579680.jpg'); /* Replace with your image URL */
    background-size: cover;
    position: relative;
}

.product-inquiry .overlay {

    padding: 50px;


}

.inquiry-table {
    width: 100%;
    background-color: #fff; /* White background for the table */
    padding: 10px;
    margin-bottom: 20px;
    text-align: center;
}

.inquiry-form {
    display: flex;
    flex-direction: column;
    background-color: white;
    padding: 20px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}
.inquiry-form h4 {
    font-size: 27px;
}
.inquiry-form input,
.inquiry-form textarea {
    border: 2px solid #dee2e6;/* Change to your desired border color */
    border-radius: 4px; /* Optional: adds rounded corners to input fields */
    outline: none; /* Remove default outline */
}

.inquiry-form input:focus,
.inquiry-form textarea:focus {
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);/* Change border color on focus */
}
.center {
    text-align: center;
}
.inquiry-form .btn {
    width: 169px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
}
.form-row {
    display: flex;
    gap: 10px;
}

.form-row input {
    flex: 1;
}

.inquiry-form input,
.inquiry-form textarea,
.inquiry-form button {
    width: 100%;
    margin: 10px 0;
    padding: 10px;
    box-sizing: border-box;
}

.inquiry-form button {
    cursor: pointer;
}

.product-inquiry {
    animation: zoomIn 3s forwards; /* Automatic zoom effect */
}
.genesis-overview {
    text-align: center;
    margin: 20px 0;
}

.genesis-overview h4 {
    font-size: 24px;
    margin-bottom: 10px;
}

.line-with-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    /* margin: 10px 0; */
    width: 300px;
    margin-left: 616px;
    margin-top: -16px;
}

.line {
    height: 2px;
    background-color: red;
    flex: 1;
}

.icon {
    width: 34px; /* Adjust as needed */
    height: auto;
    margin: 0 10px;
    transform: scale(1.1); /* Slight zoom effect */
    transition: transform 0.5s ease-in-out; /* Smooth transition */
}

.icon img{

}
.genesis-overview-img img {
    width: 80%;
    height: 380px;
    /* float: right; */
    object-fit: cover;
    margin-left: 66px;
}
.genesis-overview-text p {
    line-height: 26px;
    font-family: Poppins;
    font-size: 17px;
}

/* Initial state for sliding animation */
.genesis-overview-img,
.genesis-overview-text {
    opacity: 0;
    transform: translateX(100px); /* Adjust for starting position */
    transition: all 1s ease; /* Smooth transition */
}

.genesis-overview-img.active {
    opacity: 1;
    transform: translateX(0); /* Slide in from right */
}

.genesis-overview-text.active {
    opacity: 1;
    transform: translateX(0); /* Slide in from left */
}

.genesis-overview-text {
    transform: translateX(-100px); /* Initial position from left */
}
/* Zoom-in animation for the heading */
.genesis-overview h4 {
    opacity: 0;
    transform: scale(0.8); /* Start with a smaller scale */
    animation: zoomIn 1s forwards;
}

/* Slide-in animation for the line with the icon */
.line-with-icon {
    opacity: 0;
    transform: translateX(-100px); /* Start slightly off-screen to the left */
    animation: slideIn 1s forwards;
    animation-delay: 1s; /* Delay to start after the heading animation */
}

/* Keyframes for zoom-in effect */
@keyframes zoomIn {
    to {
        opacity: 1;
        transform: scale(1); /* Zoom to normal size */
    }
}

/* Keyframes for slide-in effect */
@keyframes slideIn {
    to {
        opacity: 1;
        transform: translateX(0); /* Slide to normal position */
    }
}
.vision-background {
    background-image: url('../image/2148579680.jpg');
    background-size: cover;
    background-position: center;
    padding: 80px 0;
    position: relative;
}

.vision-background::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7); /* Black overlay with 50% opacity */
    z-index: 1;
}
.vision-box {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    padding: 40px;
    border: 1px solid white;
    /* text-align: center; */
    position: relative;
    z-index: 2;
    margin-bottom: 20px;
    height: 460px;
    transition: all 0.3s ease;
    align-items: inherit;
}

.vision-box:hover {
    border-color: red; /* Border color turns red on hover */
    transform: translateY(-10px); /* Moves box slightly upward */
}

.vision-box-1 {
    margin-top: -32px;
}
.timeline-section {
    text-align: center;
    padding: 20px;
}
.timeline-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}
.timeline-nav {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
}
.timeline-items {
    display: flex;
    gap: 70px;
}
.timeline-item {
    padding: 10px 20px;
    background-color: #f0f0f0;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}
.timeline-item.active {
    /* background-color: red; */
    color: white;
    position: relative;
}
.timeline-item.active::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    background-color: red;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.image-display {
    margin-top: 20px;

    padding: 10px;
    display: flex;
    justify-content: center;
}
.image-display img {
    max-width: 30%;
    height: 300px;
    display: none;
    object-fit: cover;
}
#caption {
    margin-top: 10px;
}
.director .card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .director .card {
    width: 24%;
    margin-bottom: 20px;
    border: 1px solid #074707;
    padding: 20px;
    text-align: center;
    height: 350px;
}
section.director {
    padding: 148px;
    margin-top: -166px;
}
  .director .card img {
    max-width: 50%;
    height: auto;
    margin-left: 67px;
}
.director .card h3 {
    font-size: 23px;
    color: rgb(96, 77, 23);

}
.director .card a {
    display: inline-block;
    background-color: #D71A0D;
    color: #fff;
    padding: 12px 0px;
    text-decoration: none;
    border-radius: 5px;
    width: 110px;
    font-weight: 700;
    margin-left: 67px;
    margin-top: 28px;
}

/*.director-people .container {*/
/*    display: flex;*/
/*    flex-wrap: wrap;*/
/*    justify-content: center;*/
/*    gap: 10px;*/
/*}*/
.director-people .box {
    width: 260px;
    background-color: white;
    text-align: center;
    padding: 20px;
    border: 1px solid #ddd;
    transition: transform 0.3s ease-in-out;
    margin-top: 20px;
}

.director-people .box img {
    max-width: 100%;
    height: 261px;
    object-fit: cover;
    width: 250px;
}
.director-people.box h2 {
    margin-top: 15px;
}

/* Hover effect */
.director-people .box:hover {
    transform: translateY(-10px); /* Moves the div up by 10px */
}

@media (max-width: 768px) {
    .director-people .box {
        width: 48%;
    }
}

@media (max-width: 480px) {
   .director-people .box {
        width: 100%;
    }
}
.director-people h1 {
    font-size: 21px;
    color: #786017;
    margin-top: 10px;
}
.director-people h6 {
    color: #646462;
    font-size: 19px;
}
.director-people h3 {
    color: #a25b06;
}
section.director-people {
   
    padding-top: 42px;
}
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 অনুপাত */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ট্যাবলেট স্ক্রিনের জন্য (উদাহরণস্বরূপ 768px এবং এর কম) */
@media (max-width: 768px) {
    .about-section button {
        margin-left: -220px; /* ট্যাবলেট স্ক্রিনের জন্য সামঞ্জস্য করুন */
        padding: 15px;
        width: 140px;
        font-weight: bold;
    }
}

@media (max-width: 768px) {
.base-image {
    width: 100%;
    height: 400px;
    transform: scale(.09);
    transition: transform 1s ease;
    object-fit:cover;
}
    
.text-overlay {
    position: absolute;
    bottom: 44%;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    text-align: center;
    z-index: 2;
}

.content {
    position: relative;
    width: 381px;
    padding: 35px;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.content h3 {
    font-size: 1rem;
    font-weight: normal;
    margin: 0;
    padding-bottom: 0px; 
    letter-spacing: 2px;
}
.content h2 {
    font-size: 18px;
    margin-top: 2px;
}
.content p {
    font-size: 17px;
    font-weight: 600;
    color: #25d852;
}
}

@media (max-width: 576px) {
    .text-slide, .image-slide {
        transform: translateY(50px); /* Slide in from the bottom on small screens */
    }

    .text-slide.show, .image-slide.show {
        transform: translateY(0); /* Reset to 0 when visible */
    }
}
/* মোবাইল স্ক্রিনের জন্য (উদাহরণস্বরূপ 480px এবং এর কম) */
@media (max-width: 480px) {
    .about-section button {
        margin-left: 0; /* মোবাইল স্ক্রিনের জন্য মার্জিন শূন্যে রাখুন */
        padding: 12px;
        width: 100%; /* পুরো প্রস্থে প্রসারিত হবে */
        font-weight: bold;
        text-align: center; /* মোবাইলের জন্য বাটনটিকে কেন্দ্র করুন */
    }
    
    .product-page-list .click {

    margin: 0px;
}
}
@media (max-width: 480px) {
.stats-section-middle {
     margin-top: 0px;
}}

@media (max-width: 480px) {
.stats-section {

    height: 700px;
}}
@media (max-width: 480px) {
.blockquote {

    height: 500px;

}}
@media (max-width: 480px) {
.blockquote {

    height: 400px;

}}
@media (max-width: 480px) {
.video-testimonial {
    margin-top: 50px;
}}
@media (max-width: 480px) {
.overlay-image {

    top: 80%;
    right: 53px;

    width: 37%;

}}
@media (max-width: 480px) {
.genesis-overview-img img {
    width: 100%;
    height: 380px;
    /* float: right; */
    object-fit: cover;
    margin-left: 0px;
}}
@media (max-width: 480px) {
.line-with-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    /* margin: 10px 0; */
    width: 300px;
    margin-left: 45px;

}}
@media (max-width: 480px) {
.timeline-items {
    display: flex;
     gap: 0px;
}}

@media (max-width: 480px) {
    .image-display img{
    max-width: 100%;
    height: 300px;
    display: none;
    object-fit: cover;
    }
}

@media (max-width: 480px) {
section.director-people {
    padding: 0px;

}}
@media (max-width: 480px) {
section.director {
     padding: 0px;
     margin-top: 0px;
}}
@media (max-width: 480px) {
.director .card {
     width: 100%;
    margin-bottom: 20px;
    border: 1px solid #074707;
    padding: 20px;
    text-align: center;
    height: 350px;
}}
@media (max-width: 480px) {
.director .card a {

    margin-left: 103px;

}}
@media (max-width: 480px) {
section.aboutus-section {
     padding: 0px;
     margin-top: 0px;
}}
@media (max-width: 480px) {
.product-inquiry .overlay {
    padding: 30px;
}}
@media (max-width: 480px) {
.dropdown-content {
    /* max-width: 1200px; */
    /* max-width: 1552px; */
    margin: 0 auto;
    /* display: flex; */
    /* align-items: flex-start; */
    gap: 20px;
}}


.timeline {
    position: relative;
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    background-color: black; /* Default color */
    transform: translateX(-50%);
    transition: background-color 0.3s ease;
    z-index: 1;
}

.timeline-item.active .timeline-point {
    background-color: rgb(211, 47, 47); /* Dot color on activation */
}


.timeline.active::before {
    background-color: rgb(210, 64, 64); /* Vertical line color on activation */
}


.timeline-item {
    position: relative;
    display: flex;
    align-items: center;

    width: 100%;

}

.timeline-item.right {
    justify-content: flex-end; /* Image on right side */
}

.timeline-item.left {
    justify-content: flex-start; /* Image on left side */
}

.timeline-image {
    width: 40%;
    height: auto;
    border-radius: 8px;
    z-index: 2;
    margin-top: -8px; /* Image is above the line */
}

.timeline-point {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: black;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
    transition: background-color 0.3s ease;
    z-index: 3; /* Dot is above the line and images */
}

.timeline-point.active {
    background-color: rgb(217, 48, 48); /* Active color */
}

.gallery-section-slider .carousel-item {
    transition: transform 1s ease;
    height:400px;base
  }


  .gallery-section-slider .carousel-inner {
    position: relative;
    width: 70%;
    overflow: hidden;
    margin-left: 231px;
}
.gallery-section-slider .carousel-inner {
    position: relative;
    width: 70%;
    overflow: hidden;
    margin-left: 231px;
}

.gallery-section-slider .carousel-item img{
  
  object-fit: cover;
}
 .carosel-style-home{
     height:560px;
 }
@media (max-width: 768px) {
    /* Tablet and small screen adjustments */
    .gallery-section-slider .carousel-inner {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 576px) {
    /* Mobile screen adjustments */
    .gallery-section-slider .carousel-inner {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}
.timeline {
    position: relative;
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
}

@media (max-width: 768px) {
    /* Tablet adjustments */
    .timeline {
        width: 90%;
    }
}

@media (max-width: 576px) {
    /* Mobile adjustments */
    .timeline {
        width: 100%;
        padding: 0 10px; /* Add some padding to prevent content from touching the screen edges */
    }
}
.gallery-section-slider-last {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
    margin-top: 50px;
  }


  .gallery-slider-last img{
    height: auto;
    object-fit: cover;
  }

  .gallery-slider-last {
    height: 200px;

  }
  .gallery-section-slider-last .item img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    display: block;
    border-radius: 0; /* Remove this or set it to another value for a different effect */
    /* Optional: add shadows, borders, or other effects */
}



.product-button {
    background-color: transparent;  /* No background color by default */
    border: 2px solid #ccc;
    color: #333;  /* Text color */
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 120px;
    text-align: center;
  }

/* General styling for the section */
.product-page-list {
    text-align: center;
    margin-top: -13px;
    padding: 30px;
}
  /* Styling for the header */
  .product-page-list h3 {
    font-size: 2em;
    color: #5c3901;
    padding-bottom: 20px;
  }

  /* Container for buttons */
  .product-page-list .button-container {
    display: flex;
    justify-content: center;
    /* gap: 15px; */
    margin-bottom: 20px;
  }

  /* Styling for the buttons */
  .product-page-list  .product-button {
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 273px;
    text-align: center;
  }
  .product-button:hover {
    background-color: #9b9ea2; /* Blue color */
    color: white;  /* White text on hover */
  }
  /* Active button style */
.product-page-list .product-button.active {
        background: linear-gradient(to right, #7db277, #388E3C);  /* Red background for active state */
    color: white;  /* White text when active */
    width: 273px;  /* Full width on active */
    font-weight: bold;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);  /* Add box shadow */
  }


  /* Styling for the product images container */
  .product-page-list  .product-images {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    flex-wrap: wrap;
  }

  /* Hide all product images initially */

  /* Show active product image */
  .product-page-list  .product-item.active {
    display: block;
    animation: fadeIn 0.5s ease-in-out;
  }
.product-page-list .product-item img {
    height: 280px;
    object-fit: cover;
    width: 100%;
    max-width: 300px;
}
  /* Add fade-in animation */
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }


  @media (max-width: 576px) {
  .product-page-list .button-container {
    display: flex;
    justify-content: center;
    /* gap: 15px; */
    margin-bottom: 20px;
    align-items: stretch;
    align-content: space-between;
    flex-wrap: wrap;
} }

#navbarnav {
    display: none; /* Initially hide the navbar */
}

.product-page-list .click {
    padding: 10px;
    background-color: white;
    box-shadow: #212529;
    font-size: 21px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
    letter-spacing: 2px;
    width: 100%;
    margin: 9px;
    text-shadow: 1px 1px black;
}
/* Container for the product list */
/* .product-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    background-color: white;
} */
.product-list {
    display: flex;
    flex-wrap: wrap;
    gap: 90px; /* Space between items */
    justify-content: start;
    padding: 20px;
  }

.product-item {
    width: 100%;
    /* background-color: #f9f9f9; */
    padding: 20px;
    text-align: center;
    /* border-radius: 8px; */
     box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); 
    box-sizing: border-box;
      /*border: 3px solid #56b55a;*/
    width: 350px;
        margin: 10px;
}

  /* Product image container with background color */
  /*
  /* Product heading (h3) */
  .product1 h3 {
    font-size: 1.2rem;
    color: #333;

  }
.product1 p {
    margin-top: -43px;
    margin-bottom: 26px;
}
  /* Product description (p) */
  .product1 p {
    font-size: 1rem;
    color: #666;

  }

  /* Red line under description */
  .product1 .red-line {
    width: 100%;
    height: 2px;
    background-color: green;
    margin-bottom: 15px;
    margin-top: -15px;
        background-color: #52a352;
}
  /* Product image */
  .product1 img {
    width: 100%; /* Ensure image takes up full width of its container */
    height: auto;

  }
  @media (max-width: 480px) {
  .product-item {
    width: 100%;

}}
@media (max-width: 576px) {
    .product-item {
      width: 100%; /* Full width on smaller screens */
    }
  }

/* Popup modal styles */
.popup {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black background */
    z-index: 1000;
    justify-content: center;
    align-items: center;
    overflow: auto;
}


.popup-content {
    position: relative;
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    max-width: 800px;
    width: 80%;
}
.popup-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
       background-image: var(--popup-background);
    opacity: 0.1;
    z-index: -1;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    color: black;
}

.product-details {
    display: flex;
    justify-content: space-between;
}

.product-group {
    margin: 60px 0;
}
.dimention-style {
    /* width: 400px; */
    margin-left: 30px;
}
.product-details .line {
    border-bottom: 3.5px solid rgb(24 106 16);
    width: 100%;
 
}

.center-image {
    width: 100%;
    /* max-width: 400px; */
    height: 300px;
}
.left-column, .right-column {
    width: 45%; /* Adjust the size of the left and right columns */
}

/* .right-column {
    text-align: right;
} */

/* Smooth transition when popup opens */
.popup.show {
    display: flex;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.popup .popup-content {
    transform: scale(0);
    transition: transform 0.3s ease-in-out;
}

.popup.show .popup-content {
    transform: scale(1);
}
.image-wrapper {
    border: 2px solid green;
    padding: 33px;
    border-radius: 50px;
    height: 400px;
}
/* On small screens, adjust layout to be more compact */
@media (max-width: 768px) {
    .popup-content {
        width: 90%; /* Popup content takes 90% width on small screens */
    }

    .left-column, .right-column {
        width: 100%; /* Full width for both columns */
        text-align: center;
    }
.popup.show {
    display: flex
;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
    flex-direction: row-reverse;
    flex-wrap: wrap;
}
    .center-image {
        max-width: 100%;
        height: 200px;
        object-fit: contain;
        margin-top: -29px;
    }

    .close-btn {
        font-size: 25px; /* Smaller close button on mobile */
        top: 5px;
        right: 5px;
    }
}

@media (max-width: 480px) {
    .popup-content {
        width: 95%; /* Popup takes 95% width on extra small screens */
    }

    .left-column, .right-column {
        width: 100%; /* Full width for both columns */
        text-align: center;

    }
.popup.show {
    display: flex
;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
    flex-direction: row-reverse;
    flex-wrap: wrap;
}
    .center-image {
        max-width: 100%;
        height: 200px;
        object-fit: contain;
        margin-top: -29px;
    }
 
    .image-wrapper {
        border: 2px solid green;
        padding: 33px;
        border-radius: 50px;
        height: 220px;
        text-align: center;
      
    }

    .image-wrapper {
        border: 2px solid green;

        border-radius: 50px;
    }
    .close-btn {
        font-size: 20px; /* Even smaller close button */
    }
}

.partner-box {
    border: 1px solid #ddd;
    /* padding: 36px; */
    text-align: center;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 150px;
      box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3);
}

.partner-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.partner-box img {
    max-height: 150px;
    margin-bottom: 15px;
    /*border-radius: 50%;*/
    object-fit: cover;
}

#loadMoreBtn {
    padding: 10px 20px;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

#loadMoreBtn:hover {
    background-color: #0056b3;
    color: white;
}

#morePartners {
    transition: opacity 0.5s ease, visibility 0.5s ease;
    visibility: hidden;
    opacity: 0;
}

#morePartners.visible {
    visibility: visible;
    opacity: 1;
}
.partner-item {
    transition: opacity 0.5s ease-in-out;
}

.timeline-item.hidden {
    display: none;
}
/*.timeline-image {*/
/*    width: 40%;*/
/*    height: 300px;*/
/*    border-radius: 8px;*/
/*    z-index: 2;*/
/*    margin-top: -8px;*/
/*    object-fit: cover;*/
/*}*/
/*.timeline-item .timeline-point {*/
/*    width: 10px;*/
/*    height: 10px;*/
/*    background-color: red;*/
/*    border-radius: 50%;*/
/*    position: absolute;*/
/*}*/


/* CSS for zoom effect */
#zoomedImage {
    transition: transform 0.5s ease;  /* Smooth zoom transition */
}

#zoomedImage:hover {
    transform: scale(1.5);  /* Zoom in when hovered */
}
/* Optional styling for the close button */
.modal-header .btn-close {
    background-color: transparent;
    border: none;
    font-size: 1.5rem;
    color: #000;
}
.modal-header .btn-close:hover {
    color: red;  /* Change color on hover */
}
.elementor-9052 .elementor-element.elementor-element-68373b56 {
    overflow: visible;
}

.elementor-element {
    --widgets-spacing: 20px 20px;
}
.elementor-element, .elementor-lightbox {
    --swiper-theme-color: #000;
    --swiper-navigation-size: 44px;
    --swiper-pagination-bullet-size: 6px;
    --swiper-pagination-bullet-horizontal-gap: 6px;
}
.elementor-9052 .elementor-element.elementor-element-13533952 > .elementor-element-populated {
    padding: 25px 25px 25px 25px;
}
.elementor-9052 .elementor-element.elementor-element-520c744 .elementor-heading-title {
    color: #4CAF50;
    font-weight: 600;
    font-family: "Roboto", Sans-serif;
    font-size: 30px;
    text-align: center;

}
.has-vivid-red-color {
    color: #4CAF50;
}
.elementor .elementor-section.elementor-section-boxed > .elementor-container {
    padding: 0 60px;
}
.elementor-element {
    --widgets-spacing: 20px 20px;
}
.elementor-element.elementor-element-59b98365 > .elementor-element-populated {
    padding: 50px;
}
h2.elementor-heading-title.elementor-size-default {
    color: green;
    font-weight: 600;
    text-align: center;
}

.feedback{
    background-color: #e9ecef;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Default input background and text color */
.custom-input {
    background-color: #add6a9; /* Light blue background */
    color: #333333; /* Dark text color */
    border: 1px solid #cccccc; /* Border color */
    padding: 10px;
    border-radius: 5px;
    transition: background-color 0.3s, border-color 0.3s;
}

/* Input background color when focused */
.custom-input:focus {
    background-color: #d4edd1; /* Lighter blue on focus */
    border-color:#0d5906; /* Blue border on focus */
    outline: none; /* Remove the default blue outline */
}

/* For textarea styling */
textarea.custom-input {
    resize: none; /* Disable resizing */
}

.custom-green-btn {
    background-color: #28a745; /* Bootstrap default green */
    border-color: #28a745;
    color: #fff; /* White text */
    font-weight: bold;
    transition: background-color 0.3s, border-color 0.3s;
}

.custom-green-btn:hover {
    background-color: #218838; /* Darker green for hover */
    border-color: #1e7e34;
}


.testimonial-text {
    text-align: start;
    font-size: 16px;
    line-height: 1.7;
    word-wrap: normal;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.Presence-block {
    padding: 30px;
    box-shadow: 0 4px 24px #00000029;
    overflow: hidden;
}

.img-Presence {
    bottom: 20px;
    min-height: 320px;
}
.img-Presence img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.Presence-content {
    padding: 0px 20px 0px 0px;
}
.Presence-content h5 {
    font-size: 28px;
    font-weight: 500;
    color: #000;
    line-height: 40px;
    margin-bottom: 10px;
}
.text-align-justify {
    text-align: justify;
    margin-top: -20px;
    margin-bottom: 33px;
}
a.box-btn {
    background-color: #000000;
    display: inline-block;
    color: #fff;
    padding: 10px 25px;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 1px;
    position: relative;
    text-decoration: none;
}
a.box-btn i.fa {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 25px;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-transition: .5s;
    transition: .5s;
}