body{
    background:var(--theme-body-bg);
    color:var(--theme-text-color);
}
a{
    text-decoration:none;
    color:var(--theme-text-color);
}
div,body,p,ul,ol,h1,h2,h3,h4,h5{
    margin:0px;
    padding:0px;
}
.header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:80x;
    padding:10px 0px 0px 0px;
    background:var(--theme-body-bg);
    z-index:10;
}
.container{
    width:calc(100% - 40px);
    margin-left:auto;
    margin-right:auto;
}
ul{
    list-style:none;
}
.logo-box{
    float:left;
    width:80px;
}
.logo-box img{
    width:50px;
}
.menu-box{
    float:left;
    width:calc(100% - 80px);
}
.menu-left{
    float:left;
}
.menu-right{
    float:right;
    padding-top:20px;
}
.menu{
    list-style:none;
    font-size:14px;
}
.menu li{
    display:inline-block;
}
.menu li a{
    display:block;
    padding:10px;
    color:var(--theme-text-secondary);
}
.menu li.active a{
    color:var(--primary);
}
.logo-light{
    display:block;
}
.logo-dark{
    display:none;
}
.push{
    height:80px;
}
.left-position{
    float:left;
}
.right-position{
    float:right;
}
.remain-inline,.inline-block{
    display:inline-block;
    vertical-align: top;
}
.center{
    text-align:center;
}
.list-item{
    background:var(--theme-content-bg);
    display:inline-block;
    width:calc(25% - 16px);
    margin-right:10px;
    margin-bottom:10px;
    box-shadow: var(--default-shadow);
}
.list .list-item:nth-child(4n){
    margin-right:10px;
}
.list-item .list-image{
    background:var(--white);
}
.list-item .list-image img{
    width:100%;
}
.list-name{
  height: 40px;
  font-weight: bold;
  padding: 10px;
  line-height: 20px;
  text-align: center;
}
.list-price{
    font-weight:bold;
    font-size:20px;
    text-align:center;
    padding: 10px 10px 20px 10px;
    color: var(--primary);
}
.price{
    color: var(--primary);
}
.list-action{
    text-align:center;
    padding:10px 10px 20px 10px;
}
.list-action .btn{
    display:inline-block;
    font-size:20px;
}
.sales{
    text-decoration: line-through;
    display:inline-block;
    margin-left:20px;
    color:var(--theme-content-text-color);
}
.min-height{
    min-height:calc(100vh - 200px);
}
.table-wrapper{
	overflow-x:auto;
}
table{
	border-collapse:collapse;
	border-spacing:0
}
table.zebra{
	background:#1b1b1b;
    color:white;
}
table.zebra a{
    color:white;
}
table.zebra tr:nth-child(odd){
	background:white;
    color:#000;
}
table.zebra tr:nth-child(odd) a{
    color:#000;
}
table.zebra td{
	padding:5px;
	border:1px #ccc solid;
	vertical-align:top;
	font-size: 13px;
}
.bold{
    font-weight:bold;
}
.content-panel-left{
    float:left;
}
.content-panel-right{
    float:right;
}
.content-boxes{
	margin-top:30px;
}
.content-box{
	display:inline-block;
	width:calc(33% - 56px);
	vertical-align:top;
	margin-right:20px;
	margin-bottom:20px;
	border:2px solid var(--theme-border-color);
	border-radius:20px;
	padding:20px;
	height:250px;
}
.content-box:hover{
	border:2px solid var(--primary);
}
.content-box-icon{
	text-align:center;
	background:var(--primary);
	font-size:30px;
	margin-bottom:20px;
	width:60px;
	height:60px;
	border-radius:50%;
	margin-left:auto;
	margin-right:auto;
}
.content-box-icon i{
	color:var(--white);
	padding:15px;
}
.content-box .content-title{
	text-align:center;
	margin-bottom:10px;
	padding:10px;
	font-weight:bold;
}
.content-box .content{
	text-align:center;
	margin-bottom:10px;
	padding:10px;
    line-height:25px;
}
.content-boxes .content-box:nth-child(3n){
	margin-right:0px;
}
.theme-content{
    background:var(--theme-content-bg);
    border-radius:16px;
    box-shadow:var(--shadow);
}
.theme-content-inner{
   padding:20px; 
}
.bordered-box{
    padding:20px;
    margin-bottom:20px;
    background:var(--theme-content-bg);
    border-radius:20px;
}
.bordered-box h4{
    color:var(--primary);
    margin-bottom:20px;
}
gmp-map {
   height:400px;
}
.cart{
    position:relative;
}
.cart-item{
  position:absolute;
  right: -10px;
  top: -15px;
  background: var(--primary);
  border-radius: 50%;
  height: 20px;
  width: 20px;
  text-align: center;
  line-height: 20px;
  font-size: 13px;
  padding: 2px;
  color:var(--white);
}
.clear{
    clear:both;
}
.clients{
    padding:50px 20px 50px 20px;
}
.fancy-heading{
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background: linear-gradient(180deg,#ffffff 0%,#d8d0ff 42%,#7c67e8 100%);
    background-clip: border-box;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(50px,3.95vw,60px);
  margin-bottom:20px;
}
.institution-list{
    margin-top:20px;
}
.institution-list li{
    margin-bottom:10px;
}
ul.bullet{
    margin-left:20px;
}
ul.bullet li {
  position: relative;
  margin-bottom: 10px;
}

ul.bullet li::before {
  content: "❯"; /* You can swap this out for any character like ✓ or ⁃ */
  position: absolute;
  left: -20px;
  color: var(--primary); /* Custom color for your brand */
  font-size: 0.8rem;
}
.scroll-container {
  height: 600px; /* Adjust height to your liking */
  overflow: hidden;
  position: relative;
}

.scroll-track {
  display: flex;
  flex-direction: column;
  /* Adjust time (20s) to change speed. 'linear' keeps it moving smoothly. */
  animation: scrollVertical 20s linear infinite;
}

.scroll-track img {
  width: 100%;
  height: auto;
  margin-bottom:20px;
}

/* The loop moves up by 50% because the HTML has identical duplicate images */
@keyframes scrollVertical {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

/* Optional: Pause the scrolling when a user hovers over an image */
.scroll-container:hover .scroll-track {
  animation-play-state: paused;
}
.pull-right{
    float:right ! important;
}
.footer{
    margin-top:50px;
    padding:50px 0px 50px 0px;
    border-top:1px solid var(--theme-border-color);
}
.footer-divider{
    float:left;
    width:20%;
}
.footer-divider h4{
    color:var(--primary);
}
.footer-list{
    margin-top:30px;
}
.footer-list li a{
    display:block;
    padding:5px 0px 5px 0px;
}
.footer-list li.active a{
    color:var(--primary);
}
.bottom-footer{
    margin-top:50px;
}
.left-footer-menu{
    float:left;
}
.right-footer-menu{
    float:right;
}
.social-media-box{
    float:left;
    margin-right:20px;
}
.social-media-box ul li{
    display:inline-block;
}
.social-media-box ul li:hover{
    background:var(--slate-3);
    padding:2px;
    border-radius:50%;
}
.social-media-box ul li a{
    display:block;
    padding:5px;
    font-size: 20px;
}
.theme-box{
    float:right;
    position:relative;
}
.active-theme{
    border:1px solid var(--theme-border-color);
    border-radius:20px;
    padding: 5px 10px 4px 10px;
    width: 90px;
    cursor:pointer;
}
.active-theme i{
    margin-right:10px;
}
.active-theme span{
    float:right;
}
.active-theme span i{
    margin-right:0px;
}
.theme-option-box{
  position: absolute;
  bottom: 40px;
  border: 1px solid var(--theme-border-color);
  border-radius: 10px;
  left: 0;
  right: 0;
  background:var(--theme-body-bg);
  display:none;
}
.theme-option-box ul li:first-child.active{
    border-radius:10px 10px 0px 0px;
}
.theme-option-box ul li:last-child.active{
    border-radius:0px 0px 10px 10px;
}
.theme-option-box ul li a{
    display:block;
    padding:10px;
    cursor:pointer;
}
.theme-option-box ul li a i{
    margin-right:10px;
}
.theme-option-box ul li a span{
    float:right;
    display:none;
}
.theme-option-box ul li.active{
    background:var(--slate-3);
}
.theme-option-box ul li.active a span{
    display:inline-block;
}
.theme-option-box ul li a span i{
    margin-right:0px;
}
.social-icons {
  position: fixed;
  right: 5px;
  top: 70px;
  color: #FFFFFF;
  z-index: 40;
  font-size: 15px;
  line-height: 25px;
}
.social-icons .box.fb {
  background: #4267b2;
}
.social-icons .box.fb a{
  display: block;
  color:var(--white);
}
.social-icons .box.instagram {
  background: #f09433; /* Fallback for old browsers */
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
.social-icons .box.instagram a{
  display: block;
  color: white;
}
.social-icons .box.tiktok {
  background:var(--tiktok-theme-bg);
}
.social-icons .box.tiktok a{
  display: block;
  color: white;
}
.social-icons .box.youtube{
  background: #FF0000;
}
.social-icons .box.youtube a{
  display: block;
  color:var(--white);
}
.social-icons .box.x{
  background: var(--x-theme-bg);
} 
.social-icons .box.x a{
  display: block;
  color:var(--white);
}
.social-icons .box.whatsapp{
  background: #25D366;
} 
.whatsapp-color{
    color:#25D366;
}
.social-icons .box.whatsapp a{
  display: block;
  color:var(--white);
}
.social-icons .box.call {
  background: var(--primary);
}
.social-icons .box.call a{
  display: block;
  font-size: 12;
  color:var(--white);
}
.social-icons .box {
  width: 20px;
  text-align: center;
  padding: 5px;
  margin-bottom: 5px;
  height: 20px;
  border-radius: 50%;
}
.theme-content-box{
    background:var(--slate-3);
    padding:20px;
    border-radius:20px;
    line-height: 30px;
}
.theme-content-box img{
    border-radius:20px;
}
.theme-content-box h4{
    color:var(--theme-heading-color);
}
.theme-content-box ol{
    margin-left:15px;
    margin-top:20px;
}
ol li::marker {
  color: var(--primary);             /* Changes the number color */
  font-weight: bold;          /* Makes the numbers stand out */
}
/* Control the space between the number and the text */
ol li {
  padding-left: 12px;         /* Adds custom spacing between number and text */
}
.professional-website{
    margin-top:50px;
}
h4.large{
    line-height: 50px;
    font-size:35px;
    color:var(--theme-heading-color);
}
.center{
    text-align:center;
}
.content-box-heading{
    margin-top:50px;
    margin-bottom:20px;
}
input[type="text"],input[type="password"],input[type="number"],input[type="email"],input[type="phone"],TextArea,select{
  width: 100%;
  padding: 8px 10px 8px 10px;
  border: 1px solid var(--theme-border-color);
  border-radius: 5px;
  color: var(--theme-text-primary);
  background: var(--theme-bg-primary);
  margin-top:10px;
}
TextArea{
    resize: none;
}
option {
  background: var(--theme-bg-primary);
}
::picker(select) {
   background: var(--theme-bg-primary);
}
input[type="file"]{
    margin-top:10px;
}
input[type="submit"],.btn,.button{
  background-color: var(--primary);
  color: white;
  padding: 5px 20px 5px 20px;
  border: 1px solid var(--primary);
  border-radius: 20px;
  cursor: pointer;
  font-weight: 700;
  font-family: inherit;
  font-size: 12px;
  display:block;
}
.btn.bordered{
    background-color: white;
    border: 1px solid var(--primary);
    color: var(--primary);
    padding: 7px 20px 7px 20px;
}
.delete-btn{
    background:red !important;
    border: 1px solid red !important;
}
#animation,#dialog_animation{
    display:none
}
#dialog{
	position: fixed;
	z-index: 1000000000000000000000000000000015;
	content:'';
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	display:none;
}
#dialog-content{
    margin-left:auto;
    margin-right:auto;
    margin-top:80px;
    background:var(--theme-content-bg);
    box-shadow: 0 3px 5px rgba(0,0,0,.2);
    border-radius:15px;
}
.dialog-header{
    border-bottom:1px solid var(--theme-border-color);
    padding:15px;
    color:var(--theme-text-color);
    font-weight:bold;
}
.dialog-content{
    max-height:400px;
    min-height:100px;
    overflow-y: auto;
    padding:20px;
    line-height:22px;
}
.search-container{
    position:relative;
}
.dialog-footer{
    border-top:1px solid var(--theme-border-color);
    padding:15px;
}
.spinner{
  height: 10px;
  width: 10px;
  animation: rotate 0.8s infinite linear;
  border: 8px solid var(--primary);
  border-right-color: transparent;
  border-radius: 50%;
  margin-left:auto;
  margin-right:auto;
}
@keyframes rotate {
  0%    { transform: rotate(0deg); }
  100%  { transform: rotate(360deg); }
}
.ajax-form-spinner {
  height: 10px;
  width: 10px;
  animation: rotate 0.8s infinite linear;
  border: 8px solid var(--primary);
  border-right-color: transparent;
  border-radius: 50%;
  margin-left:auto;
  margin-right:auto;
}
@keyframes rotate {
  0%    { transform: rotate(0deg); }
  100%  { transform: rotate(360deg); }
}
.information p, .success p, .warning p,.validation p,.error p{
	padding-bottom: 3px;
}
.information {
	color: #00529B;
    border-left:5px solid #00529B;
	background-color: white;
	background-image: url('../images/info.png');
}
.success {
	color: #4F8A10;
	background: white;
    border-left:5px solid #4F8A10;
	background-image:url('../images/success.png');
}
.warning {
	color: #9F6000;
    border-left:5px solid #9F6000;
	background-color: white;
	background-image: url('../images/warning.png');
}
.error,.success,.warning,.information {
	margin: 10px 0px;
	padding: 10px 10px 10px 45px;
	background-repeat: no-repeat;
	background-position: 10px center;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}
