/* Temporary for development stage, recommend to copy these CSS code to frontend.css when production */
section[data-module="testing2"] .title {
	text-align: center !important;
}
section[data-module="testing2"] .gallery {
    display: flex !important;
    justify-content: space-between; /* Ensures even spacing between columns */
    padding: 20px;
    flex-wrap: wrap; /* For responsiveness */
    max-width: 1200px; /* Set max-width for the entire section */
    margin: 0 auto; /* Centers the section */
}

section[data-module="testing2"] .gallery .col-md-4 {
    flex: 1 1 calc(33.333% - 20px); /* Ensures three equal columns with spacing */
    max-width: calc(33.333% - 20px); /* Adjust to ensure consistent width */
    box-sizing: border-box; /* Includes padding and border in width calculations */
}

section[data-module="testing2"] .panel {
    overflow: hidden;
    background-color: #fff;
}

section[data-module="testing2"] .panel-body {
    padding: 15px;
    text-align: left;
}

section[data-module="testing2"] .panel-body img {
    max-width: 100%;
    height: auto;
    margin-bottom: 15px;
    border-radius: 4px;
}

section[data-module="testing2"] .panel-body h3 {
    font-size: 1.25rem;
    margin-bottom: 10px;
    color: #333;
}

section[data-module="testing2"] .panel-body p {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 15px;
}

section[data-module="testing2"] .btn-primary {
    color: #007bff;
    border: none;
    padding: 0;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

section[data-module="testing2"] .btn-primary:hover {
    color: grey;
}


section[data-module="testing2"] {}

/* Typical laptop screen size*/
@media (max-width: 1400px) {
	
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 980px) {
	
}

/* Mobile screen size - landscape view */
@media (max-width: 767px) {
   
}

/* Mobile screen size */
@media (max-width: 480px) {
      
}