/* Hide desktop/tablet header on mobile */
@media only screen and (max-width: 767px) {
    .desktop-header, 
    .tablet-header {
        display: none !important; /* Hide desktop and tablet headers */
    }

    /* Mobile header container */
    .mobile-header {
        display: block; /* Ensure mobile header is visible */
        background-color: #021739; /* Background color for mobile header */
        padding: 10px 0;
    }

    /* Mobile header tabs container */
    .row.no-gutters.mobile-header-tabs {
        display: flex;
        justify-content: space-around; /* Evenly space the tabs */
        align-items: center;
        width: 100%;
        padding: 10px 0;
        background-color: #021739; /* Background color for tabs */
        margin: 0; /* Remove default margins for a full-width layout */
    }

    /* Tab link styling */
    .row.no-gutters.mobile-header-tabs a {
        flex: 1; /* Equal space for all tabs */
        text-align: center;
        font-size: 14px;
        font-weight: 500;
        color: #fff; /* White text color for tabs */
        text-decoration: none;
        padding: 10px 0;
        border-right: 1px solid #ddd; /* Separator between tabs */
    }

    /* Remove border for the last tab */
    .row.no-gutters.mobile-header-tabs a:last-child {
        border-right: none;
    }

    /* Hover effect for mobile tabs */
    .row.no-gutters.mobile-header-tabs a:hover {
        background-color: #ffcc00; /* Highlight background on hover */
        color: #021739; /* Change text color on hover */
        text-decoration: none;
    }

    /* Active tab styling */
    .row.no-gutters.mobile-header-tabs a.active {
        background-color: #ffcc00; /* Active tab highlight */
        color: #021739; /* Active tab text color */
        font-weight: bold;
    }

    /* Adjustments for smaller screens (375px and below) */
    @media only screen and (max-width: 375px) {
        .row.no-gutters.mobile-header-tabs a {
            font-size: 12px; /* Reduce font size for smaller screens */
            padding: 8px 0;
        }
    }
}

/* Hide mobile header on desktop and tablet */
@media only screen and (min-width: 768px) {
    .mobile-header {
        display: none !important; /* Hide mobile header for larger screens */
    }
}
input, textarea {
    background: transparent;
}
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
	margin-right: -100px;
}
.wp-block-media-text:not(.has-media-on-the-right) .wp-block-media-text__content {
	margin-left: -100px;
}
/* Target only the "About Us" heading */
.about-us-heading {
    position: absolute;
    top: 485px; /* Adjust this to control the overlap */
    left: 50%;
    transform: translateX(-50%);
    font-size: 2.5em;
    color: white;
    text-align: center;
    z-index: 10;
}
/* Default text size for desktop headings */
h1, h2, h3, h4, h5, h6 {
    font-size: 36px; /* Set your preferred desktop size here */
}

/* Mobile view (screen width less than or equal to 768px) */
@media (max-width: 768px) {
    h1, h2, h3, h4, h5, h6 {
        font-size: 26px;  /* Set mobile size for headings */
    }
}
html, body {
    max-width: 100%;
    overflow-x: hidden;
}
@media (max-width: 768px) {
    .wp-block-media-text {
        display: flex;                      /* Use flexbox for a responsive layout */
        flex-direction: column;             /* Stack media and text vertically */
        align-items: center;                /* Center the content horizontally */
        text-align: center;                 /* Center the text */
        padding: 0 5%;                       /* Reduce padding to give more room to text */
    }

    .wp-block-media-text__media {
        width: 100%;                         /* Ensure the image takes full width */
        height: auto;                        /* Maintain aspect ratio */
        margin-bottom: 15px;                 /* Space between the image and text */
    }

    .wp-block-media-text__content {
        width: 160%;                          /* Increase text width to 90% of the container */
        max-width: none;                     /* Remove any max-width restrictions */
        padding: 0;                          /* Remove unnecessary padding */
        box-sizing: border-box;              /* Prevent overflow caused by padding */
        margin-left: auto;                   /* Center the text block */
        margin-right: auto;                  /* Ensure the block is centered */
    }
}
/* Hide center column only on mobile screens */
@media (max-width: 768px) {
    .wp-block-group > .wp-block-columns > .wp-block-column:nth-child(2) {
        display: none;
    }
}
/* Make images smaller in the first and third columns on mobile screens */
@media (max-width: 768px) {
  /* Target the first column images */
  .wp-block-group .wp-block-column:first-child .wp-block-image img,
  /* Target the third column images */
  .wp-block-group .wp-block-column:last-child .wp-block-image img {
    max-width: 60%; /* You can adjust this value as needed */
    height: auto;
  }
}
/* Apply hover effect to individual two-column layout within each parent column */
.wp-block-columns.is-layout-flex > .wp-block-column .wp-block-columns.is-layout-flex {
    transition: background-color 0.3s ease; /* Smooth transition */
}

.wp-block-columns.is-layout-flex > .wp-block-column .wp-block-columns.is-layout-flex:hover {
    background-color: red; /* Red background on hover of each two-column layout */
}
/* Custom Slider Styles */
.custom-container {
    position: relative;
    width: 80%;
    margin: auto;
    overflow: hidden;
}

.custom-slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slider-item {
    min-width: 100%;
    box-sizing: border-box;
    position: relative;
}

.slider-item img {
    width: 100%;
    display: block;
    height: auto;
}

.caption {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: white;
    font-size: 20px;
    background: rgba(0, 0, 0, 0.5);
    padding: 5px 10px;
}

button {
    position: absolute;
    top: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 15px;
    cursor: pointer;
    font-size: 20px;
    z-index: 1;
}

.prev {
    left: 10px;
    transform: translateY(-50%);
}

.next {
    right: 10px;
    transform: translateY(-50%);
}

button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}