:root{
  --black: #1A1A1A;
  --textclr: #5A5A5A;
  --primary: #1268B3;
  --secondary: #50B848;
  --primary50: rgba(47, 172, 147, 0.5);
  --primary20: rgba(47, 172, 147, 0.2);
  --primary10: rgba(47, 172, 147, 0.1);
  --white: #F1F1F1;
  --blue: #00ADED;
  --orange: #F27D36;
  --yellow: #FFC929;
  --gradient: linear-gradient(120deg, #07BED6 0%, #6CCA55 100%);
  --gradient1: linear-gradient(120deg, rgba(12, 189, 205, 1) 0%, rgba(12, 127, 200, 1) 50%, rgba(8, 98, 174, 1) 100%);
  --gradient2: linear-gradient(120deg, rgba(28, 181, 224, 1) 0%, rgba(34, 169, 152, 1) 40%, rgba(118, 212, 92, 1) 100%);
  --trans30: all .3s ease;
  --font12: .75rem;
  --font13: .813rem;
  --font14: .875rem;
  --font15: .938rem;
  --font16: 1rem;
  --font18: 1.125rem;
  --font20: 1.25rem;
  --font28: 1.75rem;
  --font30: 1.875rem;
  --font32: 2rem;
}
html {
  scroll-behavior: smooth;
}
body {
  font-size: var(--font16);
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  color: var(--black);
  font-weight: 400;
  background-color: #F9F9F9;
}

.mal{
  font-family: "Noto Sans Malayalam", sans-serif;
}

a{
  color: var(--black);
  text-decoration: none !important;
  transition: var(--trans30);
  -webkit-transition: var(--trans30);
}
p{
  color: var(--textclr);
}
h1, h2, h3, h4, h5, h6{
  font-weight: 700;
}
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span{
  color: var(--primary);
}
ul {
  padding-left: 0px;
  list-style-type: none;
  margin: 0;
}
img {
  display: block;
  max-width: 100%;
  transition: var(--trans30);
  -webkit-transition: var(--trans30);
}
.coverimg{
  object-fit: cover;
}

@media (min-width: 1366px) {
  .cmpad {
    max-width: 1460px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 100px;
    padding-right: 100px;
    width: 100%;
  }
}

@media (max-width: 1366px) {
  .cmpad {
    padding-left: 80px;
    padding-right: 80px;
    width: 100%;
  }
}
@media (max-width: 991px) {
  .cmpad {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media (max-width: 767px) {
  .cmpad {
    padding-left: 15px;
    padding-right: 15px;
  }
  .cmtop{
    padding-top: 90px !important;
  }
}
@media (max-width: 575px) {
  html {
    font-size: 90%;
  }
  .cmtop{
    padding-top: 80px !important;
  }
}


@media (min-width: 768px) {
  ::-webkit-scrollbar {
    width: 10px;
    height: 6px;
  }
  ::-webkit-scrollbar-track {
    background-color: #00487c;
  }
  ::-webkit-scrollbar-thumb {
    background-color: #2196F3;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #006fca;
  }
}

.custscroll::-webkit-scrollbar,
.custscroll::-webkit-scrollbar-thumb {
  border-radius: 13px;
  width: 6px;
  height: 6px;
  background-clip: padding-box;
  background: transparent;
}
.custscroll::-webkit-scrollbar-track {
  background: transparent;
}
.custscroll:hover::-webkit-scrollbar-thumb {
  background-color: #ccc;
}
.custscroll::-webkit-scrollbar-thumb:hover {
  background-color: #999;
}

.custscrollA::-webkit-scrollbar {
  border-radius: 13px;
  width: 6px;
  height: 6px;
  background-clip: padding-box;
  background: rgb(0 0 0 / 5%);
}
.custscrollA::-webkit-scrollbar-track {
  background: transparent;
}
.custscrollA::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 6px;
}
.custscrollA::-webkit-scrollbar-thumb:hover {
  background-color: #999;
}


.btn-group {
  display: flex;
  flex-flow: wrap;
  align-items: center;
  width: 100%;
  gap: 10px;
}
.btn-group .btn {
  flex: none;
}
.btn{
  padding: 10px 20px;
  min-height: 44px;
  min-width: 44px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  background-color: transparent;
  transition: var(--trans30);
  -webkit-transition: var(--trans30);
}
.btn-lg{
  padding: 12px 25px;
}

.btn-gradient{
  background-color: var(--primary);
  background: var(--gradient);
  color: #fff;
  background-size: 100%;
}
.btn-gradient:hover{
  background-size: 250%;
}
.btn-gradient img{
  filter: brightness(0) invert(1);
  -webkit-filter: brightness(0) invert(1);
}

.btn-primary{
  background-color: var(--primary);
  background: var(--gradient1);
  border: 1px solid var(--primary);
  color: #fff;
  background-position: left;
}

.btn-secondary{
  background-color: var(--secondary);
  background: var(--gradient2);
  border: 1px solid var(--secondary);
  color: #fff;
  background-position: left;
}

.btn-primary:hover,
.btn-secondary:hover{
  background-size: 250%;
  background-position: right;
}
.btn-primary img,
.btn-secondary img{
  filter: brightness(0) invert(1);
  -webkit-filter: brightness(0) invert(1);
}

.btn-white-primary{
  background-color: #fff;
  color: var(--black);
  border: 1px solid #eee;
}
.btn-white-primary:hover{
  background-color: var(--primary);
  color: #fff;
}

.btn-white-secondary{
  background-color: #fff;
  color: var(--black);
  border: 1px solid #eee;
}
.btn-white-secondary:hover{
  background-color: var(--secondary);
  color: #fff;
}

.btn-outline-primary{
  color: var(--black);
  border: 1px solid var(--black);
  background-color: transparent;
}
.btn-outline-primary:hover{
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}
.btn-outline-secondary{
  color: var(--black);
  border: 1px solid var(--black);
  background-color: transparent;
}
.btn-outline-secondary:hover{
  background-color: var(--secondary);
  border-color: var(--secondary);
  color: var(--white);
}
.btn-secondary:hover img,
.btn-white:hover img,
.btn-outline-primary:hover img,
.btn-outline-secondary:hover img{
  filter: brightness(0) invert(1);
  -webkit-filter: brightness(0) invert(1);
  color: #fff;
}
.roundbtn{
  background-color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn .break{
  display: flex;
  flex-direction: column;
}
.btn .small{
  font-size: var(--font12);
  line-height: normal;
  font-weight: 500;
}

.rounded{
  border-radius: 50% !important;
}
.new{
  background-color: #E79500;
  background: linear-gradient(120deg, #E79500 0%, #E7066C 100%);
  font-size: var(--font12);
  color: var(--white);
  border-radius: 4px;
  padding: 2px 6px;
  display: inline-flex;
  margin-right: 6px;
}


.text-orange{
  color: var(--orange)!important;
}
.text-primary{
  color: var(--primary)!important;
}
.text-black{
  color: var(--black)!important;
}


.font12{
  font-size: var(--font12)!important;
}
.font14{
  font-size: var(--font14)!important;
}
.font15{
  font-size: var(--font15)!important;
}
.font16{
  font-size: var(--font16)!important;
}
.font18{
  font-size: var(--font18)!important;
}
.font32{
  font-size: var(--font32)!important;
}

.social{
  display: flex;
  flex-flow: wrap;
  gap: 8px;
}
.social a{
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.social a:hover{
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
}
.social a img{
  max-height: 32px;
}

.morebtn{
  display: inline-flex;
  gap: 5px;
  align-items: center;
  color: var(--black);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-weight: 500;
}
.morebtn:after{
  content: '';
  display: flex;
  width: 26px;
  height: 26px;
  background-image: url(../img/icons/arrow-white.svg);
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--secondary);
  border-radius: 50%;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
}
.morebtn.blue::after{
  background-color: #1968B3;
}
.morebtn:hover:after{
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.morebtn.small{
  font-size: var(--font14);
}
.morebtn.small:after{
  width: 20px;
  height: 20px;
  background-size: 14px;
}

.mainhead span{
  font-weight: 700;
  color: var(--primary);
}
.bighead{
  font-size: 2.5rem;
}
.caption{
  font-size: var(--font18);
}

.posrel{
  position: relative !important;
}

.regular{
  font-weight: 400 !important;
}
.medium{
  font-weight: 500 !important;
}
.semibold{
  font-weight: 600 !important;
}
.bold{
  font-weight: 700 !important;
}


.headcol{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.headcol *{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.counter-green{
    background:#D7FFD5 !important;
}
.counter-blue{
    background:#E3F7FF !important;
}



@keyframes moveRight{
  0%{
      transform: translateX(0px);
      -webkit-transform: translateX(0px);
  }
  50%{
      transform: translateX(5px);
      -webkit-transform: translateX(5px);
  }
  100%{
      transform: translate(0px);
      -webkit-transform: translate(0px);
  }
}

/* Fading entrances  */
@-webkit-keyframes fadeIn {
from {
  opacity: 0;
}
to {
  opacity: 1;
}
}
@keyframes fadeIn {
from {
  opacity: 0;
}
to {
  opacity: 1;
}
}

/* Zooming entrances */
@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}


/*PULSE*/
@keyframes pulse {
from {
  -webkit-transform: scale3d(.25, .25, .25);
  transform: scale3d(.25, .25, .25);
}

50% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}

to {
  -webkit-transform: scale3d(.25, .25, .25);
  transform: scale3d(.25, .25, .25);
}
}

@keyframes pulsemd {
  from {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }
  
  50% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  
  to {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }
  }

@keyframes rotate {
  from {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(360deg) scale(.75);
  }
  to {
    transform: rotate(0deg) scale(1);
  }
  }



/*---------------------------------------*/
/*::::::::::::::::HEADER:::::::::::::::::*/
/*---------------------------------------*/
header {
  position: sticky;
  top: 0;
  width: 100%;
  background-color: #fff;
  z-index: 9999;
  box-shadow: 0 0 20px rgb(0 0 0 / 10%);
  transition: all .3s ease;
}

header .headmain {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 90px;
  transition: all .3s ease;
}
header.active .headmain{
  height: 60px;
}

header .headmain .logocol {
  width: 300px;
  padding: 10px 0;
  transition: all .3s ease;
}
header.active .headmain .logocol{
  width: 190px;
}
header .headmain .logocol a {
  display: flex;
  position: relative;
  height: 100%;
}
header .headmain .logocol img {
  width: 100%;
  transition: all .3s ease;
  height: 100%;
  object-fit: contain;
  object-position: left;
}

header .headmain .menucol {
  flex: 1 0;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: end;
  gap: 5px;
  transition: all .3s ease;
}
header.active .headmain .menucol{
  gap: 0;
}
header .menutop{
  width: 100%;
  height: 30px;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: end;
  transition: all .3s ease;
}
header.active .menutop{
  height: 0;
  overflow: hidden;
  opacity: 0;
}
header .menutop .toplist{
  justify-content: end;
  gap: 12px;
  height: 100%;
  align-items: center;
}
header .menutop .toplist a {
  font-size: var(--font14);
  color: var(--textclr);
  display: flex;
  gap: 3px;
  align-items: center;
}
header .menutop .toplist a:hover{
  color: var(--primary);
}
header .menuholder{
  height: 40px;
}
header .menucen,
.searchbar {
  display: flex;
  align-items: center;
  gap: 15px;
  border: 1px solid rgb(0 0 0 / 10%);
  border-radius: 6px;
}

.searchbar input{
  height: 100%;
  border: none;
  background: transparent;
  outline: 0;
  padding-left: 15px;
  width: 400px;
  max-width: 100%;
  font-size: var(--font14);
}


.menuend {
  display: flex;
  gap: 10px;
  align-items: center;
  position: relative;
}
header .menuend .btn-gradient {
  background: var(--gradient);
  box-shadow: none;
  background-size: cover;
  height: 38px;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  border-radius: 2rem;
}
header .menuend .btn-gradient:hover {
  background: linear-gradient(120deg, #07BED6 0%, #6CCA55 100%);
  background-size: 200%;
  background-position: right;
}
header .mal img {
  filter: invert(30%) sepia(97%) saturate(1478%) hue-rotate(186deg) brightness(89%) contrast(90%);
}

header a.mainli {
  color: var(--white);
  display: flex;
  align-items: center;
  font-size: var(--font15);
  height: 50px;
  font-weight: 500;
  position: relative;
  transition: all .3s ease;
}

header a.mainli:after {
  content: "";
  position: absolute;
  width: 0;
  height: 3px;
  background-color: var(--secondary);
  border-radius: 3px;
  bottom: 10px;
  transition: all .3s ease;
}
header a.mainli:hover:after,
header a.mainli.active:after{
  width: 100%;
}
header .megamenu{
  position: initial;
}

header .megamenu:hover a.mainli:after,
header .megamenu.active a.mainli:after,
header .megamenu.active:hover a.mainli:after{
  background-color: var(--secondary);
  width: 100%;
}

header .megamenu-content {
  display: flex;
  align-items: center;
  position: absolute;
  width: 900px;
  z-index: 99;
  height: 0;
  overflow: hidden;
  left: 0;
  opacity: 0;
  border-radius: 6px;
  box-shadow: 0 0 20px rgb(0 0 0 / 20%);
  font-size: var(--font15);
  transition: all .3s ease;
}
header .megamenu:hover .megamenu-content {
  height: 450px;
  opacity: 1;
  align-items: flex-start;
}
header .megamenu-content .megadata{
  width: 100%;
  height: 100%;
  box-shadow: 15px 20px 20px var(--primary20);
  line-height: 1.4;
  border-radius: 6px;
  padding: 15px;
  border: none;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  background-image: url(../img/images/menubg.jpg);
  background-position: 25% bottom;
  background-size: cover;
}

header .mega-sidenav{
  display: flex;
  flex-direction: column;
  max-width: 310px;
  width: 310px;
  padding: 0 15px;
  position: relative;
}
header .mega-sidenav:after{
  content: '';
  position: absolute;
  top: 0;
  right: 30px;
  height: 100%;
  width: 1px;
  background-color: rgb(0 0 0 / 10%);
}
header .mega-sidenav .sideitem{
  display: flex;
  color: var(--black);
  padding: 10px 0;
  padding-right: 25px;
  min-height: 44px;
  background-color: transparent;
  border: none;
  outline: 0;
  display: flex;
  align-items: center;
  position: relative;
  transition: var(--trans30);
  -webkit-transition: var(--trans30);
}
header .mega-sidenav .sideitem:after{
  content: '';
  width: 6px;
  height: 6px;
  border: 1px solid rgb(0 0 0 / 50%);
  border-radius: 50%;
  position: absolute;
  right: 12.5px;
  background-color: #fff;
  z-index: 1;
  transition: var(--trans30);
  -webkit-transition: var(--trans30);
}
header .mega-sidenav .sideitem:hover{
  color: var(--primary);
}
header .mega-sidenav .active{
  color: var(--primary);
}
header .mega-sidenav .active.sideitem:after{
  background-color: var(--secondary);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--secondary);
  transform: scale(1.3);
}
header .mega-menucol{
  max-width: calc(100% - 310px);
  width: calc(100% - 310px);
  max-height: 400px; /* Adjust height as needed */
  overflow-y: auto; /* Only this section scrolls */
  scroll-behavior: smooth; /* Ensure smooth scrolling */
  position: relative; /* Important for offset calculations */
}
header .menulist {
  min-height: 320px;
}
.menuhead{
  display: flex;
  gap: 10px;
  align-items: center;
  font-weight: 600;
  color: var(--black);
  font-size: var(--font18);
}
.menuhead .icon{
  width: 28px;
  height: 28px;
  position: relative;
}
.menuhead .icon::before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--secondary);
  opacity: .5;
}
header .menulist ul,
.labelist{
  display: flex;
  flex-wrap: wrap;
}
header .menulist ul li{
  flex: 1 0 33.333%;
  max-width: 33.333%;
  padding: 4px;
}
header .menulist ul li a,
.labelist li a{
  display: flex;
  align-items: center;
  border: 1px solid rgb(0 0 0 / 10%);
  color: var(--textclr);
  background-color: rgb(255 255 255 / 90%);
  border-radius: 6px;
  padding: 10px;
  height: 100%;
}
header .menulist ul li a:hover,
.labelist li a:hover{
  color: var(--primary);
  border-color: var(--primary20);
}

.headbottom{
  background: #074F93;
  background: linear-gradient(120deg, rgba(7, 79, 147, 1) 0%, rgba(15, 136, 238, 1) 50%, rgba(3, 73, 140, 1) 100%);
}
header .bottomnav{
  gap: 1.5rem;
}



header .menubtn{
  background: transparent;
  border: none;
  padding: 0;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

header .srcbtn{
  width: 60px;
  border-radius: 0 6px 6px 0;
  transition: var(--trans30);
  -webkit-transition: var(--trans30);
}

header .srcbtn:before{
  content: '';
  position: absolute;
  left: 0;
}
header .srcbtn:before,
header .vline{
  display: flex;
  height: 32px;
  width: 1px;
  background-color: rgb(0 0 0 / 10%);
}

header .outlineBtn{
  box-shadow: none;
  color: var(--white);
  border: 1px solid;
  border-radius: 2rem;
  padding: 1rem;
  white-space: nowrap;
}
header .outlineBtn:hover{
  background-color: var(--white);
  color: var(--primary);
}
header .outlineBtn.primary{
  color: var(--primary);
  border-color: var(--primary);
}
header .outlineBtn.primary:hover{
  color: #fff;
  background-color: var(--primary);
}
header .supportBtn img{
  filter: invert(30%) sepia(97%) saturate(1478%) hue-rotate(186deg) brightness(89%) contrast(90%);
}
.normaldrop .iconcard:hover .head{
  color: var(--primary);
}

header .notiBtn::after{
  content: '';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--Primary-Blue, #1968B3);
}

.normaldrop{
  position: absolute;
  top: 100%;
  min-width: 250px;
  background-color: #fff;
  padding: 10px;
  border-radius: 6px;
  cursor: auto;
  right: -20px;
  opacity: 0;
  transform: scale(0);
  transition: var(--trans30);
}
.normaldrop.show{
  transform: scale(1);
  opacity: 1;
}
.normaldrop.md{
  min-width: 500px;
}
.normaldrop .datalist{
  height: 300px;
  max-height: 500px;
  overflow-y: auto;
}

.searchbar .megamenu-content{
  height: 500px;
  display: none;
  top: 100%;
  padding-top: 0;
  opacity: 1;
  left: auto;
  right: 0;
}
.menuoff img{
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid rgb(0 0 0 / 10%);
}

.dnone{
  display: none;
}

.backdrop{
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(0 0 0 / 50%);
  backdrop-filter: blur(2px);
  z-index: 9998;
  cursor: zoom-out;
}

.toggle-switch {
    height: 26px;
    background: var(--primary);
    border-radius: 20px;
    display: flex;
    align-items: center;
    padding: 3px;
    cursor: pointer;
    position: relative;
}

.toggle-option {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    padding-top: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 13px;
    transition: 0.3s;
}

.toggle-option.active {
    background: var(--secondary);
}

header .headicon{
  position: absolute;
  top: 10px;
  right: 0;
  display: flex;
  align-items: center;
  color: var(--textclr);
  font-style: italic;
  transition: 0.3s;
  font-size: var(--font14);
  font-weight: 500;
}
header.active .headicon{
  transform: scale(0);
  transform-origin: top right;
  opacity: 0;
}

.text-secondary{
  color: var(--secondary) !important;
}


@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}


hr{
  border-color: #000 !important;
  opacity: .1 !important;
}


/*::::::::::::::::::SIDEMENU:::::::::::::::::*/
.sidebar{
  position: fixed;
  z-index: 10000;
  top: 0;
  right: 0;
  height: 100%;
  width: 0;
  opacity: 0;
  overflow: hidden;
  background-color: #fff;
  transition: var(--trans30);
  -webkit-transition: var(--trans30);
}
.sidebar.active{
  width: 400px;
  max-width: 100%;
  padding: 15px;
  opacity: 1;
}
.sidebar .closebtn{
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--primary10);
  transition: var(--trans30);
  -webkit-transition: var(--trans30);
}
.sidebar .closebtn:hover{
  background-color: var(--primary20);
}
.sidebar .closebtn img{
  pointer-events: none;
}
.sidebar .sideholder{
  height: calc(100% - 90px);
  overflow: auto;
  padding-bottom: 5px;
}
.sidebar .menuhead{
  color: var(--black);
}
.sidebar .searchbar{
  background: var(--primary10);
  border-color: var(--primary20);
}
.sidebar .menubtn{
  background-color: transparent;
  height: 44px;
  border: none;
  min-width: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.menuaccordion{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.menuaccordion .accordion-item{
  border: 1px solid rgb(0 0 0 / 10%);
  border-radius: 6px;
}
.menuaccordion .accordion-button{
  background-color: var(--primary10);
  color: var(--primary);
  border-radius: 6px;
  outline: 0;
  box-shadow: none;
  padding: 10px 15px;
  padding-right: 20px;
  font-weight: 500;
}
.menuaccordion .accordion-button.collapsed{
  background-color: #fff;
  color: var(--textclr);
}
.menuaccordion .accordion-button:hover{
  background-color: rgb(77 184 72 / 10%);
  color: var(--primary);
}
.menuaccordion .accordion-button:after{
  width: 12px;
  height: 12px;
  background-size: 12px;
  position: absolute;
  right: 15px;
}
.menuaccordion a.accordion-button:after{
  background-image: url(../img/icons/arrow-black.svg);
  width: 14px;
  height: 14px;
  background-size: 14px;
  opacity: .5;
}

.subaccordion .accordion-item,
.subaccordion .accordion-button{
  border: none;
  border-radius: 0 !important;
  background-color: transparent;
}
.subaccordion .accordion-button{
  color: var(--black);
  font-size: var(--font14);
  padding: 8px 15px;
}
.subaccordion .accordion-button:hover{
  background-color: #fff;
  color: var(--black);
}
.subaccordion .accordion-button:after{
  background-image: url(../img/icons/ac-minus.svg);
  background-size: 9px;
  background-position: center;
}
.subaccordion .accordion-button.collapsed:after{
  background-image: url(../img/icons/ac-plus.svg);
    background-size: 9px;
    background-position: center;
}
.subaccordion .accordion-button.collapsed{
  background-color: transparent;
}
.subaccordion ul{
  display: flex;
  flex-direction: column;
  padding: 2px 10px;
  border-radius: 6px;
  border: 1px solid rgb(0 0 0 / 10%);
}
.subaccordion ul li:not(:last-child){
  border-bottom: 1px solid rgb(0 0 0 / 10%);
}
.subaccordion ul li a{
  display: flex;
  align-items: center;
  color: var(--textclr);
  padding: 8px 0;
  position: relative;
}
.subaccordion ul li a:hover{
  color: var(--secondary);
}
.subaccordion ul li a:after{
  content: '';
  background-image: url(../img/icons/arrow-black.svg);
  background-size: contain;
  width: 12px;
  height: 12px;
  margin-left: auto;
  opacity: 0;
  transform: scale(0);
  transition: var(--trans30);
  -webkit-transition: var(--trans30);
}
.subaccordion ul li a:hover:after{
  opacity: .5;
  transform: scale(1);
}
.subaccordion .accordion-item:last-child ul{
  margin-bottom: 1rem;
}




/*::::::::::::::::ACCESSIBILITY:::::::::::::::::*/
.accessmain{
  position: fixed;
  z-index: 999;
  bottom: 3rem;
  right: 3rem;
}
.accessbtn{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgb(0 0 0 / 10%);
}
.accessbtn:hover img{
  transform: scale(1.1);
}
.accessbox{
  background-color: #fff;
  border-radius: .5rem;
  position: absolute;
  z-index: 1;
  width: 280px;
  right: 0;
  bottom: 100%;
  margin-bottom: 10px;
  padding: 15px;
  display: none;
  box-shadow: 15px 12px 20px var(--primary20);
}
.accessbox .hdbox{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.accessbox .hdbox .head{
  font-weight: 600;
  font-size: var(--font16);
  color: var(--black);
  margin: 0;
}
.accessbox .hdbox .closebtn{
  min-width: 28px;
  min-height: 28px;
  background-color: var(--primary10);
}
.accessbox .hdbox .closebtn:hover{
  background-color: var(--primary20);
}
.accessbox .acclist{
  display: flex;
  flex-flow: wrap;
  font-size: var(--font13);
  gap: 10px;
}
.accessbox .accbtn{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: 1px solid rgb(0 0 0 / 6%);
  font-weight: 600;
  color: var(--textclr);
  border-radius: .3rem;
  padding: 10px 0;
  gap: 5px;
  width: 120px;
  cursor: pointer;
  transition: var(--trans30);
  -webkit-transition: var(--trans30);
}
.accessbox .accbtn a{
  color: var(--textclr);
}
.accessbox .accbtn:hover{
  background-color: var(--primary10);
}
.accessbox .accbtn.active{
  box-shadow: 0 0 0 2px var(--primary50);
  color: var(--primary);
  background: var(--primary10);
}
.accessbox .accbtn.active img{
  transform: scale(1.1);
}
.acclink{
  display: flex;
  flex-direction: column;
  font-size: var(--font13);
  margin-top: 15px;
}
.acclink li{
  border-top: 1px solid rgb(0 0 0 / 5%);
}
.acclink li a{
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--textclr);
  height: 40px;
  position: relative;
}
.acclink li a:hover{
  color: var(--red);
}
.acclink li a:after{
  content: '';
  position: absolute;
  right: 0;
  right: 0;
  border-left: 5px solid var(--black);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  opacity: .5;
  transition: var(--trans30);
  -webkit-transition: var(--trans30);
}
.acclink li a:hover:after{
  opacity: 1;
}


.mobiaccess{
  position: fixed;
  z-index: 998;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  padding: 1rem;
  border-radius: 1rem 1rem 0 0;
}



@media(max-width:1366px){
  header .headicon{
    display: none;
  }
}

@media(max-width:991px){
  .accessmain{
    right: 2rem;
  }
  .accessbox{
    transform: translateX(-25%);
  }
}

@media(max-width:767px){
  header .headmain .logocol{
    width: 260px;
  }
  .accessmain{
    right: 1rem;
  }
}

@media(max-width:575px){
  header .headmain{
    gap: .5rem;
    height: 80px;
  }
  header .headmain .logocol {
      width: 230px;
  }
  .toggleSidemenu{
    width: 30px;
  }
  .accessbox{
    position: fixed;
    top: auto;
    left: auto;
    right: 0;
    transform: none;
    width: 432px;
    max-width: 100%;
    bottom: 0;
    border-radius: 1rem 1rem 0 0;
    box-shadow: 0 -10px 20px var(--primary20);
  }
  .accessbox .acclist{
    gap: 10px;
  }
  .accessbox .accbtn{
    flex: 1 0 calc(33.333% - 10px);
    padding: 8px 5px;
  }
  .accessbox .hdbox .closebtn{
    top: 10px;
    right: 10px;
  }
  .accessbox .accbtn img {
    width: 20px;
    height: 20px;
  }
  .sidebar.active{
    width: 330px;
  }
}

@media(max-width:420px){
  .xs-none{
    display: none !important;
  }
  header .menuend .btn-gradient{
    padding: 0;
    width: 38px;
  }
}



.flexVcenter{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.text-right{
  text-align: right!important;
}

.h-auto .swiper-slide{
  height: auto;
}






/*---------------------------------------*/
/*::::::::::::::::SLIDER:::::::::::::::::*/
/*---------------------------------------*/

.slider {
  position: relative;
  width: 100%;
  height: 450px;
  background-color: var(--black);
}

.slider .mainslider,
.slider .mainslider .swiper-slide,
.slider .mainslider .slideimg {
  height: 100%;
}

.slider .mainslider .slideimg > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: zoomimg 5.5s infinite;
}

.bannericons{
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}
.bannericons .item{
  background-color: #fff;
  padding: 6px;
  border-radius: 0 5px 5px 0;
  box-shadow: 0 0 10px rgb(0 0 0 / 10%);
}

@keyframes zoomimg{
  0%{
    transform-origin: 50% 65%;
    transition: transform 10s ease-in-out;
  }
  50%{
    transform: scale(1.02);
  }
  100%{
    transform-origin: 50% 65%;
  }
}

.swiper-pagination{
  width: auto !important;
  background: rgb(0 0 0 / 30%);
  left: auto !important;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  padding: 6px 0;
  right: 2rem;
  gap: 6px;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%);
}
.swiper-pagination-bullet{
  background-color: var(--white);
  border: none;
  width: 10px;
  height: 10px;
  opacity: .5;
  transition: all .3s linear;
  -webkit-transition: all .3s linear;
}
.swiper-pagination-bullet-active{
  background-color: var(--primary);
  border-radius: 10px;
  opacity: 1;
}

@media(max-width:1440px){
  .slider{
    height: 480px;
  }
}

@media(max-width:1280px){
  .slider{
    height: 400px;
  }
}

@media(max-width:991px){
  .slider{
    height: 320px;
  }
}

@media(max-width:767px){
  .slider{
    height: 280px;
  }
}

@media(max-width:575px){
  .slider{
    height: calc(100vh - 80px);
  }
  .bannericons .item img{
    width: 40px;
  }
}





/* \\\\\\\\\\\\\\TABS////////////// */
.mytabs{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tablist{
  display: flex;
  justify-content: center;
  gap: 10px;
  position: relative;
  z-index: 10;
}
.tablist.has-scroll{
  flex-wrap: nowrap;
  overflow: hidden;
  overflow-x: auto;
  padding-bottom: 1px;
  justify-content: flex-start;
}
.tablist .tabsbtn{
  background: var(--gradient1);
  border-radius: .3rem;
  min-width: 150px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: none;
  font-size: var(--font15);
  font-weight: 500;
  position: relative;
  border: none;
  color: var(--white);
  transition: var(--trans30);
  -webkit-transition: var(--trans30);
}
.products .tablist{
  margin-top: -20px;
}
.tablist .tabsbtn:hover{
  background: var(--gradient2);
  color: #fff;
  border-color: var(--Primary-Blue, #1968B3);
}

.tablist.primary .tabsbtn.active,
.tablist.primary .tabsbtn.active:hover{
  background-color: #1968B3;
  background: var(--gradient2);
  color: var(--white);
}
.tablist .tabsbtn:hover:after{
  content: '';
  position: absolute;
  bottom: -10px;
  border-top: 12px solid var(--secondary);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  left: 50%;
  transform: translateX(-50%);
}
.tablist.primary .tabsbtn.active:after{
  content: '';
  position: absolute;
  bottom: -10px;
  border-top: 12px solid var(--secondary);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  left: 50%;
  transform: translateX(-50%);
}

.tablist .tabsbtn .icon{
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  position: relative;
}

.tablist .tabsbtn .icon img{
  position: relative;
}
.tablist .tabsbtn:hover .icon img,
.tablist.primary .tabsbtn.active .icon img{
  transform: scale(1.1);
}
.tablist .tabsbtn:hover .icon:before,
.tablist.primary .tabsbtn.active .icon:before{
  background-color: transparent;
}


@media(max-width:1200px){
  .products .tablist {
    flex-wrap: nowrap;
    overflow: hidden;
    justify-content: start;
    overflow-x: auto;
    padding-bottom: 15px;
  }
}

@media(min-width:768px){

  .tablist.vertical{
    flex-direction: column;
    margin-top: 0;
  }
  .tablist.vertical .tabsbtn{
    justify-content: start;
    border-radius: .3rem;
    padding: 10px;
    height: auto;
    width: 100%;
    text-align: left;
    background: #fff;
    color: var(--textclr);
    border: 1px solid rgb(0 0 0 / 10%);
  }
  .tablist.vertical .tabsbtn:after{
    content: '';
    position: absolute;
    border-left: 12px solid var(--secondary);
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: none;
    bottom: auto;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    right: -12px;
    opacity: 0;
  }

  .tablist.vertical .tabsbtn.active:after{
    border-left-color: var(--secondary);
    opacity: 1;
    border-top: 8px solid transparent;
  }
}

.tablist.vertical .tabsbtn.active,
.tablist.vertical .tabsbtn.active:hover,
.tablist.vertical .tabsbtn:hover {
  background: var(--gradient2);
  border-color: var(--secondary);
  color: #fff;
}

@media(max-width:767px){
  .tablist .tabsbtn{
    min-width: 110px;
  }
  .tablist.vertical{
    overflow: hidden;
    overflow-x: auto;
  }
  
  .tablist.vertical .tabsbtn.active:after{
    content: '';
    position: absolute;
    bottom: -10px;
    border-top: 12px solid var(--secondary);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
  }
}

@media(max-width:575px){
  .tablist{
    gap: 5px;
  }
  .products .tablist{
    margin-top: -10px;
    gap: 10px !important;
  }
  .tablist .tabsbtn{
    padding: 10px;
    gap: 2px;
    min-width: 95px;
    font-size: var(--font14);
  }
}

@media (max-width: 991px) {
  .hasaccordion .tab-content>.tab-pane {
    display: block;
    opacity: 1;
  }
}



/* \\\\\\\\\\\\\\CARD////////////// */
.iconcard, .card{
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid #E5E5E5;
  padding: 1rem;
  border-radius: 8px;
  overflow: hidden;
  height: 100%;
  transition: all .5s linear;
  -webkit-transition: all .5s linear;
}

.cardimg {
  border-radius: 6px;
  overflow: hidden;
}

/* Award Cards Specific Styling */
.awardslide .iconcard {
  padding: 10px;
  border: none;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  border-radius: 12px;
}
.awardslide .cardcont {
  padding: 12px 5px 5px 5px;
}
.awardslide .cardcont .head {
  font-size: var(--font14);
  line-height: 1.4;
  margin-top: 0 !important;
  color: #5A5A5A;
}

.iconcard.theme-green .icon:before {
  background-color: #e8faeb;
}
.iconcard.theme-green .btn-secondary {
  background-color: #4DB848;
  color: #fff;
  border: none;
}
.iconcard.theme-green .roundbtn {
  border: 1px solid #E5E5E5;
  background-color: #fff;
}
.iconcard.theme-green .roundbtn img {
  filter: invert(56%) sepia(50%) saturate(459%) hue-rotate(71deg) brightness(97%) contrast(90%);
  transform: rotate(-45deg);
}
.iconcard.theme-green .icon img {
  filter: invert(56%) sepia(50%) saturate(459%) hue-rotate(71deg) brightness(97%) contrast(90%);
}
.iconcard.theme-green .head {
  color: #4DB848;
}

.iconcard.theme-blue .icon:before {
  background-color: #eef5fb;
}
.iconcard.theme-blue .head {
  color: #1968B3;
}

.award-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background-color: #1968B3 !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  z-index: 10;
  border: none !important;
}
.iconcard.theme-blue .btn-secondary {
  background-color: #1968B3;
  color: #fff;
  border: none;
}
.iconcard.theme-blue .roundbtn {
  border: 1px solid #E5E5E5;
  background-color: #fff;
}
.iconcard.theme-blue .roundbtn img {
  filter: invert(30%) sepia(97%) saturate(1478%) hue-rotate(186deg) brightness(89%) contrast(90%);
  transform: rotate(-45deg);
}
.iconcard.theme-blue .icon img {
  filter: invert(30%) sepia(97%) saturate(1478%) hue-rotate(186deg) brightness(89%) contrast(90%);
}

.iconcard.list{
  flex-direction: row;
  height: auto;
}



/* DIGITAL CARDS THEMES */

.digital-card-solid-green .head { color: #fff !important; }
.digital-card-solid-green .icon img {
  filter: brightness(0) invert(1);
}

.digital-card-green {
  background: var(--gradient2);
}
.digital-card-green .icon img {
  filter: invert(56%) sepia(50%) saturate(459%) hue-rotate(71deg) brightness(97%) contrast(90%);
}

.digital-card-blue {
  background: var(--gradient1);
}
.digital .iconcard{
  min-height: 100px;
}
.digital .iconcard .icon img {
  filter: brightness(0) invert(1);
}

.digital .iconcard .head{
  color: #fff;
}

.iconcard:hover{
  box-shadow: 3px 3px 20px rgb(0 0 0 / 6%);
}
.noeffect .iconcard{
  box-shadow: none;
}
.noeffect .iconcard:hover{
  transform: none;
  box-shadow: none;
}
.nobg{background-color: transparent;}
.iconhead{
  display: flex;
  gap: 10px;
  align-items: center;
}
.iconcard .icon,
.listbox .icon{
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  position: relative;
  transition: var(--trans30);
  -webkit-transition: var(--trans30);
}
.iconcard:hover .icon{
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
}
.iconcard.big .icon{
  width: 48px;
  height: 48px;
}
.iconcard .icon:before,
.listbox .icon:before{
  content: '';
  position: absolute;
  bottom: 0;
  right: 5px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  opacity: 1;
  z-index: 0;
}
/*.colorlist>*:nth-child(3n+1) .iconcard .icon:before{*/
/*  background: #ffc929;*/
/*}*/
/*.colorlist>*:nth-child(3n+2) .iconcard .icon:before{*/
/*  background: #00ADED;*/
/*}*/
/*.colorlist>*:nth-child(3n+3) .iconcard .icon:before{*/
/*  background: #F27D36;*/
/*}*/
.iconcard .icon img,
.listbox .icon img{
  height: auto;
  position: relative;
  transition: var(--trans30);
  -webkit-transition: var(--trans30);
}
.iconcard .cardimg{
  border: 1px solid #eee;
  border-radius: 6px;
  overflow: hidden;
}
.iconcard .cardimg .roundbtn{
  position: absolute;
  z-index: 1;
  bottom: 10px;
  right: 10px;
}
.iconcard:hover .cardimg .roundbtn{
  transform: rotate(45deg);
  background-color: var(--secondary) !important;
}
.iconcard:hover .cardimg img{
  transform: scale(1.1);
}
.iconcard .head,
.listbox .head{
  color: var(--black);
  font-weight: 600;
  font-size: var(--font15);
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: var(--trans30);
  -webkit-transition: var(--trans30);
}

.iconcard .desc,
.listbox .desc{
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--font13);
  line-height: var(--font18);
}

.iconcard p a:hover{
  color: var(--primary);
}

.iconcard .actionrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 10px;
  border-top: 1px solid #eee;
  padding-top: 10px;
}
.iconcard .actionrow>*{
  flex: 1 0 auto;
  max-width: 100%;
  width: auto;
  justify-content: flex-end;
}
.iconcard .rate{
  display: flex;
  flex-direction: column;
  line-height: normal;
}
.iconcard .rate .name{
  color: var(--textclr);
  font-size: var(--font12);
}
.iconcard .rate .value{
  display: flex;  
  align-items: center;
  gap: 5px;
  font-weight: 600;
  font-size: var(--font12);
}
.iconcard .rate .big{
  font-size: var(--font20);
  color: var(--primary);
}
.iconcard .btn{
  padding: 0 10px;
  min-height: 36px;
  height: 36px;
  font-size: var(--font15);
}
.iconcard .roundbtn{
  padding: 0;
  min-width: 36px;
  width: 36px;
  box-shadow: 4px 4px 15px rgb(0 0 0 / 10%);
}
.iconcard .roundbtn:hover,
.iconcard .roundbtn:hover img{
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
}


.iconcard .element{
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
}
.iconcard .element img{
  position: absolute;
  z-index: -1;
  bottom: 0;
  opacity: .6;
}
.iconcard .element img.middle{
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.iconcard .element img.left{
  right: auto;
  left: 0;
}
.iconcard .element img.right{
  right: 0;
  left: auto;
}
.iconcard .element img.top-left{
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
}
.iconcard .element img.top-center{
  left: 0;
  right: 0;
  top: 0;
  margin: 0 auto;
}
.iconcard:hover .element img{
  transform: scale(1.1);
  opacity: .75;
}


.colorbox{
  display: flex;
  flex-direction: column;
  background-color: var(--primary);
  color: var(--white);
  padding: 1rem;
  border-radius: 1rem;
  position: relative;
  height: 100%;
  min-height: 130px;
  overflow: hidden;
  background: #0CBDCD;
  background: var(--gradient1);
}
.grad1{
  background-color: var(--primary);
  background: var(--gradient1);
}
.grad2{
  background-color: var(--secondary);
  background: var(--gradient2);
}

.colorlist>*>.iconcard{
  background-color: var(--primary);
  background: var(--gradient1);
}
.colorlist>*:nth-child(even)>.iconcard{
  background-color: var(--secondary);
  background: var(--gradient2);
}
.colorlist>*>.iconcard .head{
  color: #fff;
}
.colorlist>*>.iconcard .desc{
  color: var(--white);
  opacity: .9;
}
.colorlist>*>.iconcard .icon img{
  filter: brightness(0) invert(1);
  -webkit-filter: brightness(0) invert(1);
}
.colorbox .title{
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
}
.colorbox .element{
  max-width: unset;
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: .7;
  pointer-events: none;
}
.colorbox .element.left{
  left: 0;
  right: auto;
}
.colorbox:hover .element{
  transform: scale(1.1);
}

.iconlist.light .icon{
  width: 50px;
  height: 50px;
}

.iconlist.light .icon{
  background-color: var(--secondary);
  background: var(--gradient2);
}

@media(max-width:575px){
  .colorbox{
    min-height: 100px;
  }
}



/* \\\\\\\\\\\\\\PRODUCTS////////////// */
.products{
  margin-top: -25px;
  z-index: 1;
}



/* \\\\\\\\\\\\\\HIGHLIGHTS////////////// */
.navcol{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.navcol .navbtn{
  position: relative;
  width: 40px;
  height: 26px;
  border-radius: 2rem;
  background-color: var(--primary);
  background: var(--gradient);
  right: auto;
  left: auto;
  margin: 0;
  top: auto;
  transition: var(--trans30);
  -webkit-transition: var(--trans30);
}
.navcol .navbtn:after{
  content: '';
  filter: brightness(0) invert(1);
  -webkit-filter: brightness(0) invert(1);
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.navcol .swiper-button-next:after{
  background-image: url(../img/icons/arrow-right.svg);
}
.navcol .swiper-button-prev:after{
  background-image: url(../img/icons/arrow-left.svg);
}
.navcol .navbtn:hover{
  
}

.colorcard{
  display: flex;
  flex-direction: column;
  border: 1px solid #E5E5E5;
  padding: 15px;
  border-radius: 6px;
  color: #fff;
  height: 100%;
}
.colorlist>*:nth-child(3n+1) .colorcard{
  background-color: var(--yellow);
  background: linear-gradient(120deg, #FFC929 0%, #B26E01 100%);
}
.colorlist>*:nth-child(3n+2) .colorcard{
  background-color: var(--blue);
  background: linear-gradient(120deg, #00ADED 0%, #026796 100%);
}
.colorlist>*:nth-child(3n+3) .colorcard{
  background-color: var(--orange);
  background: linear-gradient(120deg, #F27D36 0%, #C32A00 100%);
}
.colorcard .icon{
  width: 44px;
  height: 44px;
  position: relative;
}
.colorcard .icon::before{
  content: '';
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #fff;
  opacity: .2;
  position: absolute;
  top: 0;
  left: 0;
}
.colorcard .head{
  font-size: var(--font18);
  font-weight: 700;
  color: var(--white);
  margin: 10px 0;
}
.colorcard .desc{
  color: var(--white);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--font15);
}
.colorcard .morebtn{
  color: #fff;
  font-size: var(--font15);
}
.colorcard .morebtn::after{
  background-color: #fff;
  background-image: url(../img/icons/arrow-down.svg);
}

.highslide .swiper-slide:before{
  content: '';
  background-image: url(../img/icons/dotline.svg);
  width: 32px;
  height: 6px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  left: -40px;
  top: 50%;
  transform: translateY(-50%);
}



/* \\\\\\\\\\\\\\NEWS & UPDATE////////////// */

.newsupdate::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 80%;
  border-radius: 0 3rem 3rem 0;
  background-color: var(--blue);
  opacity: .1;
}


/* IMAGE CARD */
.navcol .navbtn {
  width: 40px;
  height: 26px;
  border-radius: 2rem;
  position: static;
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--primary);
}
.navcol .navbtn:hover{
  background-color: var(--secondary);
}
.navcol .swiper-button-prev.navbtn {
  background-image: url(../img/icons/arrow-left.svg);
}
.navcol .swiper-button-next.navbtn {
  background-image: url(../img/icons/arrow-right.svg);
}
.navcol .swiper-button-disabled{
  opacity: .25;
}

/* Deals & Offers specific pill buttons */
.navcol .offer-prev.navbtn,
.navcol .offer-next.navbtn {
  width: 48px;
  border-radius: 20px;
  background-color: #1968B3;
}

.imgcard{
  display: flex;
  flex-flow: column;
  position: relative;
  padding: 15px;
  height: 100%;
  background-color: #fff;
  border: none;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  border-radius: 60px 10px 10px 10px;
}
.imgcard::before{
  content: '';
  position: absolute;
  z-index: 2;
  top: 4px;
  left: 4px;
  width: 40px;
  height: 40px;
  background-image: url(../img/icons/kgb.svg);
  background-size: 19px 27.34px;
  background-repeat: no-repeat;
  background-position: 11px 6px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.imgcard .actbtn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-top: 5px;
}
.imgcard .date{
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: var(--font12);
  font-weight: 500;
  color: #1968B3;
}
.imgcard .date .dd{
  font-size: var(--font16);
  font-weight: 700;
}
.imgcard .imgbox{
  position: relative;
  border-radius: 50px 8px 8px 8px;
  overflow: hidden;
  margin-bottom: 15px;
  z-index: 1;
}
.imgcard .imgbox img{
  width: 100%;
  height: 200px;
  object-fit: cover;
  margin: auto;
  position: relative;
  z-index: 1;
  transition: var(--trans30);
  -webkit-transition: var(--trans30);
}
.imgcard:hover .imgbox img{
  transform: scale(1.05) translateY(-5px);
}
.imgcard .imgcont p{
  margin: 0;
}
.imgcard .imgcont .head{
  font-weight: 500;
  color: var(--black);
  font-size: var(--font15);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: var(--trans30);
  -webkit-transition: var(--trans30);
  margin-bottom: 5px;
}
.imgcard .imgcont .desc{
  font-size: var(--font13);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.imgcard .morebtn{
  font-size: var(--font14);
}
.imgcard:hover .morebtn:after{
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}




.datalist{
  display: flex;
  flex-wrap: wrap;
}
.datalist .item{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background-color: #fff;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #F2E3D5;
  transition: var(--trans30);
  -webkit-transition: var(--trans30);
}
.lightbg.datalist .item{
  background-color: rgb(0 173 237 / 5%);
}
.datalist .item:hover .head{
  color: var(--primary) !important;
}
.datalist .item .date{
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  font-size: var(--font12);
  text-transform: uppercase;
  line-height: normal;
  width: 44px;
  min-width: 44px;
}
.datalist .item .date .dd{
  color: #1968B3;
  font-size: var(--font20);
  font-weight: 800;
}
.datalist .item .content {
  flex: 1 0;
  font-size: var(--font14);
  color: var(--textclr);
}
.datalist .item .roundbtn {
  background-color: #E8F5E9;
  box-shadow: none;
  min-width: 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.datalist .item .roundbtn img {
  filter: invert(56%) sepia(50%) saturate(459%) hue-rotate(71deg) brightness(97%) contrast(90%);
  width: 14px;
  height: 14px;
}
.datalist .item .content span{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--font15);
  color: var(--textclr);
  transition: var(--trans30);
  -webkit-transition: var(--trans30);
}
.datalist .item:hover .content span{
  color: var(--black);
}
.datalist .item .roundbtn{
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  background-color: var(--primary20);
}
.datalist .item:hover .roundbtn{
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

@media(max-width:1200px){
  .newsupdate::before{
    width: 50%;
  }
}
@media(max-width:575px){
  .datalist .item{
    padding: 10px;
    gap: 5px;
  }
}





/* \\\\\\\\\\\\\\DIGITAL & OFFER////////////// */

.offerslide{
  border-radius: .5rem;
}
.offerimg{
  display: flex;
  border: 1px solid rgb(0 0 0 / 20%);
  border-radius: .5rem;
  position: relative;
  overflow: hidden;
}





/* \\\\\\\\\\\\\\CALCULATOR////////////// */
.calcmain{
  background-color: #fff;
  border-radius: 10px;
  border: 1px solid rgb(0 0 0 / 10%);
  padding: 30px;
  position: relative;
}
.calcmain::before{
  content: '';
  position: absolute;
  top: 1rem;
  right: 0;
  width: 200px;
  height: 90%;
  background-image: url(../img/logo/leaf.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
  z-index: 0;
  opacity: .05;
}

.calctab{
  width: 250px;
  max-width: 250px;
  padding-right: 20px;
}
.calcholder{
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.calcitem{
  display: flex;
  flex-direction: column;
}
.calcitem .calchead{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font14);
}
.calcitem .calchead .form-label{
  font-weight: 600;
}
.calcitem .calchead input{
  width: 110px;
  height: 28px;
  border: 1px solid rgb(0 0 0 / 10%);
  border-radius: 4px;
  color: var(--textclr);
  outline: 0;
}
.calcitem .calchead input:focus{
  border-color: var(--yellow);
}
.calcitem small{
  color: var(--textclr);
  font-size: var(--font12);
}
.result-box {
  background: #fff;
  border: 1px solid #E5E5E5;
  padding: 10px;
  border-radius: 6px;
  text-align: left;
  height: 100%;
  line-height: normal;
  gap: 5px;
}
.result-box.blue{
  background-color: #fff;
}
.result-box .value{
  color: #4DB848;
  display: flex;
  gap: 5px;
  align-items: end;
}
.result-box .value span{
  color: #4DB848;
  font-size: var(--font18);
}
.result-box.blue .value,
.result-box.blue .value span{
  color: #1968B3;
}

.custom-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 5px;
  background: linear-gradient(to right, #4DB848 0%, #4DB848 var(--progress, 0%), #E5E5E5 var(--progress, 0%), #E5E5E5 100%);
  outline: none;
  margin-top: 12px;
  margin-bottom: 8px;
  transition: 0.3s;
}

/* Custom thumb (slider handle) */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  background-image: url('../img/icons/kgb.svg');
  background-color: #fff;
  background-size: 10px;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
  border: 1px solid #1968B3;
  cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  background-image: url('../img/icons/kgb.svg');
  background-color: #fff;
  background-size: 10px;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
  border: 1px solid #1968B3;
  cursor: pointer;
}

/* Hide default focus outline */
input[type="range"]:focus {
  outline: none;
}



@media(max-width:767px){
  .calcmain{
    padding: 1rem;
  }
  .calctab{
    width: 100%;
    max-width: 100%;
    padding-right: 1rem;
  }
  .calctab .tablist{
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: start;
  }
  .calcitem .calchead input{
    width: 84px;
  }
}





/* \\\\\\\\\\\\\\AWARDS////////////// */
.awards{
  background-color: #E5F2FF;
  border-radius: 10px;
}



/* \\\\\\\\\\\\\\MOBILE APP////////////// */
.mobiapp .tab-content{
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgb(0 0 0 / 5%);
}
.mobiapp .content h3 {
  color: #333;
  font-size: 28px;
  font-weight: 700;
}
.mobiapp .content p {
  color: #5A5A5A;
}
.mobiapp .highlist {
  list-style: none;
  padding-left: 0;
}
.mobiapp .highlist li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 8px;
  color: #5A5A5A;
}

.mobiapp .morebtn {
  color: #333;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.appmain{
  max-width: 500px;
  min-height: 500px;
}
.appholder{
  position: relative;
  height: 100%;
}
.appholder .element{
  width: 100%;
  height: 100%;
  background-size: contain;
  animation: pulsemd 5s infinite;
}
.appholder .appframe{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 220px;
  height: 454px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.appholder .appframe:after{
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  height: 100%;
  background-image: url(../img/images/appframe.svg);
  background-size: contain;
}
.appholder .appscreen {
  width: 210px;
  border-radius: 30px;
  box-shadow: -20px 20px 20px rgb(0 0 0 / 10%);
}
.appholder .appframe .downcard{
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: #fff;
  padding: 6px;
  border-radius: 6px;
}
.appholder .appframe .downcard.left{
  left: -65%;
  box-shadow: 4px 6px 20px rgb(0 0 0 / 10%);
  top: 160px;
}
.appholder .appframe .downcard.right{
  right: -65%;
  box-shadow: -4px 6px 20px rgb(0 0 0 / 10%);
  bottom: 60px;
}
.highlist{
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--textclr);
}
.highlist li{
  position: relative;
  padding-left: 25px;
  display: flex;
  align-items: center;
}
.highlist li:before{
  content: '';
  width: 18px;
  height: 18px;
  background-image: url(../img/icons/licircle.svg);
  background-size: contain;
  position: absolute;
  left: 0;
}

.apptablist{
  display: flex;
  justify-content: space-between;
  align-items: end;
}
.apptablist .tabsbtn{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 0 30px;
  position: relative;
}
.apptablist .tabsbtn:after{
  content: '';
  position: absolute;
  width: 36px;
  height: 8px;
  background-image: url(../img/icons/lineicon.svg);
  background-size: contain;
  background-repeat: no-repeat;
  top: 65%;
  z-index: -1;
}
.apptablist .tabsbtn:last-child:after { display: none; }

.apptablist .tabsbtn:after{
  right: -18px;
}
.apptablist .tabsbtn .icon{
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgb(0 0 0 / 10%);
}
.apptablist .tabsbtn .content{
  border: 1px solid rgb(0 0 0 / 10%);
  border-radius: 10px 10px 0 0;
  border-bottom: none;
  padding: 8px;
  transition: var(--trans30);
  -webkit-transition: var(--trans30);
}
.apptablist .tabsbtn:hover .content{
  border-color: var(--primary);
}

.apptablist .tabsbtn .content:after{
  right: 12px;
}
.apptablist .tabsbtn .content:before{
  left: 12px;
}
.apptablist .tabsbtn.active .content{
  background-color: #fff;
  border-color: #fff;
  box-shadow: 0 -10px 10px rgb(0 0 0 / 5%);
}

.apptablist .tabsbtn.active .head{
  color: #1968B3 !important;
}

.textgrad {
  color: var(--blue);
  background: var(--blue);
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.color-card{
    min-height: 80px;
    border: none;
}
.color-card .head{
  color: #fff;
}


@media(max-width:991px){
  .apptablist .tabsbtn{
    padding: 0 15px;
  }
  .apptablist .tabsbtn:after{
    display: none;
  }
  .apptablist .tabsbtn .content{
    padding: 8px 15px;
  }
}

@media(max-width:575px){
  .appholder .appframe .downcard.right{
    right: -60px;
    bottom: 50px;
  }
  .appholder .appframe .downcard.left{
    left: -60px;
    top: 150px;
  }
  .apptablist{
    gap: 10px;
    padding: 0 10px;
  }
  .apptablist .tabsbtn {
      padding: 0;
  }
  .apptablist .tabsbtn .content{
    padding: 8px 10px;
  }
  .apptablist .tabsbtn .head{
    line-height: 1.2;
    font-size: .9rem;
  }
  .counter .iconhead{
    flex-direction: column;
    text-align: center;
    gap: 10px !important;
  }
}

@media(max-width:380px){
  .appholder .appframe .downcard{
    right: auto !important;
    left: auto !important;
    margin: auto;
  }
  .appholder .appframe .downcard.right{
    bottom: -10px;
    margin-right: -50px;
  }
  .appholder .appframe .downcard.left{
    top: auto;
    bottom: 60px;
    margin-left: -50px;
  }
}


/* \\\\\\\\\\\\\\FOOTER////////////// */

footer{
  overflow: hidden;
  position: relative;
  padding-top: 60px;
  padding-bottom: 60px;
  font-size: var(--font15);
  color: var(--white);
  background: #00407C;
  background: linear-gradient(0deg, rgba(0, 64, 124, 1) 0%, rgba(17, 85, 150, 1) 35%, rgba(23, 92, 157, 1) 45%, rgba(24, 89, 151, 1) 60%, rgba(8, 46, 82, 1) 100%);
}

.footer::before {
    content: '';
    position: absolute;
    bottom: -100px;
    right: 0;
    width: 400px;
    height: 400px;
    max-width: 100%;
    background-image: url(../img/logo/leaf-full.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 0;
    opacity: .05;
}

footer a,
footer p{
  color: var(--white);
  font-size: .875rem;
}
footer a:hover{
  color: var(--secondary);
}
.textpri{
  color: var(--primary) !important;
}
footer .footmid{
  border-bottom: 1px solid rgb(0 0 0 / 10%);
  border-top: 1px solid rgb(0 0 0 / 10%);
  padding: 50px 0;
  margin-bottom: 40px;
}

footer .iconlist{
  display: flex;
  gap: 12px;
  align-items: center;
}
footer .iconlist .icon{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgb(242 125 54 / 20%);
  align-items: center;
}
footer .inpbox{
  display: flex;
  gap: 0;
}
footer .inpbox input{
  border: 1px solid rgb(0 0 0 / 10%);
  background-color: #fff;
  padding: 0 15px;
  border-radius: 6px 0 0 6px;
  outline: 0;
  width: 100%;
}
footer .inpbox .btn{
  margin-left: -10px;
}
footer .myform.hasicon .frmicon{
  top: 15px;
}
footer .menuhead{
  color: #fff;
  font-size: var(--font16);
}
footer .footmenu,
footer .footlink{
  display: flex;
  flex-flow: wrap;
  row-gap: 8px;
}
footer .footmenu{
  gap: 10px;
  flex-direction: column;
}
footer .footmenu a{
  display: inline-flex;
}

footer .power a:hover{
  color: var(--white);
}

.gotop{
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--font14);
  transform: rotate(-90deg);
  position: absolute;
  left: -15px;
  top: 50%;
}
.arrow-rotate{
        transform: rotate(93deg);
}

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


@media(max-width:1200px){
  footer{
    padding-top: 100px;
  }
}

@media(max-width:991px){
  footer{
    padding-top: 50px;
  }
  .gotop{
    top: auto;
    bottom: 2rem;
  }
}

@media(max-width:767px){
  footer{
    padding-top: 30px;
  }
  footer .policy {
    gap: 5px 15px;
  }
}

@media(max-width:575px){
  footer{
    margin-top: -25px;
  }
}

@media(max-width:480px){
  .xs-hide{
    display: none!important;
  }
  }



/*---------------------------------------*/
/*::::::::::::::::FORM:::::::::::::::*/
/*---------------------------------------*/
.myform .inpbox{
  flex: 1 0 auto;
  text-align: left;
  max-width: 100%;
  position: relative;
}
.myform label {
  font-size: var(--font13);
  margin-bottom: 5px;
  color: var(--textclr);
}
.myform label span{
  color: red;
}
.myform .form-check{
  display: flex;
  gap: 3px;
  align-items: start;
}
.myform .form-check input[type='checkbox']{
  margin-top: 5px;
}

.myform .textlink{
  width: 100%;
}
.myform .textlink button{
  font-weight: 600;
  border: none;
  background-color: transparent;
  outline: 0;
  padding: 0;
  color: var(--blue);
  transition: var(--trans30);
  -webkit-transition: var(--trans30);
}
.myform .textlink button:hover{
  color: var(--primary);
}
.myform input,
.myform textarea,
.myform select {
  width: 100%;
  margin-bottom: 1rem;
  padding: 8px 15px;
  border-radius: 0.3rem;
  box-shadow: none;
  border: 1px solid var(--primary20);
  background-color: transparent;
  outline: 0;
  color: var(--textclr);
  transition: var(--trans30);
  -webkit-transition: var(--trans30);
}
.myform input:focus,
.myform textarea:focus,
.myform select:focus {
  border-color: var(--primary);
}
.myform input[readonly]:focus,
.myform textarea[readonly]:focus,
.myform select[readonly]:focus {
  border-color: #ddd;
}
.myform input[type='checkbox']{
  width: auto;
  margin: 0;
}
.myform textarea{
  height: 66px;
}
.myform .btn {
  padding: 10px 25px;
  height: 50px;
  min-width: auto;
}
.myform select {
  color: var(--textclr);
}
.myform ::-webkit-input-placeholder {
  color: var(--textclr);
  opacity: 0.5;
}
/* Hide HTML5 Up and Down arrows. */
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 42px;
    opacity: 0;
    -webkit-appearance: none;
}



.myform.hasicon input,
.myform.hasicon textarea,
.myform.hasicon select {
  padding-left: 40px;
}
.myform.hasicon .frmicon{
  position: absolute;
  top: 15px;
  left: 12px;
  pointer-events: none;
  opacity: .5;
}



/* CUSTOM SELECT */
.select-dropdown {
  position: relative;
  display: inline-block;
  width: 100%;
}
.select-dropdown__button {
  width: 100%;
  margin-bottom: 1rem;
  padding: 8px 15px;
  border-radius: 0.3rem;
  box-shadow: none;
  border: 1px solid var(--primary20);
  outline: 0;
  text-align: left;
  color: var(--textclr);
  background-color: transparent;
  transition: var(--trans30);
  -webkit-transition: var(--trans30);
}
.myform.hasicon .select-dropdown__button{
  padding-left: 40px;
}
.select-dropdown__button:focus {
  outline: none;
  border-color: var(--primary);
}
.select-dropdown__button .zmdi-chevron-down {
  position: absolute;
  right: 14px;
  top: 16px;
  border: 6px solid transparent;
  border-top: 8px solid var(--primary);
  opacity: .25;
}
.select-dropdown__list {
  position: absolute;
  display: block;
  left: 0;
  right: 0;
  max-height: 300px;
  overflow: auto;
  margin: 0;
  margin-top: -17px;
  padding: 0;
  list-style-type: none;
  opacity: 0;
  border-radius: .3rem;
  border: 1px solid #eee;
  pointer-events: none;
  transform-origin: top left;
  transform: scale(1, 0);
  transition: all ease-in-out 0.3s;
  z-index: 2;
  box-shadow: -2px 6px 20px rgb(0 0 0 / 10%);
}
.select-dropdown__list.active {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1, 1);
}
.select-dropdown__list-item {
  display: block;
  list-style-type: none;
  padding: 10px 15px;
  background: #fff;
  border-top: 1px solid #eee;
  font-size: var(--font14);
  line-height: 1.4;
  cursor: pointer;
  color: #616161;
  transition: all ease-in-out 0.3s;
}
.select-dropdown__list-item:hover{
  color: var(--primary);
}





.tablerowmain{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tablerowmain .morebtn{
  font-size: var(--font14);
}
.tablerow{
  display: flex;
  flex-wrap: wrap;
  color: var(--textclr);
  background-color: #FAFAFA;
  border: 1px solid #eee;
  padding: 10px 15px;
  gap: 10px;
  position: relative;
  font-size: var(--font14);
  border-radius: 6px;
  transition: var(--trans30);
  -webkit-transition: var(--trans30);
}

.tablerow .col{
  flex: 1 0 auto;
}
.tablerow .date {
  display: flex;
  align-items: center;
  gap: 3px;
  max-width: 90px;
  font-size: var(--font12);
  border-right: 1px solid rgb(0 0 0 / 10%);
}
.tablerow .numcol{
  font-size: var(--font12);
  max-width: 150px;
}
.tablerow .subject{
  display: flex;
  align-items: center;
  flex: 1 0;
}
.tablerow .subject .new {
  position: absolute;
  top: -8px;
  margin: 0;
  left: 15px;
  height: 16px;
  line-height: 16px;
}
.tablerow .subject a{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  -webkit-box-orient: vertical;
  margin: 0;
  font-weight: 500;
}
.tablerow .subject a:hover{
  color: var(--primary);
}
.new{
  background: rgb(237,26,35);
  background: linear-gradient(120deg, rgba(237,26,35,1) 0%, rgba(252,185,19,1) 100%);
  background: linear-gradient(90deg, rgba(237,26,35,1), rgba(252,185,19,1), rgba(237,26,35,1), rgba(252,185,19,1));
  background-size: 400% 400%;
  animation: gradient 3s ease infinite;
  color: #fff;
  border-radius: 1rem;
  font-size: var(--font12);
  padding: 0 5px;
  display: inline-flex;
}
.tablerow .action{
  max-width: 200px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  column-gap: 12px;
}
.actionbtn{
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--black);
}
.actionbtn:hover{
  color: var(--primary);
}

@keyframes gradient {
  0% {
      background-position: 0% 50%;
  }
  50% {
      background-position: 100% 50%;
  }
  100% {
      background-position: 0% 50%;
  }
}