:root {
  --slid-img-size: 250px;
  --blue1-color: #64bcd4;
  --blue2-color: #239bc8;
  --blue3-color: #0484b4;
  --red1-color: #ec848c;
  --red2-color: #e3191f;
  --third-color: #e1d6d6;
  --def-bg-color: #ffffff;
  --def-fn-color: #38382c;
  --wht-fn-color: #ffffff;
  --grey-color: #f2f2f2;
}
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Bitter';
}
body{
  /* min-height: 100vh; */
  width: 100%;
  background: var(--def-bg-color);
  overflow-x: hidden;
  scroll-behavior: smooth;
}
nav{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  height: 60px;
  background: var(--def-bg-color);
  /* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); */
  z-index: 99;
}

nav .navbar{
  height: 100%;
  /* max-width: 1250px; */
  width: 100%;
  /* display: flex;
  align-items: center;
  justify-content: space-between; */
  padding-left: 10px;
  padding-right: 10px;
  /* margin: auto; */
  /* background: red; */
  /* padding: 0 50px; */
}
.navbar .logo a{
  /* font-size: 30px; */
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}
nav .navbar .nav-links{
  line-height: 60px;
  height: 100%;
}
nav .navbar .links{
  display: flex;
}
nav .navbar .links li{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  padding: 0 14px;
}
nav .navbar .links li a{
  height: 100%;
  text-decoration: none;
  white-space: nowrap;
  color: var(--def-fn-color);
  font-size: 15px;
  font-weight: 500;
}
.links li:hover .htmlcss-arrow,
.links li:hover .js-arrow{
  transform: rotate(180deg);
}

