@charset "utf-8";

/* CORE PAGE STRUCTURE */
#row1_left p,#row1_right p,#row2_left p,#row2_right p,#row3_left p,#toppara_front p{margin-bottom:0;margin-top:0;overflow:auto}
#toppara_front{overflow:auto}
#mainpages_topbox_front,#row1_left,#row2_right,#toppara_front{background-color:#E6E6E6;padding:1%}
#row1_right,#row3_left,#row_scroll{height:auto;background-color:#A1A1A1}
#sidebar1{width:15%}

/* RESPONSIVE TEXT & SIDEBAR */
@media all and (min-width:901px) {
    #mainContent{font-size:100%}
    #sidebar1{width:15%}
    #mainContent h1{font-size:130%}
    #mainContent h2{font-size:120%}
}

@media all and (max-width:680px) and (min-width:550px){#mainContent{font-size:90%}#sidebar1{width:15%}#mainContent h1{font-size:130%}#mainContent h2{font-size:100%}}
@media all and (max-width:549px){#mainContent{font-size:90%}#sidebar1{width:25%}#mainContent h1{font-size:130%}#mainContent h2{font-size:100%}}

/* LAYOUT BOXES */
#mainpages_topbox_front{float:right;width:33%;height:auto;color:#333;border:thin solid #A1A1A1;margin:1%}
#toppara_front{height:auto;width:98%;margin-right:1%;overflow:auto}
#row1_right{width:60%;float:right;padding:1%}
#row2_right{height:auto;width:40%;float:right}
#row_scroll{width:100%;margin-bottom:2%}
#scroll{height:250px;width:100%;overflow:auto;padding-top:1%}

/* STABLE FLEX LAYOUT (Fixes CLS & Positioning) */
.introwrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px; /* Stable spacing between boxes */
    margin: 20px 0;
    width: 100%;
}

.intro_pics {
    background: #FFF;
    flex: 0 1 28%; /* 3 columns on desktop */
    max-width: 260px; /* Prevents images from getting too big */
    min-width: 220px;
    text-align: center;
    padding: 10px;
    height: auto !important; /* Prevents white gaps below photos */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.intro_pics img {
    width: 100% !important;
    height: auto !important;
    display: block;
}

.intro_pics_txt {
    text-align: center;
    font-size: 110%;
    font-weight: 400;
    padding-top: 8px;
    margin: 0;
}

/* TABLET & MOBILE BREAKPOINTS */
@media all and (max-width: 800px) and (min-width: 301px) {
    .intro_pics {
        flex: 0 1 44%; /* Stays in 2 columns for Samsung Pad */
        max-width: 240px; 
    }
}

@media all and (max-width: 300px) {
    .intro_pics {
        flex: 0 1 95%; /* 1 column only on very tiny screens */
    }
}

/* INFO BOXES AT BOTTOM */
.frontinfo_feft{float:left;width:47%;margin:2% 1%;overflow:auto;height:auto}
.frontinfo_right{float:right;width:47%;margin:2% 1%;overflow:auto;height:auto}

@media all and (max-width:680px){
    .frontinfo_feft{width:99%}
    .frontinfo_right{width:99%;background-color:#E6E6E6}
}