.error {
	color: #D8000C;
	background-color: white;
    border-left:5px solid #D8000C;
	background-image: url('../images/error.png');
}
.cursor{
	cursor:pointer;
}
#feedback{
	position: fixed;
	bottom: -10px;
	right: 0;
	z-index: 1000000000000000000000000000000016;
}
.error .cursor,.success .cursor{
	margin-left:10px;
}
html.dark-theme {
    --theme-text-secondary:#b0b4ba;
    --theme-body-bg:#000000;
    --theme-text-color:var(--theme-text-secondary);
    --theme-border-color:#363a3f;
    --theme-content-bg:#1f1f22;
    --slate-1: #111113;
    --slate-2: #18191b;
    --slate-3: #212225;
    --slate-4: #272a2d;
    --slate-5: #2e3135;
    --slate-6: #363a3f;
    --slate-7: #43484e;
    --slate-8: #5a6169;
    --slate-9: #696e77;
    --slate-10: #777b84;
    --slate-11: #b0b4ba;
    --slate-12: #edeef0;
    --x-theme-bg:#15202B;
    --tiktok-theme-bg:#15202B;
    --theme-heading-color:var(--white);
    --theme-content-text-color:var(--white);
    b{
        color:var(--white);
    }
}
:root,html.light-theme{
    --theme-text-secondary:#60646C;
    --theme-body-bg:#ffffff;
    --theme-text-color:#1c2024;
    --primary:#27A8E0;
    --theme-border-color:#d9d9e0;
    --theme-content-bg:#f7f7f9;
    --theme-content-text-color:#000000;
    --default-shadow: 0rem 0.25rem 0.5625rem 0rem rgba(0,0,0,0.15);
    --slate-1: #fcfcfd;
    --slate-2: #f9f9fb;
    --slate-3: #f0f0f3;
    --slate-4: #e8e8ec;
    --slate-5: #e0e1e6;
    --slate-6: #d9d9e0;
    --slate-7: #cdced6;
    --slate-8: #b9bbc6;
    --slate-9: #8b8d98;
    --slate-10: #80838d;
    --slate-11: #60646c;
    --slate-12: #1c2024;
    --white:#ffffff;
    --x-theme-bg:#000000;
    --tiktok-theme-bg:#000000;
    --theme-heading-color:var(--black);
    --black:#000000;
}