nav .navbar .links li .arrow{
  /* background: red; */
  height: 100%;
  width: 22px;
  line-height: 60px;
  text-align: center;
  display: inline-block;
  /* color: #fff; */
  transition: all 0.3s ease;
}
nav .navbar .links li .sub-menu{
  /* background: var(--def-bg-color);   */
  position: absolute;
  top: 60px;
  left: 0;
  line-height: 40px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  border-radius: 0 0 4px 4px;
  display: none;
  z-index: 2;
}
nav .navbar .links li:hover .htmlCss-sub-menu,
nav .navbar .links li:hover .js-sub-menu{
  display: block;
}
.navbar .links li .sub-menu li{
  padding: 0 22px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.navbar .links li .sub-menu a{
  /* color: var(--def-fn-color); */
  font-size: 15px;
  font-weight: 500;
}
.navbar .nav-links.show2 .links .more-arrow{
  transform: rotate(90deg);
}
.navbar .links li .sub-menu .more-arrow{
  line-height: 40px;
}
/* .navbar .links li .htmlCss-more-sub-menu{
  line-height: 40px;
} */
.navbar .links li .sub-menu .more-sub-menu{
  position: absolute;
  top: 0;
  left: 100%;
  border-radius: 0 4px 4px 4px;
  z-index: 1;
  display: none;
}
.links li .sub-menu .more:hover .more-sub-menu{
  display: block;
}
.navbar .search-box{
  position: relative;
   height: 40px;
  width: 40px;
}
.navbar .search-box i{
  position: absolute;
  height: 100%;
  width: 100%;
  line-height: 40px;
  text-align: center;
  font-size: 22px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}
.navbar .search-box .input-box{
  position: absolute;
  right: calc(100% - 40px);
  top: 80px;
  height: 60px;
  width: 300px;
  background: #2199c7;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s ease;
}
.navbar.showInput .search-box .input-box{
  top: 65px;
  opacity: 1;
  pointer-events: auto;
  background: #2199c7;
}
.search-box .input-box::before{
  content: '';
  position: absolute;
  height: 20px;
  width: 20px;
  background: #2199c7;
  right: 10px;
  top: -6px;
  transform: rotate(45deg);
}
.search-box .input-box input{
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 4px;
  transform: translate(-50%, -50%);
  height: 35px;
  width: 280px;
  outline: none;
  padding: 0 15px;
  font-size: 16px;
  border: none;
}
.navbar .nav-links .sidebar-logo{
  display: none;
}
.navbar .fa-bars{
  display: none;
}
@media (min-width: 768px){
  /* .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1  {
    width: 33%;
  } */
  .iFrameClass {
    width:100%;
    min-height:620px;
    border:none;
    overflow:hidden;
  }
}
/* @media (min-width: 992px) {
  .col-md-2 {
      width: 33% !important;
  }
} */

/* @media (min-width: 992px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
  }
}
@media (min-width: 1200px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
  }
} */
@media (min-width:920px) {
  .align-items-center {
    align-items: center;
    display: flex;
  }
  .logo {
    order: 1;
    float: left;
  }
  .nav-links-container {
    order: 2;
    display: flex;
    align-items: center;
    float: right;
  }
  .link-boxes {
    padding: 10px;
  }
  .gradient {
    height: 400px;
    margin-bottom: 10px;
    margin-top: 60px;
  }
  .at-container{
    height: 450px;
  }
  .at-container span{
    font-size: 80px;
    font-weight: 700;
    text-transform: capitalize;
  }
  nav .navbar .links li .sub-menu{
    background: var(--def-bg-color);
  }
  nav .navbar .links li:hover {
    background-color: rgba(36, 154, 200, 0.15);
    height: 100%;
    opacity: 1;
    border-radius: 10px;
  }
  nav .navbar .links li:hover a {
    color: rgba(36, 154, 200, 1);
  }
  .act_menu::before{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    width: 100%;
    background: var(--blue1-color);
  }
  .links li:hover .htmlcss-arrow,
  .links li:hover .js-arrow,
  .links .more-arrow {
    color: rgba(36, 154, 200, 1);
  }
  /* .act_menu{
    width: -webkit-fill-available;
    height: 4px;
    background-color: var(--blue1-color); */
    /* position: absolute;
    bottom: 0;
    transition: 0.3s; */
  /* } */
  /* .act_menu a {
    color: var(--blue1-color) !important;
  } */
}
@media (max-width:919px) {
  nav .navbar{
    max-width: 100%;
    /* padding: 0; */
    display: flex;
    align-items: center;
  }

  nav .navbar .logo a{
    font-size: 27px;
  }
  nav .navbar .links li{
    padding: 0 10px;
    white-space: nowrap;
  }
  nav .navbar .links li a{
    font-size: 15px;
    color: var(--def-fn-color);
  }
  footer .content .link-boxes{
    flex-wrap: wrap;
  }
  footer .content .link-boxes .input-box{
    width: 40%;
    margin-top: 10px;
  }
  .gradient {
    height: 40px;
    margin-bottom: 10px;
  }
  .at-container{
    height: 450px;
  }
  .at-container span{
    font-size: 80px;
    font-weight: 700;
    text-transform: capitalize;
  }
  nav .navbar .links li .sub-menu{
    background: var(--def-bg-color);  
  }
}
@media (max-width:800px){
  /* nav{
    position: relative;
  } */
  .navbar .fa-bars{
    display: block;
    order: 1;
    font-size: 25px;
    color: var(--def-fn-color);
    padding-right: 35px;
  }

  .logo {
    order: 2;
    margin: auto;
  }
  nav .navbar .nav-links{
    position: fixed;
    top: 0;
    left: -100%;
    display: block;
    max-width: 270px;
    width: 100%;
    background:  var(--blue1-color);
    color: var(--def-bg-color);
    line-height: 40px;
    padding: 20px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.5s ease;
    z-index: 1000;
  }
  .navbar .nav-links .sidebar-logo{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .sidebar-logo .logo-name{
    font-size: 25px;
    color: #fff;
  }
  .sidebar-logo  i{
    font-size: 25px;
    color: var(--wht-fn-color);
  }
  .bt-card .navbar .fa-bars{
    color: var(--blue1-color);
  }
  nav .navbar .links{
    display: block;
    margin-top: 20px;
  }
  nav .navbar .links li .arrow{
    line-height: 40px;
  }
  nav .navbar .links li{
    display: block;
  }
  nav .navbar .links li .sub-menu{
    background: var(--blue1-color);
    position: relative;
    top: 0;
    box-shadow: none;
    display: none;
  }
  nav .navbar .links li .sub-menu li{
    border-bottom: none;
  }
  .navbar .links li .sub-menu .more-sub-menu{
    display: none;
    position: relative;
    left: 0;
  }
  .navbar .links li .sub-menu .more-sub-menu li{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .links li:hover .htmlcss-arrow,
  .links li:hover .js-arrow{
    color: var(--wht-fn-color);
  }
  .navbar .links li .sub-menu .more-sub-menu{
    display: none;
  }
  .navbar .links li .sub-menu .more span{
    /* background: red; */
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
  }

  .links li .sub-menu .more:hover .more-sub-menu{
    display: none;
  }
  nav .navbar .links li:hover .htmlCss-sub-menu,
  nav .navbar .links li:hover .js-sub-menu{
    display: none;
  }
  .navbar .nav-links.show1 .links .htmlCss-sub-menu,
  .navbar .nav-links .links .htmlCss-sub-menu.show1,
    .navbar .nav-links.show3 .links .js-sub-menu,
      .navbar .nav-links.show2 .links .more .more-sub-menu,
      .navbar .nav-links .links .more .more-sub-menu.show2{
    display: block;
  }
  .navbar .nav-links.show1 .links .htmlcss-arrow,
  .navbar .nav-links.show3 .links .js-arrow{
      transform: rotate(180deg);
  }
  nav .navbar .links li a{
    color: var(--wht-fn-color);
  }
  /* footer{
    position: relative;
  } */
  .content .top .logo-details{
    font-size: 26px;
  }
  .content .top .media-icons a{
    height: 35px;
    width: 35px;
    font-size: 14px;
    line-height: 35px;
  }
  footer .content .link-boxes .box{
    width: calc(100% / 3 - 10px);
  }
  .dpb {
    display: flex;
    align-items: flex-end;
  }
  footer .content .link-boxes .input-box{
    width: 60%;
  }
  .bottom-details .bottom_text span,
  .bottom-details .bottom_text a{
    font-size: 12px;
  }
  .gradient {
    height: 350px;
    margin-bottom: 10px;
    margin-top: 75px;
  }
  .at-container{
    height: 350px;
  }
  .at-container span{
    font-size: 50px;
    font-weight: 700;
    text-transform: capitalize;
  }
  .iFrameClass {
    width:100%;
    min-height:965px;
    border:none;
    overflow:hidden;
  }
  .nav-links-container {
    order: 3;
  }
}
@media (max-width: 520px){
  footer::before{
    top: 145px;
  }
  footer .content .top{
    flex-direction: column;
  }
  .content .top .media-icons{
    margin-top: 16px;
  }
  footer .content .link-boxes .box{
    width: calc(100% / 2 - 10px);
  }
  .dpb {
    display: flex;
    align-items: flex-end;
  }
  footer .content .link-boxes .input-box{
    width: 100%;
  }
  nav .navbar .links li a{
    color: var(--wht-fn-color);
  }
  nav .navbar .links li .sub-menu{
    background: var(--blue1-color);
  }
}
@media (max-width:370px){
  nav .navbar .nav-links{
    max-width: 100%;
  } 
  nav .navbar .links li a{
    color: var(--wht-fn-color);
  }
  .gradient {
    height: 200px;
    margin-bottom: 10px;
  }
  .at-container{
    height: 200px;
  }
  .at-container span{
    font-size: 40px;
    font-weight: 700;
    text-transform: capitalize;
  }
  nav .navbar .links li .sub-menu{
    background: var(--blue1-color);
  }
}
footer{
  /* position: relative; */
  background: var(--def-bg-color);
  width: 100%;
  bottom: 0;
  left: 0;
  /* border-top: 1px solid var(--def-fn-color); */
  box-shadow: 0 -2px 5px var(--blue1-color);
  
}
/* footer::before{
  content: '';
  position: absolute;
  left: 0;
  top: 100px;
  height: 1px;
  width: 100%;
  background: #AFAFB6;
} */
footer .content{
  /* max-width: 1250px; */
  margin: auto;
  /* padding: 20px; */
}
footer .content .top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 50px;
}
.content .top .logo-details{
  color: #fff;
  font-size: 30px;
}
.content .top .media-icons{
  display: flex;
}
.content .top .media-icons a{
  height: 40px;
  width: 40px;
  margin: 0 8px;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  color: #fff;
  font-size: 17px;
  text-decoration: none;
  transition: all 0.4s ease;
}
.top .media-icons a:nth-child(1){
  background: #4267B2;
}
.top .media-icons a:nth-child(1):hover{
  color: #4267B2;
  background: #fff;
}
.top .media-icons a:nth-child(2){
  background: #1DA1F2;
}
.top .media-icons a:nth-child(2):hover{
  color: #1DA1F2;
  background: #fff;
}
.top .media-icons a:nth-child(3){
  background: var(--red1-color);
}
.top .media-icons a:nth-child(3):hover{
  color: var(--red1-color);
  background: #fff;
}
.top .media-icons a:nth-child(4){
  background: #0077B5;
}
.top .media-icons a:nth-child(4):hover{
  color: #0077B5;
  background: #fff;
}
.top .media-icons a:nth-child(5){
  background: #FF0000;
}
.top .media-icons a:nth-child(5):hover{
  color: #FF0000;
  background: #fff;
}
footer .content .link-boxes{
  width: 100%;
  display: flex;
  justify-content: space-between;
}
/* footer .content .link-boxes .box{
  width: calc(100% / 5 - 10px);
} */
.dpb {
  display: flex;
  align-items: center;
}
.content .link-boxes .box .link_name{
  color: var(--def-fn-color);
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 10px;
  position: relative;
}
.link-boxes .box .link_name::before{
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  width: 35px;
  background: var(--def-fn-color);
}
.content .link-boxes .box li{
  margin: 6px 0;
  list-style: none;
}
.content .link-boxes .box li a{
  color: var(--def-fn-color);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  opacity: 0.8;
  transition: all 0.4s ease
}
.content .link-boxes .box li a:hover{
  opacity: 1;
  text-decoration: underline;
}
.aboutFooter {
  background-color: rgba(154, 206, 235, 0.18);
  border: 1px solid #249AC8;
  padding: 15px;
}
.contactInfo i{
  color: var(--blue1-color);
}
.contactInfo a{
  color: var(--def-fn-color);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  opacity: 0.8;
  transition: all 0.4s ease
}
.contactInfo a:hover{
  opacity: 1;
  text-decoration: underline;
}
.content .link-boxes .input-box{
  margin-right: 55px;
}
.link-boxes .input-box input{
  height: 40px;
  /* width: calc(100% + 55px); */
  outline: none;
  border: 2px solid #AFAFB6;
  background: #140B5C;
  border-radius: 4px;
  padding: 0 15px;
  font-size: 15px;
  color: #fff;
  margin-top: 5px;
}
.link-boxes .input-box input::placeholder{
  color: #AFAFB6;
  font-size: 16px;
}
.link-boxes .input-box input[type="button"]{
  background: var(--blue1-color);
  color: var(--wht-fn-color);
  border: none;
  font-size: 15px;
  font-weight: 500;
  margin: 4px 0;
  opacity: 0.8;
  cursor: pointer;
  transition: all 0.4s ease;
}
.input-box input[type="button"]:hover{
  background: var(--blue2-color);
  opacity: 1;
}
footer .bottom-details{
  width: 100%;
  background: var(--def-bg-color);
  color: var(--def-fn-color);
}
footer .bottom-details .bottom_text{
  /* max-width: 1250px; */
  margin: auto;
  padding: 10px;
  display: flex;
  justify-content: space-between;
}
.bottom-details .bottom_text span,
.bottom-details .bottom_text a{
  font-size: 14px;
  font-weight: 300;
  color: var(--def-fn-color);
  opacity: 0.8;
  text-decoration: none;
}
.bottom-details .bottom_text a:hover{
  opacity: 1;
  text-decoration: underline;
}
/* .bottom-details .bottom_text a{
  margin-right: 10px;
} */
.subMenu {
  min-width: 120px;
}
.divContent {
  margin: 75px 20px;
  padding: 20px;
}
.gallery {
/* max-width: 800px; */
width: 100%;
height: 30rem;
position: relative;
display: grid;
/* margin-left: 100px;
margin-right: 100px; */
margin: 25px 0 25px 0;
}
.slider {
display: flex;
position: relative;
}
.wrapper {
position: relative;
display: none;
transition: transform 0.5s ease-out, left 0.5s ease-out;
width: var(--slid-img-size);
height: 300px;
background-color: rgba(36, 154, 200, 0.09);   /*#249AC8 */
/* border: 1px solid; */
left: calc(50% - var(--slid-img-size));
}
.text-wrapper {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  color: #3A4F8E;
  /* Optional: Add any additional styling for the text wrapper */
}
.flipped {
position: absolute;
bottom: calc(-100% - 10px);
transform: scaleY(-1);
}
/* .wrapper::after {
content: "";
position: absolute;
bottom: calc(-100% - 10px);
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
    180deg,
    rgba(19, 19, 19, 0.75),
    rgba(19, 19, 19, 1) 50%
);
} */
.wrapper:has(+ * + * + .selected) {
display: flex;
align-items: flex-end;
position: absolute;
top: 50%;
left: calc(20% - var(--slid-img-size));
transform: translate3d(-50%, -50%, 0) scale(0);
z-index: 0;
}
.wrapper:has(+ * + .selected) {
display: flex;
align-items: flex-end;
position: absolute;
top: 50%;
left: calc(25% - var(--slid-img-size) / 2);
transform: translate3d(-50%, -50%, 0) scale(0.6);
z-index: 1;
}
.wrapper:has(+ .selected) {
display: flex;
align-items: flex-end;
position: absolute;
top: 50%;
left: calc(35% - var(--slid-img-size) / 4);
transform: translate3d(-50%, -50%, 0) scale(0.8);
z-index: 2;
}
.selected {
display: flex;
align-items: flex-end;
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
z-index: 3;
background-color: rgba(36, 154, 200, 0.3);
}
.selected + .wrapper {
display: flex;
align-items: flex-end;
position: absolute;
top: 50%;
left: calc(65% + var(--slid-img-size) / 4);
transform: translate3d(-50%, -50%, 0) scale(0.8);
z-index: 2;
}
.selected + * + .wrapper {
display: flex;
align-items: flex-end;
position: absolute;
top: 50%;
left: calc(75% + var(--slid-img-size) / 2);
transform: translate3d(-50%, -50%, 0) scale(0.6);
z-index: 1;
}
.selected + * + * + .wrapper {
display: flex;
align-items: flex-end;
position: absolute;
top: 50%;
left: calc(80% + var(--slid-img-size));
transform: translate3d(-50%, -50%, 0) scale(0);
z-index: 0;
}
.arrows {
position: absolute;
bottom: 0;
width: 100%;
display: flex;
justify-content: space-around;
z-index: 4;
}
.arrows .left,
.arrows .right {
position: relative;
cursor: pointer;
}
.arrows .left.disabled,
.arrows .right.disabled {
opacity: 0.5;
}
.arrows .left::before,
.arrows .right::before {
content: "";
position: absolute;
top: 50%;
width: 3rem;
height: 4px;
transform: translateY(-50%);
}
.arrows .left:before {
right: -100%;
background: linear-gradient(
    90deg,
    rgba(36, 154, 200, 0.5),
    rgba(36, 154, 200, 0)
);
}
.arrows .right::before {
left: -100%;
background: linear-gradient(
    90deg,
    rgba(36, 154, 200, 0),
    rgba(36, 154, 200, 0.5)
);
}
.arrows svg {
width: 2.5rem;
height: 2.5rem;
fill: #000;
}
.imageClass {
border-radius: 6px;
width: var(--slid-img-size);
height: 250px;
padding: 10px;
/* position: absolute;
left: calc(50% + var(--slid-img-size) / 4); */
}
.homeGif {
  height: 100%;
  max-width: 990px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: auto;
  /* background: red; */
  padding: 0 50px;
}

.bt-card {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  background: var(--def-bg-color);
  color: var(--blue1-color);
}

.gradient {
  background: rgb(255,255,255);
  /* background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(33,153,199,1) 35%, rgba(238,20,31,1) 100%); */
  /* background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(33,153,199,1) 100%); */
  background: linear-gradient(90deg, rgba(146,211,205,1) 0%, rgba(142,210,217,1) 15%, rgba(145,209,227,1) 30%, rgba(154,206,235,1) 45%, rgba(154,206,235,1) 60%, rgba(168,203,239,1) 75%, rgba(184,199,239,1) 90%, rgba(200,194,235,1) 100%);
  width: 100%;
}


/* @-webkit-keyframes typing { from { width: 0; } }
@-webkit-keyframes blink-caret { 50% { border-color: transparent; } }

.auto-type { 
  position: absolute; 
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
	font: bold 300% Consolas, Monaco, monospace;
	border-right: .1em solid black;
	width: 16.5em; 
	width: 22.5ch;
	/* margin: 2em 1em; */
	/* white-space: nowrap;
	overflow: hidden;
	-webkit-animation: typing 7s steps(21, end),
	           blink-caret .5s step-end infinite alternate;
} */

.at-container {
  display: inline;
}

.at-container #type1{
  width: 50%;
  /* background: #e4e4e4; */
  display: flex;
  justify-content: center;
  align-items: center;
  color: #3B7873;
}
.at-container #type2{
  width: 100%;
  /* background: #e4e4e4; */
  display: flex;
  justify-content: center;
  align-items: center;
  color: #249AC8;
}
.at-container #type3{
  width: 50%;
  left: 50%;
  position: absolute;
  /* background: #e4e4e4; */
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(204, 84, 106, 0.7);
}
.cal-resp {
  background: #e9f6fb;
  border: 1px solid var(--blue1-color);
  /* padding: 5px; */
  margin-top: 5px;
  border-radius: 4px;
}
.cal-resp a:hover {
  text-decoration: none;
  box-shadow: 0 5px 35px 0px rgba(0,0,0,.1);
  background-color: var(--def-bg-color);
}
.cal-resp img {
  width: 30px;
  height: 30px;
}
.exp-resp {
  /* background: #e9f6fb;
  border: 1px solid var(--blue1-color); */
  padding: 5px;
  margin-top: 5px;
  text-align: center;
}
.exp-resp:hover {
  background: #e9f6fb;
}
.exp-text {
  padding: 10px;
}
.exp-resp:hover .exp-text {
  background: var(--blue2-color);
  color: var(--wht-fn-color);
}
.exp-resp a:hover {
  text-decoration: none;
}
.exp-resp img {
  /* width: -webkit-fill-available; */
  height: 125px;
  /* max-width: -webkit-fill-available; */
  object-fit: cover;
  padding: 25px;
}

