/* General Header Styles */
header .header-menu-bar {
    background-color: #F2F1EB;
    padding: 1rem 0;
}

/* Default styles for menu links */
header .header-menu-bar .menu-list > li > a {
    color: #000000!important; /* Default text color */
    background: transparent !important; /* Default background */
    position: relative;
    padding: 8px 20px; /* ลด padding บน-ล่างให้กระชับขึ้น */
    transition: color 0.3s, background 0.3s, padding 0.3s;
}

/* Hover and active styles for all menu items */
header .header-menu-bar .menu-list > li:hover > a,
header .header-menu-bar .menu-list > li.active > a {
    color: #FFFFFF !important; /* Text color for hover and active state */
    background: #EB5E28 !important; /* Background color for hover and active state */
    border-radius: 0.3125rem;
}

/* เพิ่ม padding ด้านขวาให้เมนูที่มี submenu */
header .header-menu-bar .menu-list > li.has-submenu > a {
    padding-right: 2rem; /* เพิ่มพื้นที่ขวาให้ลูกศร */
}

/* Submenu arrow styles */
header .header-menu-bar .menu-list > li.has-submenu > a:after {
    content: '';
    position: absolute;
    right: 1rem; /* ขยับลูกศรออกจากขอบ */
    top: 50%;
    transform: translateY(-50%);
    border-top: 0.3125rem solid #000000; /* Default arrow color */
    border-left: 0.3125rem solid transparent;
    border-right: 0.3125rem solid transparent;
    transition: border-top 0.3s;
}

/* Hover and active styles for submenu arrows */
header .header-menu-bar .menu-list > li.has-submenu:hover > a:after,
header .header-menu-bar .menu-list > li.active > a:after {
    border-top: 0.3125rem solid #ffffff !important; /* Arrow color for hover and active state */
}

