html{
	margin:0;
	padding:0;
	border: 0;
	height:100vh;
	width:100%;
}
body{
	margin:0;
	padding:0;
	border: 0;
	height:100vh;
	width:100%;
	display:flex;
	flex-direction: column;
	background-color:#f8f9fa;
	font-family: sans-serif !important;
  overflow:hidden;

}
.bigcheckbox{
    /* Double-sized Checkboxes */
  -ms-transform: scale(1.5); /* IE */
  -moz-transform: scale(1.5); /* FF */
  -webkit-transform: scale(1.5); /* Safari and Chrome */
  -o-transform: scale(1.5); /* Opera */
  /*padding: 10px;
  margin-right:5px;*/
  margin:0px 5px;
}

.backdrop {
  position: fixed;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.75);
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
}


.modal {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  background-color: white;
  padding: 1rem;
  text-align: center;
  width: 30rem;
  z-index: 10;
  position: fixed;
  top: calc(50% - 15rem);
  left: calc(50% - 15rem);
  overflow-y: auto;
}

.backdrop {
  position: fixed;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.75);
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
}


.fl-wrap{
    list-style: none;
    -ms-box-orient: horizontal;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.fl-nowrap{
    list-style: none;
    -ms-box-orient: horizontal;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: nowrap;
}

.fl-wrap-row{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display:flex;
  flex-direction: row;
  overflow: hidden;
  flex:1;
}


.fl-wrap-col{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display:flex;
  flex-direction: column;
  overflow: hidden;
  flex:1;
}




.fl-fill{
	flex:1;
}

.fl-auto{
	overflow: auto;
}
.fl-scroll{
	overflow-y: scroll;

}
.fl-xscroll{
	overflow-x: scroll;
}
.fl-mid {
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.fl-mid i,.fl-mid span,.fl-mid input,.fl-mid select,.fl-mid div{
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.fl-vmid {
  display: flex;
  align-items: center;
  vertical-align: middle;
}

.fl-vmid i,.fl-vmid span,.fl-vmid input,.fl-vmid select,.fl-vmid div{
  align-items: center;
  vertical-align: middle;
}

.hover:hover{
	filter:brightness(80%);
  background-color: lightgrey;
}


.h-fix-1{min-width:1px;max-width:1px;}
.h-fix-2{min-width:2px;max-width:2px;}
.h-fix-3{min-width:3px;max-width:3px;}
.h-fix-4{min-width:4px;max-width:4px;}
.h-fix-5{min-height:5px;max-height:5px;}
.h-fix-10{min-height:10px;max-height:10px;}
.h-fix-15{min-height:15px;max-height:15px;}
.h-fix-20{min-height:20px;max-height:20px;}
.h-fix-25{min-height:25px;max-height:25px;}
.h-fix-30{min-height:30px;max-height:30px;}
.h-fix-35{min-height:35px;max-height:35px;}
.h-fix-40{min-height:40px;max-height:40px;}
.h-fix-45{min-height:45px;max-height:45px;}
.h-fix-50{min-height:50px;max-height:50px;}
.h-fix-55{min-height:55px;max-height:55px;}
.h-fix-60{min-height:60px;max-height:60px;}
.h-fix-65{min-height:65px;max-height:65px;}
.h-fix-70{min-height:70px;max-height:70px;}
.h-fix-75{min-height:75px;max-height:75px;}
.h-fix-80{min-height:80px;max-height:80px;}
.h-fix-85{min-height:85px;max-height:85px;}
.h-fix-90{min-height:90px;max-height:90px;}
.h-fix-95{min-height:95px;max-height:95px;}
.h-fix-100{min-height:100px;max-height:100px;}
.h-fix-105{min-height:105px;max-height:105px;}
.h-fix-110{min-height:110px;max-height:110px;}
.h-fix-115{min-height:115px;max-height:115px;}
.h-fix-120{min-height:120px;max-height:120px;}
.h-fix-125{min-height:125px;max-height:125px;}
.h-fix-130{min-height:130px;max-height:130px;}
.h-fix-135{min-height:135px;max-height:135px;}
.h-fix-140{min-height:140px;max-height:140px;}
.h-fix-145{min-height:145px;max-height:145px;}
.h-fix-150{min-height:150px;max-height:150px;}
.h-fix-155{min-height:155px;max-height:155px;}
.h-fix-160{min-height:160px;max-height:160px;}
.h-fix-165{min-height:165px;max-height:165px;}
.h-fix-170{min-height:170px;max-height:170px;}
.h-fix-175{min-height:175px;max-height:175px;}
.h-fix-180{min-height:180px;max-height:180px;}
.h-fix-185{min-height:185px;max-height:185px;}
.h-fix-190{min-height:190px;max-height:190px;}
.h-fix-195{min-height:195px;max-height:195px;}
.h-fix-200{min-height:200px;max-height:200px;}
.h-fix-205{min-height:205px;max-height:205px;}
.h-fix-210{min-height:210px;max-height:210px;}
.h-fix-215{min-height:215px;max-height:215px;}
.h-fix-220{min-height:220px;max-height:220px;}
.h-fix-225{min-height:225px;max-height:225px;}
.h-fix-230{min-height:230px;max-height:230px;}
.h-fix-235{min-height:235px;max-height:235px;}
.h-fix-240{min-height:240px;max-height:240px;}
.h-fix-245{min-height:245px;max-height:245px;}
.h-fix-250{min-height:250px;max-height:250px;}
.h-fix-255{min-height:255px;max-height:255px;}
.h-fix-260{min-height:260px;max-height:260px;}
.h-fix-265{min-height:265px;max-height:265px;}
.h-fix-270{min-height:270px;max-height:270px;}
.h-fix-275{min-height:275px;max-height:275px;}
.h-fix-280{min-height:280px;max-height:280px;}
.h-fix-285{min-height:285px;max-height:285px;}
.h-fix-290{min-height:290px;max-height:290px;}
.h-fix-295{min-height:295px;max-height:295px;}
.h-fix-300{min-height:300px;max-height:300px;}
.h-fix-400{min-height:400px;max-height:400px;}
.h-fix-500{min-height:500px;max-height:500px;}
.h-fix-600{min-height:600px;max-height:600px;}
.w-fix-1{min-width:1px;max-width:1px;}
.w-fix-2{min-width:2px;max-width:2px;}
.w-fix-3{min-width:3px;max-width:3px;}
.w-fix-4{min-width:4px;max-width:4px;}
.w-fix-5{min-width:5px;max-width:5px;}
.w-fix-10{min-width:10px;max-width:10px;}
.w-fix-15{min-width:15px;max-width:15px;}
.w-fix-20{min-width:20px;max-width:20px;}
.w-fix-25{min-width:25px;max-width:25px;}
.w-fix-30{min-width:30px;max-width:30px;}
.w-fix-35{min-width:35px;max-width:35px;}
.w-fix-40{min-width:40px;max-width:40px;}
.w-fix-45{min-width:45px;max-width:45px;}
.w-fix-50{min-width:50px;max-width:50px;}
.w-fix-55{min-width:55px;max-width:55px;}
.w-fix-60{min-width:60px;max-width:60px;}
.w-fix-65{min-width:65px;max-width:65px;}
.w-fix-70{min-width:70px;max-width:70px;}
.w-fix-75{min-width:75px;max-width:75px;}
.w-fix-80{min-width:80px;max-width:80px;}
.w-fix-85{min-width:85px;max-width:85px;}
.w-fix-90{min-width:90px;max-width:90px;}
.w-fix-95{min-width:95px;max-width:95px;}
.w-fix-100{min-width:100px;max-width:100px;}
.w-fix-105{min-width:105px;max-width:105px;}
.w-fix-110{min-width:110px;max-width:110px;}
.w-fix-115{min-width:115px;max-width:115px;}
.w-fix-120{min-width:120px;max-width:120px;}
.w-fix-125{min-width:125px;max-width:125px;}
.w-fix-130{min-width:130px;max-width:130px;}
.w-fix-135{min-width:135px;max-width:135px;}
.w-fix-140{min-width:140px;max-width:140px;}
.w-fix-145{min-width:145px;max-width:145px;}
.w-fix-150{min-width:150px;max-width:150px;}
.w-fix-155{min-width:155px;max-width:155px;}
.w-fix-160{min-width:160px;max-width:160px;}
.w-fix-165{min-width:165px;max-width:165px;}
.w-fix-170{min-width:170px;max-width:170px;}
.w-fix-175{min-width:175px;max-width:175px;}
.w-fix-180{min-width:180px;max-width:180px;}
.w-fix-185{min-width:185px;max-width:185px;}
.w-fix-190{min-width:190px;max-width:190px;}
.w-fix-195{min-width:195px;max-width:195px;}
.w-fix-200{min-width:200px;max-width:200px;}
.w-fix-205{min-width:205px;max-width:205px;}
.w-fix-210{min-width:210px;max-width:210px;}
.w-fix-215{min-width:215px;max-width:215px;}
.w-fix-220{min-width:220px;max-width:220px;}
.w-fix-225{min-width:225px;max-width:225px;}
.w-fix-230{min-width:230px;max-width:230px;}
.w-fix-235{min-width:235px;max-width:235px;}
.w-fix-240{min-width:240px;max-width:240px;}
.w-fix-245{min-width:245px;max-width:245px;}
.w-fix-250{min-width:250px;max-width:250px;}
.w-fix-255{min-width:255px;max-width:255px;}
.w-fix-260{min-width:260px;max-width:260px;}
.w-fix-265{min-width:265px;max-width:265px;}
.w-fix-270{min-width:270px;max-width:270px;}
.w-fix-275{min-width:275px;max-width:275px;}
.w-fix-280{min-width:280px;max-width:280px;}
.w-fix-285{min-width:285px;max-width:285px;}
.w-fix-290{min-width:290px;max-width:290px;}
.w-fix-295{min-width:295px;max-width:295px;}
.w-fix-300{min-width:300px;max-width:300px;}
.w-fix-350{min-width:350px;max-width:350px;}
.w-fix-400{min-width:400px;max-width:400px;}
.w-fix-450{min-width:450px;max-width:450px;}
.w-fix-500{min-width:500px;max-width:500px;}
.w-fix-550{min-width:550px;max-width:550px;}
.w-fix-600{min-width:600px;max-width:600px;}
.wmin-1{min-width:1px;}
.wmin-2{min-width:2px;}
.wmin-3{min-width:3px;}
.wmin-4{min-width:4px;}
.wmin-5{min-width:5px;}
.wmin-10{min-width:10px;}
.wmin-15{min-width:15px;}
.wmin-20{min-width:20px;}
.wmin-25{min-width:25px;}
.wmin-30{min-width:30px;}
.wmin-35{min-width:35px;}
.wmin-40{min-width:40px;}
.wmin-45{min-width:45px;}
.wmin-50{min-width:50px;}
.wmin-55{min-width:55px;}
.wmin-60{min-width:60px;}
.wmin-65{min-width:65px;}
.wmin-70{min-width:70px;}
.wmin-75{min-width:75px;}
.wmin-80{min-width:80px;}
.wmin-85{min-width:85px;}
.wmin-90{min-width:90px;}
.wmin-95{min-width:95px;}
.wmin-100{min-width:100px;}
.wmin-105{min-width:105px;}
.wmin-110{min-width:110px;}
.wmin-115{min-width:115px;}
.wmin-120{min-width:120px;}
.wmin-125{min-width:125px;}
.wmin-130{min-width:130px;}
.wmin-135{min-width:135px;}
.wmin-140{min-width:140px;}
.wmin-145{min-width:145px;}
.wmin-150{min-width:150px;}
.wmin-155{min-width:155px;}
.wmin-160{min-width:160px;}
.wmin-165{min-width:165px;}
.wmin-170{min-width:170px;}
.wmin-175{min-width:175px;}
.wmin-180{min-width:180px;}
.wmin-185{min-width:185px;}
.wmin-190{min-width:190px;}
.wmin-195{min-width:195px;}
.wmin-200{min-width:200px;}
.wmin-205{min-width:205px;}
.wmin-210{min-width:210px;}
.wmin-215{min-width:215px;}
.wmin-220{min-width:220px;}
.wmin-225{min-width:225px;}
.wmin-230{min-width:230px;}
.wmin-235{min-width:235px;}
.wmin-240{min-width:240px;}
.wmin-245{min-width:245px;}
.wmin-250{min-width:250px;}
.wmin-255{min-width:255px;}
.wmin-260{min-width:260px;}
.wmin-265{min-width:265px;}
.wmin-270{min-width:270px;}
.wmin-275{min-width:275px;}
.wmin-280{min-width:280px;}
.wmin-285{min-width:285px;}
.wmin-290{min-width:290px;}
.wmin-295{min-width:295px;}
.wmin-300{min-width:300px;}
.wmin-350{min-width:350px;}
.wmin-400{min-width:400px;}
.wmin-450{min-width:450px;}
.wmin-500{min-width:500px;}
.wmin-550{min-width:550px;}
.wmin-600{min-width:600px;}

.fs-smaller{
  font-size:smaller;
}
.fs-small{
  font-size:small;
}
.fs-xxsmall{
  font-size:xx-small;
}
.fs-xsmall{
  font-size:x-small;
}
.fs-large{
  font-size:large;
}
.fs-larger{
  font-size:larger;
}
.fs-xlarge{
  font-size:x-large;
}
.fs-xxlarge{
  font-size:xx-large;
}

.fabtn{
  cursor: pointer;
}

.row-header {
   overflow-y: scroll;
}
.row-header::-webkit-scrollbar {
  color: transparent;
  background-color: transparent;
  text-decoration: none;
  border: none;
}


.lh-10{  line-height: 10px;}
.lh-11{  line-height: 11px;}
.lh-12{  line-height: 12px;}
.lh-13{  line-height: 13px;}
.lh-14{  line-height: 14px;}
.lh-15{  line-height: 15px;}
.lh-16{  line-height: 16px;}
.lh-17{  line-height: 17px;}
.lh-18{  line-height: 18px;}
.lh-19{  line-height: 19px;}
.lh-20{  line-height: 20px;}


/* --- แบบที่ 1: สีพื้นหลังโทนอ่อน (สีฟ้าพาสเทล) --- */
.bg-light-blue {
    background-color: #e6f2ff; /* สีพื้นหลังฝั่งซ้าย */
}
.bg-light-blue h2 { color: #004085; } /* สีหัวข้อ */
.bg-light-blue p { color: #0056b3; }  /* สีคำอธิบาย */

/* --- แบบที่ 2: สีพื้นหลังโทนเข้ม (สีเทาดำ) --- */
.bg-dark-charcoal {
    background-color: #24292e; /* สีพื้นหลังฝั่งซ้าย */
}
.bg-dark-charcoal h2 { color: #ffffff; } /* ปรับตัวหนังสือเป็นสีขาวเพื่อให้เด่นขึ้น */
.bg-dark-charcoal p { color: #c8d1d9; }  /* สีคำอธิบายโทนสว่าง */

/* ปรับปุ่มสำหรับสไลด์โทนเข้มให้เข้ากัน */
.bg-dark-charcoal .action-btn {
    background-color: #ffffff;
    color: #24292e;
}
.bg-dark-charcoal .action-btn:hover {
    background-color: #f6f8fa;
}

.bg-gradient-purple {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.bg-gradient-purple h2, 
.bg-gradient-purple p { 
    color: #ffffff; 
}


.bg-gradient-blue {
    background: linear-gradient(135deg, #667eea 0%, #2e4793 100%);
}
.bg-gradient-blue h2, 
.bg-gradient-blue p { 
    color: #ffffff; 
}


/* 2. จัดสไตล์และตำแหน่งของปุ่ม Read More ไว้ที่มุมขวาล่าง */
.round-btn {
    position: absolute;
    bottom: 20px;       /* ระยะห่างจากขอบล่าง */
    right: 30px;        /* ระยะห่างจากขอบขวา */
    
    /* สไตล์ปุ่ม: พื้นหลังเขียว ตัวหนังสือขาว */
    background-color: var(--green, #28a745); /* ใช้ตัวแปรสีเขียว ถ้าไม่มีจะใช้สีเขียว Standard */
    color: var(--white, #ffffff) !important;  /* ใช้ตัวแปรสีขาว และบังคับสีตัวอักษร */
    
    /* สไตล์ความโค้งมนและขนาด */
    font-size: 0.9rem;
    padding: 0.5rem 1.5rem;   /* ปรับช่องไฟรอบตัวหนังสือให้สมดุล */
    border-radius: 8px;       /* ปรับเป็น 50px หรือสไตล์ pill เพื่อให้ขอบโค้งมนเป็นทรงมนกลมสวยงาม */
    text-decoration: none;     /* ลบเส้นใต้ของลิงก์ออก */
    display: inline-block;
    
    /* เอฟเฟกต์การแสดงผล */
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* เพิ่มเงาจางๆ ให้ปุ่มลอยเด่นขึ้น */
}

/* เอฟเฟกต์เมื่อเอาเมาส์ไปชี้ที่ปุ่ม */
.round-btn:hover {
    background-color: #218838; /* เปลี่ยนเป็นสีเขียวเข้มขึ้นเล็กน้อยเวลาชี้ */
    transform: translateY(-1px); /* ปุ่มลอยขึ้นเล็กน้อยเวลากด */
}

.custom-underline {
    width: 100px;                      /* กำหนดความกว้างประมาณ 100px */
    height: 4px;                       /* กำหนดความหนาของเส้นเป็น 2px */
    background-color: var(--green, #28a745); /* ใช้สีเขียวจากตัวแปรของคุณ */
    margin-top: 10px;                  /* ระยะห่างระหว่างข้อความหัวข้ากับเส้นใต้ */
    margin-bottom: 15px;               /* ระยะห่างด้านล่างของเส้นใต้ */
    border-radius: 2px;                /* (ใส่เพิ่ม) ช่วยให้ปลายเส้นมนเล็กน้อย ดูนุ่มนวลขึ้น */
}


.borderless {
    border: none;       /* Removes the default border */
    outline: none;      /* Removes the blue/black focus ring when clicked */
    background: none;   /* Removes default background styling if needed */
    padding: 5px 10px;  /* Optional: Adds spacing inside the box */
    cursor: pointer;    /* Optional: Makes it look clickable */
}

#mainCarousel{
    height:350px;
}

#mainCarousel .carousel-item{
    height:350px;
}

/* Full Image */
.carousel-image{
    width:100%;
    height:350px;
    object-fit:cover;
}

/* Split Slide */
.split-slide{
    height:350px;
    display:flex;
}

.split-left{
    width:50%;
    background:#2e4793;
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:50px;
}

.split-right{
    width:50%;
}

.split-right img{
    width:100%;
    height:350px;
    object-fit:cover;
}

/*=========================
    Content
==========================*/

.section{
    padding:0px 0;
}

.card-custom{
    transition:.3s;
}

.card-custom:hover{
    transform:translateY(-5px);
}

.navbar .nav-link{
  color:black;
}

.navbar .nav-item{
  padding:5px;
}

.navbar .nav-link,.dropdown-item{
  cursor: pointer;
}

.text-blue{
  color:#2e4793;
}
.bg-blue{
  background-color:#2e4793;;
}

.fs-1rem{
  font-size:1rem;
}
@media(max-width:768px){
  .split-slide{
      flex-direction:column;
  }
  .split-left,
  .split-right{
      width:100%;
  }
  #mainCarousel,
  #mainCarousel .carousel-item{
      height:auto;
  }
  .split-right img{
      height:220px;
  }
  .carousel-image{
      height:250px;
  }

}

.profile .card-img-top{
    width:100%;

    object-fit:contain;
    background:#f5f5f5;
}

.profile .card{
    border:1px solid #dcdcdc !important;
    border-radius:6px;
    transition:.3s;
}

.profile .card:hover{
    transform:translateY(-5px);
    box-shadow:0 .5rem 1rem rgba(0,0,0,.15);
}

.profile img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
}

.profile h5,
.profile h6{
    color:#003366;
    font-weight:600;
}


.news-card{
    background:#fff;
    border:1px solid #ddd;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
    transition:.3s;
    overflow:hidden;
    cursor: pointer;
}

.news-card:hover{
    transform:translateY(-5px);
    box-shadow:0 8px 20px rgba(0,0,0,.15);
}

.news-image{
    position:relative;

}

.news-image img{
    width:100%;
    height:320px;
    padding:8px;
    object-fit:cover;
}

.news-tag{
    position:absolute;
    left:8px;
    bottom:8px; 
    backgroun-color:var(--green); 
    border-bottom: 2rem solid #63b257; 
    border-left: 0px solid transparent; 
    border-right: 1rem solid transparent; 
    height: 0; 
    width:4.5rem;
}

.date-tag{
  width:7.5rem !important;
}

.news-tag span{
  position:absolute; font-size:.8rem; color:#FFF; padding:.5rem 5px 3px .6rem;
}
.news-title{
    margin:12px 10px 12px 10px;
    font-weight:400;
    font-size:1rem;

    color:#333;
    line-height:1.4;
    min-height:80px;
}


.partner-box{
    height:100px;
    border:1px solid #ddd;
    border-radius:8px;
    background:#fff;

    display:flex;
    justify-content:center;
    align-items:center;

    transition:.3s;
}

.partner-box:hover{
    transform:translateY(-4px);
    box-shadow:0 8px 20px rgba(0,0,0,.12);
}

.partner-box img{
    width:90%;
    max-height:80px;
    object-fit:contain;
}


.team-banner{
    position:relative;
    min-height:250px;

    background:
        linear-gradient(
            rgba(46,71,147,.75),
            rgba(46,71,147,.75)
        ),
        url("../../images/banner_news.png");

    background-size:cover;
    background-position:center;
}




/* Team image */
.object-cover{
    object-fit:cover;
}

/* Profile cards */
.profile-card{
    background:#fff;
    border:1px solid #d9d9d9;
    border-radius:14px;
    padding:8px;
    text-align:center;
    height:100%;
    width:250px;
    transition:.25s ease;
    box-shadow:0 2px 8px rgba(0,0,0,.05);
}

.profile-card:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 24px rgba(0,0,0,.12);
}

.photo-frame{
    border:1px solid #d9d9d9;
    border-radius:12px;
    padding:8px 5px;
    background:#fff;
    margin-bottom:14px;
    text-align: center;
}

.photo-frame img{
    width:100%;  
    text-align: center;
    height:280px;
    object-fit:cover;
    object-position:top center;
    border-radius:5px;
    display:block;
}

.profile-card.executive .photo-frame img{
    height:250px;
}

.profile-card.manager .photo-frame img{
    height:250px;
}

.profile-card.supervisor .photo-frame img{
    height:250px;
}

.profile-card h5{
    margin:0 0 6px;
    font-weight:600;
    color:#163b7a;
}

.profile-card .position{
    font-size:.95rem;
    color:#6b7280;
    line-height:1.35;
}

/* Manager side */
.manager-side{
    border-left:3px solid #1e3f8a;
    padding-left:28px;
}

.supervisor-group{
    position:relative;
}

.supervisor-group:before{
    content:"";
    position:absolute;
    left:-31px;
    top:22px;
    width:28px;
    height:3px;
    background:#1e3f8a;
}

/* Responsive */
@media (max-width: 991.98px){
    .manager-side{
        border-left:none;
        padding-left:0;
    }

    .supervisor-group:before{
        display:none;
    }

    .photo-frame img,
    .profile-card.executive .photo-frame img,
    .profile-card.manager .photo-frame img,
    .profile-card.supervisor .photo-frame img{
        height:260px;
    }
}