.mgT {
    margin-top: 3%;
}

.tc {
    text-align: center;
}

.fntW {
    font-weight: 600;
    font-size: 30px;
}

.text-dark {
    color: #333;
}

/* Styles for .bgimg1 */
.bgimg1 {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 670px;
    width: 100%;
    background-image: url(../img/pic/services/graphic/bgimg1.webp);
    opacity: 1; /* Initially hidden */
    transform: scale(0.9); /* Initially scaled down */
    transition: opacity 1s ease-out, transform 1s ease-out; /* Smooth transition */
}

.bgimg1.visible {
    opacity: 1; /* Fully visible */
    transform: scale(1); /* Full scale */
}

/* Responsive adjustments for .bgimg1 */
@media (max-width: 1024px) {
    .bgimg1 {
        height: 500px; /* Adjust height for tablets */
    }
}

@media (max-width: 768px) {
    .bgimg1 {
        height: 400px; /* Smaller height for medium screens */
    }
}

@media (max-width: 480px) {
    .bgimg1 {
        height: 185px; /* Further reduced height for mobile screens */
    }
}

/* Styles for .bgimg2 */
.bgimg2 {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 670px;
    width: 100%;
    background-image: url(../img/pic/services/graphic/bgimg2.webp);
    opacity: 1; /* Visible by default */
    transform: none; /* No scaling or animation */
}

/* Responsive adjustments for .bgimg2 */
@media (max-width: 1024px) {
    .bgimg2 {
        height: 335px; /* Adjust height for tablets */
    }
}

@media (max-width: 768px) {
    .bgimg2 {
        height: 400px; /* Smaller height for medium screens */
    }
}

@media (max-width: 480px) {
    .bgimg2 {
        height: 185px; /* Further reduced height for mobile screens */
    }
}

/* Responsive adjustments for text */
@media (max-width: 768px) {
    .fntW {
        font-size: 24px; /* Smaller font size for medium screens */
    }
}

@media (max-width: 480px) {
    .fntW {
        font-size: 20px; /* Further reduced font size for mobile screens */
    }
}

/* Ensuring margin-bottom for section-title in smaller screens */
@media (max-width: 480px) {
    .section-title {
        margin-bottom: 5px;
    }
}