body.dark-theme .menu-list > li a{color:#ffffff;}
body.dark-theme header .header-menu-bar .menu-list > li.active{background: #000000;}
body.dark-theme header .header-menu-bar .menu-list > li > a:hover{background:#000000;}
body.dark-theme header .header-menu-bar .menu-list > li.has-submenu > a:after { border-top: 0.3125rem solid #ffffff; }
body.dark-theme header .header-menu-bar .menu-list > li > a { color: #ffffff; }

footer {
background:#F2F1EB;
color:#000000;
}

/*Service Box*/
.service-box {
    position: relative;
    width: 100%;
    margin-top: 30px;
    margin-bottom:30px;
}
.service-box ul, .service-box ul li {
    list-style: none;
    padding: 0;
    margin: 0;
}
.service-box ul {
    box-sizing: border-box;
    overflow: hidden;
}
.service-box ul li {
    width: 48%;
    position: relative;
    min-height: 1px;
    float: left;
    margin:5px;
}
.service-box ul li a {
    margin: auto;
    padding: 8px;
    color: #ffffff;
    display: block;
    background-color: #303841;
    border-radius: 5px;
    font-size: 16px;
    text-align: left;
    -webkit-transition-duration: .5s;
    -moz-transition-duration: .5s;
    -o-transition-duration: .5s;
}
.service-box ul li a:hover {
    background: #ae1b1f;
    color: #fff;
}

@media (max-width: 576px){
  .service-box ul li{ width:100%; }
}

.head-line2{
   border-left: 15px solid #cf2d1e;
   padding-left:5px;
}

/*Box link*/
.box-link ul {
  list-style-type: none;
  line-height: 20pt;
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: left;
}
.box-link li a {
  display: block;
  color: #333333;
  padding: 10px 16px;
  text-decoration: none;
  background: #f4ebd0;
  border-radius: 15px;
  border: #f4ebd0 solid 1px;
  margin-top: 5px;
  margin-bottom: 5px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  box-shadow: none;
  text-align: center;
}
.box-link li a:hover {
  background-color: #CF2D1E;
  color: white;
  border:1px solid #CF2D1E;
}

.side-menu ul li a {
    border: 0.0625rem solid #f2f2f2;
    margin-bottom: 5px;
    padding: 10px;
    border-radius: 17px;
}
.side-menu ul li a:hover{
    background:#EB5E28 ;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    color:#ffffff ;
    border-color:#EB5E28 ;
}
.side-menu ul li.active a {
    color: #ffffff;
    background: #EB5E28 ;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    border: 1px solid #EB5E28 ;
}


body.dark-theme .service-box ul li a, body.dark-theme .box-link li a, body.dark-theme .footer{ background:#333333; }
body.dark-theme .side-menu ul li a:hover{background:#333333;}
body.dark-theme .menu-list > li a{color:#ffffff;}

/*more link*/
.more-link a {
    font-family: "athitimedium", sans-serif;
    font-size:90%;
    background-color: #8c1515;
    color: #ffffff;
    font-weight:400;
    border-radius: 100px;
    padding: 5px 10px;;
    text-decoration: none;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    float: right;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    margin:10px;
}
.more-link a:hover {
    color: #fff;
    background-color:#333333;
    text-decoration: underline;
}


.btn-port {
    border-radius: 0;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s
}
.btn-port.btn-porttheme {
    background: #f2f1eb;
    color: #222831;
    width: 100%;
    border-radius: 5px;
    text-align: left;
    font-size: 17px;
    margin: 1px 0;
    font-weight: 300;
    white-space: normal!important
}
.btn-port.btn-porttheme:hover, .btn-port.btn-porttheme:active {
    color: #FFF;
    background: #222831
}

.servicebox {
    position: relative;
    width: 100%;
    margin-top: 30px;
}
.servicebox .table .table-cell {
    font-size: 19px;
    line-height: 1.3333333;
    border-radius: 5px;
    padding: 16px 20px;
    background: #f2f1eb;
    color: #222831;
    text-align: center;
    text-transform: uppercase;
}
.servicebox a {
    margin: auto;
    color: #222831;
    display: block;
    font-weight: 500;
}
.servicebox .table .table-cell:hover {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    background: #222831;
    color: #fff;
    cursor: pointer;
}
.servicebox .table .table-cell:hover a {
    color: #fff;
    text-decoration: none;
}

.btn-instrument {
    color: #222831;
    width: 100%;
    text-align: left;
    font-size: 17px;
    margin: 1px 0;
    font-weight: 300;
    white-space: normal!important;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
    border-left: 5px solid #8c1515
}
.btn-instrument:hover, .btn-instrument:active {
    color: #8c1515;
    border-left: 15px solid #8c1515
}

.list-underline{
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.list-underline li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
  background: #f2f1eb;
  margin-bottom:10px;
  transition: all 0.3s;
  border-radius: 5px;
}
.list-underline li a:hover {
  background-color: #222831;
  color: white;
}

.head-line4{
  text-transform: capitalize;
  margin-bottom:10px;
  border-bottom: 5px solid #ED213A;
  /* width:50%; */
}
.head-line4 h2{
  color:#232931;
  margin-bottom:0;
  font-size: 250%;
}
.head-line4 h3{
  border-bottom:0px;
    font-size: 150%;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: rgba(0, 0, 0, 0.4);
  padding-bottom: 10px;
  margin-bottom:0;
}

.block3d{
  /* border: 2px solid #45526C; */
  padding:30px 10px;
  box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;
  background: #F8F5F1;
  border-radius:20px;
}

.sidebar-intro ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.sidebar-intro li a {
  display: block;
  background: #A30B2E;
  border-radius: 5px;
  box-shadow: rgb(0 0 0 / 7%) 0px 1px 1px, rgb(0 0 0 / 7%) 0px 2px 2px, rgb(0 0 0 / 7%) 0px 4px 4px, rgb(0 0 0 / 7%) 0px 8px 8px, rgb(0 0 0 / 7%) 0px 16px 16px;
  color: #ffffff;
  padding: 10px;
  text-decoration: none;
  margin-bottom: 15px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  font-weight: 600;
}
.sidebar-intro li.active a {
  background: #F5E6CA;
  color: #492F10;
}
.sidebar-intro li a:hover:not(.active) {
  background: #F5E6CA;
  color: #492F10;
}

.social-box ul{
    font-family: 'Prompt', sans-serif;
    font-weight: 300;
    list-style-type:none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.social-box li a {
    display: block;
    color: #303841;
    padding: 8px;
    text-decoration: none;
    margin-bottom: 5px;
    font-size: 14px;
    border: 1px solid #eeeeee;
    border-radius: 5px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    background-color: #eeeeee;
}
.social-box li a.active {
    background-color: #ae1b1f;
    color: #ffffff;
}
.social-box li a:hover:not(.active) {
    background-color: #ae1b1f;
    color: #ffffff;
    border: 1px solid #ae1b1f;
}

.frame-17 .card-img-3col{ height: auto; }

/* ------------------------ */
/* GENERAL STYLES */
/* ------------------------ */

/* ------------------------ */
.imgdetail{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.ulcircle{
  list-style-type:disc;
}
/* start overide column gap */
.ce-col,
.col-md-7,
.col-md-5
{
  padding-left: 2px;
  padding-right: 2px;
}

/* end overide column gap */


/* Red blink */
.blink {
  
  color: red;
  animation: blinking 1.5s infinite;
}

@keyframes blinking {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

/* End Red blink */

/* ------------------------ */
/* adobe */
/* ------------------------ */
.step {
  margin-bottom: 30px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.step h2 {
  color: #2c5282;
  margin-top: 0;
}
.step img {
  max-width: 80%;
  height: auto;
  display: block;
  margin: 1.5rem auto;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.instruction {
  margin-bottom: 15px;
}
/* END Adobe*/

/* ------------------------ */
/* TABLE STYLES */
/* ------------------------ */

/* TABLE STYLES A*/
.tablesylea {
  overflow: auto;
  width: 100%;
}

.tablesylea table {
  border: 1px solid #dededf;
  height: 100%;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 1px;
  text-align: left;
}

.tablesylea caption {
  caption-side: top;
  text-align: center;
}

.tablesylea th {
  border: 1px solid #dededf;
  background-color: #ffe8e8;
  color: #000000;
  padding: 5px;
}

.tablesylea td {
  border: 1px solid #dededf;
  padding: 5px;
}

.tablesylea tr:nth-child(even) td {
  background-color: #e3eff6;
  color: #000000;
}

.tablesylea tr:nth-child(odd) td {
  background-color: #ffffff;
  color: #000000;
}
/* END TABLE STYLES A*/

/* ------------------------ */

/* **************Button style ***************** */
.btn-grad {background-image: linear-gradient(to right, #FD8A8A 0%, #72AED4  60%, #FD8A8A  100%)}

.btn-grad {
  margin: 0 30px; /* ปรับระยะห่างระหว่างปุ่ม */
  padding: 10px 20px; 
  text-decoration: none;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  box-shadow: 0 0 20px #eee;
  border-radius: 5px; 
  text-align: center; 
  font-size: 24px;

}

.btn-contact {
  margin: 0 30px; /* ปรับระยะห่างระหว่างปุ่ม */
  padding: 10px 20px; 
  text-decoration: none;
  text-transform: uppercase;
  text-align: center; 
  font-size: 24px;

}

/* --------------Center Container----------- */
.centercontainer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 8vh;
}

.btn-grad:hover {
  background-position: right center; /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}
         

/* ------------------------ */
/* start overide Carousel */
.bx-controls.bx-has-pager .bx-pager div a{
  border: 1px solid #FFAC00; 
}

.bx-controls.bx-has-pager .bx-pager div a.active {
  border: 1px solid #FFAC00;
  background :#FFAC00;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover{
  border: 1px solid #FFAC00;
  background :#FFAC00;
}
/* ------------------------ */
/* end overide Carousel */
.grid-1-cols{
  display: grid;
  grid-template-columns: 1fr;   
}

.page-1-col{
  padding-left: 50px;
  padding-right: 50px;
}

@media only screen and (min-width: 1260px) {
.grid-2-cols{
  display: grid;
  grid-template-columns: 60% 40%;
  /* width: 1170px;   */
  max-width: 1150px;
  margin: 0 auto;
  gap: 5px;
  row-gap: 33px;
}

.grid-4-cols {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1150px;
  margin: 0 auto;
  gap: 6px;
  row-gap: 10px;
}

.news-item{
  padding-top: 0px;
  margin-top: 40px;
}

}



.grid-5-cols-service{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  max-width: 860px;
  margin: 0 auto;

}

.grid-5-cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  max-width: 690px;
  margin: 0 auto;
  gap: 10px;
}

.grid-5-cols-downloading{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  max-width: 690px;
  margin: 0 auto;
  gap: 20px;
}

.service-bar{
  background-color: #FFF ;
  box-shadow: 0px 0px 38px 0px rgba(0, 0, 0, 0.08); 
  border: 1px solid #F2F2F2;
  border-radius: 3px;  
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 7px;
  padding-right: 5px;
  margin-top: 30px;
  /* padding: 10px 15px; */
}

.all-service-bar{  
  /* background-color: #f7f7f700 ; */
  background-color: #FFF ;
  box-shadow: 0px 0px 38px 0px rgba(0, 0, 0, 0.08); 
  border: 1px solid #F2F2F2;
  border-radius: 3px;  
  max-width: 940px;
  margin: 0 auto;
  padding-top: 30px;
  padding-bottom: 50px;
  /* width: 700px;   */
  /* margin-right: 0px; */
}

.all-service-container{  
 padding: 0px 10%;
}

.all-service-container .fixed-shape{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  opacity: 0.03;
} 

.downloadspace{
  margin: 100px 0px;
}

.bartext{
  font-size: 22px;
  font-weight: 400;  
  color: #2E2E34;
  text-align: center;
  line-height: 1.3;
}

.detailtext{
  font-size: 16px;
  font-weight: 300;
  color: #2E2E34;
  text-align: center;
  line-height: 1.2;
}

.titlename{ 
  display: inline-block;
  background-color: #FF8C00;
  color: #FFFAF2;
  font-size: 36px;
  text-align: center;
  font-weight: 400;   
  padding: 15px;
}

.service-icon-text{
  padding-top: 15px;
  font-size: 14px;
  font-weight: 500;
}

.indexpading{
  margin: 30px 0px;
}

.BG{   
  background: linear-gradient(180deg, #FFC277 0%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 75%, #fff38a 100%);
}

.BGHOME{
  background:#FFF;
}

.glyph svg.icon {
  width: 45px;
  height: 45px;
  margin-top: 25px;
  /* margin-bottom: 12px; */
}

ol.decimalOl{ counter-reset: item }
LI.decimalLi { display: block }
LI.decimalLi:before { content: counters(item, ".") " "; counter-increment: item }

.imgalign{
  margin-top: 30px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================== 
     # Services Version Nine
=================================================================== */
/* .sv9{
  grid-column: 2 / 3;
}
.sv10{
  grid-column: 3 / 4;
} */
.fonticonalign{
  display: block;
  text-align: center;
  padding-top: 30px;
}

/* .services-svgicon{    
  width: 68px; 
  stroke: #2E2E34;

} */

/* .service-container { 
  width: 900px;  
  margin: 0 auto;
} */

.servicebar-top{
  /* padding-top: 10px; */
}
.service-text{
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  color: #2E2E34;
}

.services-style-nine {
  display: block;
  text-align: center; 
  border: 1px solid #F2F2F2;
  width: 160px;
  height: 135px; 
  position:relative;
}

.services-style-nine .item {
  width: 160px;
  height: 135px;
  box-shadow: 0px 0px 38px 0px rgba(0, 0, 0, 0.08); 
  border-radius: 3px;
  overflow: hidden;
  background: #FFE8CC;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.services-style-nine .item::before {
  position: absolute;
  content: "";
  left: 0;
  bottom: -100%;
  content: "";
  height: 100%;
  width: 100%;
  background:  #FFAC00;
  transition: all 0.15s ease-in-out;
  z-index: -1;
}

.services-style-nine .item:hover::before {
  bottom: 0;
}

.services-style-nine .item:hover a,
.services-style-nine .item:hover p {
  color: #ffffff;
}


.services-style-nine .item p {
  /* margin: 0px; */
  margin-bottom: 20px;
}

.services-style-nine .item a,
.services-style-nine .item p {
  transition: all 0.15s ease-in-out;
}

.services-style-nine .item i {
  display: inline-block;
  margin-top: 15px;
  font-size: 45px;
  /* color
  : #FF8C00;  */
  transition: all 0.1s ease-in-out;  
  background: linear-gradient(180deg,#F2CB57,#F28444); 
  -webkit-background-clip:text;
  color:transparent;    
}

.services-style-nine .item:hover i {
  color: #ffffff;
}

.service-link:link, 
.service-link:visited, 
.service-link:focus, 
.service-link:hover, 
.service-link:active
{  
  text-decoration:none;
  font-weight: 600;
  color: #2E2E34;
  cursor:pointer;
}

/* ============================================================== 
     # Download Index
=================================================================== */
.download-detailtext{
  font-size: 16px;
  font-weight: 300;
  color: #2E2E34;
  text-align: center;
  line-height: 0.6;
  margin-bottom: 35px;
}


.download-bar{
  background: #FFF;
  box-shadow: 0px 0px 38px 0px rgba(0, 0, 0, 0.08);  
  border: 1px solid #F2F2F2;  
  border-radius: 3px;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 36px;
  margin-bottom: 35px;
  margin-top: 30px;
}

.svgalign{
  display: block;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 10px;
}

.download-svgicon{    
  width: 50px;
  /* stroke: #2E2E34; */
  fill: #2E2E34;
}
.download-container {
  /* width: 900px;  
  margin: 0 auto; */
}

.download-area .fixed-shape-bottom {
  z-index: -1;
  opacity: 0.2;
}

.download-area .download-item {
  margin-bottom: 20px;
}

.download-area a {
  background: #ffffff;
  width: 120px;
  height: 110px;
  padding: 0px 0px;
  text-decoration: none;
  border: 1px solid #F2F2F2;
  display: block;
  padding-bottom: 0;
  position: relative;
  /* margin-bottom: 15px; */
  border-radius: 5px;
}

.download-area a h5 {
  display: grid;  
  font-weight: 700;
  margin: 0px auto; 
  text-align: center;
  font-size: 12px;  
  color: #2E2E34;
  background: #D9D9D9;
  padding-top: 5px;
  padding-bottom: 5px;  
  border-radius: 30px;
  position: relative;  
  z-index: 1;  
  /* bottom: -25px; */
  border: 1px solid #D9D9D9;
  overflow: hidden;
  transition: all 0.2s ease-in-out;
}
.download-area a h5::after {
  position: absolute;
  left: -100%;
  bottom: 0;
  content: "";
  height: 100%;
  width: 100%;  
  background: linear-gradient(
    90deg,
    rgb(255, 172, 0) 0%,       
    rgb(255, 172, 0) 56%    
  ); 
  z-index: -1;
  border-radius: 30px;
  transition: all 0.1s ease-in-out;
}

.download-area a:hover h5 {
  color: #ffffff;
  border: 1px solid transparent;
}

.download-area a:hover h5::after {
  left: 0;
}
/* h2.font-16 {
  font-size: 14px !important;
  line-height: 20px !important;
} */

/* ============================================================== 
     # Carousel
=================================================================== */
/* * {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
img {vertical-align: middle;} */
.mySlides {display: none;}

/* BG carousel */
.carousel-bar{
  display: grid;
  grid-template-columns: 1fr;  
}
.carousel-img{
  vertical-align: middle;
  border-radius: 5px;
  box-shadow: 0px 0px 38px 0px rgba(0, 0, 0, 0.08); 
}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: red;  
  border-radius: 50%;
  border: 1px solid #FFAC00;
  display: inline-block;
  /* transition: background-color 0.6s ease; */
  position: absolute;
  top: 3px;
  right: 3px;
}

.dotdisplay{
  text-align:center;
  margin-top: 2px;
}  

.active-carousel {
  background-color: #FFAC00;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}



/* Start Statistics Area */
.service-stat-bar{
  background: #FFF;
  border-radius: 3px;
  padding-top: 10px;
  padding-bottom: 10px;    
  box-shadow: 0px 0px 38px 0px rgba(0, 0, 0, 0.08); 
  border: 1px solid #F2F2F2;
  margin: 0 auto;
  max-width: 1150px;
}
.service-stat-item{
  display: grid;
  grid-template-columns: repeat(3,1fr);
}

.stattext{
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  color: #2E2E34;
}

.value{
  font-size: 22px;
  font-weight: 700;  
  color: #2E2E34;
  text-align: center;
}

/* End Statistics Area */

/* ============================================================== 
     # News
=================================================================== */
.grid-2-cols-news{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  max-width: 800px;
  margin: 0 auto;
  gap: 10px;
  margin-top: 20px;
}
.space01{
  margin-top: 35px;
}
.main-news-item{
  display: grid;
  grid-template-columns: 1fr;
  max-width: 800px;
  margin: 0 auto;
  gap: 10px;
  margin-bottom: 100px;
  margin-top: 30px;
}
.news-bar{
  background-color: #F7F7F7;
  margin-top: 5px;
}

/* .news-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  
} */


.news-item li{
  display: grid;  
  grid-template-columns: 40% 60%;  
  background-color: #FFF;    
  margin-bottom: 10px;  
  height: 138px;
  /* width: 460px; for create version */
  width: 496px;
  box-shadow: 0px 0px 38px 0px rgba(0, 0, 0, 0.08);   
}

.article-item{
  margin-top: 0px;
}
.article-item li{
  display: grid;  
  grid-template-columns: 40% 60%;  
  background-color: #FFF;    
  margin-bottom: 10px;  
  height: 138px;
  /* width: 460px; for create version */
  width: 496px;
  box-shadow: 0px 0px 38px 0px rgba(0, 0, 0, 0.08);   
}

.recent-news-item a{
  font-size: 22px;
  font-weight: 300;  
  color: #2E2E34;
}
.thumb {  
  display: flex;
  justify-content: center;
  align-items: center;
}

.thumb img{
  display:grid;
  margin: 0 auto;
  width: 80%;
} 

.info{
  display: grid;
  grid-template-rows: 80% 20%;
  padding: 5px;
}

.info{
  font-size: 16px;
  line-height: 1.6;
  font-weight: 300;    
}

.info a{
  text-decoration: none;  
  border-bottom:  2px solid #F2F2F2;
}

.info a:hover{
  color:#FFAC00;
}
.meta-title {
  text-align: right;  
  font-size: 12px;
  font-weight: 300;
  margin-top: 5px;  
}

/* ============================================================== 
     # Article
=================================================================== */

/* BG carousel */
.article-bar{  
  /* width: 730px; */
  border-radius: 3px;
  padding: 1px 5px;    
  margin-bottom: 20px;   
}

.article-bartext{
  margin-top: 43px;
  font-size: 22px;
  font-weight: 400;  
  color: #2E2E34;
  text-align: center;
  line-height: 1.3;
}


/* ============================================================== 
     # OIT accordion
  =================================================================== */
/* Style the buttons that are used to open and close the accordion panel */
.accordionbar{
  margin-bottom: 100px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.oitaccordion {  
  /* background-color: #e9ecef; */
  /* background-color: #FFE8CC; */  
  background-image: linear-gradient(90deg, #fed0d0 0%, #c7dfee 60%);
  box-shadow: 0 0 32px rgba(0, 0, 0, 0.1);
  border-radius: 3px;  
  cursor: pointer;
  padding: 18px;
  width: 100%;
  font-size: 16px;
  font-weight: 700;  
  color: #2E2E34;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s; 
}

.accordiontitle{
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: 24px;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.accordionactive, .accordion:hover {
  background-image: linear-gradient(90deg, #FD8A8A 0%, #72AED4 60%);
  /* background-color: #FFAC00; */
}

/* Style the accordion panel. Note: hidden by default */
.oitpanel {
  /* padding: 0 18px; */
  background-color: white; 
  display: none;
  overflow: hidden;
  font-size: 16px;
  font-weight: 400;
  color: #2E2E34;
}

.oitpanel a:link,
.oitpanel a:visited {
  text-decoration: none;
  display: block; 
  /* box-shadow: 0 0 32px rgba(0, 0, 0, 0.1);  */
  margin-bottom: 2px;
  padding: 14px 0;
}

.oitpanel a:hover{
  /* color: #FF8C00; */
  color: #FD8A8A;
}

.oitdetailtext{
  margin-left: 55px;
}

/* -- About us Area =============================================    */
/* header */
.aspiration-container{
  display: grid;
  max-width: 800px;
  grid-template-columns:1fr;
  margin: 0px auto;
  margin-top: 50px;
  margin-bottom: 80px;
}
.grid-aspiration{
  display: grid;
  max-width: 800px;
  padding: 10px;
  grid-template-columns: 40% 60%; 
 
}

.grid-3-col-aspiration{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  padding: 10px;
  gap: 15px;
}

.img-aspiration{  
  max-width: 80%;  
}

.align-img-aspiration{
  display: flex;
  justify-content: center;
  align-items: center;
}

.title-aboutus{
  text-align: right;
  font-size: 16px;
  font-weight: 700;  
  color: #2E2E34;
}

.headdetail-aboutus{
  text-align: right;
  font-size: 16px;
  font-weight: 300;  
  color: #2E2E34;
}

.vision-section,
.mission-section{
  margin-top: 80px;
}
.title-vision,
.title-mission{
  text-align:center;
  font-size: 16px;
  font-weight: 700;  
  color: #2E2E34;
}
.vision-item{
  box-shadow: 0px 0px 38px 0px rgba(0, 0, 0, 0.08); 
  border-radius: 3px;
  background: #FFE8CC;
  padding: 10px 15px;
}
.vision-item i{
  font-size: 30px;
  color:#FFAC00;
}
.vision-detail{
  text-align: left;
  font-size: 16px;
  font-weight: 300;  
  color: #2E2E34;
}
.mission-section li{
  box-shadow: 0 0 32px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  /* background-color: #f2f2f2; */
  padding: 15px;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 24px;
  row-gap: 24px;
  align-items: center;
}
.missionnumber{
  font-size: 16px;
  font-weight: 700;  
  /* color: #2E2E34; */
  color: #FFAC00;
}

.animated { 
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInLeft {
  0% {
     opacity: 0;
     -webkit-transform: translateX(-20px);
  }
  100% {
     opacity: 1;
     -webkit-transform: translateX(0);
  }
}

@keyframes fadeInLeft {
  0% {
     opacity: 0;
     transform: translateX(-20px);
  }
  100% {
     opacity: 1;
     transform: translateX(0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}
 
/* Organization Chart Area */
.orgchart-container{
  margin-top: 30px;
  margin-bottom: 80px;
}
.orgchart-section img{
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.orgchart-img{
  content: url("https://cits.mfu.ac.th/fileadmin/CITS_File/graphics/CITS_OrgChart20240730.png");
  max-width: 65%;
}

.orgchart-imgEN{
  content: url("https://cits.mfu.ac.th/fileadmin/CITS_File/graphics/CITS_OrgChartEN20240730.png");
  max-width: 65%;
}


/* ============================================================== 
     # Team area
  =================================================================== */

.team-container{
  margin-top: 30px;
  margin-bottom: 80px;
} 

.grid-1-col-team{
  display: grid;
  max-width: 281px;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0px auto; 
}

.grid-2-col-team{
  display: grid;
  max-width: 524px;
  grid-template-columns: repeat(2,1fr);
  gap: 10px;
  margin: 0px auto;
}

.grid-3-col-team{
  display: grid;
  max-width: 835px;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
  margin: 0px auto;
}

.grid-4-col-team{
  display: grid;
  max-width: 1139px;
  grid-template-columns: repeat(4,1fr);
  gap: 5px;
  margin: 0px auto;
}

.director-headertext{
  margin-top: 20px;
  font-size: 20px;
  font-weight: 300;  
  color: #2E2E34;
  text-align: center;
  line-height: 1.3;
}


.subteam-headertext{
  margin-top: 80px;
  font-size: 20px;
  font-weight: 400;  
  color: #2E2E34;
  text-align: center;
  line-height: 1.3;
}
.team-section{  
  border-radius: 3px;
  max-width: 1170px;
  margin: 0px auto;
}
.team-item{
  background-color: #FFF;
  border: 1px solid #F2F2F2; 
  box-shadow: 0px 0px 38px 0px rgba(0, 0, 0, 0.08); 
  border-radius: 3px;
  padding-left: 10px;
  padding-right: 10px; 
  /* padding: 10px; */
  width: 257px;
  height: 380px;
}

.team-image-wrapper{
  /* position: relative; */
  display: grid;
  margin: 0 auto;
  margin-top: 15px;  
  margin-bottom: 25px;
  width: 160px;
  height: 160px;
  overflow: hidden;
  border-radius: 50%; 
  border: 2px solid #FFAC00; 
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
} 
.team-image-wrapper img { 
  width: 100%; 
  height: auto; 
}
.staff-details{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.staff-name{
  text-align: center;
  font-size: 16px;
  font-weight: 700;  
  color: #2E2E34;
}

.staff-position{
  text-align: center;
  font-size: 16px; 
  color: #2E2E34;
}
.staff-email-sm{ 
  font-size: 14px; 
  color: #2E2E34;
}

/* ==============================================================
 tablets Layout: 993 to 1199px. new
 =================================================================== */
 @media only screen and (max-width: 1259px) and (min-width: 800px) {

  .grid-2-cols{
    display: grid;
    grid-template-columns: 1fr;  
    margin: 0 auto;
    gap: 10px;
  }
  
  .grid-4-cols {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 670px;
    margin: 0 auto;
    gap: 6px;
    row-gap: 10px;
  }
  .service-bar,
  .download-bar{
    max-width: 675px;
    margin: 0 auto;
    margin-top: 30px;
  }

  .service-stat-bar{    
    margin: 0 auto;
    max-width: 690px;
  }

  .grid-5-cols {    
    grid-template-columns: repeat(5, 1fr);
    max-width: 700px;
  }

  .news-grid{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 5px;  
    max-width: 750px;
    margin: 0 auto;
  }

  .grid-5-cols-service{    
    grid-template-columns: repeat(3, 1fr);
    max-width: 500px;   
  }
  .all-service-bar{       
    max-width: 560px;    
  }

  .grid-5-cols-downloading{
    grid-template-columns: repeat(3, 1fr); 
    max-width: 400px;
    margin: 0 auto;    
  }
  .grid-4-col-team{    
    max-width: 570px;
    grid-template-columns: repeat(2,1fr);
    gap: 10px;    
  } 
  .tabletdisplay{
    display:contents;
  }
  .article-container{
    grid-row: 3/4;
  }
  .download-container {
    grid-row: 4/5;
  }
 
  .news-item li{   
    grid-template-columns: 40% 60%;      
    height: 138px;    
    width: 370px;    
    margin: 0 auto;
  }

  .article-item li{   
    grid-template-columns: 40% 60%;      
    height: 138px;    
    width: 370px;    
    margin: 0 auto;
  }
 }

 /* ==============================================================
 tablets Layout: 993 to 1199px. new
 =================================================================== */
 @media only screen and (max-width: 799px) and (min-width: 531px) {

  .grid-2-cols{
    display: grid;
    grid-template-columns: 1fr;  
    margin: 0 auto;
    gap: 10px;
  }
  
  .grid-4-cols {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 500px;
    margin: 0 auto;
    gap: 6px;
    row-gap: 10px;
  }

  .service-bar,
  .download-bar{
    max-width: 505px;
    margin: 0 auto;
    margin-top: 30px;
  }

  .service-stat-bar{    
    margin: 0 auto;
    max-width: 520px;
  }

  .grid-5-cols {    
    grid-template-columns: repeat(3, 1fr); 
    max-width: 390px;
    gap: 10px;   
    row-gap: 50px;         
  }  
  .news-grid{
    display: grid;
    grid-template-columns: 100%;
    max-width: 496px;
    margin: 0 auto;     
  }
  .all-service-bar{       
    width: 360px;    
  }

  .grid-5-cols-service{    
    grid-template-columns: repeat(2, 1fr);
    max-width: 340px;  
    margin: 0 auto;  
  }
  
  .grid-5-cols-downloading{
    grid-template-columns: repeat(2, 1fr);
    max-width: 270px;    
  }
  .grid-2-cols-news{
    grid-template-columns: 1fr;
  }
  .recent-news-item a{
    font-size: 16px;
    font-weight: 300;
    line-height: 1.6;  
    color: #2E2E34;
  }  

  .grid-1-col-team,
  .grid-2-col-team,
  .grid-3-col-team,
  .grid-4-col-team{
    display: grid;    
    grid-template-columns: 1fr;    
    max-width: 260px;       
  }
 }
/* ==============================================================
 tablets Layout: 1200px. 
 =================================================================== */
 /* @media only screen and (max-width: 1199px) {
  .grid-2-cols{
    display: grid;
    grid-template-columns: 1fr;  
    margin: 0 auto;
    gap: 10px;
  }
  .grid-4-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 680px;
    margin: 0 auto;
    gap: 10px;      
  }
  .grid-5-cols {    
    grid-template-columns: repeat(5, 1fr);
    max-width: 700px;
  }

  .grid-5-cols-service{    
    grid-template-columns: repeat(3, 1fr);
    max-width: 500px;   
  }

  .all-service-bar{       
    max-width: 560px;    
  }

  .grid-5-cols-downloading{
    grid-template-columns: repeat(3, 1fr); 
    max-width: 400px;
    margin: 0 auto;    
  }
  .grid-4-col-team{    
    max-width: 570px;
    grid-template-columns: repeat(2,1fr);
    gap: 10px;    
  } 
  .tabletdisplay{
    display:contents;
  }
  .news-grid{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 5px;  
  }
  .article-container{
    grid-row: 3/4;
  }
  .download-container {
    grid-row: 4/5;
  }
  .carousel-bar,
  .article-bar{
    background: #F7F7F7 ; 
  }  

  .news-item li{   
    grid-template-columns: 40% 60%;      
    height: 138px;    
    width: 370px;    
    margin: 0 auto;
  }

  .article-item li{   
    grid-template-columns: 40% 60%;      
    height: 138px;    
    width: 370px;    
    margin: 0 auto;
  }

 }  */
 

/* ==============================================================
 Mobile Layout: 530 px. 
 =================================================================== */
 @media only screen and (max-width: 530px) and (min-width: 375px){ 
  /* .sv9{
  grid-column: 1 / 2;
  }
  .sv10{
    grid-column: 2 / 3;
  } */

  .grid-4-cols {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-width: 340px;
    margin: 0 auto;
    gap: 10px;  
  }

  .service-bar{
    max-width: 350px;
    margin: 0 auto;
    margin-top: 30px;
  }

  .service-stat-bar{    
    margin: 0 auto;
    max-width: 350px;
  }

  .download-bar{    
    margin: 0 auto;
    max-width: 330px;
    margin-top: 30px;
  }

  .all-service-bar{       
    width: 370px;    
  }

  .grid-5-cols {    
    grid-template-columns: repeat(2, 1fr); 
    max-width: 280px;    
    gap: 10px;   
    row-gap: 50px;  
  } 
  
  .news-grid{
    display: grid;
    grid-template-columns: 100%;
    max-width: 370px;
    margin: 0 auto;     
  }

  .news-item{
    margin-top: 10px;
  }

  .news-item li,
  .article-item li{   
    grid-template-columns: 40% 60%;      
    height: 138px;    
    width: 370px;    
    margin: 0 auto;
    margin-bottom: 10px;
  }

  .grid-5-cols-service{    
    grid-template-columns: repeat(2, 1fr);
    max-width: 340px;   
    margin: 0 auto; 
  }

  .grid-5-cols-downloading{
    grid-template-columns: repeat(2, 1fr);
    max-width: 265px;    
  }

  .grid-3-col-aspiration{
    grid-template-columns: 1fr;
    row-gap: 30px;
    max-width: 500px; 
  } 
  
  .grid-1-col-team,
  .grid-2-col-team,
  .grid-3-col-team,
  .grid-4-col-team{
    display: grid;    
    grid-template-columns: 1fr;    
    max-width: 260px;       
  }

  .all-service-container{  
    padding: 0px 0%;
   }
  
 }  
 
/* ==============================================================
 Mobile Layout: 375px. 
 =================================================================== */
@media only screen and (max-width: 374px) {
  .grid-2-cols{
    display: grid;
    grid-template-columns: 100%;  
    margin: 0 auto;
    gap: 10px;
  }

  .grid-4-cols {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-width: 340px;
    margin: 0 auto;
    gap: 10px;  
  }

  .news-item li,
  .article-item li{   
    grid-template-columns: 1fr;      
    height: 370px;    
    max-width: 350px;    
    margin: 0 auto;
    margin-bottom: 10px;
  }

  .thumb img {
    width: 60%;
  }

  .all-service-bar{       
    max-width: 400px;   
    margin: 0 auto;
  }
  .service-bar{
    max-width: 360px;
    margin: 0 auto;
  }

  .download-bar{    
    margin: 0 auto;
    max-width: 350px;
    margin-top: 30px;
  }
  

  .grid-5-cols {
    display: grid;
    grid-template-columns: repeat(2, 1fr);     
    row-gap: 20px;
    max-width: 254px;
    margin: 0 auto;
    
  }

  .grid-5-cols-service{
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    max-width: 330px;
    margin: 0 auto;
    gap: 10px;
  }

  .all-service-container{  
    padding: 0px 3%;
   }

  .detailtext{
    display: none;    
  }

  .download-detailtext{
    display: none;    
  }

  .carousel-bar{
    /* background: linear-gradient(180deg, #FFC277 0%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 75%, #F7F7F7 100%);     */
    background: #F7F7F7 ;    
  }

  .tabletdisplay{
    display:contents;
  }

  .article-bar{
  background: linear-gradient(180deg, #F7F7F7 0%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 75%, #F7F7F7 100%);
  /* width: 730px; */
  border-radius: 3px;
  padding: 1px 5px;  
  margin-bottom: 20px; 
  }

  .page-1-col{
    padding-left: 20px;
    padding-right: 20px;
  }

  /* ============================================================== 
     # News Mobile
  =================================================================== */
  .grid-2-cols-news{
    display: grid;
    grid-template-columns: 1fr;         
  }
  
  .recent-news-item{    
    margin-top: 15px;   
  }

  .main-news-item{   
    max-width: 365px; 
    margin-top: 5px;
  }

  /* ============================================================== 
     # OIT accordion
  =================================================================== */
  .accordionbar{
    margin-bottom: 50px;
    max-width: 365px; 
  }

  /* -- About us Area =============================================    */
  .aspiration-container{
    display: grid;
    max-width: 330px;
  }  
  .grid-aspiration{
    grid-template-columns: 1fr;
  }
  .grid-3-col-aspiration{
    grid-template-columns: 1fr;
    row-gap: 30px;
    max-width: 300px;
    margin: 0 auto;
  }  

  .headdetail-aboutus br{
    display: none;
  }

  /* Organization Chart Area */
  .orgchart-img{
    content: url("https://cits.mfu.ac.th/fileadmin/CITS_File/graphics/CITS_OrgChart_forMobile20240730.png");
    max-width: 95%;
  }
  .orgchart-imgEN{
    content: url("https://cits.mfu.ac.th/fileadmin/CITS_File/graphics/CITS_OrgChart_forMobileEN20240730.png");
    max-width: 95%;
  }

  /* ============================================================== 
     # Team area
  =================================================================== */
  .grid-1-col-team,
  .grid-2-col-team,
  .grid-3-col-team,
  .grid-4-col-team{
    display: grid;    
    grid-template-columns: 1fr;    
    max-width: 260px;       
  }
}


/*Service Card*/
/* Service Card Base Columns spacing */
.service-card .col {
    margin-bottom: 20px; /* Adjusted for better grid spacing */
}

/* 1. Target the actual outer frame inside the service container to transform into an interactive card */
.service-card .frame-type-shortcut,
.service-card .frame-type-textpic {
    background: #ffffff !important;
    border: 1px solid #f0f2f5 !important;
    border-radius: 16px !important;
    padding: 30px 20px !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* Strip inner background/padding from nested textpic when wrapped inside a shortcut frame to prevent double boxing */
.service-card .frame-type-shortcut .frame-type-textpic {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* 2. Unified Card Hover Effects (Triggered at the top-most level element) */
.service-card .frame-type-shortcut:hover,
.service-card > .row > .col > .frame-type-textpic:hover {
    background-image: linear-gradient(25deg, #f02c20, #ec7230, #e2a143, #d2cb57) !important;
    transform: translateY(-6px) !important;
    box-shadow: 0 15px 30px rgba(174, 27, 31, 0.08) !important; /* Soft MFU Red glow shadow */
    border-color: linear-gradient(25deg, #f02c20, #ec7230, #e2a143, #d2cb57) !important; /* Elegant MFU Gold boundary highlight */
}

.service-card .frame-type-shortcut:hover img,
.service-card > .row > .col > .frame-type-textpic:hover img {
    background:#ffffff;
    padding:5px;
    border-radius:10px;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
}

/* 3. Center-align internal structural gallery elements */
.service-card .ce-textpic,
.service-card .ce-gallery {
    margin-bottom: 15px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 4. Exact Image Icon Styling and Uniform Constraints */
.service-card .image-embed-item {
    max-width: 50px !important;
    height: auto !important;
    display: block !important;
    transition: transform 0.3s ease !important;
    image-rendering: -webkit-optimize-contrast !important; /* Fixes downscaling blurriness */
    image-rendering: crisp-edges !important;
}

/* Dynamic subtle zoom effect on the icon when the parent card is hovered */
.service-card .frame-type-shortcut:hover .image-embed-item,
.service-card .frame-type-textpic:hover .image-embed-item {
    transform: scale(1.1) !important;
}

/* 5. Typography, Link Behavior, and Hover Text-Color Inversion */
.service-card .ce-bodytext p {
    margin: 0 !important;
}

.service-card .ce-bodytext a {
    font-family: 'athitisemibold', sans-serif !important;
    color: #333333 !important;
    text-decoration: none !important;
    font-size: 16px !important;
    transition: color 0.3s ease !important;
    display: inline-block !important;
    margin-top: 5px !important;
}

/* Text color flips cleanly to White when the outer card is hovered */
.service-card .frame-type-shortcut:hover .ce-bodytext a,
.service-card .frame-type-textpic:hover .ce-bodytext a {
    color: #FFFFFF !important;
}

@media (max-width: 575.98px) {
    .service-card .ce-gallery {
        display: none !important;
    }
    /* Optional: Make cards more compact on mobile */
    .service-card .frame-type-shortcut,
    .service-card .frame-type-textpic {
        padding: 5px !important; 
    }
}

/* Controls the design of all staff cards under the .staff class */
.staff .frame-type-textpic {
    background: #ffffff;          /* Card background color */
    border-radius: 8px;           /* Rounded corners */
    padding: 20px;                /* Inner padding */
    margin-bottom: 20px;          /* Bottom margin */
    display: flex;
    flex-direction: column;
    align-items: center;          /* Center items vertically */
    text-align: center;           /* Center text alignment */
    transition: transform 0.2s ease;
}

/* Hover effects for the staff card */
.staff .frame-type-textpic:hover {
    /*transform: translateY(-5px);*/
}

/* Forces the image container to always jump to the TOP inside the flexbox card */
.staff .ce-textpic {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.staff .ce-gallery {
    order: -1;                    /* Forces the image gallery to the absolute top */
    /* margin-bottom: 15px; */          /* Space between image and text */
}

/* Standardizes all staff profile images to look uniform */
.staff .ce-textpic .ce-gallery img {
    border:7px #eeeeee solid;
    width: 200px;                 /* Staff image width */
    height: 200px;                /* Staff image height */
    object-fit: cover;            /* Ensures image crops perfectly without distortion */
    object-position: top;
    border-radius: 50%;           /* Changed to 50% for a perfect circle profile */
    display: block;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

/* Text styling (Name and Position) */
.staff .ce-bodytext h4 {
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 1.1rem;
    color: #ED6D1C;
}

.staff .ce-bodytext p {
    margin: 0;
    font-size: 0.95rem;
    color: #666666;
}

/* Clears empty spacing or line breaks generated by TYPO3/Bootstrap (e.g., <p>&nbsp;</p>) */
/*.staff .ce-bodytext p:empty,
.staff .ce-bodytext p br {
    display: none;
}*/

.frame-14 h2 {
    font-family: 'athitisemibold', sans-serif !important; /* Updated font to athitisemibold */
    font-size: 34px !important;
    color: #222222 !important;
    position: relative !important;
    padding-bottom: 18px !important; /* Slightly increased padding for breathing room */
    margin-bottom: 25px !important;
    display: block !important; /* Shrinks the container wrapper to text size */
    border-bottom:0px;
}

/* Creating an updated gradient underline with 100% width */
.frame-14 h2::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important; /* Change to "left: 50%; transform: translateX(-50%);" for center alignment */
    width: 100% !important; /* Forces the underline to span the full width of the heading */
    height: 10px !important; /* Modern sleek height */
    background-image: linear-gradient(25deg, #f02c20, #ec7230, #e2a143, #d2cb57);
    border-radius: 10px !important; /* Soft round corners for a premium feel */
}