/* .main-content {
    background: url('../image/tinyimage/services_background.jpg') no-repeat center center fixed;
    background-size: cover;
    margin: 0;
    padding: 0;
    top: -155px;
} */

.content {
    background: url('../image/tinyimage/services_background.jpg') no-repeat center center fixed;
    background-size: cover;
    margin: 0;
    padding: 0;
    top: -155px;
}

.sticky {
    position: -webkit-sticky;
    position: sticky;
    margin-top : 0 !important;
    top: 0 !important; 
    background: rgba(0, 0, 0, 0.2); 
    z-index: 10;
}

.services {
    width: 80%;  /* Specific na lapad; palitan ang value ayon sa iyong preference */
    margin: 0 auto;  /* Para iposisyon ang container sa gitna */
}

h1 {
    color: white;
    margin-top: 0 !important;
    text-align: center;
    font-size: 40px;
    padding: 10px !important;
    text-shadow: 
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
         /* 3px 3px 6px rgba(0, 0, 0, 0.7); */
}

.services img {
    width: 100%;
    max-height: 300px; /* Adjust as needed */
    object-fit: cover; /* This will ensure the aspect ratio is maintained */
}

.services div {
    margin: 15px;
    border: 1px solid #ddd;
    display: inline-block;
    width: calc(33% - 30px);
    padding: 10px;
    background: rgba(255, 255, 255, 0.8); /* Semi-transparent white background */
}

.services h2, .services p {
    margin: 0;
    padding: 5px;
    color: #000; /* Change text color to dark for contrast */
    background: rgba(255, 255, 255, 0.7); /* Adding background for readability */
    text-shadow: none; /* Remove text-shadow */
}

.services h2 {
    font-size: 16px;
    font-weight: bold;
}
.modal-dialog {
    max-width: 700px;  /* Baguhin ang value na ito para sa nais na lapad */
    margin: 30px auto;  /* Para iposition ang modal sa gitna ng screen */
}

@media (max-width: 600px) {
    .services div {
        width: calc(50% - 30px);
    }

    .services h2 {
        font-size: 1.5rem; /* Adjust font size for smaller screens */
    }

    .services p {
        font-size: 1rem; /* Adjust paragraph font size for smaller screens */
    }
}

@media (max-width: 300px) {
    .services div {
        width: calc(50% - 30px);
    }

    .services h2 {
        font-size: .8rem; /* Adjust font size for smaller screens */
    }

    .services p {
        font-size: .6rem; /* Adjust paragraph font size for smaller screens */
    }
}