.cal-resp a {
  display: block; /* Make the anchor tag a block-level element */
  padding: 25px; /* Add padding for better visual */
  position: relative;
  color: #000; /* Text color */
  text-decoration: none; /* Remove underline from anchor */
  font-size: 13px;
}

.cal-resp a::before,
.cal-resp a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}

/* Triangle shape for top left */
.cal-resp a::before {
  top: 0;
  left: 0;
  border-width: 0px 0px 20px 20px;
  border-color: transparent transparent transparent transparent;
}

/* Triangle shape for bottom right */
.cal-resp a::after {
  bottom: 0;
  right: 0;
  border-width: 20px 20px 0 0;
  border-color: transparent transparent transparent transparent;
}

/* Hover effect */
.cal-resp a:hover::before,
.cal-resp a:hover::after {
  border-color: transparent var(--blue1-color) transparent var(--blue1-color); /* Change border color on hover */
}

.chg-color .clor-icon {
  display: none; /* Initially hide the colored icon */
}

.chg-color:hover .blue-icon {
  display: none; /* Hide the blue icon on hover */
}

.chg-color:hover .clor-icon {
  display: inline-block; /* Show the colored icon on hover */
}

/* .cal-links-div {
  background-color: var(--grey-color);
} */

.cal-links-ul li {
  color:#000;
  list-style:none;
  position: relative;
  padding: 7px;
  line-height: 2;
}

