/* General responsive styles */
/* General styles to make the logo responsive and centered */
.footer img {
display: block;
margin: 0 auto; /* Centers the image horizontally */
max-width: 100%;
height: auto;
}

/* Optionally, control the size of the logo for different screen sizes */
@media (max-width: 768px) {
.footer img {
    width: 127px; /* Adjust this size as needed for desktop */
}
.pc-line{
display: none;
}
}
@media (min-width: 1440px) {
.footer img {
margin: 10 auto;
}
}

/* dummy about page */
.about-img {
position: relative; /* Ensure the pseudo-elements position correctly */
}

/* Left Image Background */
.about-img.left::before {
position: absolute;
content: "";
top: 0;
left: -50%;
width: 100%;
height: 100%;
background-image: repeating-radial-gradient(#FFFFFF, #EEEEEE 5px, transparent 5px, transparent 10px);
background-size: 20px 20px;
transform: skew(20deg);
z-index: 1;
}


/* Right Image Background */
.about-img-right::after {
position: absolute;
content: "";
top: 0;
right: -50%; /* Shift to the right */
width: 100%;
height: 100%;
background-image: repeating-radial-gradient(#FFFFFF, #EEEEEE 5px, transparent 5px, transparent 10px);
background-size: 20px 20px;
transform: skew(-20deg); /* Mirroring the effect with opposite skew */
z-index: 1;
}

/* To prevent overlap, ensure z-index is set appropriately */
.about-img img {
position: relative; /* Ensure the image is on top of the background */
z-index: 2;
}

.about-img-right img{
position: relative; /* Ensure the image is on top of the background */
z-index: 2;
}

.pc-line{
width: 100%; /* Full width of the page */
margin: 0;   /* Remove default margin */
height: 2px; /* Set height for the hr line */
border: none; /* Remove default border */
}


/* custome css for carousel  */

/* Ensures the background image is full width and scales properly */
.text-bg {
    padding: 50px;
    color: white;
    background-size: cover;
    background-position: center;
}

/* Ensure the PNG image scales properly */
.carousel-item img {
    max-width: 100%;
    height: auto;
    object-fit: contain; /* Ensures the PNG keeps its aspect ratio */
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .carousel-item {
        flex-direction: column; /* Stacks content vertically */
    }

    .carousel-caption h1 {
        font-size: 1.5rem;
    }

    .carousel-caption .btn {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }

    .text-bg {
        background-size: cover;
        text-align: center;
    }
}