.cal-links-ul li:before {
  font-family:FontAwesome;
  position: absolute;
  left: 0;
  color:var(--blue1-color);
}

/* .cal-links-ul li.cec:before {
   content:"\f19d"; 
}
.cal-links-ul li.cwc:before {
   content:"\f004";
}
.cal-links-ul li.clc:before {
   content:"\f1b9";
}
.cal-links-ul li.hlc:before {
   content:"\f015";
}
.cal-links-ul li.vlc:before {
   content:"\f072";
}
.cal-links-ul li.fpc:before {
   content:"\f0c0";
}
.cal-links-ul li.rpc:before {
   content:"\f29d";
}
.cal-links-ul li.gc:before {
  content:"\f11e";
}
.cal-links-ul li.ec:before {
   content:"\f19c";
}
.cal-links-ul li.sc:before {
   content:"\f155";
}
.cal-links-ul li.fvc:before {
  content:"\f201";
}
.cal-links-ul li.cc:before {
  content:"\f0d6";
} */
.cal-links-ul li:hover:before {
  color: var(--blue3-color);
}
.cal-links-ul li a {
  color: var(--blue1-color);
  text-decoration: none;
}
.cal-links-ul li:hover a {
  color: var(--blue3-color);
  font-weight: bold;
  text-decoration: none;
}
.cal-links-ul .active {
  color: var(--blue3-color);
  font-weight: bold;
  text-decoration: none;
  font-size: 17px;
  display: none;
}
.cl_link:hover, .cl_link:visited, .cl_link:focus{
  text-decoration: none;
  font-weight: bold;
}
.ps_link, .ps_link:visited{
  color: #8000FF !important;
}
.ps_link:hover{
  text-decoration: none !important;
  font-weight: bold !important;
}
.kbLinks {
  overflow-y: scroll;
  height: 82vh;
  scroll-behavior: smooth;
}
.kbLinks ol li a{
  color: #000 !important;
}
.kbLinks ol li a:hover,
.kbLinks ol li:hover {
  color: var(--blue3-color) !important;
  text-decoration: none;
  font-weight: bold;
}
.kbLinks ol li .clicked{
  color: var(--blue3-color) !important;
  text-decoration: none;
  font-weight: bold;
}
.kbContent{
  overflow-y: scroll;
  height: 82vh;
  scroll-behavior: smooth;
}
ol, ul {
  margin-bottom: 0 !important;
}
.kbLinks ol, .kbContent ol, .kbContent ul {
  margin-left: 20px;
}
.contentTable,.contentTable th,.contentTable td {
  border: 1px solid black;
  border-collapse: collapse;
}
.contentTable th,.contentTable td {
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 30px;
  padding-right: 40px;
}
#myBtn {
  display: none;
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 99;
  /* font-size: 15px;
  border: none;
  outline: none;
  background-color: var(--blue1-color);
  color: white; */
  cursor: pointer;
  padding: 2px;
  /* border-radius: 10px; */
}
#myBtn img {
  width: 40px;
  height: 40px;
}

/* #myBtn:hover {
  background-color: var(--blue3-color);
} */

.child-link img {
  width: 25px;
  height: 25px;
}

.child-link .clor-icon {
  display: none;
}

.child-link:hover .blue-icon {
  display: none;
}

.child-link:hover .clor-icon {
  display: inline-block;
}

.cal-links-ul .active .child-link .clor-icon {
  display: inline-block;
}

.cal-links-ul .active .child-link .blue-icon {
  display: none;
}

.whats-float {
    position: fixed;
    transform: translate(108px, 0px);
    bottom: 50px;
    right: 0;
    width: 150px;
    overflow: hidden;
    background-color: #25d366;
    color: #FFF;
    border-radius: 4px 0 0 4px;
    z-index: 10;
    transition: all 0.5s ease-in-out;
    vertical-align: middle
}

.whats-float a span {
    color: white;
    font-size: 15px;
    padding-top: 8px;
    padding-bottom: 10px;
    position: absolute;
    line-height: 16px;
    font-weight: bolder;
}

.whats-float i {
    font-size: 30px;
    color: white;
    line-height: 30px;
    padding: 10px;
    transform: rotate(0deg);
    transition: all 0.5s ease-in-out;
    text-align: center;

}

.whats-float:hover {
    color: #FFFFFF;
    transform: translate(0px, 0px);
}

.whats-float:hover i {
    transform: rotate(360deg);
}

.mis-vis {
  border-radius: 25px;
  padding: 20px;
  text-align: center;
  /* box-shadow: 10px 10px 5px 0px rgb(196, 196, 196) */
}

.bt-blue {
  border: 2px solid #09C6D0 !important;
}

.bt-red {
  border: 2px solid #F67D50 !important;
}

.bt-blue .panel-heading {
  background: #09C6D0;
  color: var(--wht-fn-color);
}

.bt-red .panel-heading {
  background: #F67D50;
  color: var(--wht-fn-color);
}

/* .panel-body {
  text-align: center;
} */

.panel-body img {
  width: 50px;
  height: 50px;
}

.blue-matrix {
  /* width: 250px; */
  height: 200px;
  color: #5680DB;
  border: 2px solid #5680DB;
  padding: 10px;
  align-content: center;
  text-align: center;
}

.red-matrix {
  /* width: 250px; */
  height: 200px;
  color: #EF6B6C;
  border: 2px solid #EF6B6C;
  padding: 10px;
  align-content: center;
  text-align: center;
}

.green-matrix {
  /* width: 250px; */
  height: 200px;
  color: #78B399;
  border: 2px solid #78B399;
  padding: 10px;
  align-content: center;
  text-align: center;
}

.yellow-matrix {
  /* width: 250px; */
  height: 200px;
  color: #FDB5A2;
  border: 2px solid #FDB5A2;
  padding: 10px;
  align-content: center;
  text-align: center;
}

.padd-right-0 {
  padding-right: 0px !important;
  padding-bottom: 15px;
}

.chart-row, 
.chart-col {
  display: flex;
  gap: 1em;
}

.chart-row {
  flex-direction: row;
}

.chart-col {
  flex-direction: column;
}

.chart-pill,
.chart-rect{
  padding: 1em;
  text-align: center;
  /* border: 2px solid #999; */
}

.chart-pill {
  flex: 1;
  border-radius: 1em;
  border-style: dashed;
}

.chart-pill-fit {
  flex: 1;
  border-radius: 1em;
  border-style: dashed;
  height: fit-content;
  margin: auto;
}

.chart-rect{
  flex: 0;
  margin: auto 0;
}

.chart-rect.brown{
  background: #BE6C0D;
  color: var(--wht-fn-color);
}

.chart-rect.green{
  background: #92D050;
  color: var(--wht-fn-color);
}

.chart-rect.yellow{
  background: #E3C01E;
  color: var(--wht-fn-color);
}

.chart-rect.violet{
  background: #7556A4;
  color: var(--wht-fn-color);
}

.chart-rect.dark-green{
  background: #00B050;
  color: var(--wht-fn-color);
}

.chart-rect.dark-yellow{
  background: #FFC000;
  color: var(--wht-fn-color);
}

.chart-rect.dark-blue{
  background: #6073B3;
  color: var(--wht-fn-color);
}

.chart-rect.dark-red{
  background: #CB3E3A;
  color: var(--wht-fn-color);
}

.chart-line-h {
  height: 2px;
  min-width: 3em;
  background: #999;
  margin: auto -1em;
}

.chart-container {
  position: relative;
  width: 500px;
  height: 500px;
  /* border: 1px solid #000; */
}
.axis {
  position: absolute;
  background-color: #808080;
}
.x-axis {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
}
.y-axis {
  bottom: 0;
  left: 0;
  width: 2px;
  height: 100%;
}
.chart-label {
  position: absolute;
  font-size: 12px;
}
.x-label {
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
}
.y-label {
  bottom: 50%;
  left: -45px;
  transform: translateY(50%) rotate(-90deg);
}